Design System
for Harel insurance company
As a part of my work at Matrix Experience, I Currently the lead designer of a Design system we created for Harel insurance company. Harel’s Design System based on the behavioral principles of Google Material Design along with the unique graphic language of the brand.
When most of the DS completed, we designed the company’s projects based on its principles, logic and rules. Along with two designers I accompanied, we designed projects like home insurance, health insurance, travel cancellation insurance, power of attorney, savings plans, abroad insurance App, landing pages and more.
Duration
1 year
Design System, Product Design, Illustrations
Skills
Credits
Yuval Hadad (UX Expert), Nati Talker (UX/UI Designer), Roy Itzhaky (UX/UI Designer)
Fonts
The company has a font specially designed for it, which is used in all of its products. It comes in three different weights: light, medium and bold, and in a variety of sizes according to the needs and the content, to allow versatility and interest, without losing the uniqueness of the font and the typographic uniformity. The font is sans-serif, has rounded corners, sharp and straight edges, and it's overall shape is clean. The advantage of this font is that it is not a niche or explicit font, but it is readable and harmonic.
Main Color Palette
#2D76CB
#F7B207
#2D9D3A
#FFFFFF
#C7E1FF
The company’s brand represented by the use of a color palette of three main colors: blue, yellow and green, in a variety of shades. The leading color is blue and the secondary colors are green and yellow.
The blue color conveys reliability, peace, space, inspires a sense of security, and encourages productivity. The green color conveys health, serenity, harmony, associates with money and economic wealth, and the yellow color increases optimism and enthusiasm and helps to attract impulsive users and motivate them to action. Together, these three colors creates diversity, joy and harmony.
Harel's products are supposed to use color rationally and purposefully, to help draw attention to what matters most and support the hierarchy of the elements.
The Challenges
Material design vs Brand identity
Creating a Design System for a well-known insurance company with a recognized visual was the main challenge I had to face with. In order to keep the brand identity, I had to make some adjustments, and yet I didn’t want to compromise on behaviors and components based on Material Design, and on a graphic language based on an up to date visual trends.
It was clear from the beginning that this would be a long-term project, and that other designers would have to work on it in the future. Therefore, I wanted an intuitive way to create the Design System’s library so the designers could work on it easily.
When I just got into the project and explored the existing designs, I noticed that there was no uniformity between components that supposed to look the same. There were many duplicates of components such as buttons, pop ups, icons, so many different sizes and weights of fonts, many similar shades of blue, and more.
Duplicates of components
Transverse perspective
.png)
Projects based
on the Design System
When we started to design Harel’s projects based on the DS, one of our main goals was to maintain uniformity in the same types of screens and elements repeating themselves. Yet, we were not willing to compromise on creativity and uniquness, so we kept creating new illustrations, icons and components according to the different themes.
Welcome screen - Home insurance
Abroad App
The App contains everything that the insured needs while he is abroad, such as locating a doctor, ordering an ambulance, getting refunds for lost luggage or medical treatments, discounts and benefits, etc.
Joining insurance plans
Selected screens from different projects
Health Indurance
Power of attorney
Home Insurance
Home Insurance
Saving plan
Landing page template
The landing page template is based on the DS, of course, but we still had to rethink it due to two reasons:
​
1. This is a marketing product that needs to be sold, not a time-consuming project like those we designed in the past. from that perspective, it was necessary to enlarge the buttons and the main titles.
​
2. We had to create a generic template for the marketing department, so it would be easy for them to replace every element on the page, like pictures, icons and text. from that reason, we chose to use a photograph instead of an illustration, and selected a generic icon for the details area.
Mobile
Desktop