Dexter Ferguson's Portfolio

Concur Expense Details

 

The Details

This Details section breaks fundamental design principles. A poorly designed form can have a significant impact on the overall user experience, but there are many simple solutions that I propose to drastically improve the usability.

 
 
expense-detail.png
 
 
 

Usability Improvements

vertical-momentum.png

Vertical Momentum
The form spans across 4 columns, non of which are dependent on each other ie. city, state, zip. This makes it challenging for the user to process and disrupts their vertical momentum. I addressed this by making the form one column.


Old Form Fields

Old Form Fields

New Form Fields

New Form Fields

Error State or Required Field?
The red marker used to indicate a required field is not commonly used in data entry interfaces and therefore creates confusion because it is not what the user would expect. Also, it could easily be misinterpreted as an error. To address this I removed the red markers and simply stated which fields were optional.


Payment Details Grouping

Payment Details Grouping

Charge Details Grouping

Charge Details Grouping

Grouping
This page is divided into 4 sections but it is unclear why. A lack of headers makes this design choice feel arbitrary. To address this I added headers to make the form feel less overwhelming and help the user navigate the form quicker.


Old Action Buttons

Old Action Buttons

New Action Buttons

New Action Buttons

Primary vs Secondary Actions
The action buttons that are bundled in a row at the bottom of this section barely differentiate between primary and secondary actions. I reorganized and restyled them to help the user immediately recognize the hierarchy of the buttons.


Final Result

 
 
finalForm.png

The new form should be easier to process. Clearly marked collapsable and expandable sections, familiar formatting, and clear hierarchy of content all contribute to the improved usability of this data entry interface. 

Final Steps

  • Apply the new tile to the Expenses section

  • Review remaining elements of Expenses before moving on to Expense Details