Overview
My role (group of 3)
Duration
UX Designer, Visual Designer
March - May 2022
Tool
Client
Figma, Adobe Illustrator, Miro
NASA x ARISA Lab
The Eclipse Soundscapes Project aims to deliver an accessible multi-sensory mobile and website digital experience of the total solar eclipse that allowed everyone, including people who are visually impaired, and others who were unable to see the eclipse with their own eyes, to experience the event.
This website redesign project is supported by NASA’s Space Science Education Consortium (NSSEC), the goal is to create an accessible web experience following the WCAG requirements, so it can better serve low-vision and blind citizen scientist communities, and at the same time benefit general users.
Home Page - Before
Home Page - After
Process
The whole redesign process started with conducting the Heuristic Evaluation as a group so that we could find as many usability problems across the whole existing website as possible, and then we sorted all the problems into broader actionable categories.
Heuristic Evaluation
Research
After we identified the potential pain points from Heuristic Evaluation, we prepared a list of questions for our client ARISA Lab, so we can confirm previous design decisions from business perspective. With a broader picture of why things are designed the way before, we had a clearer path moving forward on examining the current information architecture and user flow.
Website Information Architecture
We then further evaluated our problem statement. We found the existing accessibility problems are not only about screen reader users but also for general users and low-vision groups. Blind users and partially visually impaired users have different user flows while browsing the current website. There are more steps/clicks involved for screen reader users as they need to constantly go back to hear all the navigation options to navigate.
Partially Visually Impaired User Flow & Screen Reader User Flow
Key Findings
Designing for the Visually Impaired
01 / High contrast between background and text
02 / Accessible color palettes
03/ Accessible font, font size and text spacing
Designing for the Blind Users
01 / Video contents with audio transcript
02 / Create navigation without all Caps
03/ Follow HTML header format
Design
For visually impaired users, the most urgent issue with the current website is colour usage. Without an accessible colour contrast, a high percentage of Bounce Rate (the percentage of visitors to a particular website who navigate away from the site after viewing only one page) can be easily predicted.
Other than colour contrast, the weirdly spaced components plus inaccessible text spacing also played important roles in affecting the readability of the whole website. According to WCAG, Level AAA requires Line Height to be at least 1.5 times the font size, and Lettering Spacing to be at least 0.12 times the font size.
Wireframe
Home Page
Before
After
Download The App Page
Before
After
Eclipse Features Page
Before
After
Blog Page
Before
After
Iteration
When designing with 2 disabled personas and accessibility in mind, we need to understand that this project should not be so heavily visually focused as a normal website redesign, but instead should focus on how to organise content in a clear and simple way for screen reader users to navigate. So the first version I created for the "Our Team" page made a mistake that neglected screen reader usability by adding more steps for them to view the content. What we thought was "visually pleasant" may not be the right design here.
Before
Final
Takeaway
As a designer, I was so easily attracted to visual design tricks during the design process. I'm truly grateful for having the opportunity to work on this project so that I got the chance to fully understand the importance of empathising with your potential users, and the importance of designing with accessibility in mind. There is still a lot I can learn regarding accessibility, but I think this is a good start to a life long study.
