Thanks for visiting ⋆˙⟡♡

Interested? Connect with me here!

designed with -`♡´-

NASA Eclipse Soundscape Re-Design

NASA Eclipse Soundscape Re-Design

Adding clarity to NASA’s Eclipse Soundscape webpage with WCAG approved standards

Adding clarity to NASA’s Eclipse Soundscape webpage with WCAG approved standards

Timeline

Timeline

2 weeks

2 weeks

Collaborators

Collaborators

2 Designers
NASA Eclipse Soundscape
Co-Project Lead

2 Designers
NASA Eclipse Soundscape
Co-Project Lead

Skills

Skills

Accessibility (WCAG)
Client Relations

Accessibility (WCAG)
Client Relations

What is Eclipse Soundscape?

Eclipse Soundscape (ES) is a NASA funded citizen science project that invites people to explore how solar eclipses impact life on Earth.

Their mission is to allow visually and hearing impaired individuals experience the eclipse through sound and touch.


My role

My team and I were assigned to improve their Data Analyst (DA) site to make it easier for volunteers to join and understand the DA role.

As one of the UX Designers, I worked with other designers and our NASA client to re-design a layout that help educate volunteers about environmental changes during an eclipse.

Why Eclipse Soundscape?

NASA wants participation in the citizen science projects to be more accessible. With Eclipse Soundscape, NASA wishes to:

What's on the Table

NASA has a website for ES’ Data Analyst (DA) role. The information DAs collect helps NASA map environmental changes during eclipses.

The website gives new and returning users an overview of the responsibilities of a data analyst and demonstrate the skills that are needed to participate as a data analyst.

The Issue

The lack of clear hierarchy leads to confusion when users are navigating through the site..

NASA requested for a re-design to be done so that interested or returning users can use the ES website to easily navigate and inform themselves with the ES project and Data Analyst role. The re-design must also follow accessibility and branding guidelines.

The Current State

Below are screenshots of the landing page and the audio analysis part.

The Current State

This is how a user would normally navigate through the site.

How might we simplify the Data Analyst section to ensure clarity and accessibility for all users?

Target Audience

Who are we designing for?

While NASA welcomes everyone to become a Data Analyst in Eclipse Soundscape. We're designing with young adults in mind, particularly those new to citizen science projects.

User Research & Insights

To understand user pain points, we conducted interviews to gauge areas of struggle.

We had 6 users, who are young adults that have no experience with citizen science projects navigate through the website. Some comments included...

User Research & Insights

We synthesized key points based on user interviews

Overall, NASA’s information-heavy layout overwhelmed users encountering the site for the first time. As a result, many missed important information and had issues navigating to different parts of the site.

Design Process

Here are the branding colors and accessibility guidelines from NASA ES

Design Process

Layout based off of user feedback

We created a cleaner layout so that users are able to navigate the site easier, have a clear context of what the ES mission and role is about.

Design Process

We tested our iteration to the same group of users.

We performed 2 types of user tests with our users: usability testing and A/B testing. These tests were crucial in helping us refine our prototype.

  1. Usability Testing

Our goal was to make our layout can help users understand ES and what the responsibilities of a Data Analyst. In this test, we had users navigate the site as they normally would and as a result we found that:

  1. A/B Testing

We aimed to compare user preferences for audio-analysis layouts: one that showed information throughout the experience (Layout 1 - first slide) and one that introduced it only at the beginning (Layout 2 - second slide).

In the end, users preferred Layout 2 as it felt more efficient and less repetitive. Shown above are the two versions participants explored.

In the end, users preferred Layout 2 as it felt more efficient and less repetitive. Shown above are the two versions participants explored.

Solution

Final Deliverables at a Glance

After incorporating all our insights, this represents our final deliverable for NASA’s Eclipse Soundscape. We designed this layout to welcome new participants, helping them understand the project and confidently take part.

Changes Made #1

Simplifcation! Less is more

Users are less willing to read about something if they’re bombarded with a bunch of information in their face. Adding space in between paragraphs can give the illusion of more space.

Changes Made #2

Utilizing intuitive navigation features

Adding such features like a back button on the left hand side or a button with a hover indication helps users understand what these elements do.

Changes Made #3

One thing at a time

Users don’t have to worry about the different components in their face when performing an analysis. This also ensures users can focus on the current analysis they’re doing - without skipping around.

Reflections

Responsiveness and flexibility is crucial in collaborative settings!

Shoutout to my team members for giving in the best effort for each step of the project. Because of this we were able to deliver most of our planned features, especially the audio analysis section.

Learning to compromise due to limitations with client

My team and I had to reconsider some ambitious ideas because our client’s site was built on WordPress. We needed to make sure the ideas we deliver are covered within the client’s budget and WordPress features.

Adding more features for screen readers

Initially, we wanted to focus primarily on making an interface screen reader friendly. However, we realized it was hard to find a group of individuals who used screen readers like VoiceOver in their daily life. But it would’ve been great to have insight about what they prioritize in interface for a seamless user experience.