Project Decibel

Client
Project Decibel

Duration
3 weeks

Skills
UI/UX design
IxD design
research
branding

Deliverables
style tiles
mockups
prototype
style guide

Tools
Sketch
Illustrator
InVision

Overview

In a study of 3 million people, music industry professionals were 4X more likely to experience hearing loss and 57% more likely to develop tinnitus. Yet, often less than 2% of musicians consider preventative hearing care. Project Decibel (PdB) is a hearing wellness initiative tackling this challenge by breaking down barriers to reach and provide care to individuals within the music industry. As a musicophile, I was thrilled to be on this project.

Knowing that 40 million Americans aged 20-69 live with hearing damage from everyday noise is scary. Almost as scary as the fact that there’s little to no regulation.

Project Decibel co-founders Jenna and Drew came to Designation seeking help—due to company growth, they couldn’t help everyone who sought their care. To allow them to expand nationally, we teamed up to create a mobile application. My team consisted of myself and two other designers—we collaborated to research the domain, create design principles, and conduct desirability and usability testing. We integrated team and individual findings and each created a design system for our client. In the end, we developed some rad design solutions. If you’d like to skip to my final goods, head all the way to the bottom.

Defining the challenge

Jenna and Drew, PdB co-founders. Their traditional yet funky attire was our first clue into how to balance the music and health industries. 

Weeks earlier, a team of UX designers from Designation conducted extensive research, concepting, and testing to create wireframes for the PdB mobile product. Due to time constraints, some of their final concepts came to us untested, giving us a unique opportunity to dive deep into the UX. This rocked.

I anticipated our biggest hurdle was creating a visual aesthetic that balanced the look, feel, and mood of music and health. Products from these industries elicit different emotional responses, so utilizing too much aesthetic from either had potential to alienate or confuse PdB users. I saw a parallel to my previous client, Clickx, when we explored the integration of a friendly and professional tone across a data visualization and learning platform. I was eager to see how I could apply and grow this idea to a new project.

In our kick-off, we learned Jenna and Drew weren’t thrilled about dark interfaces—they worried their app wouldn’t feel medical enough. Our clients spoke about the importance of familiarity, as most users choose to work with Project Decibel because they know their unique needs as music industry professionals are understood.

To wrap up our meeting and get an idea of their high-level brand vision, we asked what musician PdB would be. Drew responded, “Stevie Nicks”—the symbolism caught my attention. Stevie Nicks defied gender roles with style and sass in a time when rock and roll was a complete boys club. This analogy revealed that Project Decibel saw themselves as authentic, specialized, and unafraid of breaking down barriers. I carried this metaphor with me throughout the rest of the project, challenging myself to explore the limits of my designs.

Evaluating the space

To determine a competitive niche for PdB, we dove into domain research to evaluate the market trends and patterns. We examined Mimi Test, Listen Carefully, ACS, Sensaphonics, Musician Hearing Solutions, and Soundcheck Audiology and synthesized our research to determine their strengths and shortcomings.

Colors brought energy while allowing them to maintain their credibility as health experts
Off-white felt organic and different, making Mimi Test feel more inviting
Interactive and approachable data visualization made Listen Carefully’s sound-level meter fun to use, encouraging active use
Visuals were inappropriately “cool” leading to a loss of health context and a “try hard” feeling
Stock photography felt cheap and lacked personalization
Medical information had poor text hierarchy, decreasing digestibility and trustworthiness

We found many competitors incorrectly balanced visual themes between the music and health industries, making them feel untrustworthy. Most competitors felt surprisingly outdated due to text-heavy pages, poor hierarchy, and stock photography—this excited me about potential differentiation for our client! To seek style inspiration and direction for our designs, we also examined many out of category products. Airbnb, Awair, Moodnotes, and Spotify were most inspirational to my design process.

Airbnb

Airbnb broke down literal barriers in getting people to open their homes to strangers, so I thought it was a great place to start.

Welcoming custom photography promoted a feeling of safety and openness in their designs while cards chunked out information into digestible pieces.

Awair

Awair links a physical air measurement product to a mobile app to help users track indoor pollution.

Negative space and a mix of gray tones and atypical color felt modern and clean. Drawn to their blocked color coding, I liked how efficient it made scanning and digesting the pollution data.

Moodnotes

Moodnotes is a healthcare app that promotes mental health journaling.

Unique shades of organic colors created a calming and friendly interface. Significant white space made it easy to read.

Spotify

Spotify is a music playlist app that learns from users to suggest new music.

Curation created a sense of thoughtfulness and trust. Heavy photography and negative space balanced to promote digestion. They used gradients and color filters to create a unified image style across many music genres.

We combined our domain research, style inspiration, and client insights to create team design principles. Although we created individual solutions, these principles allowed us to align our design decisions around users and the PdB brand, as well as communicate and defend decisions to our client.

Trust in Me

Music industry professionals’ hearing is directly tied to their professional value. PdB users must feel confident in our expertise and confidentiality. We emphasize approachability, so users can come to us without hesitation.

Bridging the Gaps

The music community is at high risk for hearing disorders, yet they face shame when seeking preventative action and care. We break down these stigmas by creating a balanced visual aesthetic between the music and health industries.

Anytime, Anywhere

Often on the road, music industry professionals don’t have time or a place to see a specialist. By utilizing quick digestion, we provide a convenient and efficient way for users to access hearing healthcare.

After feedback from our creative director, we iterated our design principles weekly until they reflected the needs of our niche user-base. This continuous reiteration forced us to approach our designs from a granular and birds-eye view and improved their integration into our work.

Concepting visual directions

Music is a vast industry and the aesthetic appeal to different genres is just as broad. To create design directions that connected with any music professional, I needed to break beyond visuals that were genre-specific. I surveyed friends to explore what music means to them and the mood it sets. Stevie Nicks broke down barriers, so I drew from my inspiration, our design principles, and three emergent moods to create style directions that gently pushed PdB’s boundaries as a medical application.

Music is sleek and makes me feel like an individual. I challenged our client’s notion that the PdB interface should be only light by balancing light with dark. Neutral and atypical bright colors created a sleek feeling, abstract graph waves added personality, and photo filters created harmony between genres.
Music is invigorating and makes me feel alive. I created an edgy harmony between music and health by combining visuals from nighttime shows and modern health offices. Charcoal, vibrant color, and minimal cards with hard edges and soft shadows yielded an atypical balance.
Music is home and makes me feel nostalgic. I diverged by pairing warm tones with traditional white. Bright organic color and juxtaposed sharp and smooth lines felt modern yet vintage. Lifestyle photography felt thoughtful and trustworthy while a unique typeface brought in grooviness.

My third style tile was a clear favorite. Jenna and Drew loved the color, unique typography, sound shaped waves, and photography. They were also drawn to the juxtaposition of round and sharp corners and warm and bright white tones. Compared to my other visual directions, they preferred the organic feeling of the wave-like progress bar, a simpler “before you start” graph, and more “album-like” photography. I integrated these elements when I began designing high-fidelity mockups.

Pushing the boundaries of my visual directions in a way that fit their overall style was a learning experience because my path for each was different—I incorporated differences in interface color, edges, shadows, and color tones. Exploration of these concepts stood out to me because I felt confident explaining each direction and how the individual parts collectively created a unified look and feel.

Improving the user experience

Before diving into high-fidelity designs, I individually evaluated and collaborated with my team to find areas of opportunity within the wireframes—some wireframes were untested, making this critical. We sat down with Jenna to go over some of our questions and ideas before iterating.

Our team getting insight on an important missing feature of our wireframes, the OSHA safe exposure time. Our meeting also served as a touch point for creating a unified vision with Project Decibel—Jenna was thrilled to collaborate with us on our evaluation.

Home

Quick links took up valuable real estate and were redundant with the bottom navigation. We removed them to streamline the screen.

dB-A frequency weighting is used most frequently, making a focal drop-down menu unnecessary. We moved it into the decibel meter settings.

Our client expressed that safety was the most important feature of the decibel meter, but it was absent. We added a safe exposure limit using OSHA ratings, allowing users to see the permissible exposure time.

My Hearing

Message my audiologist was repetitive with the top navigation and added unnecessary information. We removed it to streamline the content to critical patient information.

The PDF Export function misaligned with common mobile patterns. We removed it.

Hearing History

Drop-downs, oh my. This page had a potential 20 clicks for 10 questions. We streamlined the design by replacing all drop-downs.

A long scrolling page can lead to survey fatigue and question skipping. I evolved hearing history into three click-through screens grouped by topic to increase ease and efficiency.

Horizontal radio buttons can decrease response accuracy so I utilized vertical stacking.

Resources

There was an inconsistent application of top navigation across screens. I improved consistency by aligning the patterns.

Crowding of information decreased digestion and cluttered the design. To improve scannability, I redesigned the structure.

I loved dissecting these wireframes. I learned a lot about mobile survey design through my independent research and enjoyed seeing how conflicting opinions evolved over time. When mobile surveys became common, many studies called scrolling superior to paging. However, recent studies suggest a few grouped questions per page, or “chunking it out” as I called this as a teacher, makes it feel faster and more efficient to users and can improve completion rates. This research nostalgically reminded me of all the scientific papers I used to read when I was marine ecologist, where principal investigators argue back and forth about theories for years. Excited to implement my insights, I diverged from the wireframes and prepared to test my designs.

Building, testing, and iterating

We built our initial mockups and prepared for two rounds of desirability and usability testing, first on static screens and then using a clickable prototype. Over the course of 10 days, we tested a total of 9 music industry professionals including: musicians, sound engineers and tour managers.

User testing provided surprising and invaluable insights, such as discovering that the similar sound level feature was unnecessary and confusing to music industry professionals.

Users responded positively to my colors, typography, and look and feel. As we moved through iterations over two rounds of testing, we honed in on some key areas of opportunity.

Home

Placement of dB readings and direction of meter was unclear

Similar noise level indicator was misunderstood

Calling this screen “Home” was confusing and created navigation issues

“Ear Gear” meaning was unclear

Users reported they might not click reset, losing the ability to see the safe exposure limit

My Hearing

Album art icons were received poorly, feeling “salesy” and untrustworthy

Header font felt too skinny, decreasing scannability

Green icons stuck out and felt “random” to users

Blue header was incorrectly perceived as clickable and the design felt cold

Users wanted an accessible way to message their doctor and see notifications

Hearing History

Green header paired with the world medical felt related to marijuana

Terminology of “medical history” was too generic

Blue headers felt cold

Discussing development helped me realize that using multiple colored headers was insensible

Font size was too light and decreased reading ease

Resources

Similarity between blog and educational content was confusing

Gradients atop photos felt too bloggy

Save button was hard for users to see

Time length information was too small

Some images lacked appropriate medical context

One of my project goals was to spend more time exploring color—while I iterated often and explored paired shades to create an illusion of depth, it wasn’t until the end of user testing that I realized I needed to be more deliberate to design a meaningful color system. I adjusted my application of color to incorporate more functionality, using greens and blues to indicate headers and navigational items while I used pink and red for visual highlights in iconography and text.

Many of our iterations revolved around UX and functionality, principally the sound level meter—the original wireframes had similar functions to other sound meters on the marketplace but when our users saw them, they had trouble understanding them. This key insight into user behavior and their expectations and needs as music industry professionals dramatically changed our design solutions.

My biggest UI takeaway was user reactions to my album-art icons. I’m glad I explored the limits during initial testing but this illustrated the fine line between something feeling fun and relatable, like in the resources page, and something wiping away a feeling of trust. While exploration is essential to innovation, in a business setting this can have rippling repercussions. In the future I’ll continue testing boundaries, but always in conjunction with evaluating the context and stakes.

Design solution

We incorporated feedback from our final round of testing and client meeting to create our proposed solutions. In our final iterations, we parsed out what we could achieve in our final days of the project and what would become future recommendations for the PdB team.

I’m proud of how tirelessly we worked to iterate both the UX and UI of our designs. User testing reiterated the importance of testing our own assumptions and allowed us to make rapid progress. In the end, Jenna and Drew loved my design system and chose to develop it!

These high-fidelity mockups are the central jump off points of Project Decibel—however, they are a piece of the puzzle. I also created a prototype to illustrate interaction design and a comprehensive style guide to use as a branding and visual communication tool as they begin development. If you’re curious, please check out my InVision prototype and style guide.

Next steps

After we wrapped up the project, Project Decibel asked me to continue on as a consultant and Jenna and I determined a few immediate needs. Due to time constraints, the UX team was unable to touch the e-commerce area of the app and Project Decibel was in dire need of something to show their investors. After gathering some data and research on popular e-commerce pages and other health platforms, I went straight from sketches to high-fidelity mockups. This rapid turnaround allowed Project Decibel to give their partners an idea of next steps.

Utilizing patterns from common mobile e-commerce applications, I designed an interface that gave a sense of elegance and expertise to the platform. The biggest challenge was creating a unified look and feel while incorporating multiple brands and their different photography styles.

Working from sketches directly to high-fidelity mockups was a new experience and at first it was slightly uncomfortable—it gave me insight into the fact that every process and project will be different and that time constraints and business needs are significant influencers. I'm excited to use design and strategy to help business and user goals converge for Project Decibel and future clients.

Looking forward, as our designs underwent significant UX and UI changes, additional user testing will be critical. Within the decibel meter, I want to test that:

  1. Users see and understand pagination and can switch between states.
  2. A live and average safe exposure level is desirable.

I also want to test the restructuring of the hearing history questionnaire, as user testing was inconclusive,. I hope to conduct A-B testing to give Project Decibel a quantitative idea of how changes may affect whole-questionnaire and individual-question completion and accuracy rates.

Gathering this data and making necessary changes ensures that Project Decibel continues to improve hearing health for their users. Informing users of their environmental conditions and providing them with personalized hearing care is what separates Project Decibel from their competitors. This competitive niche creates a unique brand value, establishes loyalty in users, and promotes new user growth. Testing will ensure that Project Decibel can successfully meet these expectations.

What I learned

Jumping off my work in Clickx, I deepened my understanding of my own process and used this to iterate my designs further. Project Decibel required significant UX and UI work—throwing myself into research and best practices while solving usability and desirability problems was a new challenge that I fell in love with.

During this project, I worked through many iterations of color. At the time, I thought I was completing my stretch goal of exploring color. At the end of testing, I realized if I was to create clear and meaningful designs, I needed to be direct in how I applied my palette. I learned how to pair colors to create depth and movement in my designs, but more importantly I learned how to build a design system that integrated color through multiple levels of function. Moving forward, I will approach building color differently—start with less and be deliberate about each color added. 

Additionally, reflecting on our first round of testing, when 50% of our users were no-shows, I felt incapable of analyzing our results. At my core, I’m a scientist and I approach everything with this mindset, so having a sample size of three people was a statistical and mental obstacle for me. I reconciled this by digging deeper into our interview transcripts to nail down the drivers and develop my conclusions. Our small user pool taught me that valuable data and insights can come from a few people—such constraints are inevitable, so flexibility is essential. I’m proud of the solutions I designed for Project Decibel and I look forward to seeing where my partnership with them goes!

Jenna's recommendation

Caitlin brings creativity, out-of-the-box thinking, positive energy, and a high level of professionalism to her work. Client-facing, she is incredibly talented and easy to work with, and customer-facing she is friendly and approachable. Our clients and end users report really enjoying working with Caitlin and felt their confidentiality was safe during research phases. 

Caitlin's ability to think outside of the box, connect with our users, and understand their needs and desires, brought life to our platform—a healthcare app with a music industry appeal and aesthetic. We are thrilled to continue working with Caitlin. She is not only talented, energetic, and kind, but she is a leader and we look forward to having her on our team.

— Jenna Paley, Project Decibel