Pictone - Responsive Website Design Challenge

Key Information


The challenge is finished.
Show Deadlines

Challenge Summary

Welcome to Pictone - Responsive Website Design Challenge.

We need your help to redesign the experience around a social voice recording service. Users from pictone.net can create, edit and play voices over a play guided through a script that allows them to customize the experience through different tools offered. It’s an opportunity for innovation and applying best UX practices to ease out the capabilities this service has to offer.

Best of luck.

Round 1

Submit your design for a checkpoint feedback.

1. Home (Desktop)
2. Scripts List (Desktop)
4. Script View (Desktop and Phone)
5. Playback (Phone)
6. Recording (Phone)

- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Submit your final design plus checkpoint feedback.

1. Home (Desktop)
2. Scripts List (Desktop)
3. Script Details (Desktop and Phone)
4. Script View (Desktop and Phone)
5. Playback (Desktop and Phone)
6. Recording (Desktop and Phone)
7. Voice Editing (Desktop)

- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).

Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.

Full Description & Project Guide

The goal of this challenge is to redesign the look and feel of a responsive website (mobile and desktop) that will be used to help users recording, listening and playing voices from vivid scripts, as well as building a community around it.

Our Service in a Nutshell
- A person who wishes to voice actors, people who want to play with voice, people who want to listen to several voices.
- With that service, you can listen to your own voice for various stories, and enjoy it by combining the voices recorded by others.

The occupation activity place called voice actor is now spreading to the world. We would like to design global standards because it will be a service extending not only to Japan but also to the world in the future.

Also, recently similar services have come out, so we would like to design it differentiated from similar services. In the future, we would like to develop services that are such as not text-based scripts but adding contents such as Japanese manga & anime. And we also would like users to be able to develop scripts freely.

On the other hand:
- Aspirants who are voice actors are increasing, but the places where voice actors are active are limited.
- Even though they think that they want many people to hear their own voices, they can not easily hear their own voices.
- Even if they want to practice to raise the skill of the voice actor, the place to practice also is limited, so you can not easily practice the voice easily in a short time.
- It takes time and effort to find characters (gender, attributes, etc.) and contents (manga and novel etc) that they are seeking.

In order to solve these problems, we are going to provide such services.

Service Features
In this service, the user can read, record, listen and share various scripts.

Examples of scripts are plays, dramas, and so on. In the future, Japanese manga & anime!

Original scripts with different situations are prepared. From practical situations to unique ones are prepared, so you can read scripts while enjoying their atmosphere.
- People who want to listen to the voice, those who want to read the script, search the script where the voice actor that you want to listen or script you want to read.
· Select a script and select the voice you want to hear for each appearing character.
- Customize the volume of each character as you like.
- Listen to the script with your own selected voice and enjoy. You can customize your work to your liking.

You can breathe your voice to each character in the script. Choose your favorite character, you can experience recording voices according to the script.
- A person who wants to record a voice searches for a script where the script that you want to perform or the character you want to play appears.
- Select a script and select the character you want to play.
- Record the dialogue of each character one by one, and register voices to all the lines. If you do not like it, re-record and delete the registered voice.
- Listen to the sound you recorded and practice it yourself.
- It is possible to record easily in a short time, and it can be used at any time.

The atmosphere of the work changes by the person who plays the voice even with the same character. In addition to the sound being posted, you can also combine Pictone original sample voices, so you can freely make your own work and enjoy it freely.
- Play the work by selecting the voice recorded by a friend or other person and the voice recorded by yourself. Or select a friend's voice as a partner role during recording.
- You can listen to works by combining the voice of a friend who does not agree or time and your voice.

You can share the recorded sound. By sharing you can spread your voice to many people.
- Record voice and register.
- Other people listen to the sound that you recorded.

Concept Design Goals
The customer is going to solve these issues by creating the database to collect and consolidate the case studies information and building a software system on it, which provides features to enable users to find useful information in the case studies.

The most important features this design must provide:
- It is easy to search for characters and scripts you want to perform.
- It is possible to listen to various kinds of voices combined.
- You can easily record your own voice, share it and publish it.
- You can concentrate on the purpose of operations such as recording and playback.
- And, at a glance, to understand the contents and actions of these services.
 (The target user can intuitively understand the operation she wants to do)

Design Considerations:
- It must be easy to understand how to operate, especially recording and editing activities.
- Consider screen transitions that allow to fulfill operations with the fewest amount of steps
- Feedback on operational actions. Example: Designing while recording and playing.
- Focus on recording and playback operations. Example: Readability of serifs during recording.
- Custom icons that suit the proposed design. Versatile design with meaning sense. Not too simple. Not metaphoric.
- Consider mobile-first design. Operating in mobile is very important.

Some Keywords looking into the design:
- Easy-to-use
- Friendly
- Motivating
- Excited
- Warmth

Keywords that should NOT be seen in the design:
- Rude
- Too Aggressive
- Discriminatory
- Provocative
- Disrespectful
- Old & Classical
- Cheap
- Luxury
- Closed

You must know that we have an existing version of these features; however, there are many sensitive issues we need to address in this new exploration:
- In addition to reading the script, you can record voice, edit it, and select a voice for the character, making the UI difficult to understand.
- The design does not feel new.
- There are problems such as hard to understand the recording UI. We would also like to consider designs that can be used by people who are not used in scripts.
- Although it is thought that there are many uses for mobile, the screen is narrow on the mobile, and the amount of information is limited. We can not show the necessary information to the user to the utmost in that.

Supporting Documents
- Design Moodboard: link.
- Data definition: link.
- Script samples: link.

Screens Requirements
- All UI language must be written in English, horizontally.
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc. 
- Our suggested flow to showcase your design: Top (recommendations, new script arrivals, news etc.) → script list → creation details → script display → script display (playback, recording). See user flow.
- Propose a navigation system that makes sense and considers all the required features.

1. Home (Desktop)
This is the landing page for the service. It must be eye-catchy while showcasing the overall features. This screen displays new arrival and recommended scripts, notifications and so on.

- Design a global menu for transitioning to each screen.
- It should be visual, with icons, could be drawer, tabs, etc.

The page should lay out the following information:

- Navigation
- Carousel

- About Pictone 
- How Pictone Works (infographic, icons, etc)
- News (Event information, etc)

- Script List (by category below)
-- New arrivals
-- Featured
-- Popular
-- Recommended Script
-- Recommended Voice actor
-- Trending genre
-- Trending tag

- Open to suggestions for more content as long as it’s simple and focused on the benefits of Pictone.

- Consider displaying a large banner (carousel) on the top.
- Easy to understand the transition to each screen or function (playback, recording, etc.).

2. Scripts List (Desktop)
This page showcases all the available scripts on the site.

The user can search(filter) by 
- By keyword (s).
- Tag (s).
- New arrivals.
- Ranking.
- Genre.
- Characteristics of character (see data spreadsheet):
-- Gender.
-- Age group.
-- Attribute.

See data sample file for more reference.

Features (showcase them all)
- Script information should be easy to understand (title, introduction, thumbnail).
- The screen is easy to see even if there are a large number of titles.
- Consider utilizing filters and search patterns.

3. Script Details (Desktop and Phone)
This page displays the details view of the script.

Features (showcase them all)
- The script information is displayed in an easy-to-understand manner.
- It is easy to understand the number of voices recorded for each character.
- Each script:
-- Script title 
-- Image (thumbnail)
-- Author
-- Introduction
-- Genre 
-- Tag 
-- Rank 
-- Registered Date
- Characters in a script:
-- Character name
-- Gender 
-- Age group 
-- Attribute
-- Number of Voices

4. Script View (Desktop and Phone)
Display the selected script in script format.

Script Composition
- Script title 
- Scene
-- Character / Line
- Acting Points

Features (showcase them all)
- Scripts should be easy to read.
- It is possible to read on one screen only by scrolling (no page transition).
- Easy to understand operations such as character selection, playback, recording.
- The current position/lead of the script is easy to understand.
- It is easy to understand whether it is a playback screen or a recording screen.
- For the lines of the script, please also refer to each script in the following sample scripts and use in your design https://docs.google.com/spreadsheets/d/1DYfhtOHm1ZDQZ5hBo8z8pDzCf9suulJLZK4ONsH553Y/edit?usp=sharing 

After party task
The winner of this challenge will need to prepare one demo screen for script view in vertical layout text (Japanese style). Just for your consideration.

5. Playback (Desktop and Phone)
This page manages all the interactions with the playable sounds and script.

Features (showcase them all)
- The user can select the voice to read the script. It is possible to play back sample voices and check them.
- It is possible to play through one script all or play it line by line.
- On the selection screen, playback of the sample voice (several seconds in the first half) is possible.
- Full reproduction of script, individual line playback operation.
- Pause, jump to previous and next line.
- Character selection is easy.
- Volume can be adjusted for all characters or individual characters.
- Voice selection and volume adjustment layout.

Note! Do not design just one screen, we expect to see all the interactions mentioned above.

6. Recording (Desktop and Phone)
This page allows the user selecting the character to record. Select the line to record and record the voice. A line of characters not to be recorded is played on the application side.

Features (showcase them all)
- Character information to be recorded is easy to understand.
- It is easy to distinguish lines to be recorded / excluded.
- Before and after recording, lines to be recorded can also check Lines before and after.
- During recording, the target lines must be displayed so that it is easy to read.
- Display the volume during recording clearly (with "volume indicator").

Volume Indicator
Visually display the volume at the time of recording. (To check if you maintain a certain level of volume).
- It should be easy to confirm that the recording volume is normal.
- It should be easy to adjust the volume.

Note! Do not design just one screen, we expect to see all the interactions mentioned above.

7. Voice Editing (Desktop)
The user can edit the recorded voice.

Features (showcase them all)
- Delete the silent part before and after the voice, middle part and change the volume.
- Easy trimming and volume adjustment (intuitively understood).

Record content check/review
Confirm the recorded voice and save it. It should be easy to operate recording confirmation, editing, re-recording.

Note! Do not design just one screen, we expect to see all the interactions mentioned above.

DO NOT COPY ANYTHING, use for inspiration only.
A landing page we like: https://www.wattpad.com/home 
A good listing page: https://www.wattpad.com/stories/action 

Branding Guidelines
- Fonts and colors open to suggestions as long as they are inline with the design goals.
- We already have a logo but we feel it can be better. We are open to suggestions for logo concepts that are inline with the design and colors you decide to propose.
- We provide a moodboard for simple start for colors and mood inspiration.
- Keep things consistent. This means all graphic styles should work together.

Screen Specifications
- Desktop: 1366px width. Height as much as needed.
- Mobile: 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.

MarvelApp Presentation
- Request a MarvelApp prototype from me using this link: https://tc-marvel-app.herokuapp.com/challenge/30086115 
- Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload. See example.

Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
- You don’t want to fail screening? Read this.

Target User
Main User
Voice actor aspirant (voice actor vocational school student, a person aiming for a voice actor even after graduating from a vocational school).

Other Users
- People who want to record their own voices but not aspirants.
- People who are interested in voice actors and want to hear several voices.
- People who want to enjoy content with their favorite voice.

Misaki Nishizawa (main user)
Age: 20 years old
Gender: female.
Occupation: part-time worker.
Education: Graduation from a voice actor vocational school.
Family composition: Mother, father, older brother, younger sister, five family, now living in Tokyo with a woman who is a voice actor.

In order to earn living expenses, she is working part time in early morning and late at night, with high hourly wage.She promised her parents that if she can not become a voice actor by the age of 26, she give up voice actor and take another job.

She uses "karaoke box" with friends for recording sample voices, but I think that it would be better if you have an place where you can practice with friends more easily.

She and her friends know the evaluation of each other's voice, but they want to know the evaluation by another.

At the event abbreviated Comiket, her friend sells the CD of the script of the drama that she recorded herself. She is in charge of voice actors there for no charge. People who got that CD have a few fans of her, but she himself does not know.

Inoue Kentarou (other users)
Age: 25 years old
Gender: male
Category: Employee (sales employee of information company).
Education: Science Bachelor's degree.
Family organization: Mother, father, younger brother, 4 family, now living alone in Tokyo.

Since he was a student, he is very interested in animation, manga and games. Therefore, he is not very interested in clothes and food, and he spends money on animation and manga.

He is also familiar with the voice actor, and has a favorite voice actor. When he is watching anime, when the image of the character and the voice actor are different, he stops watching on the way. In order to enjoy animation, he thinks that it is important that the image of the character and voice actor match his preference.

Recently, rather than reading books, he listens to audiobooks frequently with a smartphone application.

Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- Are mobile-first principles properly applied to your solution?
- How well you implement the challenge requirements. Note you would need to implement all required functionalities and items as written in the spec.
- Cleanliness of your graphics and design.

Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
Submit JPG/PNG for your submission files.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, XD or Sketch. Layers should be named and well organized.

Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

Reliability Rating and Bonus

For challenges that have a reliability bonus, the bonus depends on the reliability rating at the moment of registration for that project. A participant with no previous projects is considered to have no reliability rating, and therefore gets no bonus. Reliability bonus does not apply to Digital Run winnings. Since reliability rating is based on the past 15 projects, it can only have 15 discrete values.
Read more.


Topcoder Open 2019


Screening Scorecard


Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.


All submissions are screened for eligibility before the challenge holder picks winners. Don " t let your hard work go to waste. Learn more about how to  pass screening.

Questions? ‌Ask in the Challenge Discussion Forums.


  • Layered PSD files created in Adobe Photoshop or similar
  • Sketch
  • Adobe XD

You must include all source files with your submission.


5 submissions