The Applied Hearing Science Lab (AHSLAB) at the University of Washington is a research lab rooted within the Department of Speech and Hearing Sciences. Our main objective is to conduct research on human auditory perception and physiology.
As the design lead and an undergraduate researcher, I have participated in various projects:
Graphical user interface for the self-fitting of hearing aids (Research facilitated by Dr. Yi Shen and funded by the National Institute of Health on Individualized Fitting of Hearing Aids)
IN PROGRESS: Take-home Ecological Momentary Assessment (EMA) to repeatedly sample our subjects' day-to-day experiences with regards to noise.
Hearing aids apply signal processing algorithms to improve speech communication in noisy and complex acoustic environments. Since users do not have expertise in audio signal processing, fine-tuning algorithms including hearing profiles and listening habits) is a challenge.
A rough prototype of a graphical user interface has been developed in UW's AHSLAB with functionalities that enable the users themselves to adjust their hearing aids.
Our goal is to collaborate with students from the Department of Speech & Hearing Sciences to improve the design of the interface so that it is more accessible for older adults.
Since not everyone in the lab was familiar with user experience design, my teammate and I created a brief overview to present. We also covered information regarding design principles for older adults.
The pre-designed graphical user interface had the following format:
Sticky notes on Miro for easier readability
My teammate led our group through an affinity grouping exercise where we prepared many colorful sticky notes. We set a timer for 5 minutes and allowed everyone to brainstorm any goals or ideas related to the ideal self-fitting user interface. Afterward, we collectively grouped any similar items into individual categories, leading to a collaborative discussion on what direction we wanted to work towards.
After the brainstorming session where we collectively decided which categories to prioritize in our design, each person created some low-fidelity sketches. The sketches demonstrate key ideas for what the interface should include. Afterward, we pasted them onto a FigJam board and voted for our favorite features. Below are clearer images of each design:
Different logo designs that I prepared on Adobe Illustrator.
The winning logo design for the lab in yellow and blue!
The application is set up in the lab for research participants to use!
The team went through two rounds of voting -- once with the lefthand options and once with a variation of the previous winner.
Using some of the top-voted features, we split into two groups and worked on creating wireframes for different concepts. The objective is to assess older adults' preferred amplification profiles under different acoustic environments.
A grid system where a user can move a circle around various grid layouts to find the frequency level that best fits their preferences in various settings (e.g. restaurant vs. traffic outdoors)
Different settings are displayed and a user has to select a spot within the context that has their preferred frequency level (e.g. table in a restaurant or seat in a car)
After receiving feedback about the two different user flows from some people in the Speech and Hearing Sciences department, we decided to move forward with the grid system. It would be easier for older adults to utilize it with fewer distractions in the background. While it may not be as entertaining, our main priority was to design a simple and user-friendly interface.
This is a sample of the initial drafts that the design team worked on in Figma and Visual Studio Code. It is meant to provide a basic layout and focus on the overall functionality of the app from the back end. At this stage of the process, there is no attention to meeting the WCAG standards, and the layout is generally scattered. In the following stages, we focus on these details so the interface is feasible.
This is a sample of the initial drafts that the design team worked on in Figma and Visual Studio Code. It is meant to provide a basic layout and focus on the overall functionality of the app from the back end. At this stage of the process, there is no attention to meeting the WCAG standards, and the layout is generally scattered. In the following stages, we focus on these details so the interface is feasible.
Color, Font, & Theme
This is a guide that I created for the rest of the team with my design choices.
To ensure that there is enough contrast between the foreground and background, I used bright golden yellow buttons against a dark blue color palette. The text is also a cream color to stand out for readability.
To make the theme of the application warm and friendly, my team and I focused on using various elements to help portray it. Some examples include:
Using colorful waves in the welcoming screen as well as a greeting message
Adding photos that include smiling people and warmer color tones
A readable, bubbly font
A friendly exit screen
These will be shown in the next stage.
Lab Logo Design
STAGE 1: A simple interface where users can drag and drop the blue button according to their
personal preferences
Duration
Sep 2022 - Present
Role
UI/UX Design
Mobile Design
Web Design
Accessibility Lead
Team
Bertan (Lead)
Jason (Back-End)
Aagney (Back-End)
Michelle P. (Front-End)
Zitong Li (Front-End)
Me! (Front-End)
+
Speech & Hearing Sciences Team
Tools
Figma
Visual Studio Code
Miro
GitKraken & Hub
Pen & Paper
Lots of sticky notes
About AHSLAB
Goal
Education on User Experience
Pre-designed Application
2. Affinity Grouping & Planning
3. Team Ideation & Voting
4. Wireframing
Initial Drafts
Home
About Me
Resume
Group 1: User flow of grid system
Group 2: User flow of setting display system
Accessibility Check
6. Branding
7. Current Layout
8. User Feedback & Continued Work
Check Out Another Project!
Introductory Screens
Selection Screens
Grid Screens
Button Screens
Exit Screen
