top of page
1472.jpg
mockup.jpg

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.

Screen Shot 2020-12-11 at 3.17.28 PM.png
Research

BSC brand book

What BSC brand stands for ( positioning ):  

"Life is limitless, never stop."

​

Design decision

Characters should present positive and hopeful actions/expressions. 

Screen Shot 2020-12-11 at 3.18.00 PM.png

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. ) 

​

Screen Shot 2020-12-10 at 4.32.47 PM.png
Screen Shot 2020-12-10 at 4.32.47 PM.png
Screen Shot 2020-12-10 at 4.32.47 PM.png
Screen Shot 2020-12-10 at 4.40.31 PM.png
Screen Shot 2020-12-10 at 4.37.21 PM.png
Screen Shot 2020-12-10 at 4.37.21 PM.png

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. 

​

Screen Shot 2020-12-08 at 10.01.50 AM.pn

Hi Oscar-01

Screen Shot 2020-12-08 at 10.24.29 AM.pn
Screen Shot 2020-12-08 at 10.24.29 AM.pn
Screen Shot 2020-12-08 at 10.24.29 AM.pn
Screen Shot 2020-12-10 at 4.48.12 PM.png

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.

Ideation
fd.jpg

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. 

standing.jpg
running.jpg
CHARACTER_2.jpg
CHARACTER_2.jpg
CHARACTER_2.jpg

 ( 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.

face features.jpg

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. 

color and line.jpg

03- Colors 

CHARACTER_1.jpg

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 )

Screen Shot 2020-12-11 at 1.52.26 PM.png

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.

Screen Shot 2020-12-11 at 1.55.04 PM.png
CHARACTER_3.jpg

04- Line Characteristic

Screen Shot 2020-12-11 at 1.51.23 PM.png

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.

Screen Shot 2020-08-12 at 3.13.53 PM.png
Screen Shot 2020-08-12 at 3.13.53 PM.png

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.

Screen Shot 2020-08-03 at 8.19.52 PM.png

Original Design

Blue Shield landing page.jpg

New Design

07- Design for Different Screens 

Final.jpg
  • 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.  

Screen Shot 2020-12-11 at 2.01.52 PM.png

Web version

Screen Shot 2020-12-11 at 2.01.38 PM.png

Mobile version 

Screen Shot 2020-12-11 at 2.00.59 PM.png
Screen Shot 2020-12-11 at 2.01.47 PM.png
Screen Shot 2020-12-11 at 2.01.13 PM.png

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. 

Atomic design

Limited color pallete ( main website/application pages )

atomic design-laptobq.jpg
atomic design-laptobq.jpg
atomic design-laptobq.jpg
atomic design-laptobq.jpg
20-Recovered.jpg

Black and white ( for blogs and newsletters )

atomic design-facer.jpg
sitting.png
07.01.2021_00.35.30_REC.jpg
character18.jpg
character16.jpg
character17.jpg
Untitled-1-Recovereddx.jpg
Untitled-1-Recovereddx.jpg

Thanks!

16.jpg
12.jpg
17.jpg
2921602.jpg
bottom of page