Under Pressure : A record store’s push from in-store to online — a UX Case Study
Timeline: 2 week sprint
Materials: Pen, Paper, Sticky Notes, Figma, Optimal Workshop
UX Techniques Used: Competitive/Comparative Analysis, Card Sorting, User Personas, Site Map, User Flows, Wireframing, Prototyping, Usability Testing
Brief: For this class project I was provided with a brief asking to redesign an existing e-commerce website and to iterate a design to improve their online shopping experience. As a music lover and vinyl collector, I chose to redesign Amoeba Music, considered to be the world’s largest chain of independent record stores established in California in 1990.
Put Your Records On
The Magic of Record Stores
When’s the last time you went into a record store? How did it feel? Who did you talk to? What did you find? Walking into a record store is like walking into a thrift store — it’s about history, it’s about nostalgia, it’s about discovery. There’s a certain magic in going to a record store, touching the music, finding new artists, and starting conversations with knowledgeable employees and like-minded customers.
Initially, you feel overwhelmed, surrounded by crates of albums, but that’s okay. It’s about the journey. You’re ready for the challenge and hope you’ll be rewarded at the end of your excavation with a treasure — a “hidden gem.”
Shopping in a record store can be an intimate and social experience, but how does this work online? Can this experience be created online?
The Day The Music Died?
The Challenge
With the current world climate, consumers are shifting in behavior, and businesses have to quickly adapt to create better online shopping experiences. Amoeba has weathered the shift in music consumption that has evolved toward music subscriptions and streaming platforms, such as Spotify and Prime Music. Now they must face the current COVID-19 pandemic.
With album shortages, rescheduled new releases, shipping delays, and ever-changing federal regulations and restrictions, record stores are adapting to the new online shopping landscape the best way they can.
Many are trying to build an online presence by selling their products on Discogs, a music database and online marketplace. Some have brushed the dust off their websites — many of which I found to be a call to the 1990s “if you build it, they will come” era of the internet.
This is a challenging transition for independent record stores like Amoeba Music that have carefully and intentionally crafted a user-centered, in-store shopping experience of “music discovery” that is difficult to translate onto an online format.
Amoeba Music does have an e-commerce website, but I found the current website to be noisy and cluttered, but I needed to know what others thought about it.
Video Killed The Radio Star
The Solution and Approach
Just when we think we’ve left one era, we sometimes see it cycle back around. Vinyl records are an excellent example of a music form that made a major comeback. I wanted to know how I could find that balance of the past and present.
Suggested solution: Create a more modern and streamlined e-commerce website that simplifies Amoeba Music’s current site navigation and vast music database, to elevate the Amoeba shopping process and allow users to augment the in-store “music discovery” experience remotely.
User Research
I conducted six user interviews to understand and discover any current music consumption patterns and trends. As a follow-up, I asked users to undergo a task analysis to see how they would search for products, add to cart, and checkout on Amoeba Music’s current website.
User Personas
Based on my interviews, I defined 2 user personas, each with specific needs and pain points that I wanted to address in the website.
While these personas are unique, I also generalized them into two archetypes: The Music Expert and the Vinyl Newbie. I wanted to keep these personas in mind with the redesign to build out the advanced search features for those who might know exactly what they’re looking for, while still providing a good search experience for those who do not.
With these goals in mind, to design a “music discovery” experience for users online, I had to reorganize the navigation of the current website to make finding music a streamlined and painless process. I also wanted to highlight features like staff recommendations, artist profiles, and expand on Amoeba Music’s award-winning series “What’s In My Bag?” to draw users to more frequently interact and “discover” through the website.
Build Me Up Buttercup
The Foundations of the website redesign
Information Architecture
To determine how I might reorganize the website, I conducted an open and hybrid card sort through Optimal Workshop and had participants organize and categorize 30–40 products from Amoeba’s website. This helped me cut the clutter and generate a more efficient main navigation menu.
The Style Guide & Moodboard
I created this style guide and moodboard to help me stay consistent and close to the design I wanted to create.
Started From The Bottom Now We’re Here
From sketches to wireframes
I went through many different iterations of the homepage because I felt the homepage design was key to building out the rest of the experience. I wanted to incorporate Amoeba’s personality and the bold colors from the style guide, so I experimented with how I could use color.
In my sketches I focused on features that I thought would be useful to have or how users could interact with the site.
In my wireframe sketches I was still playing around with the main navigation and color. Once I decided how to organize my main navigation bar, the rest of the design came more naturally.
Those Magic Changes
Creating a Digitally Augmented “Music Discovery” Experience
General Homepage Improvements
A lot of the feedback I received from user interviews was how dark and crowded the homepage looked. At least 5 out of 6 users said almost verbatim “I don’t know where to look right now.” I cut out a lot of the information that was originally on the Amoeba homepage and reorganized and created these collection feature cards at the top.
Light Mode — I chose a white background to give the site a bright and clean look that way Amoeba’s bold colors stand out and the full focus is on the color of the album covers.
Collections and Recommended — Right at the top I put collections with quick links to access themed results. For any user just trying to quickly browse music, “New Releases”, “Most Popular”, and “Staff Picks” will feature related albums right on the homepage for immediate viewing. These were categories I found to be most helpful to users during my interviews and card sort.
Album Cards —For the album cards, I wanted to create a similar experience for when you’re looking for music in a record shop. In the store you initially only see the album cover, the title, and the artist. To find out more, you flip the album over to read the back. To duplicate this online, you have to “dig a little deeper” and click the album to look at the product page.
Main Navigation Menu
A lot of Amoeba’s current site navigation is repetitive or unnecessary for main navigation. I used the four main categories from the hybrid card sort and pushed additional information and links to the footer.
Personalized Recommendations
To encourage users to create a profile with Amoeba Music, they’re able to follow artists and on those artists’ pages they can see what albums their artists are listening to, with a ‘Call to Action’ (CTA) to buy those albums directly from Amoeba. Albums are recommended based on the user’s tastes.
Product Page
Currently, Amoeba has different product pages for each format the album is in (CD, Vinyl, or Digital). In the redesign, I condensed to one page per album, where you can select the format you want. You can also see product details, and there’s a clear CTA to add to cart.
Amoeba Personality
I wanted to keep Amoeba’s funky and off-the-beat character in the redesign, so I made sure to use Amoeba’s bold colors and used some of Amoeba’s fun illustrations throughout the prototype.
Faceted Navigation
Since the most important aspect of shopping at a record store is the search and discovery, I wanted to build an advanced search on the album product pages for users to discover new music through multiple avenues.
The biggest players in the faceted navigation are the search bar and the genre tags. The search bar is placed above the selection bar for users to quickly access the music they’re looking for, and the active tags allow users to discover new music with a selective search based on their preferences.
(Wo)Man in the Mirror
Reflections and what I learned
Through this process, I realized the importance of user research and informational architecture in the design process. A website can look beautiful, but if it’s unorganized or hard to navigate, the user experience will suffer.
Due to the time constraints and limitations of working on this project remotely, further research needs to be done with users who specifically collect vinyl records or who are an existing Amoeba Music customer. I would like to do some usability testing on the high-fidelity prototype I created to refine and validate the solution.
Don’t Stop The Music
The Conclusion
“Vinyl is the real deal. I’ve always felt like, until you buy the vinyl record, you don’t really own the album. And it’s not just me or a little pet thing or some kind of retro romantic thing from the past. It is still alive.”
— Jack White, American singer-songwriter
Amoeba Music is an iconic landmark. It has pioneered and transformed the record store landscape and has greatly contributed to the music industry. On top of its vast and obscenely large collection of records, tapes, and CDs, Amoeba has hosted thousands of live, in-store performances, from Sir Paul McCartney to Lana Del Rey. When the restrictions and regulations are lifted, I’m confident music-lovers will rejoice, and Amoeba Music will bounce back better than ever.
View and interact with the prototype:
