Ashley Kim

FastPharm

Responsive web design for delivery orders from a local pharmacy.

FastPharm

Overview

In a world where everything can be easily ordered and delivered to the front of one's door with a couple of button presses, ordering a delivery from a local pharmacy should not be any harder. However, to a surprise, ordering a delivery from a local pharmacy is not as common as ordering deliveries from a supermarket or a restaurant -- whenever pharmaceutical products are in need, people typically go to the pharmacy in person or ask a friend a favor. Although delivery apps for local pharmacies are not widely used or well-known, it is obvious that such a service would be highly beneficial for increasing efficiency and convenience, just as other delivery apps do.

Interested in investigating the public's interaction and experience with pharmacy delivery apps , we researched and designed a responsive user interface for the online pharmacy delivery order platform.

Team

Ashley Kim
Michelle Lu
Preethi Surapaneni

Role

UI/UX design
UX research
pitch presentation

Duration

Nov 9 - Dec 9, 2021
(1 month)

Tool

Figma

Challenge

How can we improve the user experience of the online pharmacy delivery application for a wider usage?

The best way to learn about current user's experience is through interviews with the current users. Hence, to capture users' current experience and identify the opportunities for improvement, we seeked for several users who have ordered a pharmaceutical products delivery from an online platform to hear about their personal experience with the applications. Finding the rapid research participants was much harder than we expected, as more people than we thought never used or heard any pharmacy delivery applications.

Early Stage Rapid Research

Since well-defined goals, plans, and actions serve as a clear guideline throughout the design process, we first developed our own prior to conducting interviews. We followed the following diagram in developing the responsive application: Plan for UIUX design: 1.Pre-survey 2. Interview 3. Analyze 4. Prototype 5. User Testing

Plan for UIUX design: 1.Pre-survey 2. Interview 3. Analyze 4. Prototype 5. User Testing

Once we developed a set of interview questions, we asked four users of existing platforms about their delivery order experience. Through the interviews, various advantages and disadvantages of pharmacy delivery applications have emerged, which we organized into a chart shown below: Pros and Cons of current delivery system

Pros and Cons of current delivery system

Such insights then allowed us to think of potential social and material concerns to keep in mind while designing an inclusive and user-friendly interface: Pros and Cons of current delivery system

Stakeholders

Based on our rapid research findings, we defined our primary target users to be those who are unable to visit the pharmacy in person due to various reasons including busy schedule, sudden sickness, and lack of transportation. We have narrowed our target users as such because many of the interviewees and the disadvantages had to do with navigating through the over-the-counter products. In order to develop a solution that thoroughly addresses the problems within our focus, we have noted but did not included the users who are in need of prescription orders as part of our target audience.

Scenarios & Storyboard

Considering the situations that our research participants were in when ordering a delivery from the local pharmacy, we produced three distinct scenarios and storyboards regarding how the users may solve their issues using our application interface.

Three scenarios each revolved around the following wants respectively:

"I wish I didn't have to do my own research to figure out what kind of medicine would work the best to fix my symptoms."

"I wish I could talk to the pharmacist for their opinion while browsing through the products."

"I wish I could easily see all products related to a specific category so that I don't have to look products up one by one."

Customer Journey Map & Area of Focus

We then developed customer journey maps for each interviewees, as well as the collective customer journey map for our target user groups. We decided to focus our solutions on improving over-the-counter products search .

(View individual customer journey maps)

User Flow

Upon gathering necessary information into a single project design brief document, we mapped out the user flow to have a clear understanding of how the elements should be laid out on the screen.

View design brief

Low-Fidelity Paper Prototypes

Paper prototypes have its merit in that they're a cheap and easy way to gain valuable user insights about the initial design ideation. With the wireframes and user flow in mind, we quickly produced paper prototypes for the think aloud user testing.

View full paper prototypes

Paper prototype low-fidelity mockup of FastPharm

Think Aloud User Testing

Using our user scenarios and paper prototypes, we conducted two think aloud user testing with two groups of three. The participants overall natrually followed our intended userflow and were able to easily navigate the interace to achieve the given scenario's goal.

We also gained great feedback and suggestions in the process of user testing. Because we were able to hear the user's thinking process as they navigate through the interface, we learned that simplifying the navigation bar and adding more filters to the products listing page would improve the user experience.

Wireframes

Combining the user flow, paper prototypes, and insights from think aloud user testing, we created wireframes for our low-fidelity interface design. Part of the wireframes were used as the intended flow for the think aloud user testing, which is shown below: Wireframe for FastPharm app

Mid-Fidelity Prototypes

Reminding ourselves of the metaphor "Content is like water", we started with a mobile version of the interface then expanded to the desktop version. Mid-fidelity mockup for FastPharm

In the prototyping portion of the project, I was mainly in charge of designing the mobile version of the FastPharm. Since our phones nowadays all have the scrolling interaction that has become intuitive to the mobile users, we utilized the vertical layout for the categories and product browsing pages on mobile.

For the desktop version, we redesigned the product browsing pages on the desktop screen to display the product cards in a horizontal manner. Such decision was made in consideration of the extra space the desktop platform offers compared to the mobile platform. We further utilized the extra space by placing the list of all categories on the side to help the user navigate the extensive catalog of products; however, in our hierarchy of importance, we did not consider this a high-priority feature, which is why it was left out of the mobile design.

View mid-fidelity prototypes:

Mobile | Desktop

Hi-Fidelity Prototypes

With our mid-fidelity prototypes, we asked three different groups of three to four college students for their impressions and feedback. We asked college students because they satisfy our target user group, which is "those who cannot go to the pharmacy in person due to varying reason including busy schedule." Based on their feedback, we made 3 major design changes: customized detailed symptoms input search, product recommendations criteria transparency, and real-time chat with local pharmacist.

Customized Search by Symptoms

One of the feedback we received was to have the platform suggest product recommendations based on additional information as well like the duration or the severity of the symptoms. Previously, we only prompted the users to input what types of symptoms they were experiencing, which wasn't specific enough to provide customized search experience.

Hence, our high-fidelity design asks the users to indicate the duration of the symptoms using the dropdown selections, as well as the severity of the symptoms in a scale of three. Such additional information will then be used to determine the common type of illness with the indicated set of symptoms, which allows the users to have a personalized product search experience.To secure user's health, we also included a caution that states should the user in need of a serious medical help, they should dial 911 immediately.

More Informed Product Recommendation

In order to help users make a more informed purchase using our platform, we inlcuded 2 new features to help increase transparency regarding how the website is recommending the products. The first is the type of sickness suggestor at the top that informs the users that they may be having a specific sickness based on their symptoms input. By using the predictive nuanced languages like might and including the sentences like if symptoms persist, please seek professional medical assistance, we clarified that what this platform suggests isn't a confirmed diagnosis by a doctor or a pharmacist.

The second feature is to provide additional recommendations among the products that have been filtered by symptoms based on the highest rating, the best value, and the fastest relief. We ideated such that the highest rating would be based on the user review, while the best value and the fastest relief would be based on the pharmacists' recommendation.

Similar to other ecommerce platforms like Amazon, we wanted to help our users make easier and more accurate decisions by providing helpful information and metrics.

Real-time Chat with the Local Pharmacist

Should the users not know what to get even through the three different ways of product search mechenisms, they can directly have a chat with the local pharmacist using the chat feature on our platform. We included this feature to provide greater flexibility to the users, as humans are far more complex than what a machine can cover.

Although we designed this interface with accessibility in mind (as we stated in our design brief), there still may be aspects that is easier or only can be solved by human to human interaction. This feature is intended for such, so should the users have any questions to ask the pharmacists or would like to hear their opinions, they have the choice to do so.

Interactive Prototype

Interact with the mobile prototype below or view our desktop prototype here.

Reflection & Takeaways

This project was a great opportunity to brush over the general process of a UI/UX design development. This was also the first time I've tried paper prototyping, which I experienced its merit in that it is disposable and easy to make without any particular skills in advance. Previous to this project, I thought paper prototyping is not as useful in gaining user insights due to the playful feel the paper craft naturally contains, or as shareable compared to the quick (in my opinion) mockups on interface design tools like Figma or Adobe XD. Despite my worries, paper prototypes brought valuable user insights during the think aloud user testing sessions. Personally, I don't think I'd be using paper prototypes as often for the clearer communication purpose (oftentimes one's handwriting isn't legible to all). However, with the experience of conducting think aloud user testing using the paper prototype, I think I'll be able to quickly mock up a design using paper prototype when needed -- It sure is a useful skill to have!

Overall, I enjoyed trying new methods throughout the process of developing a responsive web design for the pharmacy delivery platform. Focusing on a specific portion of the design, in this case improving a search mechenism, definitely allowed us to visually communicate with others and give a firm understanding of how other parts of the platform may be designed in the pitch. If chance in the future, I’d like to explore integrating other features that we discussed during ideation like notification system and prescription scanning feature.

FastPharm

Responsive web design for delivery orders from a local pharmacy.

FastPharm

Customized Search by Symptoms

More Informed Product Recommendation

Real-time Chat with the Local Pharmacist

View Other Projects

Spin Dashboard

Blinded