Concept Project
Role:
UX/UI Designer & Researcher
Timeframe: 4 weeks

 

Redesigning the website of an iconic local record store

 
 

The challenge

Waterloo Records is an independent music and video store in the heart of Austin, TX.

With almost 40 years in business, this store has played an important role in the music scene that the city is famous for, and it is often listed as one of the best of its kind in the US.

In order to boost online sales, Waterloo's website needs to be just like the physical store: the go-to place for customers looking to buy good music.

Note: This concept project was an educational exercise to practice UX skills and it is not affiliated to Waterloo Records.

 

The Process

  • User Interviews

    Affinity Mapping

    Usability Test

    Plus/Delta Analysis

    Competitive Analysis

    User Persona

    User Journey

    Problem Statement

    HMW Questions

  • Information Architecture

    Card Sorting

    Sketches

    Wireframes

    Task Flows

    Mid-fidelity Prototype

    Visual Style Guide

    UI Components

  • Usability Test

    Design Iteration

    High-fidelity Prototype

 

The outcome

With a more intuitive navigation and a clean layout, the redesigned e-commerce experience allows customers to easily discover and find the records they want to buy.

 

Research & Synthesize

 
 

User research

How and why are people buying records nowadays?

I started off this project conducting 5 interviews, to understand the the users' motivations and challenges, and the difference in their experience when buying records off vs. online.

In a world where most people get their music from streaming services, what drives people to buy records?

 

Key Insights

Understanding the user's perspective

 

To me, records are nice collection items and I enjoy the ritual of playing albums.

I like to spend time reading about the music, the artist and how the album was made.

At a record store, I like to flip through every album, hear the staff recommendations and discover new music.

Online, I tend to buy in marketplaces (i.e. Discogs, Amazon) when I'm looking for something specific. There’s nothing really special about that experience.

 

Plus/Delta Analysis

“It's hard to get to the good stuff”

Waterloo's current website is rich in content and products the users are interested in. However, the way it's laid out is confusing and makes it difficult for the users to find what they are looking for.

I asked 3 users to share their thoughts on this website while browsing or searching for an album, and starting the checkout process.

Together with my own observations I made a Plus/Delta analysis, to pinpoint what was working and what needed to be improved:

 
 
 

User persona

The collector

Matt | 37 | Audiovisual producer

Wants to find the "right" piece to add to his precious album collection. He highly values rare items and special editions.

Reads thoroughly credits and technical details. He trusts expert reviews, well curated lists and staff recommendations.

Is an “audiophile”, interested in music, sound equipment and the process of making albums.

Dislikes items in poor conditions and not being able to know enough product details before buying.

Appreciates convenience when shopping online.

 

User journey

Scenario: Matt is browsing on Waterloo Record's website, because he's interested in buying an Indie album.

Problem Statement

People looking for records on Waterloo’s website need relevant recommendations and clear product information, because they don’t want to feel lost when trying to discover new music and find the “right” pieces to add to their collection.

 

HMW Questions

How might we
... simplify the site's navigation and product categories?
... provide enough information while maintaining a clean layout?
... design a seamless checkout experience?

 
 

Design & Prototype

 

Site Map

Simplifying the site’s navigation and product categories

The original website had a long and disorganized list of pages and links across multiple navigation bars, which made it difficult for users to find the genres and products they were interested in.

In order to help users find the relevant products they were looking for, I redesigned the site map, by:

  1. Deleting all single product pages from the top navigation 

  2. Deleting all empty or repeated pages

  3. Regrouping them based on the type of content

  4. Combining the menus to eliminate the side bar

  5. Conducting a closed card sorting exercise with a user to validate and refine the new categories and labels.

 

Original navigation: 148 links.

Redesigned navigation: 31 pages distributed across 6 main categories.

 

Initial sketches

Refining the layout and visual hierarchy

I began sketching, trying to keep all the information the users are interested in, but organizing it in a way that didn't feel overwhelming.

Some considerations included:

  • Reducing the list summaries on the Home page, from 10 to 4 thumbnails

  • Using the top carousel banner for highlighted products or collections

  • Clearly distinguishing the format, price and add-to-cart button on the Product page

One idea that I would've liked to explore further but ruled out due to time constraints, was to have a play queue – the virtual equivalent of what one user said he liked best about going to a record store: collecting "a pile of maybes" and bringing them to the listening station.

 
 
 

Visual style

Keeping visual elements cohesive and on-brand

A moodboard helped me define the color palette, drawing inspiration from the two places that the brand refers to: Waterloo, the original name of the city of Austin, and the London Tube station.

The typeface "Din 2014”, a sans-serif font with excellent legibility and an industrial feel, was applied in Bold for main headings and CTAs, and in Regular for secondary buttons, subheadings and body text.

 
 
 
 

Wireflow

Can the users find their way?

The following wireframes illustrate the flow of how a user could find an album featured on a list, add it to the cart and complete the checkout process.

With this in mind, I made a mid-fidelity prototype, to test the effectiveness of the new layout.

 
 

Test & Iterate

 
 

Usability Test

I tested the mid-fidelity prototype with 3 users, obtaining the following results:

 
 

All 3 users were able to find a specific product under New Releases, either by clicking "view more” on the list featured on Home page, or by finding the category on top Menu.

 

All 3 users were able to find a specific Indie music album, locating that genre on top Menu.

 

All 3 users were able to add both products to the cart and complete the checkout process. However, one of the users wasn’t sure she had added the product to the cart successfully, causing a brief moment of hesitation.

 
 

What went well

  • All 3 users were able to successfully find the products they were looking for. They said the new labels and organization of the top menu made sense.

  • Users liked the layout and thought that the amount of information on Home, Category and Product pages was right.

 
 

What could be improved

One of the users pointed out that the feedback after adding a product to the cart (the buttons changing) was too subtle, and it made her doubt whether she was ready to checkout or not.

She also noted it would be nice to be able to change the quantity before getting to the checkout page.

 

Hi-Fi Prototype

Based on the usability test results, I redesigned the product page and added a prominent side overlay that provides clear feedback to the user when the item has been added to the cart.

 
 

What I learned

This last adjustment to the prototype was an important learning for me. Providing feedback after an action (such as creating a clear confirmation screen) is an important usability principle.

It also connects back to my user persona, “the collector”, giving a visual cue to celebrate a good find.

But as someone relatively new to the field of UX, it helped me develop a sensibility to those moments of interaction that, although seemingly small, can have a big impact on a user’s journey.