HearingDB

A website with USC Keck School of Medicine to help patients learned about modern hearing devices.

Team

Me
Janet (Director of the lab)

Role

UX Designer (only designer)
Front-End Engineer

Timeline

September-Present

Skills

UX design, Prototyping, Wordpress, HTML, CSS, Data managing

Problem

Lack of awareness and education

Finding the ideal hearing aid can be overwhelming for individuals with hearing loss, veterans seeking benefits, and their families. Users struggle to find trustworthy, easy-to-understand information on selecting the right hearing aids, learning about their features, and understanding benefits like those available to veterans. This complexity often leads to frustration, decision fatigue, and poor choices, leaving users without the tools or confidence to improve their quality of life.

Preview

BEFORE

This is a preview of the website before I started

AFTER

This is a preview of the website after I worked on this project

Solution

1. 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.

2. 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.

3. Developed an interactive device quiz to guide user choices

Developed and designed a beta hearing device quiz to help users determine the best hearing device fit without searching through all the different databases.

Challenges

1. The database was difficult to update and use

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.

2. Wordpress is quite unpredictable

Wordpress is not the most intuitive website platform and can be quite unpredictable. I would make a change that should work, but it wouldn’t update those changes on my computer. However, it would work on another computer. You also can’t make customized changes on the mobile side and everything on the desktop will look the same on the mobile side.

Design Process

Design System

I updated the existing design system. I used pastel blue as a secondary color that would be softer on the eye. Many of the users are older in age and I did research o which colors would be better for older individuals. The original secondary color was yellow, which clashed with the blue.

LOGO

FONTS

Poppins

Quicksand

COLORS

Wireframes

All my wireframes and drafts. I drew inspiration from current kpop websites, resellers, brand shopping companies, and international companies.

Results

TAKEAWAYS

1. Organizing data is important

There is alot of data used in this website. Therefore, it’s important to organize the data in a way that the users can understand.

2. Less is more

When I first started redesigning the project, there were too many colors. I realized that less is more when it comes to the visual design. I used just blue with secondary shades of blue. Before, there were shades of yellow and blue, which made the designs quite chaotic.

3. Feedback is important

My supervisor and professor went to a conference and showed people the website. They gave thorough feedback and was crucial in re-designing the website to help the users.

HearingDB

Let’s innovate together!