Metro UI design for Customer portal in Insurance sector
OVERVIEW

Aviva India is an Indian life assurance company, and a joint venture between Aviva plc, a British assurance company, and Dabur Group, an Indian conglomerate.

AVIVA customer portal provides self-service based customer tools for various tasks to manage the policies. The customer portal is accessible to the customers through AVIVA India website.

In 2013, as per research data there was a significant rise in Indian customer base who were accessing customer portals mostly through various mobile devices but then the site was not optimized for mobile devices. In order to ensure AVIVA India was geared to serve the existing as well as build new customer base, while providing unparalleled end user experience through their digital channel, it was crucial that the digital touch points were optimized for cross platform devices.
SOLUTION REQUIREMENT

Redesign Aviva's customer portal and make it responsive across all devices (including non-smartphones).
CHALLENGE

The legacy design of the customer portal focused more on advertisement in form of a big banner on top whereas the bottom content kept changing on each page. It was less focused on primary tasks. The navigation was not well structured, there were no red routes properly highlighted in a logical or intuitive way, and some important features remain hidden, which added to the difficulty of having a frictionless navigation for the users. The relevant information and tasks were not visible upfront to the users for which they had to resort to search. The search function was also not very helpful as the it was not even at the spotlight. Overall, the system didn't have a proper hierarchy of displaying information and CTA.
Legacy Design
APPROACH

The portal didn't have any pre-existing design documentation for which I needed to do a full content audit of the portal and plotted the navigation system of the portal. In order to do that, I had to use the portal myself and do couple of tests with existing customers.
Content List
SOLUTION
The entire design of the customer portal uses primarily yellow, blue & greys, while the color codes comprises with the brand guidelines document. The colour logics are partly derived from the brand guidelines for primary elements; such as header, call-for-actions etc. while for other elements, content and body, we took some liberty in defining what goes best as per colour balance. However the entire color palette employed is strictly adhering the brand guidelines document. Shown above is the standard AVIVA header with sun beam and AVIVA yellow background color.
Insta Access, borrows the colors from the navigation menu. The high contrast ensures that it receives the required attention from the user.
Navigation Menu, employs greys with high contrasts and blue as highlight color. The choice of white text over dark grey provides good readability and goes very well on tablets & mobiles while providing consistent experience across platforms.
The body content is made with respect to the functional aspects. Greys being neutral and provide better readability. While blue is used sparingly for highlights and to create interest and break monotony. Standard “Blue on Yellow buttons” are used for action buttons as per the brand guidelines.
Metro UI design for Customer portal in Insurance sector
10
347
1
Published:

Metro UI design for Customer portal in Insurance sector

Metro Design layout for customer portal of Insurance based company.
10
347
1
Published:

Tools

Creative Fields