Price System

Create a consistent price guide for all channels and platforms

Project Brief

Price is one of the most critical elements on a deal page, but we didn’t have a standardized pricing framework. Each inventories can have different pricing frameworks, which makes the price system hard to maintain and scale to new features. In this project, I took a lead role in building a consistent pricing system.

  • 1 Designer (Me)
  • 1 PM
  • Cross-platform Engineers
  • Design System
  • Visual Design

Step1: Collect All Cases

Price is part of the deal option and it won’t live alone, so I defined the price system under the options framework. In this step, I collected option layouts from 3 channels (Local, Goods, Getaways) and 4 platforms (iOS, Android, mobile web, desktop) as the image below.

Image placeholder

Step2: Analysis

After collecting existed option layouts, I categorized them into two types:

  • Option Unit - can have multiple price units
  • Compound option - single price

As you can see, each option type had subtle differences between platforms. The goal was to make them consistent, so here are 5 components should have in every option:

  • Option title
  • Strikethrough price (MSRP price)
  • Discounted price
  • Discount percentage badge
  • Additional info (usually is the social proof message)
Image placeholder

Step3: Create Patterns

Version 1: Extend existing Layout

In this version, I defined the standard layout by reusing one of the current layout. Also, I moved the radio button to the left top corner to make sure the selection is always clear to the user.

  • Fast to build: reusing existed layout so it will take a shorter time to build
  • Scalability issue for long text: the layout can break out easily when translating the additional info to languages such as Italian and German.
  • The extra saving message is disconnected: Different alignment makes extra saving price and its message looks unrelated even though they are using the same color..
Image placeholder
Version 2: Scalible Layout

To solve the long text and the extra saving message’s disconnection issues, I proposed this new alignment to refine the system.


  • Smoother eyes flow: the eyes don’t need to jump between right and left side. It has better readability.
  • Scale to different length of text: the flexible full-width layout can fit long text without breaking the layout.
  • Better grouping: the extra saving price and message are closer. It helps the user to understand the meaning better.
Image placeholder

Step4: Extra Savings Content Improvement

When the first time I saw extra saving deals, I was confused. I didn’t know what did “Extra $10 Off Ends 11/15” means. Have I received the savings or not yet? Later on, I found I was not alone from the user interview sections.


  • Confused message: user get confused whether extra savings applied on the red price or not
  • Disconnection: it’s hard to connect the extra saving sale message with the price (this has been addressed in Step 3)
  • End date is less impactable: the sale ends date is less urgent and unclear to users about when is the exact ended time
  • Repeated messages: the extra saving message is called out in three different places on the same screen
Image placeholder
Create three time periods
Image placeholder