Challenge Summary
Welcome to IBM - Media Library Apple Watch App Design Challenge!
In this challenge we are looking for you to design the user interface and user experience for our new IBM Media Library Apple Watch application! What should be the user experience when using the application? Is it a fun and engaging way to let IBMers use media on wearable technology?
For this challenge you must do your research! Review the latest design advice from Apple and how to plan the user experience for the Apple Watch.
We are providing you with a wireframe to understand what IBM is looking for and to help you understand the overall IBM Media Library requirements.
Round 1
Submit your design for a Checkpoint feedback:
Key to the checkpoint is providing Apple Watch interactions.
0. Home Screen.
1. Login Screen.
2. Main Menu Screen.
3. Browsing Media Screen.
4. Add Media Screen.
5.Notification 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 Checkpoint feedback:
0. Home Screen.
1. Login Screen.
2. Main Menu Screen.
3. Browsing Media Screen.
4. Add Media Screen.
5. My Media Screen.
6. Settings Screen.
7. Notification 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).
IBM Media Library is an internal app that manages IBM’s vast repository of media content. It enables employees to share media files (e.g. audio, video, text, presentation, article.) with other employees. This Media Library provides a wide range of media related features and media player support.
Most Useful Features
- Publish standalone media
- Publish a media series
- Administer media and series
- Social tagging
- Rank media
- Subscribe to media
- Track download activity
- Add media and series to favorites
- Engage in discussion
- Create polls
- Edit an HTML-friendly description field
Suggested Screens/Features:
The following screens are suggested screens from us, please feel free to add other screens and features that work fine with what we are trying to accomplish here.
0. Home Screen:
- This screen will show all applications icons.
- In this screen please show us how Media Library icon will look like among other applications icons.
1. Login Screen:
- Show application logo.
- User needs to fill the following fields:
---- Username.
---- Password.
2. Main Menu Screen:
- User will have four options to select from:
---- Browsing Media.
---- Add Media.
---- My Media.
---- Settings.
- additional function: quick “search” media(e.g. using firm touch)
3. Browsing Media Screen:
- User can browse media according to four categories:
---- Featured.
---- Top Rated.
---- Popular.
---- Recently uploaded.
- When user selects a category he will see a list of media items.
- When a media item is selected the user can see:
---- Media Details:
---- A. Start/Pause/Stop
---- B. Fast Forward/Fast backward
---- Social Options.
---- My Options.
---- When user selects Social Options he can:
---- Share Media item.
---- Like Media item.
---- Comment on Media item (text or impression).
---- When user selects My Options he can:
---- Tag (hashtag)
---- Add Media item to “my fav list”.
---- Download Media item.
4. Add Media Screen:
- User will have four options to select from:
---- Audio Podcast.
---- Video.
---- Photo.
---- Others (PDF or text).
- When user selects a category from he will see recording view with following options:
---- A. Start/Pause/Stop.
---- B. Save.
---- C. Recover.
- When the user is done recording a new media item he can add:
---- Media item name.
---- Media item description.
---- Tag (hashtag)
---- Select/create a series.
---- User will have the option to add to his media or publish.
- If user chooses to publish media item he will have the option to send it to someone and will see a confirmation view.
5. My Media Screen:
- User will have four options to select from:
---- My file.
---- Favor list.
---- Watch later list.
---- My downloads.
- When user selects a category he will see a list of media items.
- When a media item is selected the user can see:
- Media Details:
---- A. Start/Pause/Stop
---- B. Fast Forward/Fast backward
---- Social Options.
---- My Options.
---- When user selects Social Options he can:
---- Share Media item.
---- Like Media item.
---- Comment on Media item (text or impression).
---- When user selects My Options he can:
---- Tag (hashtag)
---- Add Media item to my fav.
---- Download Media item.
- When the user is done hearing a new media item he can add:
---- Media item name.
---- Media item description.
---- Tag (hashtag)
---- Select/create a series.
---- User will have the option to add to his media or publish to the community.
- If user chooses to publish media item he will have the option to send it to someone and will see a confirmation view.
6. Settings Screen:
- User will have 4 check options to select from:
---- Notification settings.(y/n)
---- Connect phone.(y/n)
---- Immediate(y/n)
---- Interval(hours).
7. Notification Screen:
- The app will show push notifications and the user will have the option to dismiss, see it right now, or save to “My media” to see it later.
Before designing:
- Research: Apple has provided the Apple Watch Human User Interface Guide, which should serve as the foundation for conceptualizing and prototyping.
For more tips on designing and developing a best Apple Watch App, please do some research before designing, you may check out these articles:
6 design principles for great Apple Watch apps;
Apple watch app UI Design Ideas for inspiration;
Designing for the Apple Watch(tips and lessons);
Designing for the Apple Watch, getting started;
- GUI: Think about the user interface based on graphics (icons or pictures) instead of text; Or create some simple keywords to instead of the complex functions’ name.
- Simplified, simplified and simplified again: Consider the user's’ attention will turn from screen to wrist, think a simple, delicately ease-to-use way to allow these users control and play media on small devices. Simplify each screen. The interface is intended to be simple and clean, with the data right at the user’s fingertips without all the frills and fuss.
- Gesture: Smartly Use some basic go-to gestures to make using the Apple Watch much easier. (e.g.. force touch; horizontal swipe )
Branding Guidelines:
Attached Document (Mobile Media Library Screenshot.ppt):
The attached Powerpoint file shows the screens of the current iPhone Mobile Media Library Application. These are given to show you the screens and functionality of the application to help you come up with ideas on how the Apple Watch App will interact with the iPhone App.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Accessibility:
- Make sure when you are planning your concepts you are also designing for accessibility.
- Since this application will be very visual (colors) - think about color blindness and the need for contrast/labels.
- You will notice the color accessibility suggestions within the IBM Design Language.
- Accessibility checklist.
Target Devices:
- Apple Watch: 312px x 390px.
- Follow Apple Watch Human Interface Guidelines.
Supporting Documents:
- Wireframe (IBM Media Library Apple Watch Wireframe Map.pdf.zip)
- Mobile Media library Screenshots (Mobile Media library Screenshots.ppt.zip)
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 application should be designed for iOS and use the IBM design language!
- Easy to scan, and enable quick interactions.
- Think about the accessibility of the design. Ensure that all meaningful content and functionality are easy and available by touching.
Users:
- IBM employees.
Judging Criteria:
- How well your solution follow the Apple Watch Human Interface Guidelines.
- Completeness of your solution.
- Cleanliness of your graphics and design.
- 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/JPEG images in a zip file with all requested contest requirements stated above.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or similar and saved as layered PSD 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.