My first impression of Robotspeak’s site was that I understood who they were and what they sold. My second impression was I have no idea how to help myself here.

To confirm my assumptions, I looked into a feature analysis against competitors.

The Initial Gut Check

But First, Navigation

My goal for conducting a card sort was to synthesize 6 to 7 navigation labels that would help categorize the multitude of products on Robotspeak’s site, creating a clear search system for the user.

Amidst the pandemic, I learned to embrace remote practices of research. While I couldn't conduct an in-person card sort, I believe I accrued double the data through virtual card sorting... and by "failing" first.

In the first round, I recruited 8 users to openly categorize 45 modular music products on Robotspeak's site.

This resulted in a 37% agreement rate (yikes!).

User Insights

I turned to four potential users to conduct usability tests. The purpose of these usability tests was to gain external first impressions and discover the user’s intuition of finding a specific product on the website.

100% of people did not use the primary navigation and therefore did not have a key place of orientation.

 

This further confirmed my overall concern with the design and primarily the design of the navigation and helped formulate Jimmy, the persona I would design for.

“I can tell their in store experience is probably really good. But right away, it looks like I have to click around to find what I need”

I like simple site pages with only relevant product information.

Because modular EQ is expensive, I need to be sure it's worth the investment.

I spend a large amount of time researching my gear through multiple sources.

& Bringing Everything to Life

Two features ultimately need to be very clear & intuitive for shoppers:

1. Finding a Product: A clear navigation and search system

2. Buying a Product: A straightforward and quick checkout process

Unfortunately, Robotspeak lacked both of these. Additionally, its design was not intuitive and had no sense of reliability.

While the results were inconclusive, they provided a rough idea of 7 key categories. I used these 7 pre-named categories to conduct a closed card sort.

This resulted in a 75-100% agreement rate for most categories, but for some a 50-50% split.

 

After further reflection, I realized that products often fit into multiple categories. This led to my decision to couple categories based on agreement rates and design the product navigation in a mega menu fashion.

I chose two major companies, Sweetwater & Guitar Center, as well as one more modular-specific company, Perfect Circuit to compare against.

 

Additionally, I wanted to think outside of the box and pick a comparative website (one that uses the same business model of being a brand that sells multiple external brands), ASOS.

Amongst 35 e-commerce features, these six features felt most relevant to Robotspeak’s business. Given the timeline of the project, I highlighted three key features that would be addressed in the design.

My goal for the research phase was to recruit users specific to this niche music world, who could help me understand how they intuitively shop online.

Additionally I wanted to test the site's usability to further confirm my market research.

Looking to the Users

The Problem to Solve

I felt passionate that I had identified an open opportunity in the competitor landscape for this small shop: to display products with as much detail as possible in a digestible way.

Jimmy, our user, generally knows the products he's looking for, but often resorts to buying them on larger commercial sites because of their reliability and price. For the average consumer, this would be the equivalent to shopping on Amazon.

For a music shop like Robotspeak, its users need an an experience of constant confirmation in product detail, reviews, and general organization.

Our user Jimmy needs a way to research and purchase analog music gear on one site, because he wants to confirm the new gear is both compatible with his personal set up and worth the large monetary investment.

Reminding myself that the primary user goal was to find & buy a product, I primarily focused on designing intuitive global navigation and checkout systems.

Pulling UI inspiration from competitors, while maintaining a small shop feel, I wanted to design the home and product grid pages to give as much detail to users in a simple, but exciting way.

Designing for Delivery

Testing the Navigation

To truly test the navigation and checkout systems, I recruited four users completely unfamiliar to the music world and results were rewarding.

100% of users found the navigation intuitive outside of the search function

100% of users completed the checkout process successfully

Confirmation Interactions

I designed a modernized product grid page alongside interactive elements that give the user confirmation much as possible. This new UX incorporates an interactive pop up box when a customer adds a product to their cart or wishlist.

In an age where the pandemic is causing local shops to drop like flies, e-commerce is essential now more than ever for small businesses to survive and thrive, but how can we as UX Designers help them standout amongst big digital competitors?

Established in 2002, Robotspeak defines itself as “thee Northern California Synth shop” selling a range of modular music products. As a personal experimental music nerd & SF local, I conducted a hypothetical redesign of Robotspeak’s e-commerce site. Implementing accessible UI through the incorporation of four core features, my redesign solution ensured the product navigation and checkout processes successful amongst 100% of tested users, promising a drive in the number of completed purchases on their site.

Robotspeak

Making a Local Synth Shop Digitally Competitive

Role

UX Designer

Team

Solo Project

Scope

2 Week Sprint (November 2020)

Building Trust with Precision

Keeping in mind the user's need for trustworthy product specs as well as staying within budget, I implemented a product comparison feature that populates a spec chart for scannable comparison.

Prototype

Click the screen below to view the interactive prototype.

© 2021 Katrina Allick