Challenge Summary
TopCoder is building a web app that allows users to send data requests through a network. In this contest, we are asking you to storyboard the UI for selecting network partners. Your storyboards must match the style of the existing HTML prototype.
Round 1
Design the UI described below.
Round 2
Revise and refine your submission in response to checkpoint feedback.
Information capsules
The attached HTML prototype has placeholder tabs on the page titled New_Study.html. The second tab, "Select Partners", is where we will implement the storyboards that come out of this contest. The web app will support a minimum page width of 1000 pixels.
The attached image capsule.concept.png represents an idea for showing information about each network partner in the form of a capsule. You are free to modify the styling of this capsule as long as it conveys the required information.
Network partners are insurance companies. Each capsule contains the following data fields:
- the name of the insurance company
- the geographic location
- the number of people insured by the company
- a list of tags
For the geographic location, the concept image only shows a city name. We would like to expand this to four data fields:
- city
- state
- division
- region
You must incorporate this information into the capsule in a compact but readable way. You are not restricted to a vertical, line-by-line layout. You can display the geographical information side by side. We encourage you to use ANSI state abbreviations and to represent the division and region with icons.
There are four regions: West, Midwest, Northeast, South. Within these regions, there are nine divisions. All of the regions and divisions are shown on a national census map.
Functional requirements
The partner selection UI has two main areas of functionality:
- a list of partners
- a control panel for filtering partners
The list of partners should display a compact, one-line version of the capsule. The user can click on the compact version to expand it into the full capsule.
Please add a checkbox or other input element that lets the user select a subset of capsules from the list. Also add "select all" and "unselect all" buttons.
The control panel must have the following elements:
- a map of the United States for selecting geographic areas
- a pair of input elements for the number of insured
- a display of all possible tags
- a Reset button and an Apply button
The map must show markers for each insurance company. Hovering on a marker brings up a tool tip that shows the name of the company. Clicking on the tool tip expands it to show all the information.
The user can select one of three map versions:
- states: only the states are outlined
- divisions: the divisions and states are outlined; the divisions are color-coded
- regions: the regions, divisions, and states are outlined; the regions are color-coded
The pair of input elements should consist of a slider and a direct input box to specify the minimum and maximum number. In addition, show a checkbox that allows the user to disable the minimum or maximum.
Style requirements
Choose colors and shapes that complement the current HTML prototype. Please design new icons for the capsule concept and any other portions of the UI where you feel they would be helpful.
Target audience
This web application will be used in the health insurance industry by office workers who expect a user-friendly interface.
Judging criteria
- completeness: Do your storyboards meet all the requirements?
- aesthetics: Is your design attractive and usable?
What to submit
Submission: PNG images of your storyboards.
Source: Graphical source files.
Preview image: 1024 x 1024 screenshot in JPEG or PNG format.
Final fixes
You may be asked for minor changes to meet the stated requirements of this contest.
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.