[Case Study] UX Analysis of the 'Add Direct Cost' Screen
Hey!
Today, I’d like to share my UX analysis of the screen I had the pleasure of redesigning to align with UX principles and enhance user-friendliness. Below, you’ll find the original design I received, along with my analysis that includes the questions I asked to better understand the task. At the end, there’s a video showcasing the interactive version.
Questions that helped clarify the task:
Q: Is the checkbox next to "direct costs are..." intentional, or just a placeholder icon?
A: Just a placeholder icon.
Q: Is the "Type" section (subcoordinator, labour, etc.) a single-select list related to cost type, or can multiple options be selected?
A: Single-select.
Q: In the "direct cost amount" field, is there a default currency, or can one be selected?
A: There is a predefined currency.
Q: Does the "employee" dropdown refer to the person who is "initially paid"?
A: Yes, it refers to the initially paid person.
My design observations:
Conflicting primary buttons: Both the "add cost" and destructive "cancel" buttons are treated as primary actions. This could confuse users into thinking "Cancel" is a safe action. I adjusted the visual hierarchy to make the desired action (adding cost) more prominent.
Lack of "Z-pattern" layout: Users typically read in a "Z" pattern (left to right, down, then left to right again). In this case, the first thing users see is the "Cancel" button, when it should be the section title. I reorganized the screen's information architecture to follow this natural flow.
Order of information: Entering a cost requires effort, as users have to remember the amount. Since people don't like memorizing numbers, I placed the amount field in the first line, following the cost name, so users can input it quickly.
Unnecessary elements: Imagine having to click through a counter from $10 to $10,000. I removed the impractical counter and replaced it with a simpler input. There was also a date select dropdown, which I replaced with a more convenient modal for faster selection.
Reducing text: The "upload the file" description was too long. Users prefer concise instructions, so I shortened it. Additionally, I moved the cost types into a dropdown to avoid clutter.
"Initially paid by" section: The original design used a switch to select the payer, which was confusing as switches are typically for toggling states. I replaced it with a simple select menu for clarity.
Clickable prototype of my solution
Thanks for your attention!
If you are interested in cooperation, please write to me via LinkedIn