|
|
How we got startedNavigatingCOVID 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
|
|
|
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 ChallengeWith 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 GoalsThe 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 MapBefore 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:
|
|
PersonasWith 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:
|
|
DESIGN
Card Sorting and Information ArchitectureWith 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.
Prototyping and IterationAn 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:
Screen flow for two of the 4 branches in Figma
|
FINAL TESTING
Usability TestingWe 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 AssuranceAfter 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.
|
