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.
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.
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;
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.
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
Complementing the user research, I deep dived into our competitors. This gave a good benchmark to learn and find our differentiating factor.
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
1. Activating cashback (We call it Clovers)
2. Auto-apply of coupon codes
3. Lowest exchange rate payment at check out
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.
1. Simplify complex info structure
2. Reduce cognitive load when processing details
3. Communicate that users’ savings come from using RateX exchange rate
From our user research, we found out that bottom tabs were an unfamiliar navigation pattern for users interacting on desktop web.
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.
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.
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.
Here's the overall comparison after the redesign.
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
1. Adoption of cashback
2. Increase in coupon codes applied across all checkouts
3. Increase in payments made on RateX
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.
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.