EZ Pharm

Customer Journey Map

When my team started this project, we conducted a series of structured interviews using directed storytelling with three participants of varying ages and different experiences with obtaining medication from a pharmacy. We asked our participants to walk us through a specific recent pharmacy experience of theirs.

We each used our results to create individual customer journey maps that reflected our participant's feelings throughout their experience using a standardized template, primarily focusing on each participant's emotions as they navigated the pharmacy experience so that we could quickly identify the points of the journey when the participants experienced the most friction.

We compiled our results into an overall customer journey map that we used to uncover pains and gains and divide the journey into sections that helped us identify key insights.

Design Brief

Following our refined journey map, my team drafted a design brief defining the goals that would be in scope, might be in scope, and would be outside of our scope given our limited resources and time span.

Scenarios and Storyboards

Each member of our team created scenarios and accompanying storyboards addressing specific pain points we identified from our user research. For each scenario and storyboard, we considered how our design would address each issue.

Site Map and Paper Prototyping

With the goal of reducing uncertainty throughout the process of ordering prescriptions from the pharmacy in mind, my team created a paper prototype for testing based on a site map that I created.

As we created the wireframes and paper prototype with the user needs we uncovered, we focused on the user flow for ordering a prescription. We gave the user the option to choose between one-time and recurring order, and also between pick-up and delivery. Our goal was to minimize uncertainty, so we incorporated a timeline widget that would allow the user to see the estimated time between steps in the delivery process. Because we wanted the user to have further control and flexibility over the process, we gave the user the option to order their prescriptions through the prescriptions page after clicking the account icon and from the search page.

However, after critique, we realized that needing to navigate to the account page to manage prescriptions was not intuitive, so we focused on changing our site map to refine the user flow in our next iteration.

Low-Fidelity Prototyping

After receiving feedback about how it was unintuitive to have the user manage their prescriptions from the account page, we added a direct link to the prescriptions page in the bottom navigation bar. The rest of the features in this iteration were similar to those of the paper prototype.

However, as we finished this iteration, we realized that the navigation bar was starting to feel cluttered. It was difficult to account for the combination different tasks of ordering one-time and recurring prescriptions for pick-up and delivery. There was no call to action when the user entered the site, which gave users little incentive to use it. It was getting confusing how to integrate information on order intervals and order type consistently across screens. As a result, we decided to narrow the scope of our task again for our next iteration, focusing on just ordering a recurring medication for delivery.

In this iteration, I did the first pass on creating the frames and did all the wireframing.

Mid-Fidelity Prototyping

As we further narrowed the scope of our design, we decided to remove the option for pick-up. Instead, we focused on the process of ordering and managing a recurring prescription because this was the user need that we uncovered during our research that we felt had the greatest design opportunity.

With these decisions in mind, we removed the search page to reinforce the user flow of ordering prescriptions from the prescription detail page, which the user can access from the home page, prescriptions page, or orders page. We also enhanced this flow by adding feedforward to the interactive elements in the form of calls to action.

We added a calendar for the user so that they would be able to see their full prescription schedule for the month to give them more visibility into their order information and reduce uncertainty.

This iteration marked the greatest shift in our design direction, as we focused more on the flow than the layout of the site map. As a consequence, the navigation bar and site map improved organically. They matched the steps the user would take to complete their task, rather than including redundant, irrelevant, or distracting information.

Solution

Refining our mobile design from mid-fidelity to high-fidelity, our team made final adjustments to to make the notification prominent but easily dismissible. We used animation to indicate that the new prescription is added to the “Prescription Schedule” list once the user dismisses the notification. We also added a way for users to see how much their prescriptions would cost upfront so that they would not have to wait until they were at the pharmacy and a way for users to quickly access pertinent information about their medications.

Setting the expectation that the recurring prescriptions would occur at the doctor's office allowed us to streamline the user experience. We further simplified the website by reducing the number of pages. We allowed the specific user flow of monitoring and ordering a recurring prescription to dictate the UI. In this iteration, I cleaned up the layout, set elements to the grid, did the wireframing, and did some color styling.

After finalizing the mobile UI, my time started designing the desktop UI. We took advantage of the wider and overall larger form factor to show more information at once without requiring the user to scroll or switch tabs. The larger aspect ratio meant that we could show more relevant widgets at once, which would allow the user to make decisions on recognition over recall. Working from mobile to desktop allowed us to focus on presenting essential information before adding other details. For this iteration, I cleaned up the layout, did some wireframing, and helped style the UI.

Prescription Notification

As the most pressing call to attention, important notifications appear at the top of the home screen. Prescription notifications include important information about the refill schedule and ship date so that the user can feel reassured about their next pharmacy trip. The user can also tap on the drug name to learn more information about it.

Active Order Notification

The active delivery timeline widget allows the user to see a granular view of their prescription acquisition timeline. With this widget, the user can pick up their prescriptions at their convenience knowing that the prescription is ready.

Prescription Delivery Schedule Calendar

The prescription delivery schedule calendar allows the user to see a monthly view of when their prescriptions will be ready free of distracting events. It allows the user to plan around prescription pickup and set delivery windows for certain prescriptions for added flexibility and convenience.

Results and Takeaways

This project was my first time building a responsive web design starting from a mobile form factor to a desktop one. Focusing first on the constraints imposed by the smaller mobile design forced us to determine what information was essential to the user experience and prevented us from including any information or processes that would detract from our narrow scope because it always felt tempting to add features that we felt could enhance the overall user experience but would not necessarily improve the main flow.

I applied knowledge I gained from previous units, including my understanding of progressive disclosure, data visualization, process funneling, feedforward, and feedback. This project allowed me to integrate all these techniques in one prototype, which emphasized the importance of a narrow scope, as we constantly returned to the narrative of our prototype in how it aimed to meet specific user needs. This narrative was especially important because it unified all our design decisions and underlied our pitch.