Research · UIUX · Branding · Web
Shopping Extension
Re-designing RateX browser extension to help users make the most informed purchase decision and get the most value.
Feb — Aug 2018 · 6 months

Background
RateX is a desktop browser extension that gives users the best exchange rates and auto-apply of coupons to enjoy the most savings. RateX is supported on more than 200 e-commerce sites and has helped 10,000 users to save more than USD$500,000 on online purchases.

Role
I led the redesign efforts from start to launch—working directly with the CTO to define and prioritise features, while working out a roadmap. I initiated a design system across the RateX product and mapped out the navigation architecture of the extension.

Process

Challenges
1. Unfamiliar navigation patterns between each feature
2. Existing visual hierarchy makes information tedious and difficult to process
3. Introduce a new feature — activating cashback for users to enjoy more savings
4. Incorporate new branding identity

Parallel to the redesign of RateX product, I drove the ongoing brand refresh of the company with TheUniverseFantastic. With this in mind;

I explored how a payment product like RateX could take on a new visual identity that conveys greater credibility

No items found.

User observation
We observed how users interact with the extension—with focus on the Payment and Coupon feature. It revealed touchpoints where users experienced the highest frequency of frustrations.

Insights
1. Too much information to digest
2. Users do not explore on a web extension
3. Extension disrupts instead of complementing a users’ shopping flow  
4. Navigation was unintuitive with a bottom tab bar

Nature of extension should not fight for attention with the shopping site itself.

Competitive analysis
Complementing the user research, I deep dived into our competitors. This gave a good benchmark to learn and find our differentiating factor.

Learnings
1. Money-related info is always highest priority—primary concern
2. Clear feedback given for every triggered state—assurance for each action
3. Interaction on extension is a very transactional experience

User journey flow
After breaking down current user flows, I mapped out a proposed flow that was continuously iterated upon.

How might we

Delight users with the most money savings during their shopping journey for them to make the most informed purchase decision

Key features
1. Activating cashback (We call it Clovers)
2. Auto-apply of coupon codes
3. Lowest exchange rate payment at check out

1. Payment iterations

RateX’s payment feature is our differentiating factor. This means it needs to look reliable. We approached the redesign with a cleaner interface, iterating on the hierarchical positioning and arrangement of cost breakdown.

No items found.

Objective

Simplify information for users to scan, process and understand.

Key Considerations
1. Simplify complex info structure
2. Reduce cognitive load when processing details
3. Communicate that users’ savings come from using RateX exchange rate

2. Improved Navigation

From our user research, we found out that bottom tabs were an unfamiliar navigation pattern for users interacting on desktop web.

No items found.

Objective

Make it clear for users when features are available to apply or have already been applied.


User Testing
From user testing, we found that when all features were displayed on 1st level like a menu, it gave an overview which prompted them to tap into it. Navigation across features became more natural.

3. Humanising RateX

Interacting with an extension often feels very transactional. We favoured the idea of having a “RateX shopping assistance” who is excited for best deals and always eager to help users get the most savings.

Objective

To delight our users through the entire RateX experience—from discovery to waiting, from success to failure.

User Testing
During testing, we received positive feedback for this new character. It added a touch of playfulness and users felt like they were interacting with someone rather than a mere extension.

Final outcome
Here's the overall comparison after the redesign.

No items found.

Let’s go back to our initial design statement; How might we delight users with the most money savings during their shopping journey for them to make the most informed purchase decision?

1. We humanised the extension with a shopping assistance—Communicative tool with our users

2. We removed visual clutter to make it easier and faster to process —Beyond aesthetic purposes

3. We restructured our navigation pattern to give an overview of all savings available and applied—Assuring users before purchase

Measuring Success
1. Adoption of cashback
2. Increase in coupon codes applied across all checkouts
3. Increase in payments made on RateX

Reflection
We successfully relaunched! This redesign was an outcome of a close collaboration between one engineer, the CTO and myself. Dabbling my hands into product roadmapping, feature prioritisation and impact sizing was a good learning experience.

Next, I learned that the nature of a desktop extension is disruptive to a users’ natural flow.

The key is to be intentional with our disruptions; some disruptions are necessary, but they can be delightful in delivery.


Finally, the challenging part of any redesign tasks is always to break down the existing product—to inspect and probe into each touchpoint, to discover the initial intentions and validate preconceived assumptions.

What could be done better
1. Planned for data tracking within the user flow
Lack of in-depth planning to measure the conversion and click throughs to help inform the next iteration. The redesign could have given us a better data-informed comparison

2. Testing the contrast and readability.
Upon evaluation, colours used were too faint while some fonts were too light, affecting readability for our users.

Back to to the top ↑