Challenge Summary
Welcome to Karaoke Mobile Application Design Challenge! In this challenge, we are looking for [topcoder] community to help create set of interfaces for our new application. We are providing wireframes to help get you going.
We want a true cutting-edge experience for users of the high-end products in the Wolke brand!
Round 1
For your R1 deliverables please submit the following screens:
1. Loading/Welcome
2. Main App Screen
3. Recent/Favorite Songs
4. Buffering Screen & Karaoke Play Screen
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Final Design plus any Checkpoint feedback
1. Loading/Welcome
2. Main App Screen
3. Recent/Favorite Songs
4. Buffering Screen & Karaoke Play Screen
5. Play Back Screen
6. Search Screen
7. Settings Screen
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
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.
Style Theme:
- The client is looking for super-slick, modern, high-end designs and included his notes and ideas about that here. (Elements-Building Great Apps.pptx)
- Think along the lines of Shazam, Soundcloud esthetic, but don't be limited by that.
Supporting Documents:
- Click thru wireframe (Wireframe.zip)
- Client examples and notes (Elements-Building Great Apps.pptx)
Design 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
- REMEMBER: DO NOT COPY the wireframes exactly - The wireframes are meant to help guide you and let you understand the application the audience would like to see designed. Think about the user experience/user interactions and show us your solutions! You can do something different or whatever you think make sense of this mobile application.
- Review the wireframes - they are very detailed and will help, but do not copy 100% the layout, be creative!
Screen Size:
- Standard mobile app sizing in the portrait orientation (320px X 480px)
Required Screens:
We have provided a click thru wireframe for you to use for this challenge in addition to the branding guideline document. Please do not copy the wireframes exactly.
1. Loading/Welcome
loading___welcome_screen.html
- Please design a placeholder logo for the client here.
- Show a progress bar for loading.
2. Main App Screen
main_app_screen.html
- Here we will have 4 dashboard icons/buttons:
-- Recent Songs
-- Favorite Songs
-- Search Songs
-- Settings
3. Recent/Favorite Songs
recent_songs.html & fav_songs.html
- Here we will see albums tiles to select from.
- Notice the button options at the bottom of the screen:
-- Recent
-- Favorites
-- Search
-- Settings
4. Buffering Screen & Karaoke Play Screen
karaoke_play_screen.html
- A branded app screen to show the song is loading
- 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, Play Back and Volume Control.
5. Play Back Screen
playback.html
- Same as Karaoke Play Screen but you will notice 2 new things at the top:
-- Accuracy percentage widget.
-- Share score on Facebook and Twitter widget.
6. Search Screen
search_songs.html
- Search Field (Placeholder text “Artist, Song…”)
- Sources List: Local File, DLNA, Spotify, Google Music
- Results List (search_results.html), same as Recent/Favorite screen but the only difference is this text “Showing results for "Artist Name”” at the top.
7. Settings Screen
settings.html
- Active sources:
-- Local File
-- DLNA
-- Spotify
-- Google Music
-- You will be able to add new active source when you click on “Add New” button:
--- Dropdown of the new source to add
--- Username field
--- Password field
--- Add 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
- Performance settings
-- Record Performance
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
- The provided document Elements-Building Great Apps.pptx should be carefully considered when designing this app - we want something that people will remember and want to use.
- This will be the basis for a brand-wide approach to an application suite, so bring your best designs forward!
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:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should possible to build and make sense as a mobile application
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 and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
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.
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.