SITUATION_
The GoodRx website was built by multiple product teams with their own objectives, priorities and IA approaches. This led to disparate navigation solutions across the site, creating problems for our users, our product team, and the business as a whole.
FOR THE USERS
Our users had trouble navigating the complex IA, confusing interactions, and inconsistent UI, leading to drop-off and abandoned sessions.
FOR THE BUSINESS
Our stakeholders wanted to properly communicated the variety of products and offerings available to customers, using the new branding look-and-feel.
FOR THE PRODUCT TEAMS
Our product teams were lacking a universal “source of truth”, which created repeat work, miscommunication, and inefficient processes for updates and changes.
SCOPING_
BUSINESS REQUIREMENTS
As the lead designer, working with a content strategist, I started tackling these problems by aggregating the following requirements from each of the siloed product team; Savings, Health, and Care.
Build on existing nav work
Maintain existing IA structure
Be flexible + scalable for both content and screen size
Include secondary brand wordmarks and new branding
Support secondary sections and tertiary links
Deliver a complete dev-ready technical spec
Include promo CTAs for upselling, deals, announcements, etc.
COMMUNICATION & VISIBILITY
We set up bi-weekly check-ins to keep each team up-to-date with our progress, gather feedback as we worked, and help foster a more collaborative cross-team environment. This created more buy-in from each team, and increased visibility across the business as a whole.
This approach helped us to identify areas of conflict around technical implementation and contradicting IA, and helped us work on the compromises and solutions needed to meet each team’s unique goals.
RESEARCH_
USER JOURNEY MAPPING
We gathered user research and feedback from across the business to map a user's journey through the different GoodRx products and better understand how the current navigation solutions were failing our users.
This exercise helped us understand that users often felt overwhelmed by too many menu options, were willing to interact and find what they needed, and how too many moments of friction were slowing down their experiences.
COMPETITIVE RESEARCH
I gathered around 20 references from competitors and best-in-class experiences to better understand common navigation patterns and solutions for large and branching IAs.
We looked closely at products with separate sub-brands and complex mobile menu patterns to gain inspiration and provide functional examples to help communicate our vision to our stakeholders and product teams.
GOALS_
We synthesized our research, business requirements and brand values into a four core principles to guide the design process, communicate our goals, and create definitions of success.
DESIGN_
DELIVERY_
CONTENT GUIDELINES
We created a high-level breakdown of each content section to visualize which elements would require input from the product teams and communicate the different responsive behaviors and interactions across screen sizes.
DESIGN SYSTEM
For the final delivery to the design system team, I created a documentation system that leverages the language and organization of the GoodRx Design System but includes detailed information on the possible user flows and states that could be experienced while navigating the website. This system covered all possible responsive screen width states, and defined the new components and variants needed for final build and delivery.
