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. 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
Usability studies showed the experience felt cluttered, with payment options appearing disconnected and felt overwhelming.
Hierarchy of price is lacking
Participants mentioned that the price seemed a bit lost and sometimes was overshadowed by financing next to it.
Need to elevate add-to-cart CTA
The add-to-cart CTA visually meshed with the price block lacking contrast, instead of standing out.
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?
Analytics
Utilized analytics (click-through rates + engagement data) collected from current price block to pin point areas that have low engagement
Market research
Conducted a heuristic evaluation 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.
What are we seeing in the market today?
I conducted a competitive audit of Sleep Number, 6 competitors and 3 other companies to see how their price blocks are designed for their hero products and their secondary-level products.
Blurred for confidentiality
Findings from competitive Audit
In all of the examples, the CTA is given extremely high contrast compared to the background color.
Majority placed price directly above the CTA to communicate relation to add-to-cart action.
Split on whether financing info is placed above or below CTA.
When paired with financing, price was prioritized. Typically placed above with stronger visual hierarchy.
Majority kept other financing + other ways to pay below the CTA in one area (sometimes condensed into a modal).
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.
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.
Adapt questions based on account type
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.
Keeping main area price related helps
Including non-purchase/price information in the price block dilutes its purpose; secondary content should be placed outside to maintain focus.
PROCESS
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
Usability testing and feedback from team
Testing both of the versions with the drawer version being open by default saw positive interactions in both. The clear winner was the drawer version since it significantly increased visibility of options, while giving customers the ability to hide the options.
SOLUTION
The drawer variation was selected through team discussions and usability testing, then validated in an A/B/C test against the control. The winning version placed financing below the CTA within a collapsible drawer.
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.
During the test, financing application rates saw a slight reduction, but add to cart and conversion saw considerable increases.
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.