

Blue Shield Illustration Style
Blue Shield is an insurance company that provides all types of health coverage.
The project is to redesign the landing page to increase user interaction.
Role
-
User Researcher
-
Visual Designer
Team
-
Product Owner
-
Programmers
-
Marketing Team
Company
-
Blue Shield CA
Details in this Case study
Competitor Analysis, User Research, Ideating, Sketching, Mockups, Art Direction, Atomic Design System
Summary
BSC is an insurance company, meaning they need to constantly convey the feeling of trust throughout their website. Based on various types of research that have been done, people tend to have less trust in insurance companies because " they make money out of people’s sickness." We can have the best functions on our website, but as long as we don’t gain our user's trust and connection, they will not use all that "incredible features."
Scope of the project
Identify appropriate tone, detail, audience, and style with reasoning through user research and data. -Understand and incorporate BSC’s design system guidelines in our illustrations. -Produce usable illustration and iconography that speaks to the BSC Brand while meeting user needs. -Creating rough sketches to brainstorm ideas and high-quality drawings to present suggested design solutions. -Organize and document new data. Contribute to the development of the BSC brand book regarding illustration style and usage guidance.
Research
01- Branding Guideline
BSC brand book
“Our members are diverse in age, income, race, geography, ethnicity, sexuality, and gender, and all in a constant pursuit to better themselves and their lives.”
Design decision
Design diverse genders, ages, races for our characters.

BSC brand book
What BSC brand stands for ( positioning ):
"Life is limitless, never stop."
​
Design decision
Characters should present positive and hopeful actions/expressions.

02- User Research
Notes from User's feedback on our survey.
-Images are too dark
-Not friendly looking
-The screen looks cold
​
What our audiences are looking for:
More friendly, warm, welcoming ( several users comments were about the color pallet, they believed that it looks cold and dark. )
​






03- Competitor's Research
One of the best ways that recently most other insurance companies have done was to create a series of illustrations that humanizes their brand. Such as Oscar and Guesto. While making their audience feel personally connected to their brand, using illustrations on the website will make it easier to understand, more trustworthy, and engaging, topping it all up with an overall pleasant experience.
​

Hi Oscar-01




Guesto
​
Exploring Different Styles
01- Character proportions
I tried to tweak the illustrations to give them a little bit of liveliness, not rigid, both in colors and the characteristic of a line, lines have a free form that goes back.

Exaggerating body features
​
Exaggerated features will help viewers to identify the character's key qualities. Exaggeration is key in character design that helps emphasize certain personality traits.





( Closer to the human anatomy )
-
After meeting with the brand team, we decided to go with option one ( less exaggeration ). The brand team suggested that having a proportion close to the natural body can be a better match for our brand since our current brand already has "serious" and "mature" design elements. We want to make sure that these illustrations can be relatable to the other design components.
02- Facial Expressions
Adding face feature/colors
​
-
Pros: helps to emphasize the emotions, therefore, it helps our goal to achieve Connection and intimacy with our audience.
-
Cons: It’s not aligned with BSC current style, in which, they use black and white photos with the look That considered as” serious”. By adding illustration, we are going to tone down that “seriousness”. However, We also need to make sure that we keep the consistency in the overall tone of all the new design elements. We don’t want our illustration to look that belong to another brand.

Removing face feature/colors
​
-
Pros: Helps to maintain the BSC brand’s tone and voice. Maintain consistency with the overall look.
-
Cons: Not using any face features may result in decreasing the connection and intimacy that we are looking for. Also, keeping the colors limited to black and white doesn’t help with the user’s pain points regarding the feeling and the look because of our monochrome branding.

03- Colors

Main color: Blue
​
-
Not the main blue in BSC brand, since it’s the action color in the UI and illustrations are not clickable.
​
We need to have a shade of blue as the main color, to create harmony and provide the feeling of consistency between the illustrations and the rest of the design. ( most of our design components are blue )

Potential solution: adding a warm color to the images as a secondary color
​
-
TBD after the final decision on new UI colors
What our audiences are looking for:
-More friendly ( several users' comments were about the color pallet, they believed that it looks cold and dark.


04- Line Characteristic

05- Redesigning Icons
I tried to tweak the illustrations give it a little bit liveliness, not rigid, both in colors and the characteristic of a line , lines have a free form which goes back.


06- Adjusting Paddings & Colors
-
Increase the padding to help the user’s eyes navigate through the content.
-
White background to add breathing room, It’s especially helpful when we have a large amount of content.

Original Design

New Design
07- Design for Different Screens

-
I explored several designs to find the best solutions for this website. The goal is to help the users easily look through their options at a glance without getting overwhelmed.
Using space mindfully!​
​
-
I used a grid system to make sure that I use all the spaces mindfully to help the audience go through the information without distraction.

Web version

Mobile version



Monochrome
Limited color pallete
Black & white
Atomic Design
As we all know, the timeline and the budget for most of our projects are limited. Having an atomic design system helps UX designers to mix and match the atoms to create different scenarios without needing an illustrator. I created two groups of illustrations, with a limited color pallet and black and white for the A/B test.
Limited color pallete ( main website/application pages )





Black and white ( for blogs and newsletters )








Thanks!



