Making the experience of ordering from pharmacies smoother for users.

Problem Statement

Users get lost in the sea of pharmaceutical and spent a long time searching for clues for what to buy. user-friendly, personalized, and intuitive interfaces an effective and efficient manner. to create a straightforward, linear ordering process. We also designed an AI-based chatbot to offer guidance.

Process

We started by using a variety of preliminary generative research methods, such as direct storytelling and semi-structured interviews, to develop a deep understanding of people's goals, tasks, behaviors. We proceeded to visibly identify pain points involved in online pharmacy-shopping with customer journey maps and storyboarding. We further employed iterative methods like user testing to quickly generate, test, and revise our prototypes.

My Role

We are a team of 4 and I worked as a UX designer, creating a coherent experience across devices and leading the concept development and ideation of all pages. I mainly contributed to the optimization of the product pages, and the core feature, PharmAssist, which is a AI-based chatbot that directs customers to the products they need with ease.

Skip to Final Designs

Customer Journey Map

We made maps corresponding to our interview participants. The maps revolved around aspects including Scenarios, Expectations, Actions, Experience, Opportunities. We broke down the ordering process into different phases and analyzed touch points and users’ thought process in each phase.

This early-stage, generative research helped us develop a better understanding of the user flow and the pain points in every stage of the process. We discovered opportunities for improvements and innovation, to design a straightforward, linear ordering process and ease users’ hassle.

Prototyping

Low-fi Prototypes

We used a multi-column system throughout our desktop, tablet, and mobile designs to provide more consistency and structure and make the interface responsive. On the desktop screen, we utilized a 12-column grid while using 8 and 4 columns on the tablet and mobile levels.

PharmAssist - Contextual & Proactive

We named our chatbot ‘PharmAssist’ and decided to make it appear on all pages of the site to make it more accessible.

Our chatbot detects whenever the customer is stuck in finding the item that they want, whether from the long search period, constant navigation without any items added to cart, or leaving the tab to search for items best suited for their situation. Furthermore, if the user is dwelling on a certain search results page, the chatbot automatically predicts symptoms users may have like migraines for head pain relievers, and prompts a relevant, helpful message.

The chatbot button expands to include messages to get the users’ attention and notify them of its capability and support.

Future Opportunities

Possible Feature Additions

Based on what we’ve learned while designing this interface and an AI-based feature, we believe there is a lot of scope for using AI in the pharmaceutical industry like chatbots, search queries, keyword detection, etc.

One possible feature is a camera-based detection system that identifies and detects symptoms that a user may have, based on imagery like video input, images, or real-time video. This feature goes hand-in-hand with a conversation with pharmacists or doctor’s advice, and could be used as support during such sessions.

Mid-fi Prototypes

At Mid-Fi stage, we experiment with design patterns and visual styles to suit our service and provide a coherent experience across devices.

High-Fi prototypes

We were able to visualize an improved online pharmacy experience in our high-fidelity prototype, responsive to accommodate different devices using adaptive layout and components.

Home page

To demonstrate our idea and make navigation easier, we fleshed out details regarding contextual categories and recommendations. Users were presented with seasonal and personal recommendations based on their past purchases. These thoughtful entries will help users navigate to desired products more efficiently.

Direct Storytelling

We conducted two rounds of storytelling sessions with a total of 12 participants. We focused on unraveling insights regarding users’ previous experience with online pharmacies. We jotted down thoughts about their ordering experience like what they enjoyed or found inconvenient. Based on our research, we realized that the pharmaceutical industry involves many domains to explore, like prescription and non-prescription drugs, medications with or without insurance, etc.

For in-depth research and robust execution, we narrowed our problem space to non-prescription medications without insurance. This allowed us to focus on our target customers, filtering out many logistical problems within the pharmaceutical context.

Rapid Research

Affinity Mapping

Design Brief

Findings (what works or doesn't work with existing designs)

It takes time for some users to locate particular medical products because the interface is messy and ill-organized.
The search bar doesn't always give satisfying results because users often get the drug names mispeled.

Users need more support for which medicine to buy.

Users like to get diagnosed and be offered with some advice through chat, audio, video (when they are not experiencing serious medical issues) because it's more convenient and less costly than visiting a doctor .

Users sometimes get lost in the sea of products and don't which to buy

Insights (what we should keep in mind when make our designs)

The design should be simple and easy-to-understand.
Symptoms/conditions-based filters may be employed to help users locate the products they need as symptoms are more intuitive than drug names.

The design should provide users seeking advice with some assistance.

The design should allow users to compare products in terms of their use, side-effect, cost, brand, etc.

Refined Problem Space

Our preliminary research defined our problem space by giving us three main pain points or opportunities to target while designing our new interface:

Pain point #1:

Users felt a main disconnect between their needs or symptoms and available medicine. They hoped to find a solution that would make finding the right product easier

Pain point #2:

Users wished that they could get quick medical advice without having to go to a hospital for small issues.

Pain point #3:

Users wanted to make comparisons between products while enjoyed a quick and intuitive interface since their intention behind using pharmacy websites was not to browse or window shop, but to get quick answers.

After examining the pain points, we asked ourselves:

How might we direct customers to the type of medications they need in an effective and efficient manner?

How might we put our vision of a more user-friendly online pharmacy into practice?

Ideation

Scenarios & Storyboards

Scenario: During his daughter’s period, a father was guided by the AI chatbot on the pharmacy website to pick the right products for her.

Wireframes & Paper Prototypes

The home page is designed to be highly personalized and cater to the users’ needs. It provides users with lists of items based on the current time/season, users’ preferences, lifestyles, past purchases, etc.

The chatbot “PharmAssist” helps customers with the shopping process. It guides them towards products that best suit their situations by asking a series of easy-to-understand and personalized questions.

We also prototyped a product results page, profile page, orders & refill page, and a variety of UI components like filters, navigation bar, and a hamburger menu to provide the users with a complete and smooth experience.

We explored different views including the desktop, tablet, and mobile view and made sure that the information and style remained consistent throughout.

Think-aloud testing

Tasks

We tested our prototypes using the think-aloud protocol to gather more user feedback. We designed a list of main tasks for the participants to finish during the session, including:

Purchase a type of medication
Compare between medications
Check your order status
Make a refill

While the participants were doing tasks, we asked them to think aloud, which gave us a deep look into the users’ thought process and their feelings about our product.

We observed their actions, paid attention to what they said, and tried to capture any confusion or disappointment along the way. The think-aloud sessions helped us identify which aspects of our system were confusing and discover new opportunities for improvement.

Findings

1. The chatbot icon is hard to recognize

2. The chatbot is not frequently used.

3. Users are suspicious about the chatbot when it recommends a specific brand

Solutions

1. The chatbot button can have micro animations to get the users’ attention.

2. The chatbot should automatically pop up when the user gets stuck

3. The chatbot should help users make comparisons among brands and products.

Search Results

Our search bar actively parses user input from ‘natural language’ to filter options. This means the results are more accurate than matching keywords in plain text, allowing fuzzy inputs, such as diseases and symptoms.

For example, searching “cough” would not fetch products with names containing “cough.” Instead, it checks the “Cough, Cold & Flu” category filter, making it easier for filtering and comparisons.

Information Tags

On existing pharmacy websites, we noticed inconsistent typographic signals and layout in the additional information of a product. Our solution is a color-coded tag system to help users recognize product types by skimming rather than reading.

Product Page

For many customers, timeliness is a critical aspect of an online delivery vendor.For the product page, one step further from the industry standard design, we highlighted the critical delivery information, including in-stock location and shipping times.

Order Tracking

Our user testing results were mainly positive about the order tracking experience within these pages.We implemented some micro-interactions and small visual design changes. We populated our design with real items to simulate the real experience, and we made our ‘orders’ section more descriptive and informative.

PharmAssist - Conversational

When users open our PharmAssist chatbot, they can have a conversation with the bot to get to the medication they need. Users can provide information such as their conditions, symptoms, or situation and the bot will automatically predict what they might have and need.

By having this feature, users do not need to look up symptoms on different sites to get the information they need. The chatbot will provide this information, and immediately redirect them to products within our pharmaceutical platform.