Introduction
The “Check Drug Cost & Coverage” feature is the most critical tool on the CVS Caremark platform, serving 80 million members. It’s the number one reason users download the app or visit the website, enabling them to find medication pricing and coverage details. Despite its importance, the feature was hindered by outdated technology, usability issues, and legal constraints, resulting in user frustration and increased reliance on the call center.
Redesigning this feature was a massive challenge, requiring the resolution of deeply ingrained issues:
- An outdated database that returned irrelevant or incorrect results.
- Cluttered search functionality, leading to errors and confusion.
- Accessibility gaps that limited usability for members with disabilities.
- Design Tokens for Custom Branding: Utilized design tokens to implement thousands of unique design themes, ensuring seamless alignment with individual company branding.
- Legal compliance requirements:
- Ensured drug cost and dosage details met regulations on display duration and presentation.
- Designed a pharmacy-neutral interface to avoid favoring CVS locations.
- Adhered to strict legal standards for branding, messaging, and price comparisons.
Additionally, the results page presented unique challenges, including:
- Making cost and coverage information customizable, allowing users to adjust dosage, supply duration, and pickup locations.
- Differentiating between generic, branded, and alternative medications to empower users with clear and actionable comparisons.
- Creating dynamic solutions to handle error messaging for uncovered or unavailable medications.
To address these challenges, a dedicated cross-functional team was formed, including product managers, stakeholders, engineers, legal advisors, accessibility specialists, writers, and junior designers. As the UX/UI Designer, I led the research, design, and implementation efforts, developing:
- User personas to identify pain points and user goals.
- Journey maps to map out key user interactions.
- Wireframes, prototypes, and final UI designs to create a seamless, user-centered solution.
The Challenge
- Cluttered and Confusing Search Experience: Users faced significant difficulty navigating the search feature, encountering duplicate entries for the same medication due to varying strengths. This led to frequent errors, user frustration, and wasted time.
- Outdated Technology and Database: A decade-old database caused irrelevant search results, such as non-medical items, and slow performance. The database’s limitations affected multiple departments across CVS.
- Accessibility and Legal Constraints: Compliance with WCAG AA standards and strict legal guidelines for displaying drug cost and coverage information added layers of complexity to the design.
- High Call Center Volume: Users’ inability to find clear cost and coverage details online led to a surge in call center inquiries, significantly increasing operational costs.
- Making the Results Page User-Friendly and Useful: The results page required a complete overhaul to improve usability and support personalized user needs. Research revealed specific challenges users faced:
- Inability to compare cost-effective alternatives like generic drugs, branded options, or alternative medications.
- Difficulty understanding or modifying dosage, supply duration, and pickup locations.
- Frustration with error messages, including better understanding of non-covered medications, unavailable refills, and other notifications related to cost, coverage, and results.
Team Collaboration and My Role
To tackle these challenges, the team operated within an Agile environment, leveraging sprints and iterative feedback loops to stay on track. Using tools such as Figma, Analytics, Miro, and Rally, I collaborated closely with:
- Product Managers & Stakeholders: Gained feedback and alignment on design priorities and ensured business goals were met.
- Engineers: Explained key UX/UI decisions, such as the need for a new database, and addressed technical constraints.
- Collaborative Support: Occasionally, worked with other UX designer to manage workload and provide a second perspective when needed.
- Accessibility Team: Collaborated to ensure WCAG AA compliance and developed solutions for diverse user needs.
- Scrum Master: Coordinated progress and resolved blockers in a fast-paced, collaborative environment.
- Writers and Legal Advisors: Ensured that all content and features adhered to strict regulatory requirements.
While the team supported the process, my role focused on driving the research, design thinking, and implementation of the solution. Using Figma to develop wireframes, prototypes, and final designs, I ensured the designs reflected the end users’ needs while meeting technical, legal, and business requirements. I also communicated effectively across departments, providing clarity and addressing challenges throughout the project lifecycle.
Research Process
User-Centered Insights
My research approach focused on understanding the end users’ needs and uncovering the challenges they faced while using the “Check Drug Cost & Coverage” feature. Key activities included:
- User Interviews and Surveys:
Conducted extensive interviews and surveys with users to identify pain points, such as:- Difficulty navigating the search functionality due to duplicate results for the same medication.
- Confusion around accessing pricing for generic drugs versus branded options.
- Analytics and A/B Testing:
-
- Leveraged Adobe Analytics to identify drop-off points in the user flow and determine areas where users experienced frustration.
- Conducted A/B testing to validate design changes, ensuring they addressed user concerns effectively.
- Accessibility Audit:
Partnered with the accessibility team to conduct a thorough audit of the interface, ensuring compliance with WCAG AA standards.
Identified barriers for users with disabilities, including:- Insufficient color contrast.
- Lack of screen-reader compatibility.
- Inadequate layout design, failing to support accessible navigation.
- Poor keyboard navigation for non-mouse users.
Influencing Key Decisions
Using insights from my research, I was able to drive major decisions that transformed the feature:
- Database Upgrade:
Through extensive analysis, I identified that the outdated database was a root cause of inefficiencies, such as irrelevant or incorrect search results (e.g., non-medical items appearing in drug searches).
Collaborated with engineers to illustrate the database’s impact not just on this feature but on multiple departments across CVS. Presented compelling evidence to stakeholders, which ultimately led to the approval of a new company supplied database. - Search Simplification:
Based on user feedback and competitive analysis, I recommended separating search fields for drug name, strength, and form. This significantly reduced user errors and improved clarity. - User-Driven Solutions:
Discovered that many users struggled to understand alternative medications. I worked with the team to design a clear and comprehensive presentation that differentiated between:- Generic drugs.
- Branded drugs.
- Alternative medications, which often provide additional cost-saving opportunities.
Enhancing the Results Page
- Research-Driven Improvements:
Insights from user interviews, surveys, and analytics revealed significant challenges with the results page. Users struggled to:- Compare options such as generic drugs, branded drugs, and alternative medications.
- Understand cost-saving opportunities and modify their dosage or supply choices.
- Change pharmacy pickup locations or opt for mail-order delivery based on their preferences.
- Dynamic and Customizable Design:
Leveraging these insights, I collaborated with the team to implement the following key enhancements:- Clear Comparisons: Introduced a structured layout that distinctly displayed generic, branded, and alternative medications, making it easier for users to evaluate their options.
- Cost Transparency: Prioritized the lowest-cost options and prominently featured savings opportunities, while maintaining legal compliance.
- Customization Features: Enabled users to adjust supply duration, dosage, and pickup locations seamlessly from the results page.
- Error Messaging: Developed clear, actionable messages for edge cases, such as uncovered medications or unavailable refills, ensuring users had guidance for next steps.
Key Design Solutions
Search Functionality Overhaul
- Simplified Search Fields:
Separated drug name, strength, and form into individual fields, reducing errors and improving clarity. - Addressing Edge Cases
- Designed solutions for long medication names with responsive line breaks.
- Created error states for uncovered medications or unavailable refills.
- Developed alternative medication displays, clearly distinguishing between generic, branded, and alternative options.
Optimized Visual Experience and UI Design
- Design Tokens for Scalability and Brand Consistency:
Utilized design tokens to create a system that supported branding customization across thousands of corporate clients. This ensured consistent visual identity while maintaining accessibility standards. - Pricing Transparency:
- Highlighted the lowest-cost option (often generic drugs) while adhering to legal guidelines.
- Alternative Medication Options:
Designed a streamlined interface that clearly distinguished between generic drugs, branded drugs, and alternative medications, addressing user confusion. - Contributed to the creation of “Northstar Designs”, showcasing innovative ideas and demonstrating the potential of the feature redesign. Select elements from these conceptual designs were integrated into the final output, enhancing the user experience and aligning with business goals.
Accessibility Enhancements
-
- Implemented screen-reader compatibility and keyboard navigation for seamless usability.
- Worked closely with the accessibility team to audit and refine the design, ensuring compliance with WCAG AA standards for all users.
- Conducted thorough A/B testing to validate accessibility improvements.
Results Page Redesign
-
- Clear Comparisons:
Created a structured layout to differentiate between generic, branded, and alternative medications, helping users make informed decisions. - Cost Transparency:
Prioritized the lowest-cost option, often generic drugs, and ensured savings opportunities were displayed prominently, all while maintaining legal compliance. - Customization Features:
Designed intuitive controls that allowed users to:- Adjust dosage and supply duration based on their needs.
- Change pickup locations or switch to mail-order delivery seamlessly.
- Error Handling:
Developed clear, user-friendly messages for edge cases, such as:- Uncovered medications.
- Medications temporarily unavailable for refill.
- Dynamic Design:
Ensured the page adapted to various user needs, such as providing actionable guidance for unavailable medications or highlighting alternative medication options.
- Clear Comparisons:
Results
Quantifiable Outcomes
- 6.82% Reduction in Call Center Inquiries:
This significant achievement not only delivered substantial cost savings for a company with multi-billion-dollar annual customer service operations but also revealed deeper insights into user challenges. The unexpected success prompted further analysis, leading to a better understanding of the underlying problems and driving additional improvements. - Improved Accessibility:
WCAG AA compliance expanded usability for users with disabilities. - Faster Database Performance:
The upgraded database enhanced speed and accuracy, benefiting multiple departments.
User-Centered Impact
- Enhanced usability for 80 million members, including those with disabilities or chronic illnesses, while ensuring compliance with legal accessibility requirements.
- Increased trust in CVS Caremark’s digital tools by delivering transparent and actionable information.
- The success of the redesign and the 6.82% reduction in call center inquiries convinced stakeholders to invest in a backend code overhaul, implementing the features I recommended to fully support the improved design.