Blue Shield Landing Page
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
-
UI Designer
-
Illustrator
Design Goals
​​
-
Creating an extensible design system shared with all the teams
-
Discover the main pain point of our target market and test possible solutions with prototyping and testing
What can be improved in the current design?
​​
-
Rythem and harmony: The current design has a significant empty space and it can be improved by using a proper grid system.
-
Padding: The current design may benefit from adding more padding to the text-heavy areas. It will help the clarity and therefore helps the user's eyes to navigate properly throughout the content.
What Matters the Most for our users
-
Being able to find what they have been looking for in a short among of time
-
Being able to search with their keywords
-
Feeling Genuine and friendly from the insurance company
My Approach
01- Branding guideline
Creating a friendly brand to create a trust
I wanted to show that our brand is friendly and it covers anyone with any race and gender. I used this style to create a friendly and informal atmosphere. I got inspired my Guesto’s illustration style, which is a company that also offers insurance.
Convey the message through visuals
-
Represent a brand that protects everyone from different ages and diverse races
​
-
Have a blue shield in the background to represent the protection
​
-
I explored different line's characteristics to find a look that represents a friendly look.
02- Choosing the right colors
#0080C4
​
Blue:
Stability, reliability, secure
Name of the brand ( BLUE shield )
Headers, subheaders, Solid CTAs ( transparent CTA will be orange )
#E65000
​
Orange:
Friendly, Affordble
Informal
Accent color for illustrations
03- Redesigning Icons
New Design
Original Design
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.
06-Using space mindfully
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.
Overall View of Design
THANKS
Thanks!
