Challenge Summary
Welcome to IBM - SiBM - ClipStreamer Responsive Application Design Challenge. In this challenge, we need your help in coming up with the initial design direction for an app that helps user share different file formats “picture, text or file”, we are looking for a simple light-weight application.
Wireframes are provided to help you get started with your designs. Please make sure that your designs are not just “coloring” the wireframes. Think about the user experience and add any additional screens or features that would improve the experience.
Make sure to embrace the IBM Design Language when planning your solution.
Good luck on this challenge.
Round 1
Submit your initial designs for Checkpoint Feedback
- Desktop Screens
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Your Final designs for all the required designs with all Checkpoint Feedback implemented.
- Desktop Screens
- Tablet Screens
- Mobile Screens
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX). We had provided the wireframes for content and flow references, please DO NOT COPY the look & feel and this challenge’s purpose is to come up with better user experience and design!
Design Considerations:
- Looking for modern, intuitive user interface.
- Focus on the design being a great user experience, think simple but effective solutions!
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application.
- How should this desktop, tablet and mobile application look and work?
- What should the priority features be?
- How quickly could you find information?
Supporting Documents:
* Wireframes = Contains the basic ideas for screens, contents and flow of the application..
IBM Design Guidelines:
All submissions MUST follow IBM Design Language, please refer to the client website: 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
-- Click around Client Design Brand site to get familiar with more client design brand that not stated on this challenge spec.
-- Creativity is also welcome!
Design Size:
- Desktop: 1440 px and height as required
- Tablet: 768 x 1024 px (Portrait)
- Mobile: 750 x 1334 px (Portrait)
Definitions:
Few terms that you need to familiarize with..
Snippet: A clipboard item, something (text, image, url, ...) that a user has saved.
Stream: List of snippets, a stream is dynamically updated (add, remove, modified) by client actions.
Required Pages:
We are looking for the below pages to be designed..
1) Login:
- Users will be logging in with their IBM login credentials (ID and password).
- We would like you to create an error screen as well, how does it need to look like?
2) Home:
Follow the contents from the wireframe, looking for your thoughts on how the details need to be put up across different devices (mobile, tablets and desktop screens).
Navigation:
- We need a way for the users to access the different streams that were created, wireframes show a way to include these streams by including them under a collapsable left sidebar - if you have better ideas, feel free to show them.
- Provide a way to create a new clipstream.
- There could few streams that should always be shown, they are:
- - Uncategorized: Snippets that were not moved to any stream.
- - Favorite: Snippets that the currently logged in user has marked as favorite.
- - Any other user created streams.
Create Stream:
- User should be able to create a new clipstream.
- Currently this is shown as initiated from the left sidebar by clicking on "+ New Stream" which shows the fields that need to be entered to create a new stream.
- User will need to enter stream name and tags associated with this new stream.
2.1) Snippets:
- In home screen, we show the recent snippets and when the user selects any stream from the left..we see snippets under that stream name.
- At Least 10 snippets need to be displayed by default before a user selects “load more” or “next” to view more snippets.
- Provide a way to create/add a new snippet to the stream.
- Each of the snippet can be of different type, so we might need to indicate the type of snippet.
- How best can we indicate the type of snippet (icons, color coding, etc…) as there could be four types of snippets (text, image, contact, links)...looking forward to your ideas.
- What details need to be shown for each snippet? (please see wireframes for reference, feel free to improve them)
- Note that: On mouse hover, we have options to share and delete a snippet..how can this be handled...also think of ways to handle these options for each snippet in the mobile view.
Search, Sort and Filter:
- Provide options to search, do you think auto-suggest would help here?
- A user will be able to sort the currently shown list of snippets by ascending or descending order.
- Filters are required in this page to filter through the results, snippets could of few types (text, image, contact, links), date range, show only favorites.
Create New Snippet:
- User will be able to add a snippet to the stream by selecting “New Snippet” button.
- Based on the type of snippet (text, image, contact or URL), we show corresponding fields...please follow the wireframes and create your designs for for all types of snippet.
- While creating a snippet, user will be prompted whether they want to add the item in the clipboard.
- If there are any missing fields, how can show that as an error?
Bulk-Edit:
- User should have the ability to bulk-edit the snippets (click on “Select” shown to the left of “New Snippet” in wireframe to see the bulk edit options).
- User will be able to select the snippet that need to be edited.
- It will allow tags to be added to the selected snippets.
- They will be able to add the selected snippets to favorites or delete or share them.
- Sharing of snippets is not shown in the wireframes, we would like you to come up with thoughts on what needs to be shown in this view.
- Clicking on “Done” or cancel will hide this bulk edit view.
3) Notifications:
- We need a way to show the activities i.e. if there are any snippets to the stream then a user will be notified about that.
- Looking for your thoughts on how this need to be designed.
Target Audience:
- IBM Employees
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Your design should possible to build and make sense as a responsive application
- Cleanliness of your graphics and design
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.