AXA - Colpatria
Case Study

Online insurance purchase and renovation platform

The challenge

As part of the Customer Experience Team, I designed interfaces that hundreds of people and companies use to buy and renew insurance on axacolpatria.co.

When I joined the project, AXA Colpatria insurance was still less than three years old. It was built quickly to meet the needs of the customers.

Our challenges:

  1. Define the new user flow
  2. Correct transactional problems
  3. Consolidate a scalable system
  4. Structure a single design system
  5. Update aesthetics
  6. Build new features

My role

Having previous experience in the design of shopping carts, I led a team of two visual designers, with support from three .NET developers.

I coordinated each of the design phases, such as information architecture, user task flows, interaction, visual, interactive prototyping and front-end coding. I conducted user research using techniques like interviews, surveys and workshops to address both consumer behavior and attitudes.

Design Process

Consumer centerd solution

In order to understand the basic needs of the users of the platform, we began by conducting a workshop with these stakeholders to examine and understand the characteristics and behaviors of the users. In this way, we understood those pain points as a repeated request for the same information, personal information and from vehicles in the case of SOAT, saturated design with too much unnecessary content, unknown terms and limited accessibility for people with multiple disabilities.

Research

The research stage began with fifteen interviews of new users and sixteen frequent users, understanding the reasons for acquiring an insurance and the competitive advantage that the company has against the other insurances in the market.

We made a bechmark and found that the number of steps in a purchase or renovation were very variable, but the best performers were those that have cleaner aesthetic or those with less intermediate screens, so we decided to take the path of mixing those features because few companies do this in Colombia.

Deliverables: Brainstorming photos, storyboards, competitive analysis, interview report and recordings.

axa - user personas

Definition

Based on the investigation of the previous phase, a user profiling is performed for both genders, the information architecture is defined according to the flows suggested by the consumers, the amount of screens is reduced as well as the required information is limited. The user stories were divided according to the features that were performed in each iteration and the users flow is carried out and validated by the stakeholders.

Deliverables: User flows, screen flows, sitemap, user personas, user stories.
axa - wireframe

Prototype

After validating the architecture, labeling and user flow. Sketches were made for each device (desktop, tablet and mobile) on paper, these sketches were validated with end users and business, after two iterations, wireframes were made, on them two iterations were made, they were tested on an interactive prototype by assigning tasks.

Deliverables: Sketches, wireframes, low-fidelity design, interactive prototypes.

Design

After the concept validation on wireframes, each of the platform components was designed consolidating the design system aligned with the brand guide and inspired by minimalism and material desgin. Based on this design system, high-fidelity designs for tablet, desktop and mobile were made, subsequently they were linked independently by device to be used in tests with users through interactive prototypes.

Deliverables: High-fidelity design, interactive prototypes, design system.

Front-End

The codification was carried out by several preprocessors in order to optimize times and cleanliness in the code. As a basis, bootsrtap structures were used that over time were modified depending on the requirements of the project. Each component was built in a relative way thinking that they should be adaptable to the screen regardless of their size, in this way, a style guide was made with all the components indicating their use and corresponding lines of code.

Deliverables: Style guide, Sass, Pug, HTML, JS, Jquery, images

Test & Measure

Each of the steps in the entire process has been validated with end users and business with the objective of aligning the needs of each stakeholder. Users were tested with task flows, ten-second identification tests, accessibility tests on users with some type of disability. Likewise, heuristic tests were carried out by external entities that in this case were executed as auditors verifying each step of the design process.

On the final coding, each line of code and tag was validated by w3c standards, tests such as heatmaps, clickmaps and scrollmaps were also executed on these models.

Deliverables: Task flows results, heuristics, accessibility results, heatmaps, scrollmaps, clickmaps.

Results

31

Interviews

65

Usability Tests

11

Iterations

35

Artboards

Learnings

The biggest challenge was to make the business understand that more information may not necessarily be clear with the consumer, on the contrary, saturating users with excess text generates indesicion. This could be clarified thanks to user tests and the definition of a new flow of screens that were accompanied by changging the labeling and architecture of information in general. By conducting this user research and user profiling before starting to design aesthetic aspects or coding, reprocesses were avoided. The entity at the beggining was assuming rework as a normal part of the production cicle, with this new path, the number of iterations for adjustments was reduced by 63% with respect to the previous version. The inclusion of help messages and clean design, the online sales increased by 45% through this medium in less than three months after the publication of the latest version of the platform.

Due to the overcrowding of use, and over time, the behavior of users has been changing due to abandonments because of the permanent visibility of the navbar, this featurea has been adjusted to improve the performance of purchases and renovation.

The opportunity that this project gave me to work as a design and development team coordinator, allowed the company to reach new economic objectives in less time thanks to the early deliveries and the added value that the consumer now receives compared with the previous version and competitors. Nowadays, insurance and other projects of the same company have adopted the design thinking and scrum as agile transversal methodologies between development and design processes, because they could see the good performance and results of our way of working.

www.000webhost.com