Application Modernization Web App UI Design Challenge

CHALLENGE SUMMARY

Welcome to the Application Modernization Web App UI Design Challenge, in this challenge you will revamp the UI of an existing desktop application and convert it into a modern web based application design. You will be only redesigning a subset of the original application in this challenge.
 

CHALLENGE OBJECTIVES

• Web App Design

• 15 Screens 

• Production-ready UI design

Round 1

Submit your initial designs and any notes you might have for checkpoint review. 

01)  View Administration

01A) View Administration / New view popup

01B)  View Administration / Filter administration wizard (Rules)

02) My Worklist 

02A) My Worklist / Contact Information Popup 

03) My Worklist / Research Segment

- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt

- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your Final submissions

01)  View Administration

01A) View Administration / New view popup

01B)  View Administration / Filter administration wizard (Rules)

02) My Worklist 

02A) My Worklist / Contact Information Popup 

03) My Worklist / Research Segment

03A)Rev/CPT® Code Detail Tab 

03B) Claims History Tab

3C) Professional Claim Tab

03D) Charge Code Details Tab 

03E) EOR Tab

PROJECT OVERVIEW / BACKGROUND

• Our client's mission is to continuously improve the financial performance of healthcare organizations through high-value revenue cycle apps and services. 

• Their current software is a desktop-based app, and the key purpose of this challenge is to redesign the desktop app to a web application with a modern and usable interface.

• The application will be used at hospitals across the US to analyze underpayments and denials from insurance companies.

 

AUDIENCE

The users of the applications are the analysts working at hospitals and clinics analyzing underpayments and denials from insurance companies. The users find the current application complex, and lengthy and would applaud an interface that is intuitive, modern and clean since this is a data intensive application.

 

PERSONA

• John is an auditing analyst who works in the billing and insurance claims department at General Hospital. He finds the application a bit complex, full of excessive information and the lack of intuition of this software causes a strain on his productivity.

 

USER STORY

• Everyday, he comes into the hospital office, opens up the desktop application, and pulls out the latest information on a table-like view after submitting a query form that has a lot of filters to choose from in the application. 

• He can save these queries as Views that load the data every day for him so that he doesn’t have to filter the data every morning manually.

• He sees a long list of columns and rows from which he finds out which insurance did not send them the full payment, against which patient, and what treatment. So he calls up the insurance company to put in the request to send in the full amount.

• The problem with this tool is that it is not very user-friendly, there is a lot of information the tool presents, and using it requires a lot of persistence and experience.

• The other problem is that this is a desktop application and updating this tool remotely is a challenge.

 

SCREENS / FEATURES REQUIREMENTS

 

Important: You can find the screenshots of the existing application here:

https://drive.google.com/drive/folders/1Dc4Q8H48T0EBpj9-LpQ4hOJ7rM5HHAP7?usp=sharing

 

The following are the screens and the sub-screens required to be redesigned for the web in this challenge. All of the following screens should be accessible via navigation.

Please review the existing design to understand how the application flows visually.

 

01) View Administration  - (Reference 01-Views.png)

This screen appears when the user clicks on the View Administration link on the left menu.

•  Create the layout without the popup - like the header and the left menu

 

01A) View Administration / New view popup - (Reference 01-Views.png)

On click of the “New” button on the header, you get this popup

• Adding a new single view requires configuration of multiple things including the basic information (this view), Filter administration, Rules setting for total cost.

• In this “Add view” modal, enter a View Name and Description. 

• The user should be able to update the default limits if needed. Default limits are set on the Account Management Settings screen (out of scope for this challenge). The user can leave the default limits, or choose from dropdown. Once done, the user clicks on submit or next.
   

01B)  View Administration / Filter administration wizard (Rules) - (Reference 01A-Views1.png and 01B-Views1.png)

• Once the user clicks on save in the view above, a new view should appear (either in the same modal or a new one) called the Filter administration wizard.

• The purpose of this view is to add queries and filter the data to build a custom view according to the needs of the user.

• There are two dropdowns in this view. The first one is for selecting the “Rule category” and the other one is “Rule Type”. 

• When any Rule category is selected, the values for the second dropdown (Rule Type) update based on the value on the selected value.

 

01C) View Administration / Rules setting for total cost - (Reference 01C-Views.png)

• Once the user clicks on submit (or next) in the view above, a new view should appear where the user has selected the “Total cost” rule, so we show the user a new modal/view called the Rules setting for the total cost.

• Here, the user can define a range of the total cost

 

02) My Worklist  - (Reference 02-MyWorklist.png)

• Once the user successfully creates a view, you get the My Worklist screen. It displays detailed data for accounts returned as part of a view. It displays patient accounts that are assigned to the auditor. 

• My  Worklist has 2 sections, Top one is the Account view - its a section table which stores generic information on the account level (for e.g Account Number, patient name, etc.).

• When clicked on any row in the first section table, the relevant details are automatically populated in the bottom section table called the Research segment (for e.g claims history, payments & adjustments). 

• Since the data is displayed in a table form, we need to make sure that it is usable and intuitive when redesigning for the web. They should be able to add and remove columns from the table.

• Please show dropdowns for the top toolbar
  -  Actions Dropdown  - (Reference 03-Actions.png)
  -  Modify Dropdown  - (Reference 03A-Modify.png)
  -  Help Dropdown  - (Reference 03B-Help.png)
  -  Search Dropdown  - (Reference 03C-Search.png)

 

02A) My Worklist / Contact Information Popup  - (Reference 04-ViewContactInfo.png)

The user sees this popup, when he clicks Actions and selects View Contact Information. It shows the details of the patient and their insurance.

 

03) My Worklist / Research Segment

03A)Rev/CPT® Code Detail Tab  - (Reference 06-RevCptDetails.png)

• When the user selects an account from the Account view, the detailed information is pulled and displayed in the Research view at the bottom.

• It provides code specific details.

 

03B) Claims History Tab - (Reference 07-ClaimsHistory.png)

• This tab is designed to facilitate the viewing of actual claims and remit information. 

• The tab is divided into two sections: the top portion displays the claims grid and the lower portion displays the remit grid.

3C) Professional Claim Tab - (Reference 08-ProfessionalClaims.png)

• This tab displays the data captured during the import of the 837P files. This tab is designed to facilitate the viewing of actual claims and remit information. 

 

03D) Charge Code Details Tab  - (Reference 15-ChargeCodeDetails.png)

• It stores information of the medical services used, their charge code, and unit price

 

03E) EOR Tab - (Reference 11-EOR.png)

• The EOR (Explanation of Reimbursement) tab provides an explanation on how the expected reimbursement is calculated.

 

03F) Detail Reimbursement Tab - (Reference 12-DetailReimbursement.png)

• It provides detailed information on how the expected reimbursement was calculated.

 

03G) ICD Codes Tab - (Reference 16-ICDCodes.png)

• It provides the ICD code specific detail at the patient level.  Existing codes can be edited and new codes can be manually added to accounts. 

 

03H) Payments and Adjustments Tab - (Reference - 09-PaymentsAndAdjustments.png)

• All transactions for the patient and payers 1-4 are displayed here.

 

03I) Payments and Adjustments Tab / Payment Details - (Reference 09a-PaymentsAndAdjustmentsDetails.png)

• To access this screen, user double-clicks on any of the estimated payment or actual payment fields.

 

EXPLORATION SCORE

In terms of expectations, we would like to measure the concept against the following in the one to ten scales:

• Creativity: 7

  • 1: barely new ideas

  • 10: a utopic product with features not proven to be able to be fully implemented

• Aesthetics: 6

  • 1: low-fidelity design, wireframe or plain sketch

  • 10: finished looking visual design

• Exploration: 8

  • 1: strictly follow an existing reference or production guideline

  • 10: open to alternative workflows/features not listed here that would help the overall application

• Branding: 6

  • 1: don’t care at all about the branding just functionality

  • 10: without a properly branded product there is no success

 

DEVICE SPECIFICATIONS

• Desktop: 1440px Width. Height depending on your design

 

BRANDING GUIDELINES

Colors:

• ���Light Blue: 397fbf 
• Dark Blue: 194d8d
• Orange: faa41f