How might we tackle language barriers in the drugstore?

Identify App — a UX case study

Hope Magracia

--

For those who may have limited English language abilities and are unfamiliar with U.S. drugstores and their products, it can be very difficult to identify the right over-the-counter medicine for their symptoms. Our team has designed an app that will help in finding the right medicine and making sure they feel confident that it will treat their symptoms.

Overview and Problem Space

Drugstores in the U.S. can be very difficult to navigate for those who have come here from somewhere else. The drugstore back home only sells drugs, not housewares and birthday cards. And everything is named differently, packaged differently from products in the U.S.

In U.S. drugstores, the shelves are filled with tons of products with similar packaging to one another, with names that usually differ greatly from their main ingredient. And Google Translate can only help so much — ‘Advil’ is apparently still ‘Advil’ in every other language.

Language and cultural differences can pose a great problem for something as seemingly simple as buying fever medicine and can have deadly consequences. A fever left untreated is no laughing matter.

This issue of language and unfamiliarity in the drugstore resonated with our team and we decided to explore this problem space for our project.

Scope and Constraints

We were a team of three UX designers and we had just under two weeks for this project.

Methods

(The methods italicized will not be detailed in this case study.)

  • User Research: Screener Survey, User Interviews
  • Research Synthesis: Affinity Mapping, Persona, Journey Map
  • Problem Statement
  • Competitive Analysis: Competitive Landscape Matrix, Competitive Feature Analysis
  • Ideation: Feature Prioritization, Platform Selection, Design Studio, Wireframing
  • Prototyping: Low-Fidelity, Mid-Fidelity, High-Fidelity
  • Usability Testing

The insights we gathered from our five user interviews are represented by our persona, Jaxon. Learn more about Jaxon below.

Jaxon has just arrived in the U.S. from Brazil with limited English language proficiency. He has come down with the flu and needs over-the-counter medicine for his symptoms. Jaxon goes to the drugstore but doesn’t know which medicine to buy for his fever.

Next, you’ll see a simplified view of Jaxon’s experience finding fever medication at the drugstore, highlighting his emotions at each step of his journey.

After getting to know our users, we translated their goals and needs into a problem statement to guide the rest of our design process.

Problem Statement:

People with limited English proficiency and who have migrated from another region are unfamiliar with U.S. drugstores and their products.

Jaxon needs help identifying the products that he needs and simple translation apps cannot account for the context in which products are intended to be used. Jaxon wants to be able to feel confident in his purchase and trust he is making the right decision.

How might we help Jaxon gain familiarity with U.S. products in drugstores so he can feel confident he is purchasing the right products to meet his needs?

Competitive Analysis

We looked into our problem space in terms of competitors and comparators to see who and what might already be solving some of our users’ problems, and how. Here’s a quick summary.

User Need: Understand U.S. products labeled in English

  • Translation — Google Translate is the gold standard. All 5 of our interviewees said they only use Google Translate for their translation needs and they trust it over any other translation service. However, Google Translate does not give information like a medicine’s context of use.
  • Image Search/Product Identification — Again, Google is the biggest competitor here. With Google Lens, users can point a camera at an object, then snap a photo to do a Google search based on that photo. A test search on a container of vitamins returned information like product name, rating, price, description, and similar products.
  • Drugstore Websites — Very limited in terms of languages offered. Sites for CVS, Walgreens, and Target only offer the additional language of Spanish, if any. However, they do provide a very visually-led search path to find products without having to know what they’re called.

Ideation

This was where we figured out how we wanted to address our users’ needs.

First, we went through two cycles of this:

Because as we visually brainstormed in the Design Studio, we discovered more specific features that were important to include, for example, the ability to compare products from the U.S. to products from a more familiar country. Our final Feature Prioritization Map is shown below.

How It Works:

In the ‘Must Have’ section are the most critical features we needed to include for the user to accomplish their goal. The following sections, in this order, ‘Should Have,’ ‘Could Have,’ and ‘Won’t/Would Have,’ decrease in how central they are in getting our user from problem to solution.

Feature Prioritization Map

Low-Fidelity Wireframes and Prototype

Below are our final designs from the two Design Studios. This also became our low-fidelity prototype. Features included are:

  • User can choose their language for the app to display all text in
  • Search by the camera, microphone, or typing
  • Detailed product descriptions, including which symptoms a certain product will treat
  • Comparison feature — the app will show an equivalent product from the country that the user is most familiar with
  • Save feature so that users can save products for future reference
Final designs from our Design Studio activity

After testing these initial designs, we moved into our mid-fidelity prototyping and testing.

Mid-Fidelity Prototype and Tests → High-Fidelity

In this section, we’ll be looking at

  • Sections of screens in the mid-fidelity prototype
  • What we expected users to do and what users actually did
  • What we changed from Mid-Fi to Hi-Fi
  • Those same screens (or some entirely new ones) in high-fidelity with changes
  • Symptoms icons, how we tested their communicativeness, and how we updated them

Note: The great majority of the high-fidelity screens have placeholder lorem ipsum copy. This is because we wanted to test the functionality of the app without verbal cues.

First Screens — Choose Language and Country

What we expected users to do:

Choose the language that the app will be displayed in (Portuguese) and choose the country whose products you want to compare U.S. products to (Brazil).

What the users did:

  • 4/5 users wanted to select the country they were currently in, the U.S.
  • 3/5 users wanted to scroll, instead of type, to find the language and country.

What we changed in the next iteration:

  • Moved ‘Choose Country’ off of the first screen
  • Added scroll functionality to the language and country selection screens
Above: Mid-Fi Initial Screens; Below: Hi-Fi Initial Screens

Main Search Screens — Search and Compare

What we expected users to do:

Choose the camera search, take a photo of the product, see what symptoms the product treats, then swipe up to the compare screen.

What the users did:

  • 5/5 users successfully photo-identified their product and moved onto the comparison screen

What we changed:

  • Moved the country selection to the product details page — it was taken off of the initial screen in the previous section and moved to directly before moving to the comparison screen. This was to make it clear that users should be choosing the country from which they want to find the equivalent to the identified product (in this case, Advil)
Above: Mid-Fi Main Search Screens; Below: Hi-Fi Main Search Screens

Symptoms Screens — Check Symptoms and Apply New Symptom

What we expected users to do:

Check what symptoms the medicine treats, add an additional symptom (runny nose), then apply that new symptom to update the product search.

What the users did:

  • 5/5 users expected to only see the medicine-specific symptoms on the Symptom Checker screen and were confused as to why there were additional symptoms shown
  • 3/5 users wanted to begin a new search by tapping the search symbol in the bottom tab bar

What we changed:

  • Only showed the symptoms specific to the medicine on the screen linked from the comparison page
  • Made the Symptom Checker its own feature and added it as a search method from the Choose Search Method screen
  • Added the Symptom Checker to the global navigation bar at the bottom of the screen

Favorites Screens — Add Product to Favorites and Check Favorites

What we expected users to do:

Add the identified product to Favorites, then check the Favorites to see that the product was saved.

What the users did:

  • 5/5 users successfully added the product to their Favorites and navigated to the Favorites page from the global navigation bar.

What we changed:

  • Changed the items shown to be only medical products, since those are the only products we are currently focusing on.
Favorites Screens— Add Product to Favorites and Check Saved Products

Symptoms Icons

For our symptoms screens, we wanted to have icons as non-verbal aids to accompany each individual symptom.

To test if our initial icons were communicating their intended meaning, we had each test participant guess the meaning of each icon without any labels or context.

The results of those tests showed that people had very different interpretations for the icons, and that sometimes, they had very clear ideas of what images to expect for specific symptoms.

In light of these findings, we decided to gather data on what people expected icons for each symptom to look like.

User drawings for symptoms: Headache, Fever, and Nausea

We tested over 15 participants, asking them to draw icons for what they would expect to see for individual symptoms. Then, we looked at each symptom’s drawings, found their similarities, and then updated our icons to incorporate those similarities in order to be more easily interpreted.

High-Fidelity Prototype Walkthrough

Below is a video recording of a walkthrough of the high-fidelity prototype.

Next Steps

Moving forward, our most important objective is to test our high-fidelity prototype on our target users.

Next, we would also like to explore the dictation feature and its intuitiveness to users in comparison to the camera feature.

Eventually, we would like to translate the copy in the app to match the language that the user selects and test the app’s effectiveness when fully translated.

And finally, as some of our test participants mentioned concerns about allergy information with regard to the medicine options that populate in the search, we would definitely explore ways to address that, since allergy information is vital in which medicine someone can take.

--

--

Hope Magracia

NYC based UX Designer. When I’m not riding the double-diamond of design, you’ll find me riding the N train.