Premera Blue Cross Redesign

Lead UX and UI Designer for the rebrand and redesign of the Premera Blue Cross website

Overview

Opportunity

At Premera Blue Cross we are on a mission to make health insurance work better by simplifying a notoriously complex landscape for our users, building trust along the way. 

Phase 1: Rebrand

• With very minimal development resources alotted, updating the website with fonts, colors and photography to align with a new brand identity

• Improve site accessibility with color contrast updates and page structure fixes that improve the experience of those using assistive technologies

Phase 2: Redesign

• Migration from Bootstrap to Material Design

• Information architecture overhaul

• Full page layout redesign based on user research and testing

My role

Over the past year I’ve been a lead UI and UX designer on this broadly-scoped project. I've also done the majority of the research and usability testing thus far. I've worked closely with marketing, product managers, front and back-end developers, and other UX designers on all phases and components of the roadmap. 

Tools: Illustrator, Sketch, Photoshop, Axure, Confluence, Usabilityhub.com

Process: Agile

Phase 1: Rebrand. The nitty-gritty

Research

To orient myself to the insurance landscape I did a deep dive into our competitors as well other similar industries like the financial sector. I wanted to see how the sites were structured, what colors they chose and how they used visuals to reflect their brand. 

Competitive analysis

I did analysis of competitor colors, page hierarchies and featured content in order to understand how Premera compared. 

What do users want?

Next I dug into the user data on our site via click tracking and page traffic. I also mined the feedback we regularly collect through Premera's innovative program "Premera Listens" where feedback from users is gathered on a regular basis in order to make regular and data-driven improvements to the customer experience.

Note: Some of the data I gathered during this exercise is proprietary and I won't be sharing here in my portfolio. I would be happy to go into further (appropriate) detail in person. 

How do we optimize the site for accessibility?

This is a personal passion for me. I studied the WCAG 2.0 (Web Content Accessibility Guidelines) along with numerous accessibility resources to understand how best to incorporate accessibility updates with the brand refresh. Along with a colleague we also presented this information to our design team in an effort to reinforce accessible principles throughout all design at Premera.

Design

Constraints

• Changes to the site during Open Enrollment must be minimal (October-January)

• Development resources are prioritized on projects throughout the rest of 2017. Any support we needed would need to be restricted to CSS updates or could be done through our CMS and we need to leverage existing Bootstrap components

• Our current CMS is outdated although we're working on updating to a new system

• Many site pages contain content owned by various stakeholders at Premera. Our hypothesis is that our testing will prove that we'll need to make major changes, sometimes omissions, to better support user goals. We need to reserve political capital for this effort to when it is truly needed and can be thoroughly backed by user data. 

Test

I tested brand updates and minimal page layout changes against top tasks both on the original site as a baseline as well as the rebranded site with minimal layout changes. The goal was usability would remain as-is or better.

Testing highlights

• Users are confused about where to find their information and "Member Services" is too broad. Users need help getting to their personal data and encouraged more to log-in or create an account. We can do a better job of making this easier and proving the value of an account.

• If we don't make it easy to find user information they call us. Calls take a lot of time for the user as well as Premera. We can do better at providing self-serve information.

• FAQ pattern needs more work. Headings are confused as buttons. Accordions and "See more" pattern needs more usability testing.

• Cards are successful places to feature top tasks

• Users REALLY want to search

Adjustments: Trial and error

When we began the project accessibility was a goal but we didn't fully understand best practices. We began with a set of brand elements that were optimized for print, not for the web and we needed some time to translate. We made some adjustments: 

• Initial color choices did not pass WCAG 2.0 minimum contrast ratios so we had to make adjustments

• Made the navigation gradient darker

• Changed background and hover colors to pass accessibility contrast standards

• Adjusted font weights to visually balance the type and to create better contrast for the links

• We added additional site functionality (tab focus, “skip to content” accelerators etc.) to improve the accessibility of the site. 

• Working with web publishing we fixed headline tagging to ensure proper page structure as well as allowing assistive technologies to provide in-page navigation.

• Adjusted the type scale for better information hierarchy

• Update soon: Based user testing and user goals, adding cards that more quickly allow users to get to top tasks 

Rebrand results: Before and After

Phase 2: Redesign. What's next? 

This part of the project is in-progress and has not been released to production so I am not able to provide visuals. Here's what we're up to:

I'm on a team who is:

• Doing a deep analysis of the Information Architecture of the site.  Work is still in progress.

• Large scale redesign using Material Design as a base but customizing for our particular product

• Creating a flexible, template based and shared design component system based on mobile-first and accessibly principles

• Fleshing out photography and illustration on the web (linked to Illustration project)

• More gracefully implementing the brand elements on the web. For our initial implementation we recognize it was a bit of a shoe-horned effort. Starting from the ground-up on the site will allow us to do be much more successful, improving trust and credibility with our users.

• Continuing to improve accessibility

I'm specifically responsible for:

• Designing new cards and components for the site based on Google Material Design

• An updated type ramp and headline tagging system that allows for design flexibility as well as accessibility

• Taking our accessibility improvements to the next level. Testing with screen readers and eventually directly with users.

How do we know we've succeeded?

• Our usability rating based on user testing in the top user goals is rated an "A"

• Users determine our website is highly affiliated with our brand attributes

• Users determine our print, web and mobile experiences are brand consistent

• Not only are we WCAG 2.0 compliant but users using assistive technologies determine our site is highly accessible

See other projects: