Revamping the User Experience of Rare Rabbit App : UI/UX Case Study

Introduction

Hi, I am Bhagyesh Badwe, I’ll walk you through my entire process of revamping and improving the user experience for the Rare Rabbit app.

What is Rare Rabbit?

Rare Rabbit is an upcoming Indian clothing brand exclusively for men. It’s a part of a bigger company named House of the rare. As far as the designs of the apparel are concerned, the designs are as minimalist as possible.

Why Redesign Rare Rabbit?

I am a frequent user of the Rare Rabbit app. I shop for apparels and clothing from this app quite often. After using this app and spending good amount of time on it I felt that the User Experience of this app is not up to the mark. It lacked many fundamental UI design aspects.

The app also needs a in depth redesign focusing on various UX details and to improve the overall user experience.

My UX Process

Explore

1) Competitive Analysis

Did a deep research on all the major potential competitors like Bewakoof, Zara and H&M to understand their design process. Found some opportunities and inspirations to work on, considering the pros and cons of the competitors.

Rare Rabbit was different in the sense that it has a very minimalistic UI as compared to Bewakoof and H&M. I therefore planned to revamp the design by improving user experience without deviating from their design theme.

A quote that popped into my mind —

Improvise. Adapt. Overcome

2) Getting to know the Users

Interviewed some of my friends regarding the overall user experience of the app. Got their perspective regarding the app design and usability.

Went through some of the critical comments of the users online and did a heuristics evaluation. Many comments said that the app is not user friendly and the user experience can be improved.

Reviews from playstore

Defining problem

After following through my friends’ comments and suggestions, I jotted down all of the potential issues that users may encounter while using the app.

SWOT Analysis —

Performed a brief swot analysis to gain a better understanding of the app’s issues. Understood the internal and external factors affecting the user experience.

SWOT Analysis

After getting a general idea of the app’s usability, I went on to study each user flow. Analyzed all app screens and flows to identify major pain points.

Pain Points —

To conclude the Define Phase, I rounded up my research into the following pain points. Noted down all the possible issues and problems on each screen of the app.

All the pain points

So collectively by establishing a streamlined and simpler aesthetic, as well as by refining the product search and selection process along with cart feature and payment screen the app’s usability concerns will be fixed.

Great design is not just a solution, it is the elimination of the problem

Now, lets dive deep into the design process :)

1) Home Screen

Problems —

• Low emphasis on the search button. No option for voice search.
• The app lacks a bottom navigation bar. App’s navigation becomes difficult for the user.
• Fundamentals of visual hierarchy were not met such as — no proper segmentation and separation between sections.

Home Screen Problems

Solution —

1. Designed a dedicated search bar with integrated voice search option.
2. Added Choice Chips below the search bar, enabling user to make selections and filter content easily.
3. Added navigation bar for easy navigation.

Home Screen Before(left) and After(Right)

2) Hamburger Menu

Problem —

The app’s usability greatly depends on the Hamburger menu. The present menu’s visual hierarchy is not up to the mark. The categorization is not done properly. The typography color contrasts also has a few accessibility concerns. This menu’s general design has a lot of room for improvement.

1)Accessibility —

The first major issue that I saw that the text in the menu was not properly visible and was hard to read. The background and text contrast ratio was poor which made it difficult for people to read.

Here’s how the text looked like —

Text in hamburger menu

According to Material Design Guidelines

All text should be legible and meet accessibility standards. The Web Content Accessibility Guidelines (WCAG 2.0) level AA requires a 4.5:1 color contrast between text and background for normal text.

I have explained the the WCAG guidelines in details in my previous article of Understanding basics of Colour Theory. Check it out for more details.

I went ahead and checked the contrast ration and it was failing. The contrast ratio was around 1.94:1. It needed to be fixed to solve the accessibility problem.

Contrast Ratio

The app had the same accessibility issues in multiple screens. So I corrected the contrast ratio following the guidelines and making sure the contrast ratio was appropriate.

2)Layout —

• Menu was crowded and had the problem of information overload.
• The upper text box which displayed the user name was actually a text button. It literally took me around 2–3 min to figure out where to access the profile menu. Its location was very vague with no specific indication.

Solution —

After realizing the problem I recollected one of the important UX laws

Miller’s Law

The average person can only keep 7 (plus or minus 2) items in their working memory.

The major takeaway from this law was to organize content into smaller chunks to help users process, understand, and memorize easily.

So I went further to modify the layout and to classify them into categories. This made the menu more breathable and easy to glance through. Addition of more white space made it more comprehensive and readable.

Hamburger Menu Before(left) and After(Right)

3) Product Cards

The product card is one of the most important factors influencing the purchasing decision. Cards can serve as entry points into deeper levels of detail or navigation.

Problem —

The current product card has many issues related to visual cues and data points. The overall card is a bit cluttered and at the same time doesn’t provide necessary data points. The problems are listed below —

Previous Product Card

Solution —

Did a basic research on how a product card should be designed. Followed the Material Design 3 Guidelines by Google. Designed a basic wireframe of the card to implement it into the new design.

Product Card Wireframe

Now lets redesign to solve the problem,

Carried out multiple iterations considering that the card needs to be data rich and at the same time should not be visually polluted.

• Improved the typography by making use of proper font size for heading, sub heading and price of the product
• Added a share button
• Incorporated the Rate and Like button in the image container to avoid the card description from being visually polluted.

Lets get to the more important aspect,

I have personally faced this problem multiple times. And I think a lot of you may have encountered a similar issue. So while browsing, after product selection we proceed to the product page and only then we learn that the exact size is not available. This increases the step of product selection process and creates frustrations.

So to solve this problem the new product card design displays the available size before hand so the user can make decisions more effectively. User can now directly select the size and proceed to the product page.

Product Card Iterations

Also implemented Grid view and List view. It gives user the freedom to choose between the style of layout which they find comfortable while browsing.

After carrying out multiple iterations I final came up with a design that I feel is decent and covers up all the necessary datapoints.

Final Product Card Designs

Even the though the product card feels a bit visually polluted due to addition of multiple data points, it fully serves the purpose by boosting the user experience up a notch.

This iterative process helped me to learn the process of designing, redesigning, getting feedback, learning, updating, adding new features on so on and so forth basically the whole reason you got into UX in the first place

5) Product Listing

Coming to the overall product listing page, there were very basic key points and visual cues which were missing. So I went ahead and added 3 new feature that gives user the freedom to browse more effectively —

• All, Latest, Trending
• Layout Selection
• Filter Chips

Following the 3rd Heuristic Principle — User control and freedom

• Now the user can select between the Latest and Trending product under the categories section improving the browsing experience.
• The Filter Chips enables the user to track and delete the specific applied filters rather than going into the filter section everytime to modify them.

3 key features added

These basic problems are face by almost all the users who shop online and such simple features can solve these issues in an effective way. Felt good to solve a problem by design, however small or big, simple or complex.

“Ease of use may be invisible, but its absence sure isn’t.” — IBM

Product Screen Before(left) and After(Right)

6) Search Page

Problem

The online experience almost always begins with search. It is recommended that you design should have recent searches with a search history section. With no search history it becomes difficult for the user to recall the previous searches.

Following the 6th Heuristics principle — Recognition rather than recall

Minimize the user’s memory load by making elements, actions, and options visible

Solution

• Added recent searches section for easy navigation for the users.
• Removed the imagery from the categories, which most of the time wasn’t matching to the product described, and left only text.
• Added a new section called Popular searches with specific product buttons so the user need not always type the product needed.

Search Section Before(left) and After(Right)

5) Product Page

A product page is, no doubt, the page in an e-commerce website where a customer spends most of the time. Product pages are a major touch point for customers and often present the best chance of making a sale.

Given below are major problems the current product page has —

Problems in the current design

Went ahead and solved these major problems related to typography, layout and visual hierarchy.

Rest all the modifications are listed below —

New Product Page

Some interesting facts I came to know —

While exploring I came across a UI feature called Breadcrumb. The name was quite interesting and unique so I went ahead and read more about it and learned its importance in design

Breadcrumb navigation shows the customer exactly how they arrived at a current product detail page. While minimal in design, breadcrumbs can improve user experiences by making navigation easier to interpret.

I planned on implementing Breadcrumbs in the app design. But I learned that Breadcrumbs are navigation elements used mostly in web design. The back button is what the users are familiar in a mobile app. Also, it is said that if your app needs a breadcrumb then your app is not easy to use.

6) Cart Screen

This page is an intermediate point in the shopping process where the customer has another opportunity to re-think whether they want to buy the product or not. Poor design will give them a reason not to.

The improvements made in the page were —

• Addition of progress indicator for user to track the progress and reduce the user’s uncertainty.
• Users can choose to share or remove all of the items in their bag using the whole cart share and delete option along with option to modify the size of the product.

Selected items in the cart

• Option for user to selectively pick items from the cart and proceed to checkout without deleting the rest of the items which they might want to buy in the future.
• Following the 5th Heuristic Principle — Error prevention. In the previous design the entire bottom section was a CTA button with all the details included which may cause user errors. So the smaller but visually dominant CTA continue button will avoid errors which may be caused by slip touch.

Also made sure that I do not violate any guidelines

Touch Target Size —

I made the touch elements have a width and height of at least 48dp, as described in the Material Design Accessibility guidelines

Cart Screen Before(left) and After(Right)

Nice, now after endless browsing your indecisive mind have finally made a choice of the product you wish to buy. So lets go and buy the product :)

6. Payment and Checkout

In the previous design there was no dedicated Payments page which was a critical issue in the UX of the app. The payment section, cart page and product description was included in the same page. It created usability issues, more scroll and information overload .

Previous Cart and Payment screen

I personally faced the problem where I went to checkout after adding products to the cart and didn’t scroll down to view the payment options and the order got placed on COD without any confirmation. Then later I also discovered that there was no option to cancel the order. This issue was because of no dedicated page for proper payment selection and details.

So I firstly designed a dedicated payments page and address selection page for clear and transparent process. The payments page now displays address on the top to remove user uncertainty. Made the payment screen aesthetically pleasing and easy to glance through with some basic UI features.

Address Page(left) and Payment Page(right)

For the order details section —

• Added order tracking and delivery details section which was totally absent in the current design.
• Added a cancel order option
• Added a continue shopping button. Encourages users to continue the shopping experience. Increases engagement.

Order Details Before(left) and After(Right)

5) Category Page

Problem

I was surprised to discover that the current app lacks a category page. The implementation of category pages enables users to easily find their shopping options in one place in a visually appealing format. This feature streamlines the buying process and guides users to their next click.

Up to 70% of online sales originate from Category pages.

Research has found that e-commerce category pages have higher click-through rates in search than individual category pages

Solution

So I went ahead and designed a new visually appealing category page with proper grid system and margin to make navigation and product selection cleaner. Used abstract colors to make the page more attractive so as to grab user attention.

Category Page

6) Profile Page —

Problem

An shopping app’s profile page serves as a central location for users to access and manage their personal data and settings like address and payment details.

Current design does not provide any option to edit the user details. No option to add and edit addresses and payment options. Basic visual cues and important data points were absent in the current design which creates usability issues.

Solution —

• Making the layout of the profile screen more aesthetically pleasing by use of accent color and icons along with proper segmentation and separation.
• Addition of dedicated buttons like Orders, Payments, Wishlist and Offers for better usability.
• Proper display of user details like email and phone with option to edit.

Redesigned Account screen

Account screen before (left) & after (right)

Final Flow and Protype —

Figma Prototype

Check out the Figma Prototype here.

And that’s a wrap.

Thank you for reading till the end.

As someone who regularly shops online, I found this project to be very insightful and interesting. Learned a lot about design thinking, the UI/UX aspect of the apps and the design decisions behind the products.

I’m sure this is only the beginning of lots of projects coming that I can put all my background knowledge and also grow with it. I want to develop my design skills further, learn more, and dive deeper into the field of product design.

It is my first case study, so please let me know how it went. I am always open to feedback, so do drop a comment and don’t forget to give claps for this article.

Do connect with me on LinkedIn and Twitter if you have any questions or just want to say hello and discuss anything related to design.