Challenge Summary
Welcome to IBM - SiBM - ClipStreamer Application Wireframe Challenge. For this challenge, we need your help to come up with an application that will be used across all types of devices (phone, tablet, desktop/laptop), this app helps user share different file formats “picture, text or file” - we are seeking a solution on how this application needs to work (looking for a simple light-weight application).
At the end of this challenge, we are looking to see intuitive and easy to use "wireframe concepts" that will help us design and build UI/UX in the next phase of this project!
This challenge is focused on "wireframe" output and results.
Be creative in your wireframes!
Round 1
Submit your wireframe for checkpoint review..
- Desktop Screens
Any comments about your wireframe, make sure all pages have correct flow!
Round 2
Final wireframe + any checkpoint feedback implemented!
- Desktop + Mobile Screens
Any comments about your wireframe, make sure all pages have correct flow!
Challenge Description
Purpose of this challenge is to come up with a wireframe that helps users to quickly share any content (text, files and pictures) to any device.
Wireframe Guidelines:
- Provide us with your interaction and click-path thoughts and suggestions
- Produce HTML click-through wireframes that can be used to demonstrate all mentioned functionalities as required in each round.
- The website must be very easy to use and intuitive. Keep that in mind when you create your solution for the layout and flow information.
- You MUST cover all requirements mentioned in challenge details below.
Screen Sizes:
Desktop: 1024px and height as required
Mobile: 375 x 667px
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!
NOTE:
Not all of the above guidelines are appropriate for wireframes, only those which you think would be appropriate are applicable. It is best to go through the guidelines to understand how it will impact the UX while building your wireframes.
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.
User Flow:
Your project lead asks you to design a new widget.
- You use your phone to look up contact information of a widget expert you had worked with in the past. On your tablet you sketch out some mockups of sample widget designs. Using your laptop you research ideas online and find a number of good widget web pages you want to capture references to. You have a lot of data on multiple devices and need to quickly pull all those pieces together on to your laptop. Good thing is you have ClipStreamer.
Using your phone's sharing options, you quickly copy the widget expert contact information into your ClipStream. You do the same with your tablet, copying your mockup images into your stream. Back on your laptop, you instantly see the contact information and sketches added to your stream where you had already captured your web page links.
With all the data now in a single location you can quickly export into an email, drop into a wiki page, share with colleagues or just store as a reference for when you need it in the future. Collecting and transferring data across devices has never been easier.
Required Features:
Below are some of the features required in this application, but you are not limited to this, we are open to flows and suggestions on how things could work - so feel free to expand and suggest us what would be best for this type of application!!!
Wireframe Reference: We have provided a mockup of couple of screens (page 1 and 2) of how we envision the contents for this clipstreamer application - workflows is incomplete in this application as we are looking for you to define that based on the requirements given below (Note: this is just to give an idea of this application - please DON'T COPY).
We are looking for a simple light-weight (minimal features) application that solves and eases the work of the user.
Login:
- We need a way for the user to login into the application.
- Users will be logging in with their IBM ids
Clip History/Stream:
- We would like to see a screen History of clipped content, as a scrollable list.
- Visible history is 10 most recent items, total in stream is 100 items.
- Preview of clipboard content (image thumbnail, etc)
- Automatic formatting/linking of rich text (urls, emails, telephone, etc)
- Note that, as this application is accessible across different devices, all data will have real-time update / sync across different devices. When I enter in a clipboard snippet on one device I instantly (within 1-2 seconds) see that new clipboard snippet on any other devices with the stream loaded.
- We like the features that allows the user to pull down list to "force a refresh".
- Be able to delete any snippet as needed (prompt to confirm / swipe to delete).
- Associate adhoc attributes /clipped items with clipboard entries (tagging), would be nice have this tagging feature i.e. allow user to tag a particular clipped item.
- How can you make the experience of copy/paste to/from a web app be as simple as possible. For example, a single-click from any app or web page to get a snippet into the stream. Likewise, a simple process for getting a snippet out of a stream and into an app that the user is editing.
- Do you think we can provide options for the user to edit / update existing snippets? how do you think they should be laid out? looking forward to your thoughts!
- Need Drag and Drop features to add items to the clipboard stream (Images, text, URLs, selected text snippet, etc).
- Provide options for the user to Favorite / Like a clipboard item.
NOTE: A user should never be able to access another user's clipped data unless explicitly authorized.
Sharing Options:
- Share specific entries (image / text) to everyone (public link) or to specific people.
- User should receive a notification when snippets are shared with them
- Visual indication for snippets that have been shared with other users
- Paste an image, allow users to quickly crop it - then share it out to other systems / colleagues.
Search and Filter:
- We need the ability for the user to search through the history of clipped contents.
- How will the user initiate the search?
- We need the ability of filtering the of displayed clipboard history items.
- We would like you to explore on what filtering abilities a user need to have. For example: By date range, By Tag, etc..what else? (looking forward to your thoughts)
- It would nice to have a customizable "quick filters" to save/activate filters with a single click (like a customizable toolbar)
"Nice to have" Features:
It's not mandatory that you need to include below features, but just go through these to get an idea on the possible improvements that will be done to this application and feel free to add these features if you think it could improve the overall experience!
Export Options:
We need ability to have a quick export of selected clipboard items:
- Copy selected snippets to the clipboard.
- Send selected snippets as an email or instant message.
- Show me this address on a map.
User preferences:
- Automatic formatting/linking of rich text (urls, emails, telephone, etc)
- What else is required in this screen?
Additional Features:
More features that we would like you to research on:
- Bookmarklets (and other 1-click ways) to automatically add / get items from clip stream.
- Accessible across devices - IBM Sametime, Slack.com, sharesheet.
- Direct integration plugins with other clients: IBM Verse, Sametime, Archive Explorer.
SnapIT integration
- - paste in an email address and get instant lookup capabilities with a click - IBM CIO faces integration.
- - Paste in text and convert to another language.
References:
We like the simplicity of Evernote (https://www.evernote.com/), have a look - please DON'T copy!
Learn Axure:
New to Axure? Here are some quick tutorials to help you get started.
http://www.axure.com/learn
Target Audience:
- Only IBM Employees
Judging Criteria:
Your submission will be judged on the following criteria:
- User Experience.
- Completeness and accuracy of the wireframe.
- How well your wireframes provide a consistent user flow.
- Any suggestions, interactions and user flow you recommend (provide any notes or comments for the client).
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
Generated HTML files with all the requested contest requirements stated above.
Source Files
Wireframes should be built in Axure. The resulting files should have generated HTML files. Also, all the content must be listed and the pages are linked together to show page flow.
Final Fixes
As part of the Final Fix phase, you may be asked to remove, update, or change some features of the wireframe.
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.