Submit a solution
The challenge is finished.

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 (

Design Guidelines:
- All submission MUST follow IBM Design Language, refer client website:
-- Layout:
-- Typography:
-- Iconography:
-- Color:
-- Interaction:
-- App Inspiration:
- 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.

- 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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.


2015 topcoder Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "" file.
  3. Place all of your source files into a "" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.


All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Layered PSD files created in Adobe Photoshop or similar
  • AI files created in Adobe Illustrator or similar

You must include all source files with your submission.

Submission limit

5 submissions

ID: 30047888