UX Case Study — Improving the PharmEasy Search and Purchase Experience
In this article, I will elaborate on my approach to re-design the PharmEasy Search and Purchase Experience.
What is PharmEasy?
PharmEasy is a renowned e-pharmacy company that sells online medicines, diagnostics, and telehealth.
Why the Re-design?
In the past, when tried to search for a product on the PharmEasy website for the first time, and found the website design to be a bit cluttered. The website had some unusual design patterns that made it difficult to navigate. Additionally, it lacks external consistency and standards, which led to confusion.
Here are some of my observations that I’m going to explain in the Case Study:
- Repetitive CTAs (call-to-actions) make it confusing to perceive and take action.
- Missing sort and filter options on the search results page make it difficult to find specific products based on preferences quickly.
- Lack of visual hierarchy can cause important data points, such as variant and quantity selection, delivery date, and pricing, to be overlooked.
Competitive Analysis
Before starting the project, I did a competitive analysis to identify existing design patterns. Studied the user flow of all kinds of e-pharmacy websites to understand a user's decision-making factors better. Some of the websites were -
- Apollo Pharmacy — https://www.apollopharmacy.in/
- Healthmug — https://www.healthmug.com/
- Netmeds — https://www.netmeds.com/
- 1mg — https://www.1mg.com/
Although these platforms share similar functionality, they still differ in how they shape the search and purchase experience.
Search Experience
The purpose of the search results page:
- To provide the user with a list of Products and other related data points (quantity, product brand, product type, and price).
- To let the users decide while giving them options to filter the search results according to their preferences.
- The page layout is optimized for user experience, allowing users for easy navigation and information retrieval.
Problem 1: “Offers” emphasized over “Wishlist”, which results in repetition.
The user has to click on the profile dropdown to see “saved items”
and the offers (links) are repetitive.
Problem 2: No sort/filter options
Suppose a user wants to purchase a specific brand of prescribed minoxidil medicine. He/she might have to scroll down extensively to find the brand and the medicine form (solution/lotion/tablet etc).
Another way to search on the website is to enter the entire query into the search field, such as "Dr. Reddy's minoxidil medicine." However, there is a high probability of receiving no results under certain conditions.
Problem 3: No “Wishlist” CTA
There is no option to save items for later on either the search results page or the individual product details page.
Problem 4: Repetitive Cart Options
Does it make sense to show an empty cart to the user when it's obvious that the cart is empty?
And is it necessary to have a "View Cart" CTA while showing search results when there is already a “Cart Link” in the navigation bar?
Solution
- The "Offers" link is moved to the profile dropdown to highlight the "Wishlist".
- Using the "Filters/Sort" feature can assist the user in smoothly achieving their desired purchase.
- The "Add to Wishlist" button enables users to save items for later.
- I eliminated the “View Cart” CTA due to repetition. Also, a horizontal layout with vertical cards would be a better option, enabling the user to see more results in a single fold.
Purchase Flow
To buy a product, a user needs to follow a series of steps:
Product Details Page
The purpose of the Product Details Page:
- The Product Details Page is an essential component of an e-commerce website as it provides crucial information to users and helps them make informed purchase decisions.
- It displays an item's price and any available discounts and indicates the availability status. It also allows the user to choose a variant of the item they want to purchase and provides an option to save it for later.
Use Case 1 — Without Variant Selection
Problem 1: No quantity selector
After clicking the call-to-action (CTA) button, a drop-down selection for quantity appears. However, this can lead to confusion for users since the quantity selector should be placed before clicking the CTA.
Users may not realize beforehand that the CTA button changes to a quantity selector after adding the product to the cart.
Problem 2: Missing “Wishlist” option
Users do not have the option to add products to the wishlist.
Problem 3: Repetitive quick links
Rather than showing it repeatedly, why not show it on the left side of the product details (as a sticky scroll), so that it would be accessible anytime and the users won’t get confused.
Problem 4: Offer details
Why are “offers” emphasized this much? Also, every “offers” link/button takes the user to another page without giving any information.
Side Sheet for offer details in the first place? When you can just give an overview of offers with concise information.
Solution
- Enabling the "Quantity Selection" beforehand can help reduce cognitive load.
- The “Add to Wishlist” button enables users to save items for later which encourages interaction without immediate purchasing commitment.
- Placing the "Quick Links" section on the left-hand side of the page makes it easy to navigate and reduces clutter.
- Highlighting "Offers" with concise information as an accordion would help users quickly view it, instead of showing it as a side sheet.
Use Case 2 — Variant Selection
Problem 1: Visual Hierarchy
It lacks visual hierarchy as the CTA button is placed above the variant selection.
Solution
Arranging the Variant Selection, Quantity Selection, and Call-to-Action buttons in consecutive order will improve usability, discoverability, and eventually a better visual appearance.
Cart Experience
Problem 1: Copy and CTA level
It’s a tertiary-level CTA (Text Button) but it should have been given more prominence.
Problem 2: Visual Hierarchy
The CTA button is prioritized over everything which exploits the conventional design pattern because it’s highly unlikely that any user would want to add the address before even applying the coupon.
Solution
- The Text Button has been given more emphasis and converted to a Stroke Button (secondary level CTA).
- The “Apply Coupon” section is prioritized over the CTA as it is the conventional design pattern.
Problem: No alternative recommendation for out-of-stock items
Let’s say a user added an item to the cart a few days ago but didn't order it.
Instead of showing nothing, why are you not recommending any alternative that a user could get?
Solution
Pitching an alternative will reduce churn and increase the order value which would help both the business and the user.
Problem: “Confusing call to action”
The plus icon could create confusion, after clicking the plus icon — would the item be added to the Cart or will it go to the Wishlist?
Solution
Changing the "Plus Button" to a Primary CTA will clarify that it adds to the cart.
Address Page
Problem: Address Fields as a Side Sheet
It is an unconventional design pattern that lacks external consistency. The purchase flow should be progressive, but here it sticks to the same page and shows the added address details, increasing the chances of blindness even after adding the address.
Solution
Exclusive page for adding address details to ensure successive progression.
Checkout Page
Problem: Radio Button accompanied by Delivery Date.
What’s the use of the radio button here? Will users be able to change the delivery date?
Solution
The radio button should be for selecting the address rather than for the delivery date which would ensure clarity.
Payment Page
Problem: Why only UPI?
What if a user forgets their UPI ID? They would need to check their phone to retrieve it.
Solution
Showing all the payment options on the left would help the users make a quick decision.
Learnings and insights
- It is essential to maintain consistency, both internally and externally, by following the heuristics of usability.
- Visual hierarchy, especially in terms of CTA button levels, plays a crucial role.
- Adopting a user-first approach is a beneficial strategy for businesses. It is a win-win situation that ensures both the business and its users benefit from the approach.
