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.

Usability Improvements

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.

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.

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.

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

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