UI/UX Case Study: BimaPe Landing Page Redesign

📌In this case study, I’m going to articulate my process of redesigning a landing page of the BimaPe website. 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.

Why BimaPe

1. I found the product very interesting.
2. I realized the room for improvement in the website.
3. I have some good experience in the insurance industry, so I felt very comfortable with this niche.

Problem Statement ⚠

After some research, I could find out that people didn’t exactly know what BimaPe does as a brand.

And even if they had an idea of what BimaPe does, that’s still a problem because the current website has a scope to define this better for the users.

1. “BimaPe” name makes a different impression on people. Especially to those people who are not aware of the meaning of the word “Bima”. If you are one of this category, let me tell you that, Bima = Insurance.
   Most of the youngsters like me might have heard this from their grandparents at home, but it’s not surprising if you don’t know the meaning of Bima. You are not alone.
2. People misunderstood “BimaPe” to be something like PhonePe, BhimPe, Gpay i.e. a company that belongs to Fintech, because of the “Pe” at the end of it.
3. Few user interviews and a 10K designer session where we discussed the usability of BimaPe design suggest that the users find it hard to guess what exactly BimaPe does.

It’s alright to misunderstand something that you have never heard of before or never came across. The goal 🚩now, is to efficiently make the users fully aware of what BimaPe does.

Users generally don’t give in much thought before reading or looking at new things. They skim through the screen, just to get an idea of “What is going on here” or “Is this the thing I’m looking for” or “Does this place satisfy my goal”.

The aim 🚩is to grab and retain the user's attention while they skim through the page with all these questions in their mind and make sure they learn about the product seamlessly.

Sometimes I wonder if I’m a designer or a psychology student, but it doesn’t matter as it’s just another hat a designer has to wear. Enough about my thoughts, let’s get started.🏁

Information Architecture

One of the confusing parts of the currently live landing page, is that it gives a subtle hint of what BimaPe does in the hero section and later in the 3rd section of the webpage it contains the main features of the website answering the questions below

Statistically, 40% of users do not go past the Hero section. Even if they do, having already consumed a lot of information, encountering the most vital chunk of information in the 3rd section might confuse them.

The 3 key feature are —

Fixed this with a better layout of the content. Refer to the IA below.

Hero Section

I liked the typeface and the color scheme of the website and decided to continue with the same. It gives a very minimalistic look and the color scheme helps in building more trust and sophistication to the aesthetics.

Listing down the changes made:

1. Removed the “Get Started” CTA in the navigation bar. In the hero section, you can see 3 CTAs that take the user to the same screen, there is nothing wrong with it but making it less confusing for the users as all the CTAs have different copy i.e. Login, Get Started, Become a member.
2. Implementing AIDA principle to the layout of the Hero section and having added more intriguing copy.
3. Making intentions clear, the original website states “Simplifying insurance for everyone” and have a description of the benefits that BimaPe offers. I have made this visually clearer and more understandable by listing down the benefits and scroll-linking them to the features in the latter part of the webpage that satisfies these benefits.
4. A clear mention of users' social presence and benefits availed through BimaPe to build trust. This was important as BimaPe is a new startup and still building an audience for the product and better business.

Know Your Insurance

1. The features are explained via a tabular subsection view on the original website. I decided to give these a separate section so that users can identify them clearly and also know how it works.
2. Improved the copy of the text to describe the feature.
3. Added more white space for better skimming.
4. As a user, one will hesitate to upload their private documents over the internet. The steps/flow showing how the feature works will help in clearing any doubts regarding the product, help build confidence and give a sense of control.

Wallet

1. The features are explained in a tabular sub-section view on the original website. I decided to give these a separate section so that users can identify them clearly.
2. Improved the copy of the text to describe the feature.
3. Kept a consistent CTA i.e. “Become a member”
4. Better screen in the mockup to give the user a fair idea of the actual screen and options in it.

Wallet is the feature that serves the purpose of the perks called “Manage your policies” above.

Discover Benefits

1. Got rid of the confusing and assertive statement “ You are already Insured” and replaced it with “You might already be insured, find out how”. It creates a sense of thrill and hope for the user and gains attention.
2. The social and work proof is one of the most recurring content on the webpage. Didn’t see the need for it so much so got rid of it too, as we have now clearly mentioned it earlier in the Hero section.
3. There was no brief description of where and how the user can discover the benefits, so added cards of different areas can be discovered with little details.
4. Changed the CTA to 1st person perspective.

Reviews

I loved the way the review cards are done in the original design. Simple and straightforward, but I wanted to give this section a more minimalistic view to keep it consistent with my version of the design.

So I decided to:

1. Keep 1 review at a time on the screen for more negative space.
2. Got rid of the grey scroll bar at the bottom. It wasn’t very visible as it seemed like a section divider and a few users also misunderstood it as a loading bar. Added colored dotted scroll indicators for better aesthetics and understanding.
3. Cards in the original design didn’t scroll horizontally with the mouse, only did through the trackpad and horizontal scroll bar. Added an option to scroll through arrow buttons on each side.

FAQ

I liked the design of the FAQs, it was simple, easy to scan, and minimalistic. It’s totally my kind of design and was going well with my current version of mine. So I decided to take this part forward by just changing the color of the background.

Don’t want to change something unnecessarily ✋

Final CTA and Botton Navigation

1. Liked the copy of the header so kept it consistent but added a subheader to show that the BimaPe is just a tool to enhance the experience but the real power to control and manage the insurance still lies with the user.
   This gives much confidence and a sense of control to the user.
2. A better layout to the footer is given to maintain consistency. Added gradient from the illustration above to the footer for subtle inclusion in that part of the footer to the website as I wanted the content required by compliance to be looked at differently. Why? For a clear and distinctive view for the compliance authority or other people for concern.

Favicon

High-five if you also read it as “Fevicol” first 😆. Sorry, I know it was a bad one, anyway.

With too many tabs active on the browser, it’s hard to find out the tab for BimaPe Website. A clear and distinctive favicon can help users find the tab quickly for a better experience.

It’s hard to read “BimaPe” in the current favicon icon. I’d suggest using the same icon used for mailing(but without the cursor).

What could I have done better?

1. I could have researched better if I had more awareness of business direction.
2. If I was part of the BimaPe team, I would have been able to make better design decisions based on business needs and numbers, to meet the business goals.
3. There is always room for better aesthetics, users love aesthetics.

Want to see the final design altogether? 🐳

Here is a loom recording of the basic prototype.

Loom | Free Screen & Video Recording Software — Watch Video

Or you can also check this out on my Behance profile

BimaPe Landing Page🔗

Gratitude

Special thanks to Rahul J Mathur (CEO, Founder — BimaPe) 🤴🏻 and Abraz Mohammed (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 work 👏

Check out my other case studies on Medium

UI/UX Case Study - Blockchain Convention Landing Page Design

Case Study: User Research on Filmmaking Discord Community

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 🎨