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:
Having an option to subscribe to specific health alerts based on preferred source and/or frequency
Skimmable articles that use bullet points and infographics to ease understanding
Shareable articles and infographics
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.
Create curated newsfeed to see personalized information abut COVID-19
Find information about COVID-19
Find travel information about a country
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.