Corona Diaries — A Usability and Accessibility Study

Coronadiaries.io

Corona diaries is a desktop and mobile site used to record short audio clips of personal experiences during the Coronavirus pandemic. Audio clips are placed on an interactive map in which users can listen to any shared recording around the world. This site was designed with the intention of facilitating storytelling for remote teachers and students, but can be used by anyone who wishes to tell their story during the pandemic.

Recording feature and map feature of Corona Diaries

Objective

  • Conducting an accessibility test of Corona Diaries, guided by Web Content Accessibility Guidelines principles, and resolve any identified issues
  • Conduct a user heuristics evaluation, and tailor Corona Diaries to better user qualities

Research Overview

I conducted a usability heuristics test with 5 volunteer users to navigate through the main function of the site. The users were prompted to test the recording feature by making a recording, and to test the map feature by placing their recording on a map, and listening to other users’ recordings.

I the conducted a WCAG accessibility test with the use of Axe Beta, a program that scores and identifies how many accessibility issues on each page.

Heuristics Test Findings

LEMErS Heuristics Test

I evaluated the heuristics of Corona Diaries using the LEMErS Scale of learnability, efficiency, memorability, error management and satisfaction. While some aspects of usability were excellent, such as learnability and memorability, the efficiency and satisfaction of the site required improvement.

Accessibility Evaluation

WCAG score using Axe Beta Software

I used a program called Axe Beta to evaluate the web content accessibility test. This test gave me a score for each page, which counts the number of issues with accessibility. All three of these pages had errors that dealt with the same three primary issues:

  • Page landmarking
  • Color contrast
  • Text size

These issues also coincided with complaints of user tests.

User Tests

Highlighted test user quotes

My volunteer users experience with Corona Diaries can be boiled down into a few main issues. That the map was difficult for users to navigate because there are too many recordings, shown as pins on the interactive map, and not enough ways to select or sort through the pins. The hamburger menu was a not an apparent way to navigate for the users. Additionally, the font was too small and lacked contrast with the site color theme.

Storyboard

I then drafted a storyboard of a scenario with a potential user of Corona Diaries, and the issues they may encounter while placing recordings on the interactive map. This storyboard keeps the initial user demographic of remote learning teachers and students in mind.

Issue Prioritization

Adding landmarks, as well as fixing the small font and lack of contrast, is high priority and high severity. These issues should be resolved first, as they impact all users. An improved header bar and method of filtering map pins is a high priority, though low severity. Lastly, adding more images and enhancing the site’s aesthetic was low priority, but an emphasized desire by user volunteers.

Possible Solutions

I would advice increasing font size and contrast, which is a fast fix. Next I would add clear landmarks page landmarks like with a menu bar. Filters by city would assist in simplifying recording navigation on the interactive map. Last, I would create a more welcoming site environment by adding more photos and other visual content.

Menu bar solution
Map filtering by city with addition of new menu

Next Steps

Many of the identified heuristics and accessibility issues are easy fixes, and can quickly improve the experience of all users. The site is simple and easy to use, but leaves something to be desired with its simplicity. I would advise that Corona Diaries receives the suggested improvements to draw in new users and retain existing users.

UX Designer, Illustrator from Atlanta, Georgia

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store