Member Navigation Redesign, Blue Shield of California
As the UX lead on the Cerulean Design System, I led the member navigation redesign end-to-end. I collaborated closely with M. K. Cook, Visual Designer, and Grace Lau, who worked on the member portal information architecture.
Project Purpose
The current navigation does not meet members' search needs and is a major NPS detractor. We improved the visual representation on the information architecture and member search preferences through research and a visual uplift using the cerulean design system.
2024 Digital Goals
Redesigning the member navigation will support the digital strategic vision of simplifying healthcare interactions, building ongoing trust and outperforming competition with digital delight.
UX Research
I conducted 100+ userzoom studies. Click tests asked users to complete top tasks on the navigation and surveys asked them about their preferences. In addition, I leveraged competitive research done by the content team while redesigning the member IA, google analytics reports from the customer experience and analytics team and other advanced research conducted by our master usability specialist.
Key areas of research
- Search
- Log in/Register
- Portal links (links to the provider, broker, employer portals that are in the upper right corner)
Current member navigation
Search
What we do well:
- Search label
- Schematic icon (an illustration with less detail speeds up recognition)
- Positioned in upper right-hand corner
- Use a growing search box
- Don't isolate or crowd search
What needs improvement:
- Use plenty of contrast so the icon stands out from the background and surrounding elements
In researching search, we learned what users do 1st and 2nd to find information on a health insurance website
- 63% use the menu
- 51% use search
Layout
How might we improve the navigation layout to support these search preferences and best practices?
- Logo stays on the left because it supports brand recall.
- Search stays in the upper right-hand corner, where users look for it, with increased color contrast.
- Menu items move directly before search to support member preferences.
Current member navigation
UX Recommendation
"I like the search option on the right side. We read left to right. After reading the headings, if I don't see what I want, the search bar is next in my line of vision."
Participant survey response
Log in/Register
Why move "Log in/Register" and make it a text link?
- Creates more space in the main navigation area.
- Grouping the portal links with the "Log in/Register" makes sense contextually.
- The text link fits better in the utility navigation and does not affect users' ability to find the "Log in/Register" action.
Current member navigation
UX Recommendation
Portal Links
19% more participants were able to find the portal links by grouping them with "Log in/Register" and adding "For...".
Current member navigation
UX Recommendation
UX Recommendations Overview
- Increase search visual contrast to align with search best practices.
- Move menu directly before search to support member search preferences.
- Group "Log in/Register" with portal links and add "For..." before portal links to improve visibility.
- Remove "Increase text size" to reduce clutter. This can be done in the browser.
- Move "Pay my premium" to the left side of the utility nav to maintain visual balance.
- Make navigation "sticky" on scroll so menu and search are readily available to users no matter where they are on the page.
Current member navigation
UX Recommendation
Visual Design
Points of focus
- Update visual style to match new brand, with a fresh and friendly aesthetic, making it unencumbered for users.
- Mimicking the button shape gives the navigation, the main point of wayfinding and initial engagement on the site, a clickable status.
- Accessible with a clear visual hierarchy.
Current member navigation
UX Recommendation
UI Design
Page Examples
_Claim%20details_1.svg)
Authenticated on light background
Authenticated on dark background
Shortened sticky navigation
Navigation Variations
Bare navigation
Find a doctor navigation
Promise microsite navigation
Medicare microsite navigation
Impact
NPS digital web driver YoY performance (Q1 2025 - Q1 2024)
- +2.7 pts (+24%) for "Find info on website"
"Website is easier to navigate than your competitors (Aetna). Support staff is responsive on the phone. A much smoother experience than prior years (with different companies)"
NPS: 9, Find info on web: 10, 0-6 months tenure
"Haven't had any issues getting a response from customer service. Very helpful. It's nice speaking to a person vs a chat bot. Website wonderful. Very simple."
NPS: 9, Find info on web: 10, 0-6 months tenure
"I value having a Blue Shield of California PPO becuase it allows me to see UCLA doctors for my ongoing care. I'm grateful for the coverage I have and thankful I can have this policy through Covered California. The Blue Shield of California website is easy to navigate."
NPS: 10, Find info on web: 9, 6+ years tenure
What's next
- Gather data to measure impact and iterate based on user feedback
- The cerulean member navigation component has been built in all three codebases, but still requires iterative development to implement all elements of polish
- Adopt navigation component on all member sites: main site, medicare, promise (medi-cal), IFP, FAD
- B2B navigation redesign