Marketing & Clients' Site
Client: Clal Insurance | Beginning of work: 2016 | Duration of project: 1 year
In this project I designed the new marketing & clients' website of "Clal Insurance".
The main purpose was upgrading the service experience in the website, with emphasis on existing clients. The new solution included changes in the information architecture for improving the navigation in the website. Likewise, all the screens were re-designed while emphasizing on providing accessibility of information and actions. Many actions have become digitalized and passed through a simplification process, in addition failure modes were solved, such as in the login process.
The new website was designed as a responsive website.
Final design screenshots
My role in the project:​
In this project I was the only UX specialist, I worked with the product manager in the marketing department of "Clal Insurance". Likewise, I instructed the graphic design process and accompanied the development team until the website went online.
Research
This stage included:
Website Analytics
User
Scenarios
Mapping
Information Architecture
Mapping
Competitor Analysis
Websites
Review
Since I did not have access to the end users, so I chose these research tools that both suited the time frame I had for research and gave me the most value.
​​One of the tools that I had at my disposal was Google Analytics, through which I received a status report on the activity on the website in the past year.
I was specifically interested to see which pages are the most viewed in the website,
where abandonment occurs and the differences between mobile and desktop.
One of the things that came up was, for instance, a lot of users abandoned the login page, which indicates a difficulty in that process.
​
​At the same time, I mapped the main user scenarios according to what the project manager described to me and also according to Google Analytics.
Likewise, to familiarize with the website's structure I made a tree map of the website and I recognized the existing page patterns, I saw what can be unified and what is redundant.
In addition to the activity data in the website, I was interested to see what exists with the competition, first of all to learn more about the content world and also to see different ways of solution that will open my mind. For instance, I learned that every insurance company on one hand are service-oriented, and on the other hand are sale-oriented.
You can see that each company has their own quantity of service versus sale.
In the case of "Clal" the strategy was an emphasis on the service.
In Continuation to reviewing the competition, I performed websites reviewing of the finance ​and insurance world to receive inspiration. I checked for specific things that interested me regarding the project: how a homepage is built, how the login process works, how is the navigation built and so on…
Screen Design
After summing the insights that came up from the research, I approached the screen design stage. The Wireframes that I presented were created using Axure software.
​Here are a few examples:​​​
Homepage
Most of the entrances are from the homepage, hence its huge importance.
The new homepage is required to transmit serviceability, with emphasis on existing clients.
Therefore, as a central element in the page there is an auxiliary tool of a quick navigation for the main actions. Pressing on an action transfers you directly to the relevant page (with an additional stage of identification, if necessary).
When additional choice is required, additional options appear under the action
(for example: pressing on "observe reports" will present a list of reports for choice).
​​
In addition, I offered the client to use "Cookies" to present the user actions that are relevant for him.
​
An additional point for improvement was a very clean screen, so it would be easier for the user to focus and find quickly what he wants.
Therefore, above the scroll line, the components that were presented answered most of the usage scenarios.
The old Homepage design
The new Homepage wireframe
Product Lobby Page
In the old website, each product (insurance, advanced study fund, provident fund and so on) has its own page that summarizes all the information about it (Lobby page).
In addition, each Lobby leads to product pages. ​For example: The 'Health Insurance' Lobby page can lead to the 'Critical illness policy' ​page or the 'Surgery, transplants and drugs policy' page.
A big part of the content in the website is in these pages, and my ambition in designing the pages was to find the common ground and design minimum of pattern types to the lobby pages so the user experience would be unified as much as possible.
​​
After I mapped all the lobby pages I reached to a conclusion that there is no need for two levels of lobby pages (as was in some of the cases), that the first one leads to another, because the reason for their existence was lack of unity in the way 'Clal Insurance' presented the products in the website.
Therefore, I narrowed down the information architecture of both lobby pages to one page that leads directly to product pages.
The pattern itself of the lobby page divided into two types:
-
Product lobby of the type "Product Family"
This pattern fitted to all products that can be related logically to the same "family".
The reason for using the families is giving an auxiliary tool for orientation when it's
about multiple products in a category. For instance, in the lobby 'Health Insurance'
the products 'MediClal Premium 2016' and 'MediClal Basic' are presented under thefamily "Insurance for surgeries, implants and medication".
In this pattern anchors were presented in the upper part of the page when pressing on them scrolled to the desired family.
-
Product lobby of the type "Product List"
This pattern fits when there are a multiple number of products in a category.
For instance, all the policies in the lobby 'Apartment Insurance' are related directly to he category 'Apartment Insurance' and they have no families.
The products in this pattern were organized in a way that it would be easy to scan the information and compare between the products.
Small quantity of products that are presented in the page allowed externalization ofmore information on each product.
One of the main things to improve that was very prominent was the load of information.
As a rule, in all the patterns that I designed for the new website the content was
narrowed down significantly, so it will always present the information concisely and the
additional information is hidden, with a possibility to present it/hide it by user's choice.
Product lobby of type 'Products Family'- wireframe
Product lobby of type 'Products List'- wireframe
'My Account' Page
After the user identifies in the website, he reaches his personal area ("My Account").
There he has an access to all his personal information: his products, his personal details, claims, reports and so on.
A significant percentage of the entries to the website are for the purpose of logging in to the personal area. This is a returning user that his entry frequency is on average every 3 months, mostly to read reports.
The new design focused on providing accessibility of the information to the user:
-
Information hierarchy
To make the orientation easier I divided the information to a few areas according to their significance. Not all the information is presented at once.
-
Presenting the products
The information that most defines the user other than his name is his products,
therefore this is the information that presented in the main screen.
90% of the clients have only one product, the additional 8% have two products and
the remaining 2% have more than two products.
This data affected on planning the page entirely, because if most users only have
one or two products, I did not want them to receive a screen that looks almost empty.
About the product itself – I wanted to give a visual anchor that will make it easy for
reviewing the information, therefore in each product was emphasized an interesting numerical data (Amount of aggregated balance and so on).
Each product was presented with a number of main data and with pressing on it you could have reached a separate page that focuses all the information about it.
-
Fast access to information
An additional way to provide accessibility to the information is by externalizing
information and actions in the correct context. Meaning, each product was presented with quick links that are specific for them.
For instance, if there is a debt in the health insurance policy, an alert will appear with a link that will lead to the 'Debt Payment' screen.
Likewise, relevant actions will be presented (like, filing a claim) and relevant reports that will save time searching (like 'Annual Report 2018').
'My Account' screen - wireframe
A Few Last Words
The work on the website was incredibly fascinating to me, as it provided me with an opportunity to delve into a new realm of content that I had not previously explored.
As is customary within large corporations or organizations, I encountered the complexities of internal politics. Numerous individuals were actively engaged in the project, each striving to advance their own agendas.
To navigate this situation, I found it beneficial to persistently request face-to-face meetings with key decision-makers, particularly when seeking approval for the main page designs.
It was a real pleasure collaborating with the "Clal Insurance" team, and our partnership has remained strong as we've taken on more projects together.