Challenge Summary
Welcome to Karaoke Mobile Application Wireframe Challenge. In this challenge, we are looking for wireframe (Axure) solutions based on requirements from our client. We’re also looking to the community to come up with interesting ideas for the workflow - we’re absolutely open to creative solutions!
The goal of this challenge is to create an engaging mobile design wireframe that can be skinned and ultimately made into a functional app. Simplicity of design for a better user experience is the ultimate goal.
Round 1
Submit your initial wireframes for Checkpoint feedback
1. Loading/Welcome
2. Main App Screen
3. Song Selection Screen
4. Buffering Screen
Notes.jpg: Any comments about your design for the Client
Round 2
Your Final wireframes for all the required pages with all checkpoint feedback implemented.
1. Loading/Welcome
2. Main App Screen
3. Song Selection Screen
4. Buffering Screen
5. Karaoke Play Screen
6. Settings Screen
Notes.jpg: Any comments about your design for the Client
Challenge Description:
[topcoder] has a client who would like to build a mobile karaoke app. This app should allow a user to pick a song from a chosen source, process the audio dropping out the main vocals, display lyrics on the phone so the user can sing into the mic, and push the mixed audio output to whatever external speaker the user is connected to.
The winner will not necessarily be chosen based on the best graphic design, but on who can give us the best ideas for a more effective layout or wireframe of this page. There are no hard-and-fast content requirements and that is intentional: wowing the client is the goal!
Screen Size:
- Standard mobile app sizing in the portrait orientation (320px X 480px)
Style Theme:
- A flat modern feel akin to the newer Apple OS style is the aim, but that's open to interpretation.
- The client is looking for what the community can provide, so there are no real restrictions on styles, fonts, and colors.
- Think along the lines of Shazam, Soundcloud esthetic, but don't be limited by that.
Important Wireframe Considerations:
- This is meant for a cross-platform mobile experience. Target portrait cellphone size, but keep both iPad width and landscape layout in mind as a down-the-road possibility
- For mobile platform, assume the current OS for both iOS and Android
Wireframe Expectations:
- Produce HTML click through wireframes that can be used to demonstrate all mentioned functionalities as required in each round.
- The website must be very easy to use and intuitive. Keep that in mind when designing your solution.
- You MUST cover all use cases mentioned in challenge details below.
- You MUST use wireframes note pane in every single page you design to explain what items are addressed in that page from the documentation, what things you added/changed/removed, use it to make your idea clearer and help the client to give you constructive feedback.
Suggested Screens:
We are looking to the community to come up with interesting ideas for the workflow - we’re absolutely open to creative solutions! Here are some of the items that we think should be included:
1. Loading/Welcome
- What do you think we should represent here?
- In demo: click anywhere to go to Main App Screen
2. Main App Screen
- Song/File Selection (Takes you to Song Selection Screen)
- Start/Go Button (Takes you to Buffering Screen)
- Settings button (Takes you to Settings Screen)
3. Song Selection Screen
- Sources List: Local File, DLNA, Spotify, Google Music
- Search Field (Placeholder text “Artist, Song…”)
- Results List (clicking a result takes you back to Main App Screen)
4. Buffering Screen
- A branded app screen to show the song is loading (in demo: click to go to Karaoke Play Screen)
5. Karaoke Play Screen
- Widget areas on this screen:
-- Lyrics block - Where the user will see the lyrics in sync with the song
-- Song progress bar
-- Song controls: Pause, Start Over (Takes you to Main App Screen)
6. Settings Screen
- Active sources/accounts - This page will show the current list of active sources with a button to add additional.
-- Add screen will have (this can either be inline/window shade, a mobile-friendly modal, or a new screen):
--- Dropdown of the new source to add
--- Username field
--- Password field
--- Go Button
- Speaker settings
-- Select valid destinations (checkbox list)
--- Local Speaker
--- Bluetooth
--- Other
- Microphone test/settings
-- Select Mic Source (dropdown)
-- VU Meter / Bar to see the current input volume
-- Volume slider to set the gain of the input volume
Target Audience:
The expected users of this system are mid-twenties, technology loving people who enjoy higher quality equipment and appreciate slick design.
Judging Criteria:
Your submission will be judged on the following criteria:
- User experience
- Completeness and accuracy of the areas of functionality and content
- How well your wireframes provide a consistent user flow and clear information architecture for the application
- Interpretation of the structure into a clear information architecture
Submission & Source Files:
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Generated HTML files with all the requested contest requirements stated above.
Source Files
Wireframes should be built in Axure. The resulting files should have generated HTML files. Also, all the content must be listed and the pages are linked together to show page flow.
Final Fixes
As part of the Final Fix phase, you may be asked to remove, update, or change some features of the wireframe.
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.