UI/UX Case study: Redesigning an Insurance Mobile App

I am working in an insurance global company located in Singapore as a UI/UX Designer. I was part of the digital transformation team and parked under the design team. My job was to prepare UI/UX design for some of the digital products. We were assigned to different projects. Each project will have its own team to manage the delivery process.

One of the projects I was handling was a mobile app for customers to help them in managing their insurance policy. This mobile app has a lot of services to help customers manage their purchased policy such as policy renewal, claim reimbursement, managing investment funds etc.

Insurance Mobile App’s Background

Customers who purchased an insurance policy from a company will be able to perform different services covered by the policy. For example, they will be able to file a claim and receive reimbursement. In the past, most of the services would be done through an agent. Now, thanks to advanced technology, customers are allowed to do it themselves.

Through a mobile app, customers can upload a receipt of their medical bill for claim purposes. Later on, they will receive a payment to their bank account or other payment methods. More services are added to the app in order to make the experience even more seamless, rich, and efficient.

Redesign’s Background

In the company, we had the app. But it was not good enough in terms of layout, experience, and functionality. So, our team was asked to redesign the app and I was put in charge of the design together with my design lead. In this project, I also worked with numerous people such as the product owner of this project, the business analytics, the scrum master, and the developers.

Old app template

Design Process

To redesign the app, we applied the double diamond design process as our design thinking method that would guide the process.

Double Diamonds Design Thinking

Discover

• Business Requirement
• Usability Testing
• Competitor Analysis
• Usability Inspection

Business Requirement

First, we had a discussion with the product owner to understand the business requirement. The goal for this app is:

• Giving online access to customers to perform different services that are covered by their policy, such as filing a claim, fund switching, receiving reimbursement, upgrading plan for their policy, etc without physically meeting their agent.
• Storing all information in the app as a one-stop platform, such as insurance cards, policy documents, policy details, claim details, etc. This will help customers immediately find the documents when it’s needed.
• Direct communication towards customers whenever there is a change in their policy regulations or other changes.
• A gate to direct purchase and payment.

Usability Testing

To start identifying the problem of the existing app from the users’ perspective, we conducted interviews with some users who had used the app. Based on the interviews, we collected a lot of struggles users faced when they were using the app, such as:

• Some title naming was misleading. Users got a different page from what was expected.
• Some processes missed a clear indicator if they were successfully done or not. The users were left hanging waiting for successful status. Instead, the page immediately changed to another page.
• There were too many clicks to get the required information. And the page could become very long.
• There were many pages that were inconsistent.
• It’s difficult to navigate inside the app because no indicator of which button was clickable. And the distribution of functionalities was messy so it was also difficult to perform a service.

Competitor Analysis

We also made a comparison with the competitor’s app to see if we have covered basic experiences we should at least have for our customers. Through this process, a few points we found that:

• The old app didn’t have a good interface to sign in and register.

App template as comparison

Old app journey

• Our dashboard looked like a list.

UI Inspection

To avoid bias, we used The Nielsen-Molich method to confirm our findings about the interface being inefficient.

Some of screens were evaluated

Define

• Customer Journey
• User Flows
• Prioritization
• Wireframe

Our plan was to define the overall system for the new app, then we would start working on a few functionalities first based on our prioritization method, considering efforts, timeline, budget, etc.

Customer Journey

Based on the old app’s journey and business requirements, I worked with business analysts and lead design to come up with customer journeys.

We understood what was the goal of this app. Business analysts would come up with the distribution of all functionalities within the app. He came up with required customer journeys for:

• Onboarding Customers into the app (Download, Registration and Sign in).
• View and Update Customer’s Profile.
• Services that are covered within the app. (File a Claim, Renewal Travel Policy, Fund Switch for Investment, etc).
• All product categories and policy details within the product category.

User Flow

To create the flow, we were using a similar flow to the old app to distribute the product categories but we minimize the number of unnecessary clicks. We understood the journey and goal of each journey. So, we came up with a better flow to make it easier for customers.

User flow

Prioritization

Now, as we already had the overview of all available screens in the new app. Together with the product owner and scrum master, we created prioritization using the impact-effort matrix method. We decided based on the effort and impact of each functionality.

Wireframe

Finally, it’s time to do design and it started with wireframe.

Some of wireframe for screens

Develop

• Design and prototype

Design and Prototype

My job was to design all the UI screens for this app and it started phase by phase. I worked with the Product Owner, Lead Design, and Scrum Master to coordinate the delivery of all screens so it could go smoothly according to a timeline. During discussions, stakeholders wouldn’t be able to visualize and tend to follow all proposals. But at this stage, they started to realize which one worked and which one didn’t work. Of course, this stage would be the longest stage out of all. Stakeholders were pointing out their opinions to make sure each of the requirements from business and customers are taken care of. It was not a one-night’s work definitely. At this stage, I also did prototyping when stakeholders didn’t understand how it worked.

Redesign outcome

Deliver

• Development
• User Testing
• Launch

In this stage, the design was approved and passed to developers. They would build and upload it for testing. Once the testing was approved, the product can be uploaded to app store and it’s available for download.

Development

Once the screens were approved, they would be passed to developers for them to build. To pass the design, I used Zeplin.

User Testing

Once the development of the product was done, developers would upload it to UAT (User Acceptance Testing) for all stakeholders to test. Once it got approved, it would be uploaded to production where users will be able to download and use the product.

Launch

And the app is ready to be downloaded by customers.

This is all the process to create this app. Let me know if there is anything I can improve on. Thank you for reading.