top of page
Screen Shot 2022-02-21 at 3.44.25 PM.png

Sonic Breach

Sonic Breach

Case Study

Sonic Breach is an emerging Audio Engineering company that seeks to build a website to offer their Mixing & Mastering services so that customers can learn, connect with professionals and book in one place.

The company is looking to develope an easy to use, comprehensive, responsive website for its  customers.


Continue for detailed case study

Overall Impact

Collaborated with the founder on defining brand identity; conducted market/user research; designed user journey and developed the design system. 


  • User Research

  • UX Design

  • Prototyping

  • Usability Testing

The client, is a professional sound engineer, based in Denver Colorado. He provides a professional studio and live sound recording, mixing and mastering service. He has been in the industry for over a decade and is looking to showcase his projects in a minimalistic, clean and aesthetically pleasing way for current and future clients to view.

Screen Shot 2022-02-21 at 3.18.05 PM.png

Who is Sonic Breach?

Defining Goals & Objectives Through Research

The Goals:

  • First, we must understand what users look for when searching for a mix and mastering engineer & why users choose one Sound Engineer over another.

  • We plan to understand how users go about finding an Engineer to help complete their projects.

Research Objectives:

  • Consolidate user concerns with picking an engineer.

  • Understand how artists book sessions now.

  • Understand the mixing & mastering process.

  • Collect features users like/want from current engineer sites.

  • Find how to display pertinent information that sets client apart so that users will want to ultimately book a session.

In the current market there is a large range with thousands of different engineers to choose from, all offering different packages and styles.

After exploring several dozen in each “range” I decided to chose one from each. The ranges being Grammy Award winning and platinum album engineers, to the more mid level, yet still renowned and lastly the freelancer for hire.


Below are the notable characteristics about each.

Screen Shot 2022-02-24 at 8.52.14 AM.png

Understanding the Market

With an understanding of the market I wanted to gain better insight on the clients I'd be designing for. It was important to find exactly what artists expect, want, and need when deciding on an engineer to take their project to the next level. I interviewed 4 artists with varying degrees of experience and the findings that stood out were:

Screen Shot 2022-02-24 at 10_edited.png

Process and policy must be clear and upfront from the get-go. Many engineer sites are unclear about pricing. Users are frustrated by unclear (or bad) policy.

Screen Shot 2022-02-24 at 10.08_edited.png

The users want to know about time frame, schedule and revision process. File sharing and formatting are often difficult so users would like this info upfront or be suggested by the engineer.

Screen Shot 2022-02-24 at 10_edited.png

The relationship with their engineer is key when deciding to start on a project or not so having good rapport is a must.

Screen Shot 2022-02-24 at 10.11_edited.p

Artists believe that the pre-project meeting is crucial. If the user doesn’t feel comfortable with the engineer, the project will suffer, or not start at all.

Screen Shot 2022-02-24 at 10_edited.png

Artists want an engineer who is trustworthy , creative, and professional. They want to collaborate but ultimately are paying for a job to be done.

Understanding the User's Expectations

Creating Empathy

Meet Stephen! I created Stephen as a persona to represent what kind of user we are targeting with Sonic Breach. Because many artists hold down other jobs, we thought it was important to represent someone who is a "middle of the road" artist, looking to break out and take their hobby, and make it a profession.

Screen Shot 2022-02-20 at 10.47.57 PM.png

Mapping & Flows to Build a Better Framework

Now that we have an idea of what the users expect, I began designing the steps they might take. Because Stephen needed to be confident in who he is going to potentially hire for his latest project his ideal flow consisted of reviewing Sonic Breach's work, viewing pricing and starting the initial dialogue with their engineers...

Screen Shot 2022-02-20 at 11.47.16 PM.png
Screen Shot 2022-02-25 at 5.21.45 PM.png

Initial Wireframing

Now that we had our flows, it was important to start planning the structure of the site. We felt it was important to not only showcase the clients prior work but based on my research, many other engineer sites don't offer any upfront pricing, which we wanted to incorporate.

Screen Shot 2022-02-24 at 2.48.04 PM.png
Screen Shot 2022-02-24 at 2.54.22 PM.png
Screen Shot 2022-02-24 at 2.54.49 PM.png
Screen Shot 2022-02-24 at 2.55.18 PM.png

Mobile Version

Screen Shot 2022-02-24 at 3.17.48 PM.png
Screen Shot 2022-02-24 at 3.16.55 PM.png
Screen Shot 2022-02-24 at 3.17.23 PM.png
Screen Shot 2022-02-24 at 3.17.06 PM.png
Screen Shot 2022-02-24 at 3.17.38 PM.png

It was crucial that Sonic Breach's target audience could easily navigate the site and feel confident about investing their time, effort and money with the client. To evaluate my design I conducted a remote usability test with artists in the music industry.

Tester Background

"You have compiled an albums worth of music that you think is good enough to collaborate with a professional engineer on. Explore the site and when you feel you have enough info book a session."

4 Participants 

3 Male & 1 Female

Ages: 24-33

Test Objective 

Book a "middle grade package" for upcoming project

100% Success Rate

All participants were able to complete the task

Prototyping & Testing

User Testing Results

Key Insights

All testers were able to complete the assigned task. However, some language issues came to light causing the users some slight confusion. In various sections the CTA wording was different but still lead to the same place.

The verbiage in the services "packages" brought some concern and was an easy fix which was later changed in the final design.

Users were less interested in the companies policies and would rather see what prior qualifications the engineers have to help them decide.

​Below are the results broken into categories based on comments and actions from the usability testing on our Sonic Breach prototype...

Screen Shot 2022-03-29 at 10.28.03 AM.png

Solidifying the Design

For the final design we felt that the most important thing was to let the clients work be showcased. We wanted a simplistic yet professional look and achieved this through darker palette colors with pops of bright color.

Throughout the site you can see other artists that Sonic Breach has worked with as well some other projects the client has been involved in.

While moving on with the final redesign I created a UI kit to ensure that the style, look and feel the client wanted, all fit into place together.

UI Kit.png

An interesting feature we came up with, that I did not see on any other engineering site, was the before and after music sample. This allowed listeners to hear a raw recording first and then a finished, professionally mixed version of the same track.

Because clear pricing and policy are super important to potential clients, I created a pricing break down where users could see what's being offered as well as the differences between the separate plans. 

Sonic Breach offers 3 different packages but all are customizable. It was important to allow the artists and the engineers at Sonic Breach open a dialogue early on, to discuss their project in depth. 

While my goal was to allow the clients work to speak for itself, we also wanted potential users to be able to learn more about Sonic Breach. Here you can see a brief history of the company, a little about the creators background, as well as some other related projects they've played a part in.

Lessons Learned

1. Client Relations: 


The first and biggest lesson I learned on this project was how to manage a successful relationship with a customer. Because Sonic Breach is an evolving business and busy with their own schedule, I realized that time management was going to play a crucial role in delivering what was promised. Since the client was not always available, if I was waiting on a decision I had to find other areas I could make progress on until I received a reply. 

2. Client Freedom:


I collaborated with the client and wanted them to have the freedom to make changes as the project progressed. However, this was an area I had to monitor closely, because being a 2 month sprint, iteration after iteration could have made it difficult to stay on track. I believe that looking ahead, closely monitoring my road map and good time management helped produce a good product on time. 

bottom of page