Overview

Problem

Virufy is a health tech nonprofit developing an artificial intelligence (AI) tool to pre-screen for COVID-19, using an algorithm tracking cough patterns.

Before the official launch, the company had a two-part business goal for their website: collect more data for cough recordings and appeal to more donors to fund their research.

With initial usability testing of the website, my design team found that there was an overwhelming lack of trust in the company's credibility and general confusion about how AI technology works. As expected from our hypothesis, most users took only a few seconds to form that negative impression of Virufy.

Solution

With only one month to revamp the website, we focused on redesigning the main tabs and content, which we confirmed as the most critical touchpoint from our usability test.

Using best UX practices for healthtech websites, we were able to achieve not only an elegant look, but also an intuitive information architecture that led to a better navigation experience.

Process

While our team was not strictly divided into UX and UI designers, I delegated most of my efforts in the Research and Strategy, while also helping my colleagues with high fidelity designs.

1. Research

Examine Health-tech Competitors

Because Virufy had previously gathered cough data from Latino populations, we had to consider the global implications of this website as well. A colleague and I did a rapid competitive analysis of Virufy’s direct and indirect competitors in the health-tech industry across Europe and North America:

We then used these observations to highlight the following patterns that we noticed across the competitors:

Usability Testing on Old Website

To better understand the pain points from our target users, my team conducted 5 moderated usability tests with people who were familiar with the COVID-19 symptoms and the testing process [this was around the beginning of the pandemic, when COVID testing was not as much of a common knowledge].

Through a team post-test call, we organized these observations into three defining points:

1. Most users did not understand the AI technology and were visibly confused by what the company did.
2. Of the users who took their time to read the content, they still felt that there was a lack of transparency.
3. All users from the test did not believe the site's legitimacy.

If I received this link, I’d assume it’s a scam.

What do they want? Money or coughs?

Not sure what ‘contributing my cough’ means.

2. Strategy and IA

It was clear from our qualitative research that the website had poor usability, and what Virufy can do to improve their website experience. Once our design team discussed the test findings, I was comfortable enough to propose the following strategy to my colleagues:

After discussing the goals of each activity, we split our efforts to maximize our time for the designs. I focused most of my efforts into Journey Mapping and Card Sorting.

Journey Mapping

For the Journey Map, the goal was to represent the "current state" of our site, so that we’d be able to examine which touchpoints had the most user impact. Because users were still discovering this company, the most critical touchpoint turned out to be Homepage, where most users would decide to stick around or bounce off. Other major touchpoints were followed by the other primary pages, like FAQ and About Pages.

Creating a Persona

A colleague from the team made a persona for us based on the research up to this point.

Card Sorting Workshop

In this activity, my colleague created a card sort, using Optimal Workshop, which we used to observe our 9 participants organize the words. This activity helped us gain insight on how our users would categorize the content.

Using the dendrograms, I decided that a sitemap referencing the Best Merge Method (BMM) would best represent our new information architecture. It used an algorithm to group similar words and thus eliminated redundant patterns.

Sitemap

Using the results from the workshop, I organized the navigation levels into call-to-actions (CTA's), pages, and anchored sections, as shown below.

3. Design

Eat, Sleep, Iterate, Repeat.

While I was working on the sitemap, my colleague created an initial style guide using the pre-made company logo. That way, we were able to have a consistent format as we individually iterated on the pages.

We collectively decided to focus on the primary navigation, so that we could deliver the highest quality designs in our short timeline. If the design leads needed additional pages, they could use ours as a template, instead of us delivering all page designs in lower fidelity.

My colleagues and I each prepared our own rapid sketches. Shown below are my sketches, which my team decided to use as a rough foundation for wireframing.

We divided the main pages across the design team to translate the sketches into low fidelity wireframes, which we would later conduct a usability test. I primarily worked on the Homepage with a colleague and the Opportunities page.

4. Validate

Prototyping & Feedback

We delegated one designer to create an interactive prototype for our users to test against. Then our team conducted a remote usability test with a mix of previous and new users, with the following tasks:

• Let’s imagine you have no prior knowledge of this product. What are some initial thoughts as you browse the site? What would you do first, second, etc?
• [If relevant] Compared to our last test with the original site, what do you notice is different / the same?

Using the findings below, we adjusted the low fidelity wireframes in Figma before we moved to high fidelity designs. The biggest changes were creating more in-site links to other pages, both by relinking and rewording existing buttons and creating new sections.

Based on how we divided the low fidelity wireframes, we incorporated the style guide into high fidelity mockups in Figma. We also added FAQ pages based on the FAQ section design on the homepage.

The biggest issue was only the lack of a navigational state (i.e. no vertical scroller). Users also gave us a longer list of minor fixes that the team used to revise each of our respective pages on Figma.

5. Outcome

By addressing such usability issues, we were quite pleased that we went from low user trust to unanimously positive feedback of the web experience.

Not a single user in the final round of testing felt the site was untrustworthy, so we considered the project a success!

Takeaways

A special shoutout to my team for making my first collaborative UX project such a rewarding one. They helped make remote work so seamless, despite limited face-to-face communication and different time zones.

Not only were we able to quickly build user trust, but also create an experience that felt easy to use, informative, and interesting.

Unfortunately, our internship came to a close right after that final testing round, so we handed off the prototype to the design team at Virufy, who will be working with developers to implement the new design for a tentative July launch.