Challenge Summary
Welcome to IBM - Snip Mobile Tool Design Challenge! Snip is very flexible tool for creating shortened URLs. We are looking for a responsive design that will work both on a mobile device and on the web page.
Here are 3 scenarios for use:
- Scenario #1: Imagine while mobile you want to quickly check what kind of response you are getting to a communication you created that uses a Snip URL. You open the app, and quickly can see how the traffic has been trending and from which parts of the world that traffic is coming from.
- Scenario #2: You need to update the destination of one of your Snip URLs. You open the app, edit that existing Snip, and you are good to go.
- Scenario #3: You just want to create a new short URL. You open the app, create the new short URL which you can copy to your devices clipboard, and then use it where needed. (Put in an e-mail, post to Connections, put in a Twitter post, etc.
Round 1
Submit your design for a Checkpoint feedback:
1. Navigation
3. Homepage
4. Snip Details Page
5. Edit Snip
- 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 any Checkpoint feedback:
1. Navigation
2. Login
3. Home Page
4. Snip Details Page
5. Edit Snip
6. Create New Snip
- 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)
Challenge Details:
The goal of this challenge is to design the Snip Tool; Mobile Snip is a tool that lets IBMers create shortened URLs, editing existing URLs,���and view metrics on the use of their URLs. But this is much more than a URL-shortening tool! URLs can have multiple destinations (for A/B testing), can be to regular web pages, mail-to URLs, or Lotus Notes document links. You can set conditional rules, so that different URLs can display based on time, date, language, or location.
For this challenge you are provided with wireframes screens to explain what we are looking for.
Supporting Documents:
- Can be found on Google Drive, please ask for access in forums by sending your email address so we can share the folder with you.
-- Wireframes (Wireframe.zip)
Design Guidelines:
- All submission MUST follow IBM Design Language, refer 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.
- Orientation : Portrait.
- Make sure create all your graphic in 'vector' format (buttons, icons, etc), so when resize for bigger versions, graphic still look sharp!
Screen Size:
- Mobile Resolution: Design for iPhone 6 Retina Display 750px x 1334px.
Use Case Scenario:
- John is an IBM employee.
- John logs in to the application using his name and ID number.
- John can see his existing “snips” with some simple metrics.
- John can specify snip options.
- John can edit existing snips.
- John can create a new snip.
Required Features:
1. Navigation
- How does the user navigate this application?
- Include navigation that you think fits with this application
- Focus on the priority items and how things should be sized
2. Login
Please refer login.html
- User should be able to see App logo and name.
- User should be able to enter his Intranet ID and password.
- Please include validation error design for login.
3. Home page
Please refer login.html
- User can create a new snip by clicking on “+” icon at the top left of the screen.
- User can logout the app by clicking on Logout link at the top right of the screen.
- User can search for snips:
-- Views number.
-- When the snip was created.
- Clicking on a snip will take user to snip details page.
4. Snip Details Page
Please refer view_details.html
- User can click on back icon at the top left to go back to Home page.
- User can click on www tab to view the link on browser.
- User can click on options icon at the top right to view available options:
-- Copy link.
-- Transfer.
-- Archive.
- User can copy snip to clipboard.
- User can customize snip url, please notice error and already taken errors.
- User can edit a snip; when user clicks on edit icon he will be taken to edit view.
- User can add, edit and delete rules.
- For add/edit rule the user needs to set:
-- Rule Name.
-- Criteria.
-- Time of day.
-- Timezone Offset.
--Target URL(s).
- For delete rule please show confirmation message.
5. Edit Snip:
Please refer edit.html
- User can edit existing snips:
-- Custom title.
-- Custom url.
-- Default target url.
-- The ability to add additional target url.
-- Please show info views when clicking on “?” icon.
6. Create New Snip
Please refer create_new.html
- In creating a new snip user needs to:
-- Enter url.
-- Enter Mailto URL:
--- To.
--- CC.
--- Subject.
--- Body.
-- Enter Document Link or Notes URL.
- If user clicks on “Security Warning” link at the bottom right he will be shown a security warning message.
Important:
- Keep things consistent; all graphic styles should work together.
- The winner of the challenge will have to pre-slice (the source PSD or AI) with icons, backgrounds, headers, UI elements, avatars, images, buttons, etc. to make it easy to split up for use by IBM developers.
Target Users:
- The target audience for this application will be technical IBM users.
Judging Criteria:
- Cleanliness of your graphics and design.
- User Experience of Snip Tool Mobile.
- Creativity and ease-of-use is key to the success as it must be engaging to the employee.
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.