Open Payments - Mobile App Storyboards

The Open Payments project is building software to encourage financial transparency in the healthcare industry. This contest deals with an iPhone app that will be used by a manufacturer's field agents to record payments and other transfers of value to physicians and teaching hospitals. We are asking for storyboards based on a set of wireframes with some modifications. We also have several UI kits, and we're asking you to mix and match specific parts.

 

Round 1

Submit all screens described below.

Round 2

Revise and refine your submission in response to checkpoint feedback.

Overview

We are building an app for the iPhone 5 in portrait mode (640x1136), targeting iOS 7.

There are two user roles:

• payer: works for a healthcare manufacturer
• recipient: a physician

 

Functional requirements: Payer

The payer has the primary responsibility for recording payment information.

Payer - Home

• delete "Welcome to Open Payment Apps"
• "Get The Payment Recipient Information" -> "Start a new payment file"
• "via Bluetooth" -> "Get recipient data through Bluetooth"
• "Manual Entry" -> "Enter recipient data manually"
• "Manage Payment Data" -> "Review payments"
• delete "Browse payments Data payed" (the icon is enough)

Bluetooth activation

• if Bluetooth is active: change the title to "Bluetooth is on"; show a list of three available recipients
• for each recipient, show the full name, email address, and phone number
• if Bluetooth is not active: change title to "Bluetooth is off" and add a "turn on" button next to the title
• Bluetooth is off: similar to active Bluetooth screen, but grayed out; add "last seen" to recipients

Payment Data in Local Host

• delete this screen; we will have a single payment list instead

Payment Data Payed (payment list)

• "Search Payment Recipient" -> "Filter payments"
• replace the magnifying glass with the filter icon from the UI kit (the funnel-shaped one)
• clicking the button causes the list to be filtered: show altered styling to indicate that filtering is in effect
• add a "Reset" button to clear the filter and restore the normal state of the list
• add a "Send" button to each row (with send and resend variants from the UI kit)

Payment Data Detail

• not required: please delete

Mail icon

• indicates the number of new payments that will be uploaded to the report host
• replace the mail icon with the top "Filter payments (optional)" icon
• on click: change box contents to just "2 payment records will be sent when the network is available"
• delete the "Hide" button; the user taps anywhere to hide the box

 

Functional requirements: Recipient

Recipient - Home

• delete "Welcome to Open Payment Apps"
• "Incoming connection": rename this to "Available connections" and collapse it into one line; show the number of connections
• "Available connections": the user taps to expand it into a list of available Bluetooth connections from payers
• for each payer, show the person's name, company name (healthcare manufacturer), email address, phone number
• tap on a payer to activate the Bluetooth connection

Bluetooth activation screens

• "Now You connect to" -> "You are connected to"
• replace "Robert de Niro (Company A)" with all of the payer's information from the connection list
• rename the button: "Send Personal Info" -> "Send personal information" (action 1)
• add a new button: "Receive payment information" (action 2)
• add a new button: "Drop the connection" (cancel: returns the user to the home screen)
• delete the "Success Sending" screen
• if the user taps an action button, add a new box labeled "Data transmission in progress"
• show a simple animation (three or four frames) for "Data transmission in progress" with two variants
• variants: send personal information (recipient to payer) or receive payment information (payer to recipient)
• show a replacement box labeled "Data transmission complete" (tap to go home)

Payment Data in Phone Store

• not required: please delete

Payment Data Received (payment list)

• make this resemble the payer's payment list, except without the "Send" buttons

Mail icon

• when tapped: go to a screen where the user can paste in the contents of an email message
• buttons on the paste screen: "Import", "Cancel"

Detail Recorded Payment Data

• rename to "Payment details"
• field 5: make this a special expanding box; the user taps to expand it
• expanded box: show three more fields numbered 2, 3, 4, 5 (random contents: Lorem ipsum)

 

Branding and styling requirements

No corporate logo is required. The application title is simply "Open Payments".

Please use the following elements from the attached UI kits:

• 1: green variant is the main style; use green on white, not green on blue; use icons from this UI kit
• 1: for the payment list, use the layout shown at upper right in the blue variant ("Jackblack longnamus")
• 2: replace dropdown lists with flyout, e.g., "Primary Type" on screens 07 and 08
• 2: optionally use colors of the large buttons, e.g., screen 03
• 5: optionally use the "List selection" input concept, restyled to your taste, instead of radio buttons

Our web app must comply with Section 508 to accommodate people with disabilities. For example, areas of low color contrast must be avoided. Please review the attached Section 508 compliance plan.

 

Target audience

• an employee of a healthcare manufacturer: emphasis on a powerful, professional interface
• a physician: emphasis on an easy, streamlined interface

 

Judging criteria

Functionality: Are all requirements covered?

Aesthetics: Is the styling attractive and appropriate for each type of user?

 

What to submit

Submission: PNG images of your storyboards.

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