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
What's next
- 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, IFP, FAD)
- B2B navigation redesign