My Role: Full stack UX
Date: May 2024
Medium: Website
Tools: UserTesting, Figma
The Project:
Dickies approached the UX team to improve their pricing displays.
I conducted research find out why users were frustrated by their pricing displays, and then used those findings to design the improved experience.
Project Goals:
- Discover root of user frustration
- Account for all 7 pricing scenarios
- Improve overall pricing UI
The Problem:
Dickies customers were confused and frustrated by the way pricing was displayed on the site. For example, there were ranges in red that implied that a whole listing would be on sale, and when they landed on the product page only a select few items would actually be discounted. Working with the brand team, we discovered that there were 7 different pricing scenarios and they were all being shown in the same way.
The Process
Competitive benchmarking:
- Unmoderated test
- Users explored pricing on Dickies and two other sites
- After viewing and giving feedback on each display, they then compared and contrasted the experiences
- This helped us understand the specifics around what people need to understand price displays
Findings:
- Users prefer being able to see price variations on a PDP without having to click through colors to get answers
- It is especially frustrating for users if they have to select both color and size to see the price
- Seeing price/messaging in red draws people in
- Ranges can be confusing
- People want clearer messaging/labels to explain what everything means
- It is especially frustrating for users if they have to select both color and size to see the price
- Seeing price/messaging in red draws people in
- Ranges can be confusing
- People want clearer messaging/labels to explain what everything means
Design Iteration & Prototyping:
I took the learnings from the competitive benchmarking and a high fidelity mockups with different types of price displays. I wanted to get more specific and understand what resonated with people, and how I could build on that for the final product.
Usability Testing:
- Users were shown the above price displays and asked to explain what each one communicated
- One question wanted to answer was whether or not people differentiate between sale and clearance
Findings:
- Users do understand the difference between sale and clearance
- Users wanted to see specific messaging about sale vs clearance, and whether it was all or some of the listing items
- Having specific information about what a listing contained helped people decide whether or not they wanted to go to that page
Final Design
With the test findings, we found that specific messaging was the key to understanding what price displays meant. With that in mind, we opted to create a design for each pricing scenario:
