COVER INSURANCE WEBSITE

Public Website & Intranet
"Cover Insurance Brokers, one of the leaders in the Greek insurance market, after its recent expansion is going through transformation from B2C to B2B aiming to expand its agents network and attract international collaborators."

My Tasks

Project Management
Architecture & Content Strategy
UI/UX Design
Branding
Visual Design & Illustrations
Prototyping
Production Support

Case Study

Cover Insurance Brokers (2017)

My Role

I took on the design strategy for the company’s new website; make its overall experience engaging and structure its information so that it addresses its target audience effectively. I also redesigned the company’s intranet to make it responsive and increase its functionality. For the full design life-cycle I started from rebranding (logo/color palette) all the way until finally managing the development and release stages.

Architecture & Content

After discussing with executives about the company's short and long-term goals, and what they wanted to achieve through the new website/intranet, I designed the information architecture and presented the Sitemap. Preliminary sketches to help illustrate the proposed page sections were also created; setting the ground for the later UI/UX design. In parallel, the content (texts) was gathered and processed collaboratively by both the design and management sides.
Information architecture sitemap for the Cover Insurance website.
The Sitemap depicting the final Information Architecture that was presented to the management team
Early page-layout sketches for the Cover Insurance website.
Preliminary sketches used to illustrate proposed page sections
Website content being reviewed in shared documents.
The Content processing was done through Google Docs - the website's first version was in Greek language which will later be translated to English and other languages

Rebranding

The brand's main color was changed, adopting a warmer hue. A new color palette was also created.
Presentation comparing the original brand colour with a warmer alternative.
The slide with which I presented the color change and the accompanying color palette
Cover Insurance colour palette with named swatches and colour values.
The final color palette covering all the needs of the website's user interface and experience (text, buttons, actions, secondary etc)

UI/UX & Visual Design

In the visual design part, aside from photos, I used illustrations which I designed in Sketch. When a group of visual elements (colors, styles, images, illustrations etc) was finished, it was being integrated to the wireframes; until finally creating a fully equipped high-fidelity prototype.
Insurance-themed illustrations being created in a design application.
Example of the 2D Graphics that were created in Sketch
Cover Insurance website wireframes arranged on a design canvas.
The wireframes, after adding the styles and content (texts)
Website wireframes progressing from basic structure to styled pages.
Wireframes from different stages of the design process added side-by-side to illustrate the progression

Development

After the design and prototyping stages; detailed guidelines for all interactions and plugin proposals were shared with the development team. The public website was developed on Wordpress, whereas the Intranet was developed entirely using custom code. A "development prototype" was built and made perfect until was finally published to the company's main domain. The production and release stages were coordinated using Trello app.
Website design specifications shown in Zeplin.
Example of a wireframe as seen through Zeplin app (used to hand in technical UI specifications to developers)
Development and release feedback organised on a Trello board.
Feedback exchange on the Trello board that was created for the coordination of the development & release stages