top of page

Project Decibel

Role: UI, UX, IxD

Client: Project Decibel

Software: Sketch, Photoshop, Illustrator

Project Decibel is a hearing wellness initiative founded by 2 audiologists from Chicago and Denver. People working in the music industry have a high risk of hearing loss.

Me and my team created whole design system, including deliverables such as mockup screens, hi-fi prototype and style guide.

​

Main features :

- dB meter, showing the safe and dangerous sound exposure,

- hearing test

- chat with an audiologist

Users get access to personalized features by getting a monthly subscription.

​

Business goals: attract more users, build unique recognizable brand and reputation on the market.

We are the first Doctors trying to do something fun in Audiology by making the first, audiological mobile app.

Dr. Jenna Paley and

Dr. Drew Price

Problem and business goals

During our first kickoff meeting with Jenna and Drew, we wanted to get to know the project. We found out that Project Decibel wanted their product to feel trustworthy, as a medical app and reliable, as a reputable source of information. 

 

As the main patients and potential users of The Project Decibel app are musicians, Project Decibel aims to bridge the gap between the music and health worlds, to create an experience that is professional, reputable, and hip. After synthesizing the research, we found the following problems:

 

  1. For people in a music business, hearing is directly tied to professional value. Hearing loss can cause losing one's livelihood.

  2. Users live a busy lifestyle being on tours most of their time, with no time to see a specialist. They need an easy way to learn about hearing damage, test their hearing, and take steps to protect themselves from further hearing loss while they are on the road.

  3. Patients are often intimidated by doctors and feel emotional barriers in reaching out to a specialist

Research

Do's

 

  • use colors sparingly.

  • cards created organization and helped with scanning large amounts of information.

  • negative space for readability, scannability

  • lifestyle photography with faces as a personable and trustworthy feeling.

Dont's

 

  • dark heavy interface which created a loss of context for health and wellness.

  • large and plain bodies of text made content difficult to read and understand.

  • stock photography lacked personality and created a disconnect with users.

Before diving into visual design, we compiled visual research on Project Decibel’s competitors to differentiate our product in the market and find what opportunities were available. We were looking for applications that would include the same or similar functionality and target users. Additionally, we researched unrelated products that shared similar target audiences and functionality in order to define opportunities for a unique niche for our clients. Ultimately, this helped me formulate a vision for my future designs.

In order to analyze the market we looked at various websites and apps with music and health related topics. We divided them into 2 categories- Competitors and Inspirations in order to find common patterns

Competitors

Sensaphonics

Use of stock photography lacked personality and created a disconnect with the users. (Sensaphonics)

Sound

Pops of colors worked good to create a dynamic look but still feel professional.

(Starkey, Mimi test )

ACS

Dark background colors created loss of context for health and wellness. (ACS)

Inspirations

Spotify

Use of cards created good organization and helped with scanning large amounts of information. ( AirBnB, Spotify)

Listen Carefully

Lifestyle photography with faces felt personal and created the sense of trust.

Combining our client’s brand goals and synthesis of competitive analysis, we came up with three design principles which became standards for accountability to keep our client’s and user’s needs in mind.

Create comfortable and personable experience. Build trust by using simple and recognizable iconography, familiar layout and guided experience..

Use pops of color, photography, and iconography to breathe in more personality and engage with music industry professionals.

This medical application shouldn't be intimidating. Clear visual hierarchy should utilize large amount of texts. Prominent calls to action and overall intuitive design will contribute to ease of use

Design Principles

Exploring Visual Directions

After conducting initial research, I explored three style directions and created style tiles to give a realistic sense of how each style would look when applied to the interface.

This style tile represents the feeling of relaxation. I used pastel colors for a retro feel. By using this color palette I wanted users to feel comforted and happy. 

This style tile is modern and edgy with futuristic feel. Geometric shape texture represents the movement, energetic flow of music.

On this style tile I used vibrant yet medical blue color with orange accent. Musical equalizers can be used as design elements to engage with users.

Improving user experience

We were provided with previous UX research and annotated wireframes but after we reviewed them as a team we found a lot of usability problems. We improved existing features by reconsidering the functionality and usability flow. 

Home page

After confirming that users don’t usually change dB meter frequency, we suggested getting rid of drop down.

​​​Wireframes didn’t have a “safety time” feature that was very important for our clients and users.​

Quick links menu consisted of items that would better be placed on other screens. Also, it took almost half of the screen wasting valuable real estate.​​

 “Export pdf” feature could potentially be hidden instead of being so promptly stated.

​

​

​

”Last message from audiologist” as well as “Message audiologist” will make more sense on “My Audiologist” page.

Hearing page

Testing/Iterating

In the first round of interviews, we tested 6 potential users with backgrounds relevant to the target audience for the Project Decibel. Scheduling these users was difficult due to them being mostly on tours. All the tests were conducted remotely through Google Hangouts. In the first round, we focused on testing the Home, My Hearing, Hearing Test and Resources pages because these screens were the most content heavy.

 

Our testing goal was to answer the following questions:

​​

  • How these designs resonate with the intended audience?

  • Is there anything confusing or hard to understand for users on the pages?

  • How simple and intuitive is navigation and use of different features?

Home

My Hearing

Hearing test

Resources

Feedback:

​

Users found the designs to be very clear and accessible. Clients wanted to explore more colorful and vibrant design. 

 

Next round of testing

During the second round of testing, the goal was to test how easily users can accomplish four different flows by using a clickable prototype.

Users were asked to:
1) start and stop dB meter

2) navigate to "My Hearing" page

3) take the Hearing test

4) explore the "Resources" page

 

  • Bottom nav labels were added as some icons were confusing for the users.

  • Changed “Hearing Test” from multiple pages with confusing layout to one long scrollable page and added more white space in “Resources” page.

  • Added more color by implementing bright db meter range, also added bright accent colors.

  • Data heavy and sensitive information from My Hearing page was moved to another page and opened by clicking on the card with an arrow where all the info about previous results is stored.

  • Resources page became friendlier and more colorful by using bright photography.

Taking a risk

dB Meter

  • I decided to make a crucial change to the color system of the app, I redesigned typical dB meter by adding animated sound measuring waves which would move while measuring the noise level and would go from blue to purple depending on the level of exposure.

  • Improved visual hierarchy of dB meter.

  • Renamed the page from “Home” to “dB Meter” to make it more clear to the users.

  • Added chat icon to the main screen using persuasive design pattern with which users can easily start chat with doctor.

Feedback

 

It was a perfect combination of fun and interactivity with the microinteraction. Color coding was very clear. When tested users understood that blue means safe and dark purple means a danger zone. Moreover, business goals were reached too, with the decision of creating chat button on a main screen 8 out of 10 users said that they would interact with it.

My Hearing page

  • Introduced purple color which looked both medical and hip.

  • Designed "My Audiologist" page with a live chat page. 

  • Improved visual hierarchy.

Hearing Test and Resources pages

  • I made the questionnaire slightly bigger for legibility purposes. Simplified it by leaving only one action of vertical scrolling.

  • Resources page became more user-friendly and legible by increasing the font and the size of the pictures.

  • Included the time of reading for each article.

Feedback

​

"My Hearing", “Hearing Test” and “Resources” pages received only positive feedback. Users said that was great, easy to use and legible at the same time. Users also responded very well to implementing new purple color as a brand color to other areas of application which really filled the missing part of my designs. Luckily in this round of testing, we had plenty of users and I even got a chance to user test my color innovations. Overall in this round of testing, I received positive feedback which gave me the green light to implement the improvements.

Outcomes

I presented final designs to the project owner. We were amazed of what we could achieve in such a short period of time. We also discussed the possibilities of the new features and new problems that we ran into while conducting usability testing.

​

Interface

​

To connect with musicians that often measure sound in dark venues, we should continue to explore and test the addition of a “night” and “day” interface modes.

​

​

In order to communicate my comprehensive design language and to help future development team implement it I created a style guide.

​

See the full style guide

What I've learned

After various rounds of testing and iterating I presented strong design that accomplished goals that were set at beginning of the project.

Me and my team created fun, hip yet trustworthy application which our steakholders were aiming to achieve.

 

This project was very intense but the outcomes showed me how I have improved as a designer. Working on Project Decibel was a valuable experience for me because I gained more confidence dealing with complex problems and finding the best user friendly solutions. I received great experience working with infographics by creating an innovative dB meter as well as conducting very meaningful user testing.

 

My main challenge was to find the overlaps of fun and hip with professional and trustworthy which would attract more users and bring success to the business. This was a big UI challenge but I also wore the hat of a UX designer. By conducting research, changing existing wireframes and successfully implementing them into my designs I learned a lot about UX design. I feel very confident about achieving the goals of Project Decibel. During the process, I exceeded the client's and my own initial expectations.

bottom of page