Finding the right medicine, Faster:
A Case Study on Improving Search and Conversions on the PharmEasy App
How many of us have rushed to find a product and buy it before the sale ends? 😂
I am sure all of us have been in this situation at least once in our life. We search for products regardless of whether there is a sale or not.
PharmEasy, a leading online pharmacy platform, has made buying medicines hassle-free with its mobile app. However, with the vast number of medicines available, finding the right product can sometimes be overwhelming for some users, resulting in reduced conversions and increased drop-offs.
Disclaimer: I have written this case study in a non-linear fashion. So, if you feel something doesn’t add up, read on and you will get the clarity 😊.
📡Exploring this case study
🏗 Setting up the foundation
— Where did it all start?
— Let’s look at my solution first
— Figma prototype of my final solution
👨🔬 Research work
— How I evaluated the screen and found out the issues?
— What insights did I get from my target users and secondary research?
🛠 Building the solution and testing it out
— How did I come up with the UI for the solution?
— My Initial UI Solution
— Figma prototype of my initial UI Solution
— Why my solution didn’t work as expected and what changes did I do?
— Figma prototype of my final solution
🎁 Wrapping it up
— Future scope and key learnings
— Want to see some crazy things that happened during the project?
— Appendix
✅ Let’s look at my solution first
In order to have a better understanding of the solution we need to first look at how the existing screens work.
👇 Here is how the existing flow works:
What could I find and what I decided to do?
Now, based on the business metric that I aim to improve (conversion rate and drop-off) I could identify that the search page (page without any search keyword typed in), the search suggestions and the search results page were not optimized. They are not helping the users to quickly identify the product they want to buy.
My solution for this issue was to redesign the search pages and also add a Filter option to the search results page thus enabling the user to quickly find and add the items to the cart.
👇 Here is how my solution works:
👩🔬 Let’s compare and see what has changed between the existing screens and my version of the screens!
The Quickly order via Prescription CTA has been added back into the page as it is one the ways users can place an order faster. Due to time constraints this part of the flow will be taken up as a future scope of work/exploration.
The Recent searches are displayed in the form of a list to make it easier for the user to glance and tap on them when required.
The Previously purchased items is now in the form of product cards. The users can directly add their required items to cart if they find it here.
If they search based on a keyword they will be shown the search suggestions which is categorized based on its type: Search suggestions, Search in Medicine (products) and Search in Lab tests (will display matching lab tests).
Users are shown the matching products and from here they can directly add the item to the cart without having to go the Search results page.
Based on insights from the users, the filter option is added and it enables the user to find and add the required medicines faster instead of scrolling through page endlessly.
The reason I removed the Seller/distributor name from the product card is because by this time the users would already know the names of the prescribed medicine they ought to buy. Hence based on intuition I decided to removed it.
Delivery time has been added based on insights from users and also most of the competitors display the delivery time in the product card itself.
The Prescription icon (PX icon) was modified to include a text — “Prescription required”. Based on insights from my users this modified icon is positioned below the delivery time to make sure users can locate and understand it better.
Based on insights from competitors the Add quantity button now directly starts adding quantity instead of showing a pop up modal that requires the user to manually choose the quantity.
👇 Here is my Final Solution !
😉 Prototype not working? Play with it separately↗ !
I will now walk you through the process I took to derive the insights and design my solution.
🎯 Where did it all start?
One day I was greeting my new neighbors who were senior citizens. They turned out to be PharmEasy users but they didn’t like the app. Further probing revealed that they were having a hard time finding new medicines prescribed by the doctor.
They couldn’t quite understand the information being displayed on the screens, couldn’t identify the product immediately and hence depended on their children to order the medicines for them.
So, I set out to explore how I can optimize the search flow on the PharmEasy app, making it easier for users to find and purchase the products they need. This would eventually improve the conversions and reduce the drop-offs for the business.
😉 I worked in a 2 week sprint timeline for this project. Check out the schedule here↗
And thanks to my design mentor UX Anudeep I was able to finish this project within the sprint timeline.
📡 Go to Main index 🔼
📝 How I evaluated the screen and found out the issues?
I evaluated the screens based on Heuristics and simple intuition and here is what I found out:
- Search page (without any search keywords):
The Order via Prescription CTA is available to the user before user logs into the app. But this goes missing after user logs into the app. This feature actually allows the user to quickly add previously bought items to cart after uploading a prescription thereby reducing the time required for the user to order medicines.
The Previously bought items are currently in the form of a list. The user cannot add multiple items if they wanted to. If we allow the user to add many items at once it leads to faster check out hence reducing drop-offs.
2. Search page with search suggestions:
For the way the search suggestions are being listed, I have given the severity of problem as 3 because the search suggestions are not distinguishable among search suggestions, products and lab tests.
Hence, some form of differentiation between search suggestions, products and lab tests will make it easier for the user to identify their products.
“We are already have a hard time understanding the doctor’s hand writing on a prescription but the app shouldn't make it hard for us to identify the correct medicine we want to buy. 😓”
- Said by my neighbor who had issues with the app
3. Search results page:
For the missing sort and filter options, I gave the severity of problem as 3 because even though we might assume the users know what medicine they want to buy, this isn’t the case all the time. Sorting and filtering are good ways for the user to quickly segregate or zero in on the product they want to buy.
Imagine this scenario:
🔍 A user searches for a tablet having 250mg as dosage.
🤦♀️ In the search results page, there are hundreds of relevant products being listed but the user could identify only 500mg dosage variant on the current screen.
🎯 Now, using the filter option the user can choose the preferred dosage and see the matching results and then find the tablet with correct dosage.
Other issues I could find are that the estimated delivery time is missing. This is one the most sought after information by the user regardless of the app they are on.
📡 Go to Main index 🔼
😉 Want to play with the prototype directly? Jump right to it! ⏬
🕵️♂️ What insights did I get from my target users and secondary research?
Now that I have evaluated the screens based on heuristics and simple intuition, I needed to validate these to ensure the problems I identified are in fact being faced by other people who use the app and maybe I could also find other issues that I might not have come across myself.
Before approaching my potential target users, I listed down the areas of observation for both my primary and secondary research.
- Observe in general, how the user perceives the existing flow and how the competitors have implemented the same flow.
- Observe if the user is able to identify the product without any help from me.
- Have they shown all relevant information that a user would require to make a purchase decision? Also, is there any other information the user requires to make the final call?
- Finally, any other thing that the competitors have done differently from PharmEasy.
🔭 Checking out the competition:
I chose TATA 1mg (P.S. I’m also a TATA 1mg user 😉), MedPlus Mart and Apollo 24/7 to evaluate as competitors since these are some of the other popular Pharma apps in India and they are as of late aggressively promoting their business on social media.
- Search page without keywords:
🟥 MedPlus app shows recent searches of products allowing the user to go into the product details page to add it to cart.
🟧 TATA 1mg app allows the user to discover products through sale and sponsored products but it does not allow them to add the products to cart.
🟦 Apollo 24/7 app has two versions of the page. Homepage version which shows only recent searches and the Medicine tab version which shows you the previously ordered items that allows you to add products to cart, recently searches and trending searches.
2. Search page with search suggestions:
Search was done for medicines and symptoms. This was done to find out what kind of information is being displayed on the screen and how each app does it.
🟥 MedPlus app shows products as search suggestions which allows users to add the products to cart from this page itself.
🟧 TATA 1mg app shows search suggestions and list items that are products, are showing images of the product enabling users to identify them easily. It is tricky to differentiate between suggestion and product when searching for a medicine based on symptoms.
🟦 Apollo 24/7 app is the only app that has categorized its suggestions — Search in Medicine, In Lab tests and In Consult. While this is a user friendly layout it doesn’t allow users to add products to cart like it did in the main search page.
3. Search results page:
🟥 MedPlus app lists the products just like in the previous search suggestions page. This app currently does not offer any sort or filter options.
🟧 TATA 1mg app provides a product listing page along with sort and filter options. Their product cards also feature the ratings, delivery time and the Add quantity button that directly starts showing you the quantity instead of a pop up modal prompting you to choose the quantity.
🟦 Apollo 24/7 app also gives you a product listing page along with sort and filter options. They have shown the number of search results for the searched keywords at the top and this app also shows you the quantity in the button itself instead of a pop up modal.
The product card lack basic details like delivery, rating and prescription requirements, but one thing they have done differently here is they also allow the user to view the products in the form of a list or in a grid format.
👉 Check out the complete competitor analysis here↗
Based on the insights I gathered from evaluating the competition, I proceeded to talk to my potential target users to derive more insights and pain points if any.
🤔 Who are my target users?
My target users are divided into 4 categories,
- PharmEasy app users aged between 20–40, who buy medicines or other products from the app regularly and live in Tier 1 or Tier 2 cities.
- Competitor app users aged between 20–40, who buy medicines or other products from the apps and live in Tier 1, Tier 2 or Tier 3 cities.
- Non-Pharma app users who get their medicines from the Pharmacy only.
- Any Pharma app users aged above 55, preferably senior citizens.
📞How did I recruit them?
I sent out an invite on a few messaging and social media platforms and got some responses. For the purposes of this project I didn’t recruit the users I know personally as it leads to biased or incorrect insights. I instead requested them to refer people whom I didn’t know and fall well under my target user base.
With this I got a total 8 users, out of which I conducted primary research on 5 users and did usability testing of my solution with the other 3 users.
😉 Want to play with the prototype directly? Jump right to it! ⏬
🧪 How did I conduct the research with my target users?
Since my chosen user flow stops when users add the item to the cart, pretty much the heart of the flow itself are the search suggestions and search results page. So I had to frame the tasks and questions based around these pages.
I conducted interviews during the weekends as people are available and free from their work commitments. That being said, I had only 2 days to conduct all of my interviews and some of the users already had some weekend plans. So, I had to resort to conducting 4 interviews online via Google meet and managed to do 1 guerilla testing.
📃 Tasks I asked the users to perform:
- Open the PharmEasy app and search for a tablet named Ugesic and add it to cart.
- Search for a Medicine based on a symptom of your choice and add it to cart.
❓ Some of the important questions I asked during the session:
📊 What was I able to validate and what insights I got from the users?
- Search page without keyword:
For the problem with the recent searches layout, based on my secondary research I decided to list them out like in search engines like Google or Bing.
2. Search page with search suggestions:
3. Search results page:
📡 Go to Main index 🔼
📓 You can read my entire user interview notes here ↗
Now that I know what to do, only thing left is how to do it? How do I showcase it my solution? Let’s find out…
👨🎨 How did I come up with the UI for the solution?
I used the Crazy 8s exercise to come up with ideas to solve the problem. For each screen I framed a question on how a problem can be solved and for that question/problem I came up with as many ideas as I can.
Once done, I went through the ideas and started to check its feasibility (what would genuinely work for the user) based on the timeline I am working in.
I marked those ideas which made the most sense and decided to create some wireframes using the good old paper and pencil to get a sense of how the ideas could look like before prototyping it.
I came up with 2–3 versions for each screens and marked the sections that can be further taken into consideration while prototyping on Figma.
🤘 It’s off to Figma for prototyping my ideas and build a solution finally!
👨🔬Using Figma efficiently:
I know what ideas to implement, I know where to implement it. I have to figure out how to efficiently build it on Figma. For this, I heavily relied on components, auto-layouts and overlays to build my solution.
😉 Want to play with the prototype directly? Jump right to it! ⏬
For this solution I made use of some basic components like the status bars and some common icons for navigation from Google Material Design 2 UI kit. For the rest of the solution I built all the required components from scratch.
It was challenging to create the product card component. For each product card the image, product name, quantity, delivery time, prescription requirement, price and add to cart to cart button can change.
To make the product card creation easier and efficient I made the images and the product details into components, combined them as variants and built my product card using auto-layouts.
Next tricky thing to create was the sort and filter options. If this solution was for a normal E-commerce app, then I would know what to include as filter options. But since this is for a Pharma app and my flow deals with buying medicines specifically, I needed to know what kind of filter works the best for the users.
I turned to one of my competitors and research insights for inspiration and I incorporated the filter options into the solution by making use of overlays and creating the animations for swapping the overlays accordingly to make it look realistic.
My Initial UI Solution
🔍 Search page without keywords:
My flow deals with search. But in figma I cannot apply any intelligence i.e. get input from user and show the response accordingly (making it look realistic). I had to get the UI done in 1 day so I opted to provide the search keywords directly in the search page under recent searches for the user to identify and use.
This may not be the most efficient way to test out a solution but based on the time constraint I had, I decided to go for it.
🔍🔠 Search page with search suggestions:
I added 3 sections in total- Search suggestions, Search in medicines and search in Lab tests.
I refined the Search Suggestions layout, made it more clear and distinct, included a “add to search”- ↗ icon at the right end to make it clear for the users to distinguish between search suggestions and products.
The “Showing suggestions for:” text is added to provide more clarity to the users in case the search doesn’t yield direct product match.
Eg. Finding a medicine by searching through a symptom.
The Search in Medicine section contains the matching product that is most relevant to the searched keyword and enables the user to add it to cart without having to go to the search results page.
⌨Search results page:
In this page the users can have a complete view of the product listing, sort their products and also apply filters to shorten their list, enabling them to find their products faster.
👇 Want to check out the entire prototype?
😉 Prototype not working? Play with it separately↗ !
📡 Go to Main index 🔼
😟 But why the target users didn’t like it immediately?
🕵️♂️Why my solution didn’t work as expected and what changes did I do?
I was confident that my solution will work. I was so excited to showcase my solution to users and get feedback. But I had quite a revelation. My solution was not entirely working for the users.
I tested out my solution with 3 of my target users. I gave them the same tasks I used for the primary research and they were able to perform the task. During the usability testing session I asked a series of probing questions to validate my solutions.
👉 What did I want to validate with the users?
- Whether they can understand that the previously ordered items are helpful for them or not.
- Whether the user is able to identify medicines that require prescription.
- Whether they understand that they can add items to cart from the search suggestions page itself.
- Whether the sort and filter options are useful for them and would it help in their decision making process.
👉 What got validated and what didn’t and insights I got?
This was an eye opener for me as I got to learn new things which I didn’t learn from my previous testing session.
- Users felt the sort options are in no way useful —
I realized sorting doesn’t really help when buying medicines since PharmEasy allows only one licensed distributor to sell one type of medicine unlike E-commerce apps where you can have multiple listings of the same product. This means the user has to buy the medicine regardless of the price being shown to them. - Users felt the filter option to select brands was not helpful —
Users buying medicine online already know what kind of medicine they have to buy. And one type of medicine is produced only by one company. Given that it makes no sense to have a filter option for brands. - Users wished they had a filter for choosing quantity —
Even though there is only 1 product card for 1 medicine, there could be multiple variants of the same through quantity/dosage variations. That’s when it hit me, a filter option for dosage/quantity would help the user to pick out the medicine in the right dosage or quantity levels as prescribed by the doctor.
📡 Go to Main index 🔼
😉 Play with my final Figma Solution you came across at the beginning🔼
🚀 Future scope and key learnings
Well, that’s a wrap! I had an amazing time doing this project using sprints. I certainly hope that these changes, if implemented by PharmEasy, would help the user and also help the business in improving the conversion rate and reduce the drop-offs.
Here are some of my realizations and learnings:
🤘 There are many ways to build good UI, so don’t stick to only one approach.
🔬 I learned the importance of doing primary research and learned how to ask probing questions to users based on their previous answers.
😂 I learned how not to do Guerilla testing .
⏳ I learned to manage my limited time effectively and get my project done within the 2 week timeline.
🤪 Want to see some crazy things that happened during the project?
- One of the Pharmacists I talked to revealed they get some customers who won’t make a purchase without reading all the ingredients of a medicine.
🤔 Do you think it’s a quirk or is there some genuine reasons behind it? Post your comments below ! 🗨👇 - Some of my target users treat Pharma apps like Flipkart and Amazon😂. They prefer to do a price comparison across platforms before making a purchase. I thought we don’t do these things for medicines but I was wrong.
- 🚨 During guerilla testing, one of the users threatened me with a police arrest if I did not reveal my true intentions.
FYI, my intentions were to test out the apps and find gaps in the user experience 😂
📃 Appendix
Here are the links to all related documents used for this project,
- Schedule of my sprint timeline↗
- Competitor analysis file↗
- User interview notes↗
- Figma design file for my final UI solution↗
If you liked my work and wish to collaborate with me on a project, you can reach out to me via- LinkedIn↗ or Gmail📧.
📡 Go to Main index 🔼
