Teresa Phan
  • portfolio
  • about
  • resume

Navigating COVID

Designing a website with guided navigation through COVID-19 resources while considering the user's state of mental and emotional wellbeing
Picture

How we got started

NavigatingCOVID was created by a group of public health professionals with expertise in health behaviors, peer and social support, and community development.  Read the article about how the project started here: The Gillings Community Responds to COVID-19: Mental Health, Environmental Guidance and Health Education
Picture

ROLE
UX Designer and Researcher
TEAM
4 UX Designers/Researchers
(Justin Bascos, Steven Diaz, Joshua Quach, and me!)
​6 Content Writers

3 Software Developers
1 Graphic Designer
SKILLS
Card Sorting
Information Architecture
Persona Creation
Wireframing
Prototyping
Usability Testing (Think-Aloud)
Quality Assurance

TOOLS
Miro
Figma
​Zoom
​Github


The Challenge

With the overwhelming amount of information and resources available regarding COVID-19, it can be hard for users to know where start their search.  HOW MIGHT WE make searching for COVID-19 resources less overwhelming?

Project Goals

​The goal of the website is to create an interactive resource with guided navigation, not as to further overwhelming users during their information seeking process.

INITIAL RESEARCH


Affinity Map

Before I joined the team, they started with their research by interviewing 10 people to understand their experiences and concerns because of the pandemic.  The collected data was categorized into 6 themes:
  • Departure from Normalcy
  • Concern for Self
  • Changes in Relationships
  • Putting Others First
  • Perception of Systems
  • New or Reinforced Behaviors
Picture

Personas

​With the interview information and themes from the affinity map, the following personas were created to help focus on who the users of the site would be:
  • Jasmin / Young & Restless -- she represents our younger audience who's main concerns are her social life, mental health, and potential career opportunities
  • Charles / Family Man -- he represents our older audience who may be concerned with his families (home and work) as well as his community, and prefers face-to-face interactions
Picture
Picture

DESIGN


Card Sorting and Information Architecture

With the information from the affinity map, we did a card sort with the whole team to determine the structure of the site.  The site map was created as a visual supplement for the UX team to understand the user flow and the different layouts that would need to be created (landing page, pathway page, final content page).  When the map was shown to the group, the software development team also found the hierarchical layout useful in terms of which layouts can be templated and which are unique.
Picture
Picture
Picture

Prototyping and Iteration

An original prototype was developed during the hackathon, but since joining the team, the UX team has developed new prototypes with revamped content written by the public health professionals, working in tandem with the software development team.  We ended up creating over 160 screens, both desktop and mobile, for the whole website.  Below are some iterations of what we've prototyped:
Picture
original hackathon prototype
Picture
updated card style prototype
Picture
updated decision tree option display
Picture
Screen flow for two of the 4 branches in Figma

Visual Design

When deciding on the typography and color palette, we wanted to choose fonts and colors that didn't feel too "clinic-y" and gave users a calming effect.  We also used the cool plugin on Figma, Able - Friction Free Accessibility, to ensure that our site was meeting accessibility requirements in terms of color contrasting and font sizes.
Picture

FINAL TESTING


Usability Testing

We had 10 volunteer participants to conduct usability testing on our working prototype to see if there was anything confusing about how to navigate the site, if the site did have a "calming" effect and general feedback regarding the site.  The testing was done over zoom using the Figma protoype, and we let the volunteers explore the site before giving them a scenario and a task to complete aloud.

A few of the participants noted that they enjoyed the diversity of avatars used in the website, the curved edges of the buttons and waves that gives the site a calmer feeling and the pathway content seemed concise and direct.

Feedback we received were font consistency, the term "Navigating Information" was confused as the starting point on the landing page by half of the volunteers, and questions on how to "future-proof" the content.

Quality Assurance

After receiving feedback from the usability testing, the UX team made edits to the prototype and our software development team went to work on creating the pages.  As each page was completed, they were checked off and ready to be tested for quality assurance, and any bugs or edits would be listed in the Github repository to be addressed by the dev team.

Check out my other projects

Picture
CANDID COMMENTS
Rethinking the process of submitting online reviews so it's quick, fun, and rewarding
View Project
Picture
QR CODE RESEARCH
Discovering the barriers to scanning QR Codes through UX Research
VIEW PROJECT

© 2021 Teresa Phan
  • portfolio
  • about
  • resume