Challenge Summary
Welcome to the IBM - SiBM Super Series: Web Editor App Design Concepts Challenge! The purpose of the Super Series (SS) web app is to allow IBMers to create SERIES containing different types of media (videos, audio, images, docs) with the ability to edit, view, download and favorite series. Each series can have multiple levels and there is stand-alone media that does not necessarily sit within a series. Additionally, much like creating a music playlist, users can add their own or others’ media into a new or existing series.
We will be providing a series of wireframes (WF Reference-Web.zip) as a guide for general content and layout. Please aim to emulate and further enhance the UI elements of IBM’s current Mobile Media Library (Mobile Media Library_Screens-Web.ppt) such as color scheme, iconography and font, but also be creative in thinking about best layout, user interaction and app functionality.
This challenge will be run in parallel with the SS Mobile Viewer App Design Concepts Challenge.
Round 1
Submit your design for a Checkpoint feedback:
1. Landing Page (See 01)
2. Browse Media Page (See 02a, b)
3. My Series Page (See 03a-d)
4. My Series Page, Editor Mode (See 05a, b)
5. Media Detail Page (See 04a, b)
6. Series Detail Page (See 08)
- 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 01a, b)
3. Navigation Page (See 02)
4. Browse Series Page (See 03)
5. My Series Page, Preview Mode (See 04a-c)
6. My Series Page, Editor Mode (See 05a, b); Please add Save Draft + Publish button
7. My Uploads Page (See 06a, b)
8. Browse Series Page (See 07)
9. Series Detail Page (See 08)
10. Media Detail Page (similar to 08, but without series section on the bottom R corner)
- 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
The goal of this challenge is to create design concepts for the Super Series (SS) web app that allows IBMers to create SERIES with multiple levels with the ability to edit, view, download and favorite series.
We are looking for design concepts to visually portray the hierarchy of the different types of series that a user can view and edit/create. Additionally, we are looking to see how media detail (rating, # of views, # of downloads, description) and media functions (Download button, Favorite button) can be most sensibly presented on a thumbnail or page. 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 this hierarachy 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 Library 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 puts it in a new playlist. New playlist is created from landing page.
3. User goes to ‘Browse Series’ page and decides to edit a created series. User goes to ‘Preview Mode’ of ‘My Series’ and mouses over the title of the series to see that they can click on and edit it. User can also mouse over a media row to show its edit options.
4. User decides to EDIT media and a pop-up screen appears with appropriate forms
5. User decides to do QUICK EDIT and quickly edits the name and description of all media under a single series.
7. User goes to ‘Editor Mode’ of ‘My Series’ to arrange the order of her series and sub-series as well as add new or existing media to a sub-series.
8. When user clicks ‘Add New Media’ button, a browse button and ‘drag and drop to upload’ section appears.
9. User goes to ‘My Uploads’ page to view and edit existing media. Again, when user mouses over a media row different edit options appear.
10, User goes to ‘Browse Series’ page and decides to view a favorited 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 1024x768 px.
- Please make sure that you create graphical elements in VECTOR format so graphics retain quality when resized.
Supporting Documents
- Wireframe Reference: WF Reference-Web.zip
- Design Direction: Mobile Media Library_Screens-Web.pptx
Tips for Success
Research UI of different media repositories such as Lynda.com, Youtube, Netflix.
Research UI of different blogging platforms such as Wordpress, Blogger and note their ‘Editor’ sections.
- How are their editors arranged? Can editor elements fit into a single page for easy navigation?
- For series, can they create levels and drag and drop to reorder?
- What is the quickest way to create multiple series?
- Is there a way to draft series and save them for later?
- Is there a button on all media where user can add it to series?
Design Guidelines
Please refer to Mobile Media Library_Screens - Web.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
- Enhancement and understanding of current Media Mobile Library design.
- Cleanliness of your thumbnails and layout.
- Carefully thought-out user experience and interface.
- Detailed annotations and notes on the designs or ‘Readme.jpg’ doc.
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.