BimaPe Wallet Redesign — UI/UX Case Study

📌In this case study, I’m going to articulate my process of redesigning BimaPe’s wallet. I will share my process, design decisions, and logic behind the decisions.

Disclaimer

This project was done as part of the 10K Designers capstone assignment.

About BimaPe

BimaPe is an InsurTech startup based out of India. Their product is very innovative and quite useful for the users. The product helps you manage your existing insurance policies, simplify them and find hidden insurance benefits around you, that you might be eligible for.

Problem Statement 🥀

Once a user has shared their policy with BimaPe, and further when BimaPe has extracted & enriched relevant data they wanted me to find out

(i) What is the best way to present this to the user? (carousel format, scroll format, or click-through format)

(ii) When to present this to the user? (Q&A format or upfront)

This product is huge and could have taken a lot of time to design and iterate if doing this for the whole product with uncountable features. So I have focused here on a particular section of the product i.e the “Motor Insurance”.

Hats Off to the team at BimaPe for making so many complex features easily available in a single place.

Research🌱

I was pretty much familiar with the product at this stage, as I did a lot of research on the features and scope of the product in my BimaPe Landing Page Redesign Case Study

Now it was time to deep dive into the working of the feature called “Know Your Insurance”. Here BimaPe simplifies your existing complex policy document into a very interactive, legible, and readable screen.

Since BimaPe is a unique product and there is not much reference to what are others doing in the industry, but I found some relatable content when I researched known companies like “Policy Baazar”, “Acko”, “Easy Policy” and “My Insurance club” and this also made me realize how most of the other Indian insurance companies are in dire need of good designers.

Information Architechture 🍁

Let me put this out in words, answering-

“What did I fix in Information Architecture and why?”

1. Multiple options/sections to access your insurance seemed unnecessary-
   User going through 2 sections “Vehicle” and “Policies” to explore the same policy might confuse them.
   This is fixed by giving an upfront single place where users can choose the insurance they want to see in detail if they have multiple insurances in the wallet for motor insurance. This will contain information of both vehicle and insurer in one place, leaving no scope for confusion.
2. Optimized navigation and clicks —
   USP of this feature is that it helps you understand your insurance through sections like “What is covered?”, “What is not covered”, Policy Details”, etc. The user could navigate these by going back and forth while visiting a particular section.
   Fixed this by giving a direct navigation button to access these sections with just a single click.
3. Enables Direct Navigation for multiple policies-
   To optimize the to and fro within the wallet to change your view to another policy also involved a lot of clicks. Enabled direct view to other vehicle's policy through top navigation bar which didn’t exist earlier.
   Why Vehicles?
   We remember our policies through car names or numbers. It’s easy to forget which insurers you have, but you won’t forget what car you own.

Giving just enough information in the “My Policies” section so that the user can identify the policy they want to proceed with. This will allow fewer users to drop off from this screen.

By these changes, you can see I have managed to fit the relevant information in 2 screens in just 1 screen with more features than earlier.

Still to shut out any scope of confusion as describing steps through screenshots can be confusing, I’m dropping a Loom video below to help you understand my perspective better, and yeah !! you will also see the redesigned Home Screen here, which I have kept consistent with my landing page case study😅

Policy Details

1. Easy Navigation to different sections, no matter how far away the other section is now, the user won’t have to go to and fro. Can now directly jump to any section rather than going through to an adjacent section.
2. Improved aesthetics by using the white space on the screen and spreading the content with different carousels. Kept the content and IA consistent.
3. Added picture of the vehicle for more relatability, identification, and user’s attention.
4. Added a new feature of premium breakdown to the policy details. When someone enters “Policy Details”, the user will expect to know about the premium they paid. Taking a step further, showing a breakdown of the final premium paid. This is achievable as this is shown in the policy document by the insurer.

What is covered?

What is not covered?

“What is covered?” and “What is not covered” were pretty interesting screens to redesign. These features are very new and attention-seeking to the user. Policy documents are not very interesting when showing such information. What changes did I make and why?

1. Changed the layout for better use of the white space.
2. Using illustrations as Signifiers and visual anchors.
3. Signifiers being the elements themselves showing what they do, supporting the context.
4. Visual Anchoring guides the user’s eye for skimming through the screen.
5. These illustrations also support, contribute to the “Picture Superiority Effect” — as users remember illustrations and pictures more than words.
6. The information button in the original design has a pop-up but in my design, I have used the same but in the form of a hovering state tool-tip. This will save clicks and time for the user. See the before and after below-

Insurer Details

1. Again, used the white space for better layout and using insurer details and ranking details on a single screen.
2. Used Red and Green colors with low contrast to highlight the ranking and the standard acceptance in the insurance industry
3. Added ranking meter and % chart as visual anchors to the text, these also help the user to better understand the numbers. In the case of the ranking meter, the user will now, won’t have to scroll down to the list to find out what rank their insurer belong to with what %, but yeah for the sake of checking other competitors they can view this below.

Please ignore the numbers and the colors highlighted if you noticed these not making any sense. I highlighted these to show different scenarios. You can give a little rest to your math-head now.

How to file a claim?

1. Added steps of how to avail the cashless claim via network garages with illustrations as support.
2. Took the liberty to design the cashless garage feature for this section. Added a map and listed down the “cashless garages near the user” with name, address, and phone number.
3. The list will fetch you the list of network garages near your current location if the service location is allowed by your device to BimaPe.
4. If the location is off, by default the garages near your RTO can be shown. Your RTO(Regional Transport Office), can be an indicator of your district as vehicle Registration numbers are allotted based on the RTO and can be tracked back by the registration numbers.
5. There is also a search bar where user can search for a specific location

I agree with the “Policy Details” and “How to file a claim?” sections being exposed to the users at almost end of the of all the sections. These sections can be a little complex and confusing. This method is known as Progressive Disclosure where users get less overwhelmed when exposed to complex features later.

Playground

Want to see the all-screens altogether?

If yes, CLICK ON ME 🔗

Gratitude

Special thanks to Rahul J Mathur (CEO, Founder — BimaPe) 🤴🏻 and Mohammed Abraz (Product Designer — BimaPe) 👨🏻‍🎨 for dealing with my questions and agreeing to help me with the capstone project.

That’s a wrap🌈 Thanks for reading.

Like it? If yes, don’t forget to clap for my efforts👏

Know the Author

Jeevanshu Narang — An actuarial guy who turned Designer, working towards making products with great user experience. Currently part of the 10K Designers. A product designer is someone who has to wear a lot of hats during the course of designing, I’m here with my closet full of hats.

Let’s get connected here

Portfolio✍🏼 | Twitter🐦 | Linkedin👥 | Dribbble🏀 | Behance 🎨

Check out my other case studies on Medium

UI/UX Case Study: BimaPe Landing Page Redesign

UI/UX Case Study - Blockchain Convention Landing Page Design

Case Study: User Research on Filmmaking Discord Community