Background
At Blue Shield of California, I lead all visual/UI design initiatives for the user experience team. It was evident as soon as I joined the team that our current UI and visual language needed a complete overhaul. We had inconsistencies across all of our sites which created a broken experience for the user and made us look less trustworthy. They also had an overuse of blue and too many CTAs, so it was hard for users to find primary calls to actions, as well as disparate navigation, layout grids, IA, iconography, typography and photography.
My task was to create a new, future thinking look and feel and codify the new design language in a design system. You can learn more about the design system here. Not only did we need to have more parity across our web experiences, but we also needed to adhere to brand guidelines. I was able to push as much as I could to work within those guidelines and still create a fresh, modern experience for our users.
Ultimately, we wanted users to feel our web experiences were safe, trustworthy, modern, human and honest. Below are three examples of what we’ve achieved so far.
Medicare shopping
The Blue Shield Medicare shopping experience was a fragmented one that consisted of an externally hosted/designed microsite that did not have a consistent UI or centralized call to action. Our UX research team also got feedback that the fonts were too small for this age group.
My goal in rehabilitating this experience was to first bring it under Blue Shield’s primary domain and then streamline all visual elements so that the user has a unified experience that addresses any previous painpoints.
Where we started
Our starting point was a standalone microsite that was created by an external agency. Some initial quick wins I saw here was transforming the nav to look like it’s part of our main member site, not using yellow text on a white background for the phone number (this is inaccessible for people with vision impairments per WCAG 2.1 contrast rules) and simplifying the calls to actions.
This site also used blue heavily which detracted a user from the primary call to action and the typography is all over the place.
The solution
In addition to adding new features to make understanding Medicare and finding Medicare plans easier for users (like increase font size, a new nav, mega menu), we were also able to create a streamlined look and feel that uses color intentionally and keeps things easy to scan and understand.
Everything in this new Medicare shopping experience was reimagined from the ground up. We’re using a simplified color palette, new typography that aligns more with our current brand, more intuitive and prominent inputs and an overall modern aesthetic, all from a mobile-first perspective. All of this is using components and styles from our future state design system, showing how easy it will be to roll out additional updates to the remaining Blue Shield web products.
Everything in this new design passes WCAG 2.1 accessibility guidelines, making it a seamless, frustration-free experience for users of any age.
Member Message Center
The Message Center is part of the Blue Shield member dashboard where members get important messages about claims, billing, benefits and promotional messages.
Where we started
The existing message center had a dated looking UI and was hard for users to distinguish what folder they were in due to all of the folders and icons having the same weight and color.
The filtering component was also too large and distracted from the messages.
Finally, there were requests for users on desktop to be able to see a message’s content without having to go to a different page. Below is a screenshot of what the old message center looked like.
The solution
Starting with a mobile first approach, I worked hand in hand with the interaction lead to rebuild the Message Center experience from the ground up.
Some of the biggest improvements we made here were creating a color-coded system for wayfinding that enabled a user to easily identify which folder and type of message they were viewing (eg: Claims is yellow, Billing is green, etc.).
We also minimized the overuse of blue within the UI creating a clean, modern aesthetic, while also ensuring that a user’s eye finds blue UI elements as actionable and important.
We were also able to show the message panel next to the list of read and unread messages so the user is never taken to another page. Below are some example screens of what the redesigned Message Center looks like.
Moving forward
The next generation UI and experience design for Blue Shield’s digital products is just getting underway. I have plans to roll out the new UI to the rest of Blue Shield’s web products, as well as building out a new look and feel for our native iOS and Android apps, including their own design systems.
More designs will be posted as they become available. Stay tuned!
