Project Decibel

Overview

Role

UI Designer

about Project decibel

Project Decibel is a hearing wellness initiative that aims to replace the need for musicians to physically meet with an audiologist by connecting them with hearing loss prevention doctors via a comprehensive mobile app.

DEFINING THE PROBLEM

People in the music community are at high risk for hearing disorders due to a lack of education, expensive and inconvenient audiologic care, and no regulations to monitor sound safety. Misconceptions and a lack of understanding about hearing disorders may lead to early career termination and poor quality of life. People need an easy and affordable way to access hearing healthcare while on go.

The challenge

I was placed in a team of three UI designers and tasked with taking a previous UX team’s wireframes and individually designing an app that felt and looked medical, professional, and hip. We worked closely with the CEO, COO, and project manager of Project Decibel while creating style tiles, high fidelity mockups, prototypes, and final style guides to present at the end of week long sprints.

Competitive Research

Visual Competitive Analysis

My team began researching other apps and sites in the hearing wellness sector as well as out-of-category inspiration. We analyzed them to see how design patterns and trends were utilized in the hearing industry and other industries to consider them for our own designs. We categorized our visual competitive analysis takeaways into design opportunities and patterns to avoid.

Brand competitors: Musicians Hearing Solutions, Listen Carefully (Starkey), ACS, Sensaphonics, and Mimi Hearing Test

Visual Inspiration: Fitbit, Spotify, Stress Check, Talkspace, Outcome Health, and Airbnb

Design opportunities

Negative space: Negative space helped with readability and drew attention to the main focus of the page.

Card layout: Cards effectively broke up large amounts of content to ease cognitive load and help scan information quickly.

Color palette: White interfaces with pops of color helped draw attention to CTAs and felt approachable and trustworthy.

Photos of faces: The use of lifestyle and face photos helped create a sense of trust with users in health apps.

Design Patterns to avoid

Dark interface: Dark interfaces contributed to a feeling of intimidation and created a lack of context for health and wellness.

Capitalized headers: An intent to catch users’ attention actually felt like yelling and intimidation.

Content heavy pages: Blocks of large text established a lack of interest in reading.

Stock photos: Unoriginal and staged stock photos did not feel trustworthy.

Looking at platforms for inspiration: Sensaphonics, ACS Custom, Airbnb , and Talkspace

Design Explorations

style tiles

I designed style tiles to offer three directions for the app’s visual design to potentially move forward in. Each direction included a variety of interface elements, like color palettes, icons, and typography to show how they lived together in an app. Project Decibel felt that the third style tile best represented their vision for the app with the minimal color palette, thin sans serif font, and overall simple interface.

I took it as a challenge to design an app both dark and medical. Rounded elements were implemented to represent the flow of music, and thinly stroked icons lightened up the visual weight with the dark background.

The black and white color palette was chosen to emulate the feeling of being hip, friendly and clean. Blue call to action buttons contrasted against the white, and an orange-red gradient brought energy and movement into the design.

My goal for the third style tile was to create a design language that looked and felt more health and wellness orientated. I utilized ample negative space, rounded corners, and a green-blue color palette to feel calming, approachable, and modern.

UX Wireframe Changes

proposals for ux changes

To start the design process, my team analyzed the UX wireframes and discussed the problems and possible solutions to issues we found. We proposed these changes to Jenna, the CEO, who agreed that the changes were necessary to better the overall user experience.

My team meeting with Jenna to discuss UX changes to the Project Decibel wireframes.

Visual Design Goals

Design Principles

We created three design principles to guide us when designing our app. The design principles were to be a reference whenever possible so our designs remained consistent with the established visual language and with our client’s needs and goals. When coming up with the names of our design principles, we chose popular song titles, which was a fun and appropriate way to incorporate music into the project.

User Testing: Round I

TESTING DESIRABILITY

We first interviewed three people to examine how they would respond emotionally to the look and feel of our individual designs. It was important our pool of interviewees were people from the music industry so we can get the best insights from potential users of the app.

My group came up with questions that revolved around the look, feel, and emotional connections users felt with the designs. We asked questions like, “What was your first impression of the page visually? What emotions do you feel when using this page?” It was important that questions we asked were open ended and the reasoning behind each answer was fully developed so we can take actionable steps in evolving our designs.

Version 1 of my designs for Project Decibel's Home and My Hearing screens.

Version 1 of my designs for Project Decibel's Hearing test and Resources screens.

Insights From Version 1

Insight: Users didn’t like the purple color palette because it felt too fun and unlike a medical app.
Goal: Find a color palette to feel more medical and professional.

Insight: Users struggled to understand what the noise level indicator represented.
Goal: Speak with the client to see if this is a necessary feature.

Insight: The decibel reader was confusing because the start and stop was at the same location.
Goal: Find a more visually straightfoward way to represent sound level and safety.

Insight: Users were confused with the decibel meter being labeled as “Home”.
Goal: Change verbiage so there is no confusion for where to locate the decibel meter.

screen iterations

After user testing the desirability of my first version of designs, I made necessary changes based on the insights I received. I chose a lighter color palette to feel more in line with other healthcare apps and a colored decibel meter to represent safety levels of the environment.

Version 2 of Project Decibel's "Home" and "My Hearing" screens.

Version 2 of Project Decibel's "Hearing History" and "Resources" screens.

User Testing: Round 2

TESTING USABILITY

Before the second round of testing, I iterated my designs to a third version and chose more screens to design. My team and I interviewed six more potential users to test the usability and learnability of the app through a clickable Invision prototype. We sought to gain insights about the flow of tasks and functionality of UI elements in the app to better the user experience.

I asked users to talk aloud their thoughts and feelings while interacting with the prototype so I could better understand what was well liked or confusing. Some questions I asked were, “What do you think you could interact with on this page? How would you contact your audiologist with a question you have?” As users went through each flow, I paused to ask what they thought certain elements represented or if there were any questions or concerns on each screen.

Version 3 of my designs for Project Decibel's dB Meter screens.

Version 3 of my designs for Project Decibel's My Hearing and Messages screens.

Version 3 of my designs for Project Decibel's Hearing History and Resources screens.

My team and I user testing our prototypes with a potential user of the Project Decibel app.

Insights From Version 3

Insight: The turquoise green color was liked because it felt medical and calming.
Goal: Continue to check for readability issues with white font on lighter backgrounds.

Insight: Users wanted an indicator for how loud the environment was (e.g. “loud,” “very loud,” “dangerously loud.”)
Goal: Explore different areas where this can be implemented on the "dB Meter" screen.

Insight: “dB-C” under each reading was repetitive.
Goal: Put “dB-C” in one general area.

Insight: Text size was too small to read comfortably on the "Resources" page.
Goal: Increase text size to be more easily read.

The Solution

The Final design

After the various rounds of user testing and meetings with the client, I successfully designed a professional and medical looking app that felt trustworthy and convenient. Our client team was grateful and appreciative of my team for the effort we put into designing the app they envisioned. Their heartfelt appreciation for the hard work and time committed to this project reminded me why I chose to become a designer – to help people achieve their goals through thoughtful design.

My final designs for the dB Meter screens before, during, and after a decibel reading.

My final designs for the My Hearing and Messages screens.

My final designs for the Hearing History flow and Resources page.

Try out the prototype!

View the Project Decibel Prototype

Wrapping Up

Future Considerations

During our final meeting with Project Decibel, we discussed future considerations we had for them that were out of our time frame and scope. These considerations were based on ideas our team came across while designing, but were unable to tackle due to time constraints. The recommendations aim to make the Project Decibel app a strong and memorable product with future users as the design continues to evolve. The client team was very thankful for the considerations because it gave them future direction and guidance for after our time working with them was over.

Exploring a “night mode” setting to change the interface color to a dark background for users in dark settings, like concerts.

Further testing of various ways to present personal hearing information results, and whether users would want them hidden or not.

Further testing if the chat icon in the upper right-hand corner is clear and necessary.

Final Style Guide

The last deliverable I presented to the client was a final style guide. The style guide was to be a set of guidelines for how Project Decibel's visual elements should be applied for all future products to ensure consistency for the brand.

View the Project Decibel Style Guide

Check out my other work!