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 the user's interaction.
Role
-
Researcher
-
Illustrator
Summary
BSC is an insurance company, which means that they need to constantly convey the feeling of trust throughout their website. Based on various researches that have been done, people have the tendency 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, as long as we don’t gain our user's trust and connection, they are not going to 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 creating highquality drawings to present suggested design solutions. -Organize and document new data. Contribute to the development of BSC brand book regarding illustration’s style and usage guidance.
Research
01- Branding guideline
BSC brand book
“Our member 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
What our audiences pain points: ( based on the user research )
-Images are too dark
-Not friendly looking
-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 the 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 in 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 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.
Exaggerating body features
​
Exaggerated features will help viewers to identify the character's key qualities. Exaggeration is key in character design that helps emphasis certain personality traits.
( exaggeration )
New Design
( 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.
02- 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.
03-Line characteristic
03- 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.
04- Paddings and colors in heavy text blades
Original Design
New Design
-
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
05- Paddings and colors in heavy text blades
-
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.
Monochrome
Web version
Mobile version
Limited color pallete
Black & white
Atomic design
As we all know, the timeline and the budget for most of our projects are limited. Having a atomic design system helps the UX designers to mix and match the atoms to create different scenarios without needing an illustrator. I created two group of illustrations, with 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!
