GoodRx Core-funnel redesign
Role + Team Structure
Teams involved
Discovery SEO
Core-funnel product team
Front-end platform team
Web-view dev team
My role: Design lead and Design system builder
Project Objective: Adopt Native App’s design language system onto the web platforms
Timeline: 11 weeks
GoodRx product rebrand in 2020
Many initiatives were going at full speed in mid-2020. GoodRx product rebrand was one of a major significant success.
This new ‘look and feel’ has a code name ‘Matisse.’ Which later became the Matisse react library and the web design system I was leading on the platform team.
Overview
Many initiatives were going at full speed in mid-2020. GoodRx product rebrand was one of a major significant success.
This new ‘look and feel’ has a code name ‘Matisse.’ Which later became the Matisse react library and the web design system I was leading on the platform team.
Purpose
The ‘Matisse’ design system spans across mobile and web. But since it was initially designed for the native react, converting that to a web react system is a considerable undertaking, let alone that most of our pages were still adaptive.
This is merely the beginning to closing that gap and cleaning up old tech debt.
Goal
Our goal for bringing Matisse to web is to unify our web development technologies and design delivery as we adopt and evolve the front-end stack.
What’s Core-funnel and why starting here
The core funnel consists of the drug pricing page and the drug coupon page. The combination, at the time, was the leading revenue generator of GoodRx. Internally, we’ve done numerous usability testings, which gave us solid insights on where and how to start.
About 53% of the homepage visitors proceed to the price page. 23% of that traffic moves forward to viewing the coupon page, and about 6.1% of that 23% make final coupon claims. This is significant for an app that maintains 4.4 million monthly active users.
Focusing on desktop users
Desktop coupon accounts for 37% of the overall coupon claim rate. Considering the conversion rate being so high, it shifted our original plan to a mobile-first approach.
While planning for the redesign, we also want to leverage this opportunity to clean up our legacy web patterns and build a true responsive web react library.
Taking a look at the drug pricing page prior to the redesign
Effectively approaching a redesign
Pilot project to A/B test to validate the primitives adopted from the native app.
Using this to test the water to assess the timeline on building atoms to implement into a product page.
What does success look like?
Success would be no negative impact on coupon claims conversion events.
Roadmap planning + timeline
Q4/2020 – Q1/2021
Q4-Q1: Supporting Routing, Analytics (Segment), and A/B testing (Optimizaly) functionalities. (Eng lead)
Q1: Drug pricing and drug coupon pages designed with Matisse react and ready for partial implementation in Q1. (Design lead)
End of Q1: Matisse react system built in Storybook and the corresponding design components in Figma (Design + Eng lead)
Timeline
Design: 1 sprint (2 weeks)
Implementation: 1 sprint (2 weeks)
Active testing time: 10 days
My involvement
Solo design
Work with PM to identify edge cases and concurrently forming an A/B test plan.
Work with eng to ensure my design would not change any interaction pattern
Re-skin with design tokens
Design and implement a temporary drug pricing page utilizing 100% Matisse primitives (colors, type styling, spacing, corner radius .. etc.).
Pricing page primitive validating test results
We reached non-inferiority within 2% minimal detectable effect for coupon clicks, non inferiority on actual claims at 4% minimal detectable effect. So we are ready to go full-speed on applying Matisse to rest of the core-funnel.
Moving forward to drug coupon pages
The printed coupon accounts for 29.6% of total coupon redemption rate.
The data leads us to believe that maintaining this mental model in rollout phase 1.0 is crucial.
Design direction one: Another parity design (1:1 token update)
But then…
Sometimes, taking a bet is a pivotal action to success. Because we validated Matisse’s primitives via the pricing page test. We were ready to move forward without the one- to-one parity on coupon page roll-out.
Design direction two: Less risk adverse
In the end, we gained leadership trust to proceed with the following design through our primitive testing and other usability testing results that returned positively.
Learnings and next steps:
The coupon page fully shipped in Q1 and was well received by our users across platforms. The next step for my team was getting full support from our leadership to form a dedicated Matisse design system team and working with all the product teams from different verticals to implement the new DLS.
Other projects
Notifications System Design
The notifications design pattern is notoriously known to be one of the most complex patterns to design. It interlaces with alerts, color systems, platform systems, accessibility, and so on. My approach isn’t perfect but was well thought through and planned. It communicated important matters effectively to patients using the GoodRx platforms, a priority for a healthcare app.
Building an Atomic Design System
Build a design system with product adoption in mind, team collaboration methods, and relative implementation processes.