TL;DR
Problem: People with hearing loss, veterans, and their families struggled to choose a hearing aid from dense, jargon-heavy information.
My role: UX Designer and Front-End Engineer, working with the lab director, Sep 2024–Jan 2025.
What I shipped: A redesigned homepage and navigation, a calmer color system for older users, and a beta hearing device finder quiz on the lab's own data that recommends the best-fit devices.
Result: Cut the path to a decision from 4 steps to 3 and merged a separate spreadsheet into one searchable database. The site was presented at a conference by my supervisors.
OVERVIEW
Team
Me (Designer)
Janet (Director of the lab)
Role
UX Designer (visionary, developed database, design system, wireframing, prototyping)
Front-End Engineer
Timeline
Sep 2024 - Jan 2025
Tools
Figma, JS, HTML, CSS, Excel, WordPress
THE PROBLEM
COMPETITIVE ANALYSIS
Competitive analysis with 3 other hearing advising companies
CUSTOMER JOURNEY 1
Challenges
Information overload: difficult for users to understand the hearing aid products
The first challenge was that it was difficult for users to understand the various hearing aids and how it was fit for them. They have to look at the price, if it's for mild or severe hearing loss, if it's OTC or prescribed, etc. There are too many options listed and it's information overload.
The users are not drawn to looking at the information
Then I made an organized database with images integrated into the website so that users can visually see all the information for each hearing aid in a clear way. However, even though the information was more organized and clear, it was still information overload for users. Therefore, I integrated a quiz that narrows the list to the 2 best matches.
CUSTOMER JOURNEY 2
LOGO
FONTS
Quicksand
COLORS
UX DESIGN PROCESS
FINAL DESIGN
Enhanced the navigational experience
Changed the home page layout of the website. Also changed the color when the user hovers over the button. It was previously a bright yellow hover color.
A device-finder quiz built on the lab’s own data
Built and designed a beta 5 question hearing device quiz in WordPress using a WordPress quiz plugin to help users determine the best hearing device fit without searching through all the different databases. It takes data from the hospital lab based spreadsheet with details written by USC doctors. Each answer filters the spreadsheet from 40+ hearing devices and returns the 2 best matches. (It was in beta mode so it's not published on the website right now)
How I checked it: I ran 10 test profiles through the quiz, such as a first-time user with mild loss and a tight budget. I compared each result against the master spreadsheet by hand. When they didn’t match, I adjusted the question.
Why a quiz, not more filters: Even after I organized the database, users still faced too many options. With filters a user can get a list of 5-10 devices. A short quiz turns a comparison task into a few easy questions outputting only 2 devices.
Improving the visual design and color patterns
Added a new section to the home page to create more clarity about what the website provides. I added descriptions and example images.
IMPACT
Previously, the project relied on a disconnected spreadsheet and an external website. I streamlined the user experience by integrating both, transforming raw spreadsheet data into an intuitive, accessible, and cohesive interface.
TAKEAWAYS
There is a lot of data used in this website. Therefore, it’s important to organize the data in a way that the users can understand.
My supervisor and professor went to a conference and showed people the website. People at the conference gave feedback, and that feedback was important for redesigning the website.
CHALLENGES
There are many databases that are connected to the website; therefore, I had to make many changes to the multiple databases used on the website.
WHAT I LEARNED
I designed many websites before, but I never used WordPress. I thought it's similar to many website builders I've used in the past. However, there are so many constraints. Before starting the project, I should have done a WordPress crash course. I learned that whenever I'm using a new platform, I should always research how to use the platform because it would have saved me lots of time.
My client was very flexible and allowed me to have creative freedom. However, communication is still very important because she mentioned things I wouldn't have thought about. She advised me to make pictures and fonts bigger because the users are older individuals. Before making design decisions, I went to her for feedback and advice.
When I was developing this website, chatbots and quizes were becoming popular. My client didn't necessarily ask for one; however, I decided to go outside the box and ask my client if a device-finder quiz that would help boost the website's traffic. She acknowledged that would be a great idea and that she didn't think of that before! Therefore, never be afraid to ask and to be as creative as you want.