Sloth Records
Capturing the joy of browsing for records in an all-new e-commerce design
Sloth Records has been a cornerstone of Calgary’s music scene since 1982. I led the redesign of their website to transform it into an intuitive and visually engaging e-commerce platform. This project helps users capture the unique delight of the record buying experience into digital form.
Role
Lead Designer
Year
2025
Timeline
3 Weeks
Reading Time
10 Minutes
THE PROBLEM
Helping vinyl lovers easily shop online from their favorite local record store
Sloth Records’ website was lacking the e-commerce features needed to support online shopping. Despite being a cherished local institution with a loyal community, its digital presence failed to reflect the warmth, personality, and musical depth of the in-store experience.
CURRENT WEBSITE
Formative Usability Test
I asked 6 users to complete a series of basic tasks on Sloth’s current webpage. Here’s how it went:
RESEARCH
Uncovering User Understanding
Developing empathy and deep understanding of users would be vital for the success of this project. Over a series of 6 user interviews, my user research sought to understand two core themes:
1. Understanding users’ e-commerce habits, and how a small business like Sloth can compete in this marketplace
2. Exploring what parts of the physical record-buying experience can be replicated into digital form
An affinity map was made to identify patterns in research data, helping me to uncover key insights and user needs
Jude was created to personify target users and align the team around their goals, behaviors, and pain points.
Creating a feature inventory helped to analyze competitor offerings and identify benchmarks for successful implementation
I then thought about How-Might-We questions to uncover key challenges and opportunities in creating a digital experience that mirrors the joy of record shopping. By focusing on discovery, connection, and surprise, these questions guide us in bringing the tactile delight of vinyl browsing into the online space.
How might we build user trust in Sloth Records as an online store?
How might we use visuals to make users feel like they’re stepping into a physical record store?
How might we design intuitive, familiar navigation that encourages users to complete a purchase?
How might we help users easily discover new music by genre, mood, or staff recommendations?
How might we clearly surface relevant shipping and delivery information to compete with e-commerce giants?
How might we capture the emotional experience of discovering a new favorite record?
DESIGN PROCESS
Transforming insights into delightful solutions
Throughout the design process, my north star was always the user. Each research insight served as an anchor point that shaped every design decision. I let real user needs guide the way, ensuring the final experience was not only functional, but empathetic and meaningful.
INSIGHT #1
Record stores aren't just for shopping—they're places of musical discovery
Placeholder
Browsing in a record store is often about more than just shopping. Users described the joy of walking in, hearing something new playing, and letting curiosity guide their exploration. I knew the website needed to capture some of that serendipity and atmosphere to feel true to the Sloth Records experience.
EXPLORATION
"Random Albums" Page
Brought in the element of surprise that users love about physical record shopping
Encouraged exploration and browsing through a variety of albums
Required active effort—users had to navigate to a separate page
Lacked immediacy and intimacy of hearing something right away, like in a physical store
SOLUTION
"Play Something Random" Button
This feature captures the unique delight of in-store discovery, recreating the feeling of stumbling upon a hidden gem
It's fun and interactive, encouraging users to engage with the site in a more playful way.
It helps users dive deeper into the catalog, often leading them to browse longer than they originally intended.
Some users might dislike static elements being on their page
INSIGHT #2
Different Paths to Music Require Flexible Information Architecture
When you go to a record store, there are literally thousands of products for sale. Everyone searches for records in different way, and every record store is organized a little bit differently. An online record store would carry even more products, so for it to work, the design would really have to nail its information architecture.
A card sort was conducted to help understand how users thought about categories.
Card Sort Results: Dendogram
This dendogram shows how users think about certain product categories. Thicker lines coming together as you go to the right - which indicates that items belong to a certain category.
ITERATION 1
Nested Dropdown Menu
Simple menu retains the product categories found in the card sort
Clear and familiar structure that users can understand
Increased cognitive load - users need to think before selecting a category, and then again when selecting sub-categories
Allows less flexibility for categories and displays fewer product categories
Smaller and takes up less space on the page
ITERATION 2
Boxed Hover States
Expanded menu displays sub-categories automatically, making it easier for users to find the music they love
Clear and familiar structure that users can understand
Sub-categories and categories have the same font size, making it potentially difficult to understand the hierarchy of the dropdown menu
Hover states are boxed and feel visually noisy
SOLUTION
Underlined Dropdown Menu
Expanded menu displays sub-categories automatically, making it easier for users to find the music they love
Slightly smaller sub-category text clarifies and reinforces information architecture
Button hover states display a bold red underline, lending a clean visual presentation
Menu is large and occupies a large amount of screen real-estate
INSIGHT #3
Displaying shipping information early and often is vital to drive conversions.
Users repeatedly emphasized that shipping policies play a major role in whether or not they complete a purchase. While people want to support small businesses, the moment of truth often comes down to shipping cost and clarity.
Many users said they’d abandon their cart if shipping was ambiguous or revealed too late.
ITERATION 1
Dedicated Shipping Info Page
Builds trust: displaying shipping details helps users feel confident about what to expect
A separate page lets you explain nuanced details without cluttering checkout or product pages
Users need to do much more reading, and then cross-reference this information with their own shopping
Increased amount of clicks, potentially inviting friction to the shopping experience
ITERATION 2
Shipping Incentives during Checkout
Invites users to continue to shop on their way through the checkout process
Displayed before the user completes checkout, helping with conversion
Only appears during checkout - users might have assumed there is no incentive and already stopped shopping
A static element - does not pertain to the specific user's shopping experience
SOLUTION
Dropdown Menu + Cart Progress Bar
Displays shipping incentives right from the moment you start shopping, driving purchase conversion
Progress slider makes it easy to understand where you sit in relation to free shipping
Adds an element of fun to the shopping process, encouraging ongoing shopping
Expands the dropdown menu to be slightly larger in size
DESIGN PROCESS #3
Trust is built with visuals, flow, and intentionality
In order to compete with E-commerce giants, small businesses like Sloth Records need to be very intentional with its UX Design. Everything from the primary font choice of Josefin Sans (which lends an element of refined art-deco professionalism) to the color choices (that allow the beauty of the record art to shine while incorporating bold call-to-action elements) were closely considered with the record-buying user in mind.
Taken together, the visual design of the website is bold yet restrained, sophisticated yet restrained. It captures the emotional experience of going to a record store, while building trust in Sloth's brand.
JOSEFIN SANS
Bold SLOTH RECORDS logo
Regular Primary font
Josefin Slab
SemiBold Paragraph Text
Regular Information Text