OVERVIEW
Sleep Number’s PDP price block is a key piece within the purchase journey where customers evaluate cost and affordability. I was tasked with redesigning the price block area to improve clarity and support funnel progression.
YEAR
2025
ROLE
UX Designer
TEAM
1 Developer · 1 UX Manager · 1 UX designer (Me)
TOOLS
Figma · UserTesting
PROBLEM
Usability studies showed the original price block felt cluttered and overwhelming, although exact pain point weren't defined. The redesign focused on clearly communicating price, financing, and promotions while strengthening the add-to-cart CTA to improve funnel progression. Scaling to support additional financing options without increasing complexity.
Cluttered information display
Previous studies showed the experience felt cluttered and overwhelming, bottlenecking decision making and scalability.
KPIs to keep in mind
Primary KPI = cart addition rate Secondary KPIs = PDP conversion rate and financing application rate
Constraints
Solution needed to scale consistently across hero (mattresses) and non-hero products (bedding and furniture).
Previous Price Block (Mattress)
Previous Price Block (Bedding)
RESEARCH PROCESS
How should we design a price block on product description pages for price-conscious customers who want to find key information like price and financing in a way that is visually clean and sets clear hierarchy for price and the add-to-cart CTA?
Unmoderated usability study
Goal: Identify pain points across the price block on hero and non-hero PDPs and understand how users process price and financing info.
Market research
Conducted a competitive audit of competitors and Sleep Number to ID best practices and common price block info communication patterns.
A/B/C Testing
Conducted a test using current and two other redesigns to evaluate their effectiveness in key shopping funnel metrics.
INSIGHTS
Our current price block
Conducting an audit on the price block reveals reason why participants and customers were noting this area as feeling cluttered and overwhelming.
Price and financing info given same font weight and size, which competes for attention and clutters the screen.
On display store location link placed awkwardly below CTA and purchase related information.
Other ways to pay far away on the bottom, reducing its impact and seeming unrelated to the price block entirely.
Who are we designing for?
Before conducting some usability research I wanted to understand who we were designing for to give me context to help guide research and design thinking.
Recorded unmoderated usability study
I conducted an unmoderated usability study with 12 people split between hero and non-hero products aimed to determine where issues are appearing within the price block across mobile and desktop for hero and non-hero PDPs. Understand how users are digesting key info such as price and financing.
What were people saying about the current price block?
What are we seeing in the market today?
A competitive audit of 10 brands revealed consistent patterns: price placed above a high contrast, isolated CTA with stronger visual hierarchy over financing. Financing was nearly universal but split evenly above and below the CTA, with some brands using modals to reduce clutter. Promotions were most commonly represented through a strikethrough paired with a contrasting color for the discounted price.
Blurred for confidentiality
Key findings
Clear hierarchy is critical for decision-making
When price and financing share equal weight, it creates cognitive overload competing for attention and making the block feel cluttered.
Strong CTA contrast is essential for progression
Low contrast and visual noise caused by multiple color variations reduce the visibility and effectiveness of the add-to-cart action.
Keep financing and other ways to pay together
Key elements like other financing options and “other ways to pay” were poorly placed, making them feel unrelated to the purchase flow and out of place.
Keep the price block info related to purchase
Including non-purchase/price information in the price block dilutes its purpose; secondary content should be placed outside to maintain focus.
PROCESS
Most common structure found
Using market and best practice research, I defined a standard price block structure based on common patterns. Key areas for exploration included financing placement (with price vs. below the CTA) and how to condense additional payment options.
Explore concepts to condense other ways to pay and finance
Based on discovery research, I explored placing the primary financing option with price vs. below the CTA, while testing ways to condense additional payment options through a modal or collapsible drawer.
MODAL APPROACH
DRAWER APPROACH
Which version was favored by users and stakeholders?
Both versions allowed users to successfully complete tasks, but the drawer approach enabled faster information consumption without requiring an additional click. Users didn't find it overwhelming, and stakeholders favored it for its immediate visibility of financing options and stronger communication of affordability.
High-fidelity Designs For A/B/C Test
Once I knew which direction to take after receiving findings and feedback I created high-fidelity designs that connected with the design system and used to communicate asks to the engineering team.
SOLUTION
A/B/C tests concluded that the version containing the other ways to pay drawer with main financing placed within it won over the control and other test version.
OUTCOME
The redesign of the price block for product description pages was a success, proving to win against the current version and scaled to 100% of experiences on production.
Impacts showed financing application rates saw a slight reduction (could be as a result of us simultaneously testing Affirm), but add to cart and conversion saw increases at significance.
Further testing will be done to see if the experience is better when the more ways to pay drawer is opened vs closed as updates come through.