User Research, Information Architecture, Interaction Design, Wireframing, Prototyping, Usability Testing
I developed this design while I was a student at SVC in Seattle. I was the sole designer on this project.
Guitar players plug their guitars into little electronic boxes called effects pedals to change the sound of the instrument.
Effects pedals are often referred to as stompboxes because guitarists control them with their feet, turning them on and off by stomping on them.
This short video (1:44) shows a guitarist using effects pedals and talking about how they work.
Stompbox is a fictional company I created for this project. Stompbox focuses on quality over quantity, so they don’t have a large product line. Their products are designed with intermediate and expert guitar players in mind, but can be used by guitarists of all skill levels.
The company has always sold their product through big box music stores, but once they realized how many purchases were being made online, they saw an opportunity to sell directly to customers.
Stompbox understood that customers can only make informed decisions about their purchases when they understand how the product works and what it sounds like.
At least 3 years of guitar playing experience
Beginner to intermediate guitarist
Working knowledge of effects pedals
Has owned 10 pedals or fewer
At least 5 years of guitar playing experience
Intermediate to expert guitarist
Deep knowledge of effects pedals
Has owned 10 pedals or more
Without standardized terminology, users can’t easily navigate to the products they want to buy. This was a major design challenge that needed to be solved.
A guitarist discusses the grey area between two categories of effects. (2:16)
I contacted 3 Pedal Geeks and 2 Hobbyists and had them participate in a closed card sort.
Consensus between users about two of the categories, Parts & Accessories and Gain, were high. There was less agreement about which pedals belonged in the Modulation, Dynamics, and Time-Based categories.
Users shouldn’t be punished for their lack of technical knowledge (or for years of naming inconsistencies within the effects pedal industry). To match the mental maps of different users, certain pedals would need to be listed in multiple categories.
The most important thing to know about a pedal when making or researching a purchase is how it sounds. I wanted to know how users preferred to hear the sound of a pedal they were interested in purchasing. After they completed the card sort, I asked the five aforementioned users the following question:
4 out of 5 users responded that they rely on video when researching a pedal.
These decisive results indicated that the design would need to prominently feature video.
I was able to iterate rapidly on my designs and surface major problems early in the process by immediately testing the prototype.
I knew I’d need to develop a design for desktop eventually, but I took a mobile first approach in order to focus on usability and reduce the amount of unnecessary elements on each page.
I recruited two Pedal Geeks and one Hobbyist for usability testing. I asked them to think aloud as they used the prototype. Then I had them perform several task based tests.
Rather than introducing the site, the design lead with a banner ad and a promoted product, pushing users to buy, buy, buy.
The design needed to welcome users to the site before asking them to make any purchasing decisions.
I thought a home page free of navigation would allow the design to feature more products, so I tucked all navigation into a hamburger menu. Each user found the hamburger menu, but expected navigation on the home screen.
Navigation on the home screen would increase usability by allowing users to view all their options.
The wireframe features space for a hero image at the top of the homepage in order to orient users and welcome them to the site.
Below the hero image, users are immediately shown navigation. They can navigate to 4 different category pages directly from the home screen.
By clearly defining each category, the Category Page informs and educates users and reduces confusion around naming conventions.
In response to the survey results from early in the process, the design prominently featured a video demo just below all the product details.
This interactive diagram helps users learn the function of each knob. Users tap the knob and a description appears below.
A cheat sheet for the best sounds. Below the diagram is an audio sample. Users can swipe for more suggested settings.
I recruited 3 Pedal Geeks and 1 Hobbyist. I asked them to think aloud as they used the prototype. Then I had them perform several task based tests. I noted where the design presented usability issues.
Consistent with my early finding that there was little consensus regarding naming conventions, 2 of 4 users found the label “Time-Based” unclear in the main navigation.
By making the label less jargony and more specific, both Pedal Geeks and Hobbyists should have less difficulty finding the pedal they’re looking for.
The diagram, labeled Dial In Your Tone shows a vector image of the pedal. It allows users to tap a knob to learn what it does. 3 out of 4 users expected to be able to twist the knobs and hear audio that corresponded with the movement.
The knob diagram was originally labelled Dial In Your Tone, implying the ability to twist the knobs. I relabeled the diagram so that it read Tap a Knob.
It may be that the implied affordance of a knob will always be a twisting function, but clearer instructions might help users understand how to interact with the diagram. Replacing the vector with a photo of the pedal may be an even stronger solution. If I’d had more time, I would have tested various designs to validate my decisions.
By iterating and testing my mobile designs first, I’d done a lot of the hard work up front. Converting the design to desktop was straightforward.
The Product Page prominently features a video demo.
You can view the annotated wireframes here.
His comments are below.
Your submitted work for this course got stronger and stronger as the course progressed, culminating in a very successful and in many ways exemplary Course Project. That (and its presentation in our last class session) featured really strong, clear UX and IxD work—substantial, detailed, engaging, and well annotated. Very good use of mid-fi visual elements for your diagrams, which conveyed a lot of helpful info (such as your knobs component/controls). Nice incorporation of usability findings, too. The possibilities for future exploration that you mentioned during your presentation also seemed really promising, so keep those in sight, and consider moving this work further forward: you could have a case study on your hands. Stomp on!
I saved a tremendous amount of time by starting with a paper prototype. Not only could I iterate quickly, but I was able to test my designs early in the process and surface a few major design problems.
It may be that the implied affordance of a knob will always be a twisting function, but clearer instructions might help users understand how to interact with the diagram. Replacing the vector with a photo of the pedal may be an even stronger solution.
If I’d had more time, my next step would have been validating the changes I made after the usability test with the clickable prototype.
The museum asked for a guestbook. We designed an emotional experience that connects real people.
A company of renegade skateboarders needed to show they’d grown up. A brand refresh was just the trick.
email me at stevesachs.ux@gmail.com
