Register
Submit a solution
The challenge is finished.

Challenge Summary

Corningstone building an HTML5 version of their product ordering tool.  This new tool will be used by sales agents on both iOS devices and PCs, and must be funcational in both online and offline modes.

Our first step here is to build a POC demonstrating some of the critical features of the full app.  In this contest you will create a storyboard for this one-page POC.

Read more details on contest description below.

This is a Fast! contest, so please ask any questions right away!


Primary Goals

The latest version of the POC application can be found here:

http://ec2-54-242-172-235.compute-1.amazonaws.com:8080/storyboard

This is an HTML5 application that utilizes WebSQL (on Safari) or IndexedDB (on IE10) to store a product catalog for quick querying while online or offline.  This product catalog is then used in a Fast Lookup feature that allows sales agents to very quickly create Bids and add Products to them.

To use the app, simply click New Bid, type a letter into the Fast Lookup text input, select one of the matching products, enter a quantity, hit enter, type a new Fast Lookup, and so on.

The app also features a Remove Product button and a Delete Bid icon, which are currently funcational, and Copy/Paste, Undo/Redo, Print, Export, and Filter options that are currently not functional.

The overall requirement of this POC project is simply to demonstrate certain funcationalities.  However, our goal is to impress the client so much with this POC that they award us the full project.  That's why we're running this storyboard contest, to make the POC more visually impressive!

There are a few deviations we would like in the storyboard that are not currently in the app:

1. Add a set of tabs in the header.  The top tier of tabs should be: Dashboard, My Bids, Reporting, Utilities, Settings. Then under My Bids add a second tier of tabs: Header, Bid Tracker, Items, Packages, Other Charges, Totals, Special Pricing, Plan Holders.  None of these tabs will be functional in the POC, but we want to show the client what the full app might look like.

2. The Remove button seems out of place.  Merge it in with the icons above it.

3. The Undo/Redo icons are currently shown at the Bid level.  This is really a global funcation, though, as Undo/Redo can affect multiple Bids.  So, move this up to the same level as New Bid.

4. The client prefers icons to standard buttons, so please create icons for everything.

Branding Guidelines
While this is a fairly boring product ordering application, we are looking to WOW the client with this POC.  So, be creative here and make the app exciting and fun to use.  While we can't provide you with the client's actual logo, the color scheme of their logo is black and gold (#231F20 and #FFC324) and it features a lightening bolt.

Also keep in mind that this app will be used on both a PC (IE10) and iPad (Safari).  While there will likely be some small UI differences between the two, for the most part we want it to have one design for both platforms.

Target Audience
The app will be used by Corningstone salespeople while visiting potential customers.  These salespeople are very familiar with their product catalog and the Fast Lookup codes, and thus the most important aspect of the UI to them is being able to quickly create a Bid and add Products to it.

Reference Designs
While we can't provide it to you, the client does have a UI design from another firm that they like.  The color scheme matches their logo, the main data entry area features has an off-white 'paper-like' look to it, and the tabs and buttons are colorful (but not bright) and have subtle grey shadowing.  It conveys an industrial and powerful feel.

Judging Criteria

  • Maintains the 'quick entry' aspects of the current POC
  • Clean, professional (but not boring) design
  • Will WOW the client and convince them to run the whole project through TopCoder

What to Submit
Preview JPG/PNG Image File
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 ZIP File
All requested contest requirements/screens as JPG or PNG files.

Source ZIP File
All fully editable original source files of the submitted design as required by the contest under "Source Files" in the side bar.

Final Fixes
As part of the final fixes phase you may be asked to complete one round of minor changes to ensure your submission meets the stated requirements of this contest. See more information about Final Fixes.

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.

Stock Photography

Stock photography is not allowed in this challenge. All submitted elements must be designed solely by you. See this page for more details.

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.

ELIGIBLE EVENTS:

2013 TopCoder(R) 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 "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" 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.

Screening:

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
  • EPS files created in Adobe Illustrator or similar

You must include all source files with your submission.

Submission limit

5 submissions

ID: 30033290