Turnable

Listen before you buy

Summary

For a school project I created a fictional e-commerce website for a turntable retailer that specializes in comparing products through sound—called “Turnable." It's the first company to let you see and hear hifi equipment before you buy it.

Through an in-house studio, they're able to duplicate the in-person shopping experience. They need to be able to showcase this technology and show users how it’s beneficial—ultimately increasing reach by allowing customers to try before they buy.

Duration: 15 weeks

Platform: Responsive Web

My role: All of the hats! I worked on this project myself, working through the exploration, research, design, and usability testing phases.

Reading time: 6 minutes

Problem

When people buy turntables online they often feel like they are gambling with their money since they don’t know how the turntable will sound with their setup—they want to try before they buy.

Opportunity

How might we give customers a pseudo-in-store experience in the comfort of their own home, so that we can improve the virtual purchasing experience, showcase the quality of the product, and increase the number of turntables sold?

Goals

Give customers a feeling of being in a brick and mortar store by providing professional input.

Create a solution for listening to sound differences between turntables.

Solution

A turntable compare tool.

I created a solution, where customers would be able to compare turntables to each other, through sound. Using high-resolution audio files, people would be able to hear the uncompressed nuance.

Users would choose a turntable, select their current amp and speaker setup, then pick a song to listen to while watching a video of the equipment in action!

turnablePresentationGIF

Outcome

No more buyer's remorse

Using results from usability tests and initial research, I saw that people want the experience of going to a brick-and-mortar store, from the comfort of their home. People want the experience of talking to an audio professional while seeing turntables in action.

Having an accessible compare tool that mimics the in-store experience is what people wanted to give them the confidence to buy online. This would also help those in rural areas, increasing discoverability and access to a wider range of turntable choices.

test2-1

Discovery

The audiophile persona

Geoff is a Turnable shopper and an internet savvy person that likes to do their research before making big purchases. They enjoy learning about a product from all angles—from Reddit reviews, Youtube unboxing videos, or from their vinyl-junkie friends. They are often in front of their computer since they work from home most of the time these days. They used to love spending time in HiFi stores but there aren’t many in the area and they don’t have much time to go shopping with their young family. They want to be able to buy a turntable from an online retailer that they trust.

persona-2

"I wish I could listen to a turntable in person."

~Interview participant

The market

After an initial 3 interviews, I created an online survey, getting feedback from 63 participants. This confirmed my direction of giving a user like Geoff a more in-person feeling where they’d actually be able to hear turntables. He'd see how they work and compare them to each other before buying.

Most people buy online but think there aren’t enough stores.

• Only 70% satisfaction rate from buying online.

97% of people get their info from online but want to see the turntable in action.

affinity

Affinity diagram showing problems people run into when researching and purchasing turntables.

userFlow

User flow for customers exploring site. Initially included forum/blog directions but was refined to focus on funneling purchase through primary navigation and search.

Give people what they want

An in-person experience, online! The focus is on the user, with accessible information at their fingertips. The navigation for Turnable will be focussed on funneling the user to gain information for themselves.

Users are encouraged to explore, read reviews, and blog posts to better understand the products they're hunting for.

Geoff will feel that boutique experience.

Ideating

Compare turntables sounds

Because users like Geoff aren’t often able to go into a store to compare sounds of a turntable setup, I created a turntable compare tool that will bring that experience online.

They’ll be able to add up to three turntables to compare at once.

Users can read specifications like normal, but also be able to watch videos with a sound clip of their music choice, to fully immerse themselves in the comparative experience.

compare sketch

Design iterations of the turntable compare page.

Initial confusion and correction

After usability testing there was some confusion from testers about how to compare turntables. They couldn’t locate the compare feature. This was due to an inaccessible icon and lack of context on the product page. I was able to make multiple iterations, based off of user testing to validate design, and land on a navigation flow with a prominent call to action with the compare button.

compare_iterations

Modern design exploration

Seeing the competition and hearing from modern audiophiles, I wanted to create a more modern design approach for the website.

While some think that listening to vinyl is for old-timers, there is a large percentage of shoppers (47.5% below 40 years old) that are getting into it. I created color, voice, and logo ideas for the modern audiophile.

I wanted to pick vibrant colors that were a bit more lively while also giving the impression of timelessness.

Moodboard and design system

Moodboard, a snapshot of the design system with components, and logo exploration.

Usability Testing

Participants in the usability test were all able to find where the turntable product page was but were confused by the turntable compare icon, which was indicated by a speaker symbol. Three out of five people were unable to find the compare feature so I’d have to adjust the design to make it more discoverable.

"That's a weird turntable compare icon."

~Usability test participant

Responsive Design

Desktop product page. 

Product Page Desktop

Mobile product page.

Product Page Mobile

Results

The business opportunity driving this design was to give turntable shoppers a pseudo-in-store experience while researching products at home. Through user research I found that people want to be able to research from their home but want to see turntables in action before they buy, to judge the sound quality.

Similar compare tools have increased sales in other e-commerce sites. I predict that the compare tool would increase conversion rate, compared to a similar site without.

Reflections

A more personal connection. The goal of this project was to come up with a unique e-commerce site, but in order to give the user a more impactful experience, I think I'd go further. Adding a social network such as a message board might allow customers to connect with each other, furthering their interest. People are already gravitating toward hifi message boards reddit and other sites but consolidating them in a turntable specific platform would focus conversation.

I'd love to be able to do further usability testing with final designs. If the designs were to be implemented I'd also want to check with a developer to see about feasibility.