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.
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.
After collecting existed option layouts, I categorized them into two types:
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:
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.Pros:
To solve the long text and the extra saving message’s disconnection issues, I proposed this new alignment to refine the system.
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.