Analog Man

Discover

My aim in starting this case study was to revamp the UI, but once I got started, I found some real UX pain points to address. Since this was an unsolicited redesign, I didn't have access to site analytics or sales data from Analog Man that would have been the ideal place to start understanding the users and the site's strengths and weaknesses. Without that data or the time allowance for full generative research, I found a friend who had purchased Analog Man's products using the website, and I gave him an informal interview.

The Users

My interviewee has played guitar for 34 years and has owned over 60 effects pedals. He's played every kind of venue, from the middle school gym to arenas, and been the broke college student in between. While one person, of course, could not represent the full scope of users of this site, this user's tenure as a serious musician spans multiple life stage segments of the potential users:

• Gigging musician with retail/service industry day job

• Professional or semi-pro musician who has a business budget for new gear

• Non-music professional with extra funds for their music hobby

The interviewee expressed both his admiration for Analog Man's products and his groaning hesitation to try to use their website.

Define

Heuristic Analysis

I walked through the website keeping in mind several different points of view of potential users and the tasks they might be trying to accomplish: research a product, purchase a product, send a product in for modification, etc. There were several problems I uncovered in my heuristic analysis, most of them (aside from accessibility and aesthetics) stemming from a lack of good information architecture. Below are a few screenshots from the current site.

The Problem

Most of these information architecture issues would have been tough to truly tackle without input and sales data from Analog Man, so I narrowed my focus to working on the shopping and checkout experience.

For an ecommerce site, it's imperative that a user be able to quickly find what they're looking for and purchase it. This could definitely be improved on the current site.

One of the amazing things about Analog Man is all customization options from which customers can choose. The problem with that is once the user has found the product they’re looking for, there are still several decisions they need to make. The current site expects the user to make all of those decisions at once, which can feel overwhelming. For the product page represented here, this is only 25% of the necessary choices before adding the item to the cart.

Ideate

To start conceptualizing the pages and components that would be necessary to make the shopping experience easier, I created a user flow. The big changes here versus the current site are:

• the ability to filter search results

• breaking the checkout flow into smaller pieces instead of one long form.

The thing I missed in this initial diagram (below) is that purchasing a product from Analog Man is not as simple as the question, “Want this item?” Later on I did some more ideation and research to add a task flow that makes choosing customization options much simpler.

Prototype

Pen & Paper

I started putting the puzzle together on paper, borrowing ideas from sites like Reverb and Amazon, such as the process for filtering search results, that I thought would be familiar to Analog Man’s users.

The current Analog Man site doesn’t offer a way to filter search results, only to sort them. With so many products to offer from various manufacturers, I knew this would be a big help in narrowing down potential products for users.

I also aimed to reduce cognitive load for users by moving the related accessories to a “Frequently Purchased With” section in the shopping cart. The current site usually gives users the option to add various accessories along with their effect pedal before the user even finishes selecting options for the pedal itself.

Mid-fidelity

Even with several items relegated to “Frequently Purchased With,” in the cart, there wasn’t a substitute for designing with the actual content and the space necessary for the customization decisions the user needs to make. Below is the list of choices the user needs to make before adding the Beano Boost pedal to the cart, presented on the current site all in one column on the product page.

It took me several iterations to find a good solution. With these preliminary ideas my aim was to bring more clarity for the users about the different options by offering a photo alongside each possibility and listing the information in a consistent way.

I soon realized that while the options looked more tidy this way, it was still a lot of information to take in at once. Some Analog Man products necessitate more than four customization options. This would require the user to scroll down the page and make it very easy for them to forget what was above. Below, I added a flow that breaks down the possible combinations, so that the user only has to make one decision at a time, therefore reducing cognitive load.

High-Fidelity

Due to some scheduling constraints I was not able to test the mid-fidelity version, which would have been ideal. Since I had assembled pieces of the UX from well-known ecommerce sites (Amazon, Reverb, Warby Parker, etc.), I was fairly confident in the usability of the prototype. I gathered some feedback from peers and mentors and started working on the UI.

Color: I used both the original maroon brand color and the bright orange that had been used in some appropriate places and some not-so-appropriate ones.

Typefaces: Montserrat, the original font, seemed to me a perfect option. It gives off a slightly techie, slightly quirky vibe while still being highly legible. For an updated wordmark, I kept it in the family with Montserrat Alternatives.

Photography: High quality photos of Analog Man products are hard to find, especially on the current site. I resorted to pulling photos from resale sites if I could find nice-looking options. After a lot of searching, I still needed more photos to fill out the UI, so I photographed my own pedals (some of which are not sold by Analog Man) to complete the prototype.

More Ideation

The best options that my hunt for high-quality photos turned up were for Analog Man’s Sun Face pedal. This pedal has more customization options than the Beano Boost I had used for the mid-fidelity prototype. Since I wanted to use the better photos for the prototype’s product page, this spawned another ideation phase. Below are screenshots (and my early notes of how to trim down the options) of all of the customization options on the Sun Face product page that a user needs to make a decision about before purchasing. They appear on the current site all in one long row which for me, at least, feels overwhelming.

Again, one of Analog Man’s greatest strengths, customization, becomes a weakness on the website. Many of these issues could have been solved more precisely with sales data and input from Analog Man. In lieu of that, I turned to my community on Instagram 😎 for some research.

With 15+ years as a sound engineer 🔊 and 20+ years of playing guitar 🎸 and buying effects pedals 🤯, I had a suspicion that not all of the customization options Analog Man offers are necessary for the majority of users. I thought I might be able to form a sort of standard option for the Sun Face pedal that would save time for most users by making the decisions for them up front.

The quickest way I could think of to test my hypotheses was ask my Instagram community (built over my tenure as a musician). For brevity, I have not included all of my reasoning or research, but the Instagram polls below showed me that I was on the right track.

With clear winners like this, it is possible to assume that by making a few choices for the users upfront, Analog Man could please the majority of users with less customization. I bet their sales data would show the same results. I would recommend Analog Man develop a standard option for the Sun Face and give the majority of users one choice instead of 13. For the users who already know which transistor they prefer (like one person I talked to in usability testing) or want to spend the time researching, they could still “View all customization options,” in the prototype below.

I only took a deep look at two of the Analog Man products, but my guess is that many people would find it much easier to purchase one of their pedals if Analog Man could winnow down the options to a standard model, with room for one or two customization options. The breadth of options could still be represented in alternative user flows with better organization and the unnecessary decisions removed from the user’s cognitive load.

Test

Goals and Method

To test my hypotheses and see how the refined shopping and checkout experiences would work for users, I set up usability tests with six musicians who had at least a basic knowledge of effects pedals. I moderated these tests either in person or over a screen-sharing video call, recording all sessions for note taking later. I asked a few demographic and background questions then presented the prototype with a few open-ended questions and three tasks. I broke down the results in a Rainbow Spreadsheet.

Findings and Iterations

Issue #1: Users want more than one way to filter results.

Severity: Medium-low

Analysis: While all users found the button to “Add Filter” fairly quickly, 50% of users first had the impulse to click on a section heading to further refine their search.

Solution: Make the section headings clickable for search results.

Issue #2: Users didn’t immediately see the “Same as Shipping” checkbox when moving through the checkout flow.

Severity: Low/Unclear

Analysis: With the prototype set to preload a users shipping info, it’s unclear exactly what users might have done when inputting their own information. If at all possible, I would have suggested that the developers take advantage of Apple’s and Google’s technology to suggest addresses that users had used before to help alleviate entry error.

In the prototype, a click of the pop-up phone keyboard filled in all shipping information for users. Then the only way to advance in the billing section was to click the checkbox “Same as Shipping,” but users instinct was to click in the entry field like they had done on the previous screen.

Solution: Having noticed this instinct with all of the first four testers, I altered the prototype slightly for the last two users. This alteration did help one of two users immediately choose the check box instead of the entry field, though more testing would be needed to confirm this alteration makes a significant difference.

With users devices ready to suggest shipping and billing information for them, I don’t think this would really be an issue at all.

Responsive Design

Style Guide

As I started considering how the site would present larger screens, I pulled together a style guide to help maintain consistency across various breakpoints.

Tablet and Desktop

Not having a developer to check in with, I assumed a 12-column grid and spaced out the design accordingly. For the tablet view, I wrote some copy to try to summarize what sets Analog Man apart in the market.

Next Steps

There is a lot of room for improvement at buyanalogman.com:

• The navigation menu could be culled down

• Old information cleaned out

• Each product page should have descriptions and specifications that are listed in a consistent manner across the site.

• Professional photography and videography would go a long way in explaining products to users and creating more appeal.

• Online forms and user flows should be created for modifications and repairs.

Knowing which project to tackle first would ultimately come down combing through the sales data and site analytics with input from the Analog Man.

Retrospective

What went well?

• Learning from established ecommerce sites and incorporating familiar patterns into the shopping and checkout experience took a lot of the guesswork out of designing the UX.

• Though this was an unsolicited redesign, I challenged myself to try to hold empathy for the Analog Man team by valuing their work and bringing pieces of the established brand into my redesign.

What would you do differently?

• With a little better planning, I could have structured my usability testing phase into two different three-person tests and been able to test more ideas and iterations.

• In the middle of the project, I changed the exact product I was using to design the template for how all the product pages would work. This slowed me down considerably. While I ended up with a more refined version of the problem and a better solution, I learned that I should consider both the easiest and most complicated use cases throughout the project.

Thank You

Thanks so much for checking out my work! I’d love to connect and am always open to feedback. Feel free to send me a note!