Music Man: Custom Shop Website
Ray Domzalski Jr.
The product:
The Ernie Ball Music Man(EBMM) Custom Shop website allows customers to build their own guitar by selecting every detail down to the finish.
Project overview
Project duration:
This project took approximately 1 month to develop.
The problem:
Historically, EBMM has not offered a public-facing custom shop. Customers are increasingly aware of competitors custom offerings and are willing to spend the money to get exactly what they want - pulling sales away from EBMM.
Project overview
The goal:
Create a responsive website for the new EBMM Custom Shop that allows customers to choose every detail of their guitar build and place & pay for their order without any contact with the company directly.
My role:
Identify your role in the project - e.g., lead UX designer, UX researcher, etc.
Project overview
Responsibilities:
List the responsibilities you had throughout the project - e.g., user research, wireframing, prototyping, etc.
Understanding
the user
User research: summary
The research for this project included a competitive audit and user interviews. As a guitar player I used my past experiences with online builders and reached out to other guitar players to get their take. In reality, these types of “custom shop” level options are not as widely available as I had imagined (on the high-end side of brands) but there are large brands, like Fender, who have tackled the issue. In speaking with other guitar players it was indicated that a more easily accessible option from a high-level builder would be well received.
User research: pain points
More options
Users want to choose every aspect of their guitar build, down to the wood used for the body and neck. A complete list of options in the build process will be necessary.
Visual Mockup
Most online builders provide a limited visual mockup for the user. Due to the wide number of options in the EBMM builder a strong visual mockup is a must.
Straight to Order
Customers want to be able to “build” their guitar and order it right away (without contact from the company before hand, etc.) A clear order form will end the ordering process.
1
2
3
Persona 1: Gabriel Rectif
Problem statement:
Gabriel is a graphic designer and father who needs an affordable, reliable instrument because when he does have time to record music he wants to spend it writing, not fixing an instrument.
Persona 2: Thomas Buski
Problem statement:
Thomas is a writer and founding member of his band who wants to buy his own, custom instrument because he wants to get the guitar he has always wanted but has been unable to find.
User journey map
The EBMM Custom Shop ordering site journey is very straightforward, giving the user all of the necessary visuals and options they need to complete their build.
Starting
the design
Sitemap
The EBMM Custom Shop ordering site would ideally be rolled into their existing website with the main addition being the ordering track. While there is a wide range of content available on the site, there are several options to jump into the ordering flow.
Paper wireframes
The goal of the wireframes was to clearly indicate sections of the website, create unique focal points for points of interaction and to provide a repeatable structure that would work well on mobile.
Paper wireframe
screen size variation(s)
This website was thought of as mobile-first and that is reflected in the easily adapted nature of the section blocks. All CTA’s, images, text and styling easily scale up and down for a consistent experience across devices.
Digital wireframes
Research made it clear that a)once a user made a selection, they wanted to proceed to see their selection take effect and that b)they wanted a way to return to a previous step if they decided to change a specification later in the build process. These two issues were addressed with clear CTA’s placed in the bottom right of the active “window” - a common point of reference for most users and with an interactive progress indicator above the mockup image of their instrument.
CTA’s are given a priority via contrast as well as a space along the bottom right of the “window” - a key area of expected interaction for users.
A progress indicator occupies this area - giving users the ability to see where they are in the process and provides a way to click to return to a section.
Digital wireframe
screen size variation(s)
With each of the page elements having been built with a grid structure in mind, it makes it easy to consistently scale the user experience for any device. The only visual item that changes per device is the % of viewable background image.
Low-fidelity prototype
The user flow consists of starting and completing a custom guitar order. *Please follow the available interactions as only a certain number of options were made live. Users found the flow to be very simple and it reminded them of other ordering processes. A limited number of issues were found in the process.
Usability study: parameters
Study type:
Unmoderated usability study
Location:
United States, remote
Participants:
10 participants
Length:
10-20 minutes
Usability study: findings
Insert a one to two sentence introduction to the findings shared below.
Participants were unable to determine the priority of the buttons inside of the ordering process.
Button Priority
Is it “custom”?
Save my Build
Users of the initial mockups were concerned that the look/feel did not feel entirely custom (re: too similar to the normal EBMM site)
Due to the ease of creating alternative options/builds, customers noted a “save my build” feature would be beneficial
1
2
3
Refining
the design
Mockups
One of the main findings in the usability studies was that there was not a clear distinction between forward and backward actions inside of the ordering process. To address this issue the “next” button was left as a solid action button, the “previous” button was changed to an outlined button.
Before usability study
After usability study
Mockups: Original & Mobile Screen Sizes
High-fidelity�prototype
The high fidelity prototype of the Ernie Ball Music Man Custom Shop ordering site captures the entire user flow from start to finish. *Please note there are a limited number of available options in each step. Please follow the available prompts.
Accessibility considerations
The first consideration that was taken with regard to accessibility is the limited color palette and clear typeface. This decision to keep to a 3 color palette and the typeface Proxima Nova means text and CTA’s are clear to all users.
The navigation across each step of the ordering process is consistent in both appearance and placement.
Headings and subheads clearly indicate which step of the ordering process you are on. The progress indicator further indicates your place in the process and allows you to return to any given step quickly.
1
2
3
Going forward
Takeaways
Impact:
The completion of the Ernie Ball Music Man Custom Shop guitar ordering site will put Ernie Ball above their competitors who offer a custom ordering service. This level of interaction will further cement the brand as a leader in the guitar building world.
What I learned:
Early in this project I learned there is far more to a guitar than I first thought! As a player for more than 20 years I have taken for granted the unique details that make my favorite instruments feel so special. Giving access to absolutely every option has its drawbacks in the length of the user flow, but it is important to maintain the feeling that the customer is in control and is getting a truly custom guitar.
Next steps
I will expand the options to include at least one more model type as well as various wood & finish option mockups.
I would like to add a “share my build” option for users to show their new guitar builds to friends & family via text/email/social media.
I ultimately want to present this project to a rep from EBMM. Ernie Ball is a family-owned, legacy company who I think would love to see a path forward for their own Custom Shop.
1
2
3
Let’s connect!
Insert a few sentences summarizing the next steps you would take with this project and why. Feel free to organize next steps in a bullet point list.
Thank you very much for taking the time to review my project!
I would love to hear your critical feedback - after all, we are UX designers in search of a better experience and we can not get there without feedback.
Please feel free to email me at raydomz@gmail.com.