Challenge Summary
Welcome to the IBM - SiBM Super Series - Mobile Viewer App Design Concepts Challenge. The purpose of the Super Series (SS) mobile app is to allow IBMers to view, download and favorite series and media files (videos, audio, PDFs, ppts, etc.). In this challenge, we are looking for design concepts on (1) how to visually portray the taxonomy and hierarchy of different types of series and (2) how to extend and enhance our currently existing Mobile Media Library app.
We will be providing a series of wireframes as a guidance for content. Please aim to emulate and further enhance the UI elements of IBM’s current Mobile Media Library (See Mobile Library_Screens-Mobile.ppt) but also be creative in thinking about the best user interaction and app functionality.
This challenge will be run in parallel with the SS Web Editor App Design Concepts Challenge.
Round 1
Submit your design for a Checkpoint feedback:
1. Stand-Alone Media Page (See p.2. p.5)
2. Media Within Series Page (See p.2)
3. Series Detail Page (See p.2)
4. Landing Page (See p.15)
5. My Account Page (See p.38); Feature ‘Save for Later,’ ‘Favorites’ ‘My Series’ and ‘My Media’
- Provide us with a click map for your design, with annotations for all interactions.
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
- Readme.jpg: If needed, provide notes about your submission.
Round 2
Submit your final design plus any Checkpoint feedback:
1. Login Page (Use IBM ID)
2. Landing Page (See p. 15)
3. Navigation Page (See p.16)
4. Browse Series Page
5. Browse Media Page
6. Stand-Alone Media Page (See p.2)
7. Media Within Series Page (See p.2)
8. Filter Screen (See MML p. 22)
9. My Account Page (See MML v. 38); Feature ‘Save for Later,’ ‘Favorites’ ‘My Series’ and ‘My Media’
- Provide us with a click map for your design, with annotations for all interactions.
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
- Readme.jpg: If needed, provide notes about your submission
Challenge Details
In this challenge, it is important to note that a series can consist of multiple levels and media can stand on its own without being in a series. Please think about how different levels can be portrayed (4-level series: Super Series > Series > Sub-series > Media; 2-level: Series > Media) so that all the content within the series is available to view but ordered in a way that is not overwhelming or hard to access by teh user.
Additionally, think about how media detail (rating, # of views, # of downloads, description) and media functions (Download button, Favorite button) can be most sensibly presented to the user in terms of location, layout and screens. For example, which buttons and media details would you portray for media thumbnails the landing page? Where would you place them? Ultimately, think about what the user would need to see and experience to best use the application.
Finally, think of series like creating a course. In a course there are course modules that outline the general content, and under each course module there are further subdivisions that break up the module into smaller sections. Users can add their own or others’ media into a new or existing course so the course and its relevant content can easily be accessed. The purpose of the SS Mobile app is to display these levels so that it is easily accessible and understandable.
Screen Flow + Potential User Scenarios
Please view the sample wireframe for content reference and the Mobile Media app screenshots for UI element references. Ultimately, it is up to you to decide how the users interact with the content. Below are some suggested flow of screens (follows order of WF reference)
1. User logs in, meets landing page.
2. User sees a featured video, likes it, and can view favorited video under 'My Account' page.
3. User sees a video, clicks 'watch later.' and can view this video under 'My Account' page.
4. User clicks on a media which is part of a series. User sees that it is part of series and is able to see an overview of the series as well as the media that user just clicked.
5. User clicks on a series and sees an overview of the series.
7. User clicks on a series and sees that they can click further to go into a sub-series.
Accessibility
When you are planning your concepts, make sure you are also designing for accessibility. You can view the accessibility checklist here.
Screen Size
- Resolution: Please use a minimum of 750px x 1334px.
- Please make sure that you create graphical elements in VECTOR format so graphics retain quality when resized.
Files
Wireframe Reference + Design Direction: Mobile Media Library_Screens-Mobile.ppt
Tips for Success
- Research mobile UI of different media repositories such as Lynda.com, Youtube, Netflix.
- Research mobile UI of different blogging platforms such as Wordpress, Blogger and note their ‘Editor’ sections.
- How does one view an entire series and the media within a series (think about browsing while viewing)
- How would Favorite, Download, Add to Playlist and Save for Later buttons be best arranged on a mobile page? On a media thumbnail?
Design Guidelines
Please refer to Mobile Media Library_Screens - Mobile.ppt for design elements such as colors, fonts and iconography. For further design guidelines please refer to the IBM Design Language:
- Design Language: http://www.ibm.com/design/language/index.shtml
- Layout: http://www.ibm.com/design/language/framework/visual/layout.shtml
- Typography: http://www.ibm.com/design/language/framework/visual/typography.shtml
- Iconography: http://www.ibm.com/design/language/framework/visual/iconography.shtml
- Color: http://www.ibm.com/design/language/framework/visual/color.shtml
- Interaction: http://www.ibm.com/design/language/framework/interaction/introduction.shtml
- App Inspiration: http://www.ibm.com/design/language/inspiration.shtml
Judging Criteria
- Understanding and enhancing current Media Mobile Library design
- Detailed annotations and notes on the designs or ‘Readme.jpg’ doc.
- Explanation of symbols and graphics.
- Cleanliness of graphics and design.
- Carefully thought-out user experience and interface.
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x768 px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG 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.