Aetna Shop

UI/UX Design

B2C

Web

Mobile

Design Systems

Research

Accessibility

Page Contents

Project Contents

Overview

Research & Discovery

Design System

Mobile UI

Desktop UI

User Testing

Results

Overview
What is Aetna Shop, Buy, & Enroll?
Under CVS Health, the team enhances the Aetna Medicare website to help users shop for insurance plans, compare their options, and convert to enrollments.
Opportunities & Challenges
The existing shopping experience was very outdated and did not translate well to mobile and tablet. It was very text heavy and complex which let to cognitive overload with users and did not use a consistent design system.
My Role
Product brought me on the project to improve the overall UX by helping users reach their goals more efficiently, help the business convert more users to enrollments, implement consistency with the CVS/Aetna design system, and optimize the experience for mobile.
Team
Me (Lead Designer), Product Owner, Content Strategist, Design Manager, Lead Developer, and UX Researcher.
Discovery & Research
1
After establishing project goals and reqs with the team, I conducted a UI/UX audit in Figma of the existing mobile web experience. I documented usability and UI pattern findings/concerns using sticky notes (see above).
2
I compiled user feedback from previous user tests and product owner input. I consolidated the findings into key research takeways and presented them to the stakeholders.
3
I met with the Lead Developer and categorized the tasks into small, medium, and large dev lifts, then prioritized them based on user needs and project goals.
Design System
1
I work directly with CVS Health's large-scale design system called Digital Pulse. It includes color scales, type scales, and component libraries. I manage the implementation and localization of this system for the Aetna brand.
2
I managed foundational library components (stored in Figma) including nav bars, cards, text fields, controls (see above), icons, and buttons.
3
I used the foundations to build a local component library specific to the Aetna shop, buy, and enroll experience using variant components.
4
A look at the plan cards before and after my redesign. Notice how the card components can expand and collapse, and the fact that my redesign reduced the height of the expanded & collapsed states by around 30%.
Mobile Web - Final UI
Informed by the previous steps, I used the local components to design UI mockups starting with mobile breakpoints. I dynamically swapped the states of the components (for example, the plan cards expanded vs collapsed) to create accurate prototypes for demos and user testing. The design system paired with auto-layout saved many hours in building both the hi-fi mockups and the prototypes.
Desktop Web - Final UI
Using the mobile design improvements as a starting point, I expanded out the UI into desktop breakpoints. Desktop and tablet landscape expand to a 2 column layout where filters and plan cards can be used at the same time. Users can also compare 3 plans instead of 2 and explore more plan info at once. Above shows the plan compare feature.
User Testing
1
After the first round of UI designs, I partnered with UX Research and wrote a high level A/B testing plan in FigJam (see above) to compare the existing plan list design with my redesign. I also created realistic prototypes in Figma.
2
We started with a small user base of 8 for a talk-out-loud test to gather qualitative data and gauge user sentiment.
3
Next, we expanded out to 16 users for the unmoderated A/B test within UserZoom. One challenge that users had was comparing plans.
4
Based on the first A/B test, I went back and iterated on the prototypes to emphasize the compare buttons more, make the compare bar (at the bottom) stand out with color, and make all CTAs a hotspot. Next we ran a retest (unmoderated) with 10 participants. Overall results shown in the next section.
Results

7 of 8

Users chose my redesign
During the talk-out-loud test.

15 of 16

Users succeeded
In advancing to the enrollment screen during A/B testing.

8 of 10

Users succeeded
In comparing plans in round 2, a 43% improvement.

40%

Reduction in scrolling
Through plan cards, leading to higher conversions.

5

Star reviews
From users and stakeholders following my redesign.
Back to Top

More Projects

© Mark David Lopez, 2024