Challenge Summary
Welcome to "REPO - Media Library Mobile Design Challenge". In this challenge, we are looking for [topcoder] community to help create the look and feel for our new mobile application. We are providing wireframes to help get you going. Help us to create the new mobile version of our media library application. Join now!!
Busy weekend - let us know what questions you have!
Round 1
Checkpoint Review screens - we would like to provide feedback on these screens if possible (submit what you can)
01. Splash screen
02. Login Screen
03. Dashboard screen
04. Menu Screen
05. Profile Screens
06. Filter and Search Screen
07. Media Item details Screen
Any additional screens that you think can strengthen your design for client review.
Round 2
Final designs plus any Checkpoint Feedback updates
01. Splash screen
02. Login Screen
03. Dashboard screen
04. Menu Screen
05. Profile Screens
06. Filter and Search Screen
07. Media Item details Screen
08. Media Series Screen
09. Add New Media and Series
10. Favourite Library
11. Setting Screen
12. Help Screen
13. Tag Additional Screen
Challenge Details
We currently have a web-based "Media Library" application and we are looking to design a version that works for mobile devices and mobile screen sizes. We are looking for you to review the provided wireframes, branding and design our new mobile experience! Read the details below for the screen we are looking to get designed in this challenge.
Review the wireframes - they are very detailed and will help!
Design Consideration
- Design the mobile experience for an HTML5 mobile application
- iPhone 5 Portrait orientation (640 x 1136 resolution 326 ppi)
Screen Requirements :
01. Splash screen
No wireframes reference.
- This page design needs to be clean and interesting
- Simple logo? Big text headline? Any concept that will help with branding the application.
- By default, this screen will appear first when the application being launched.
02. Login Screen
Wireframe reference page 3 (left one)
- Login will be using IBM intranet credentials (for now)
- Standard login features (username/password/login button/remember me).
03. Dashboard screen
Wireframe reference page 3 (middle and right) and page 4 (left and middle)
- There will be 4 sub tab in this screen (Featured/suggested/popular/downloads)
- Need to design for search
- Featured tab - will show list of features item like videos, documents, music, etc.
- Suggested tab - will show list of item like videos, music, etc with rating and information available for user suggestion.
- Popular tab - item and information will have the same content like suggested tab, but the list will only show popular items.
- Download tab - all files the user has downloaded sorted by most recent
- Provide us design for features and download tabs only! (suggested and popular will use layout from download)
04. Menu Screen
Wireframe reference page 4 (right)
- Menu will appear when user touch menu icons in the application.
- Brief user information needed in the design
- All menus item with great icons needed in the menu design.
- Menus item needed : search files, add media/files, browser media/files, streaming, download section, tag cloud, Favourites, forum, settings.
05. Profile Screens
Wireframe references page 6 (left, middle and right)
- There will be 3 sub tabs in profile screens : media, series and comments.
- Please create these 3 tabs in your design.
06. Filter and Search Screen
Wireframe references page 5 (left, middle and right)
- Sort by : Relevance, Date, Views, Rating.
- Filter by: Date (e.g. today, within a week, within a month, etc.), File types.
- Provide us the search result design.
07. Media Item details Screen
Wireframe references page 9 (left, middle and right)
- User will open this screen when they want to view details of item/files in media library.
- Information/design needed in media item details screen : Title, Media Item, Your rating, General rating, Number of ratings, Top tags, Series name and picture (if in a series), Uploader, Basic description of media item, File size, File type, List of any additional files, Share media item button, Download button, View count, Added date, Updated date, Comments, Name of commenters, Date and time of comment, Button for making your own comment
- Provide design for the following media item : files (word, pdf), audio and video.
08. Media Series Screen
Wireframe references page 7 (right)
- Information/design needed in media item details screen : Creator, Favorite option, Subscribe option, Created date, list of media items within series, avg media rating, description, updated, open/not
09. Add New Media and Series
Wireframe references page 7 (left and middle)
- Creation / upload files to media library.
- Follow wireframes for any elements needed. feel free to revise the layout concept.
- Media elements : title, series, image, description, tags
- Series elements : series title, an image, to choose open or not, a summary, and a description
10. Favourite Library
No wireframe references
- Built from favorited material (can remove favorites from page)
- Favorite series, person, tags
- Yes or no to adjusting recommendations based on list
11. Setting Screen
No wireframe references
- Enable email notifications daily of new media that pertains to their favorites (containing summaries)
- To connections!
12. Help Screen
No wireframe references
- Common FAQ design
13. Tag Additional Screen
Wireframe references page 10 (middle and right)
- Create add tags and search tags screens.
Branding Guidelines
- Follow branding_guidelines.zip as general guidelines, the other is up to your creativity.
- We are excited to see what you create!
Target Audience
- Internal employee in client company
Judging Criteria
- How well you design the mobile application and interpret the provided wireframes
- Cleanliness of your graphics and design.
- Design and User Experience.
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
Please upload PNG images in a zip file with all requested contest requirements stated above. Number your files (01, 02, 03, etc) this will help review them in order.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator and saved as layered PSD/AI files.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics, images (sizes or colors) or modify overall colors
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.