Reimagining insurance shopping

Mobile and desktop mockups of insurance ecommerce website

Osiguranik

Osiguranik is an ecommerce platform that offers policies from insurance companies in Serbia. People can compare quotes and buy the policy that best meets their needs.

Goals

The client’s goal was to increase user engagement and sales by redesigning their website. They also wanted to effectively communicate the core value of their business: helping people find the right policy quickly. Their specific goals were to:

Users

The client aimed to reach regular online shoppers, travellers, young, educated people. For me that meant focusing on clarity and efficiency in communication and creating a friendly, relatable tone of voice.

My role

I worked in a UX team of three at Alpha Design Studio, a boutique design agency. The team lead (Milovan Jovicic) was responsible for product design and communication with stakeholders, while my senior colleague (Andrija Jonic) created initial design concepts that I built my solutions on. I was in charge of:

Process

Discovery

I came in the project after the team lead and the senior designer already proposed a few ideas to the client.

The client rejected minimalistic designs with simple grid systems. As I took over the ideation process, I focused on understanding the client’s vision and realized that they were aiming for a distinct, playful feel in order to appeal to a younger audience.

I first ran a heuristic analysis of the website to learn how information is organized. I also conducted a competitive analysis to understand the client’s unique offering and get a clear vision for design concepts.

Ideation

I created clearer navigation to help users find what they are looking for easily. My analysis of the website showed a lack of cohesion in navigation so I focused on creating simple, straightforward categories.

Information architecture diagram before and after changes

Laying out existing categories in main navigation helped me see how they could be organized better.

In collaboration with the team lead, I introduced an FAQ section to provide support in times of doubt. We also expanded the About us page to build trust by telling users more about the team.

Designing the interface

Based on the competitive analysis and client’s input, I decided to focus on three design qualities: friendliness, efficiency and transparency.

Screenshots of inspiration websites

Gathering inspiration from existing insurance services helped me bootstrap my design ideas.

I first designed a few sample pages to convey my team's vision for the final experience. After the client’s approval, I went on to redesign the rest of the website.

Along the way, I created a design system to make sure the user experience was consistent and developers’ work easily scalable.

Preview of typography, color and illustrations

Bold colors, playful typography and friendly illustrations create an impactful connection and an engaging experience.

Note: The illustrations were purchased.
My illustration work was editing them and adding details where needed.

Iterations

I worked in phases lasting from a few days to 3 weeks. I created high-fidelity prototypes each step of the way to give the client insight into the final experience and encourage them to share useful feedback.

Managing research constraints

This project did not lend me an opportunity to conduct research or have access to analytics. With access to only a few of the client’s findings, I made sure to understand business goals and base design decisions around them. I relied on proven principles in ecommerce and visual design to encourage users to explore and take action.

Collaborating with developers

Towards the end of the design work, the team lead and I worked with developers to implement the design into WordPress. We worked around CMS limitations, introducing custom fields for the new content, creating page templates for efficiency, and standardizing visual assets to fit the templates consistently.

TL;DR

Short on time?

Jump to final design

Focus of my work: Creating a new shopping experience

Challenge 1 • Building trust with open conversation

I relied on clear and concise writing to tell a well-rounded story about the company and their services, explain the purchasing process and assure people they are not skipping any important information.

About us page

Challenge 2 • Inviting people to explore

In collaboration with the team lead, I introduced a product page design that features offers prominently. Previously, users had to start the purchase process to be able to see the offers. The goal of the new design was to give people the gist of the offers first and also engage them to transition to purchase.

Travel insurance: transition from product page to purchase

Challenge 3 • Encouraging informed decisions

I collaborated with the team lead to introduce an in-depth compare feature in the purchase process. The website previously offered only a comparison of policy prices—we expanded it to include features and benefits as well. The change helped ensure informed decisions.

One challenge was that policies disclosed different levels of detail. If we went with a content-first strategy, the layout of each offer would change and make it hard to compare. That's why I chose to always show a consistent layout with all categories of information, whether there was data in them or not. That way I wanted to ensure people are getting all the information they need to make a decision.

Final design

Mobile

Mobile mockups

To ensure usability, I designed complex flows and features on mobile first.
I kept the content brief and compact to help people get to the gist quickly.

Desktop

Desktop mockup

Final screens

Check out slideshows with some of the final screens

Design system

Here’s a preview of the style guide and UI component library I created.

Design system section on colorsDesign system section on typographyDesign system section on buttonsDesign system section on input fieldsDesign system section on form elementsDesign system section on iconsDesign system section on images

Outcomes

My work brought about a complete makeover of Osiguranik and helped the company transition to the next stage of business. I helped introduce a friendly yet bold presence in the insurance industry.

At the time of writing, deployment was under way and the client  was working on their marketing copy. Parts of the website, such as the checkout experience, were left to be designed in further iterations.

I expect to see a positive shift in the metrics we targeted. I focused on providing clear navigation, engaging content and a seamless journey to purchase, which is why I expect to see a decrease in bounce rate and an increase in conversion rate.

Lessons learned

Without the chance to get to know users, my goal was to minimize the number of assumptions I needed to make. That's why I relied heavily on proven design and ecommerce principles. As a result, I gained a deeper understanding of the impact of design on business goals.

Having no insight into baseline analytics made it hard to measure the impact of design. If I did continue to work on the project, I would track the metrics after deployment, see how actual results compare with business targets and make changes along the way.

Working on a design system and collaborating with developers taught me the importance of considering all the different states of UI components and designing them to be simple and scalable.

Other projects

Mockup of baby development app

Helping parents ensure healthy baby growth

Read case study
Conceptual illustration of project management app

Evolving traditional workflows

Read case study