• kristensunny

Mini Case Study: Viral Link


Viral Link is a mobile website concept project to help people find and share information and resources about viruses


Project Overview

Role: UX Designer, UX Researcher

Contributions: Primary research, market analysis, content audit, personas, journey map, site map, user flows, sketches and ideation, wireframes, usability testing

Tools: Figma, Zoom, Otter, Miro, G Suite

Team: 2 UX Designers, 1 UI Designer

Platform: Mobile website

Type: Passion project


Project Constraints

Scope: The project brief was broad and only specified that we needed to design a mobile website to address a "public health concern"

Resources: With a $0 budget and working at the beginning of the COVID-19 pandemic, it was difficult to source remote participants for usability testing, so participants largely came from the team's personal networks

Environment: Due to COVID-19, our team worked remotely for the majority of the project



The Challenge

How might we address a public health concern by solving for a specific audience's need?

This project began in early March 2020, when the COVID-19 pandemic had just hit the United States, so the topic was very timely. The coronavirus was on everyone's minds as fear of the unknown began to set in. Due to this atmosphere, our user research naturally gravitated towards this topic, as our team continuously heard from users and subject matter experts that COVID-19 was a large and looming public health concern. We decided to narrow the project scope by focusing our design on solving for users' needs related to infectious diseases, including the coronavirus.



Empathizing with a Cautious Public

We conducted qualitative and quantitative research to better understand the type of information people seek regarding infectious diseases, how they accessed that information, and if any gaps or pain points existed. From our research, I noticed an overarching theme of a lack of trust in mainstream media.

80% of total survey respondents said they get public health information from the news, but only 50% of total respondents indicated that trusted and reliable information was easy to find.

Users also shared that government and authoritative organizations, like the CDC or WHO, are seen as trusted sources of information and that there is a desire for specific virus information that's easy to digest and share with others. One learning that later became a central theme for our design solution was the importance of having access to the latest reliable information and news related to COVID-19 and other viruses.


After diagramming our research results, we identified two personas - one that was overly worried about the coronavirus and one that was cautious but optimistic that things would be okay. Because we were still in the early stages of the pandemic and our city (San Francisco) had not yet gone into quarantine, the majority of our research participants were in the cautious yet optimistic camp, so we named John, the Undaunted Pragmatist, as our primary persona.


Primary persona, John, the Undaunted Pragmatist


With a deeper understanding of our main users, we defined our problem statement:

People who are concerned about Coronavirus but are calm and rational need a way to easily access concise, trusted information because they believe the media is over-sensationalizing the virus and causing panic, and current resources may be overwhelming to browse. They need information to help them create a plan of action and stay up to date on best practices.

I suggested creating a journey map to get a better sense of what our primary audience does, thinks, and feels as they search for information related to a viral outbreak. Putting ourselves in John's shoes, our team gained insight into the highs and lows of a user's experience searching for reliable and trustworthy information sources.


Journey map for primary persona


We discovered the following opportunities that we brought into our ideation stage:

  1. Having an option to subscribe to specific health alerts based on preferred source and/or frequency

  2. Skimmable articles that use bullet points and infographics to ease understanding

  3. Shareable articles and infographics

  4. Safety checklists or list of nearby resources



Wireframes

After sketching individually around the concepts listed above, our team decided to focus on creating wireframes for 4 key user flows that related to our primary persona's main goals of staying informed and knowing what to do in regards to a viral outbreak.

  1. Create curated newsfeed to see personalized information abut COVID-19

  2. Find information about COVID-19

  3. Find travel information about a country

  4. Check symptoms with AI chat bot


Mid-fidelity wireframes of 4 key user flows



Evolution of our Navigation

Throughout our wireframing process, I saw an evolution of our site’s navigation as we received feedback from users and other designers. In our low and mid-fidelity wireframes we used tabbed navigation that showed parent-child navigation levels, but we also had a hamburger menu that held additional navigational elements that wouldn’t be used as often as those found in the tabbed navigation, including Account and Preferences. I created a hybrid card sorting exercise to see what type of navigation would be most intuitive for potential users, and we ultimately moved Account to be part of the parent-level navigation.


After this iteration we conducted formative testing with three users, and our findings led us to simplify our navigation by moving the site’s full navigation to a hamburger menu and by prioritizing the main features that users needed so we could create a minimum viable product. We also optimized our UX Writing to increase label clarity and ease navigation.


Evolution of our Navigation



Evolution of our Newsfeed

We also saw an evolution of our news feed throughout the wireframing process. In our low and mid-fidelity screens of the newsfeed, we had tabbed navigation and an area where users could quickly add the latest health tips to their personal checklist. In later, high-fidelity iterations, after receiving feedback from users and other designers, we decided to remove the checklist feature, as we wanted to prioritize other features that were more important for the user and for our primary persona, including the resource list and the symptom AI chat bot. We also moved to a more streamlined design by simplifying our news feed layout so that users could more quickly scan and filter articles.


Usability tests with our high-fidelity prototype revealed that users thought the news feed tabs were the main navigation of the site, so in our revised iteration, we added a news feed header to this screen to clarify where users were on the site.


Evolution of our Newsfeed



Final Mockups

Final mockups of MVP screens


Check out all of our final screens here: prototype



Final Thoughts

Timing is critical

We started conducting user and market research about public health issues at the beginning of a global pandemic, so the coronavirus came through very strongly in our research analysis. However, because we were still in the beginning stages of COVID-19 in the U.S., the majority of people we spoke with weren't very concerned about it. fI we had interviewed people a few weeks later, we probably would have received different interview responses and would potentially have solved for a different problem. This shows me how important it is to conduct continuous user research to better understand users' current experiences and to make sure I'm solving the right problem.


Collaboration = communication

Our team was split between UX and UI Design, which meant that we had to make sure our timelines were always aligned and intersected at the right moments. Communication was key to our successful collaboration and ultimately ensured that we would have a high-fidelity prototype ready for usability testing.




  • LinkedIn
  • Dribbble
  • Instagram

Designed with        © 2020 Kristen Sunny