Challenge Summary
The Healthcare Fraud Prevention Partnership (HFPP) is a network of healthcare insurers that share data in order to find suspicious claims. Data is requested from partners by sending a query through the network. We have a set of wireframes that define a visual interface for constructing a query in a web application. This contest challenges you to storyboard this interface.
Round 1
Design a complete set of storyboards according to the requirements below.
Round 2
Revise and refine your storyboards in response to checkpoint feedback.
Basic requirements
The attached wireframes in query.zip illustrate an interface that allows the user to visually construct logical expressions such as (A OR B OR NOT C) AND NOT (D OR E).
The letters A, B, and so on are terms of the expression. Each term imposes a constraint on a claim attribute. For example, one possible term is "Diagnosis code matches EQR-440**02". Another is "Payment minimum $50, maximum $500".
Attributes are chosen from a dropdown menu which is arranged into categories. These should be color-coded. The attached image select.attribute.png shows a previous attempt at color-coding, but we're looking for an improved color palette. The attached HTML prototype app.zip should give you a feel for the overall design of the web app.
Please read the notes in the wireframe and ask questions in the forum if you don't understand how the interface works. It is important to understand the concept of grouping, which is equivalent to putting parentheses around a sequence of attributes. For example, the user might start by making the sequence A OR B AND C. Then the user can select the A and the B term and group them together, resulting in (A OR B) AND C. Now the user can add a constraint D and group it with the C, resulting in (A OR B) AND (C OR D).
Note that any term or any group can be negated, which means adding NOT in front of it. For example, we can negate the term B and the group (C OR D) to obtain (A OR NOT B) AND NOT (C OR D).
Modifications
The attached screenshot notes.png is annotated with a number of required changes.
The text area marked "Study description" is being renamed to "Query string". It will contain the plain text version of the query, which is shown in the existing wireframe by clicking on "Review Selection Criteria". We are getting rid of that button because the plain text query will now be visible at all times.
The "Clear All" button should be moved out of the way so that the user doesn't accidentally click on it. In addition, we would like you to design a confirmation box for this operation that asks, "Are you sure you want to delete the whole query?"
There are three types of constraints depending on the attribute. We are modifying the constraints as shown by the annotations.
In the screenshot, observe that there are two OR operators in the first group. If one of these operators is changed to AND, both of them will be changed to AND. The user is forced to use the same operator throughout the group. This is a change from the wireframes.
Note the addition of the "Merge" button. The effect of this button is to join the contents of two groups into one group. (By default the operator of the upper group will be applied to the new group.)
Enhancements
We would like to make two major enhancements to the wireframes. First, all of the controls in the visual query area should be invisible by default. They should become visible when the user hovers over the relevant area. Please depict this in your storyboards by showing the visual query without controls and another version demonstrating each control.
The controls are:
- checkbox for selecting a term or group (becomes visible on hovering over the term or the shared area of the group)
- deletion button for a term or group (likewise)
- NOT option for a term or group (likewise)
- option to change attribute type (becomes visible on hovering over the attribute name)
- option to add a new term (becomes visible on hovering between or after terms or groups)
The other major enhancement is the use of drag-and-drop functionality instead of the "Move Up" and "Move Down" buttons. The user should be able to grab a term or a whole group and drag it to another place within the containing group, or out of the group and possibly into another group.
Please design storyboards showing each stage of the drag-and-drop operation:
- when the user hovers over a single term or the shared area of a group, a grab bar appears
- the user can click on the grab bar, making the term or group movable (illustrate the new state visually)
- as the user keeps the mouse button pressed down and drags the term or group, a pale shadow is left in its old location
- a dark shadow forms in potential new locations as the user approaches them
When the user releases the button, the term or group falls into place in a new location or back in its old location, depending on which one is closer.
Target audience
Healthcare management professionals who are using a web app to search for suspicious claims.
Judging criteria
Aesthetics: Is this an attractive design for the user interface?
Ergonomics: Will users find this interface easy to use?
What to submit
Submission zip: Full-resolution PNG storyboards.
Source zip: Project source files.
Preview image: 1024 x 1024 screenshot in 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.