Plan 9 Records

A e-commerce website redesign concept for an independent record store

Project: E-commerce website redesign concept

Role: UX Researcher & UX Designer

Tools: Figma, Optimal Workshop, Maze

Project Duration: 2 weeks

Project Status: Mid-fi Prototype v2

Project Overview

The idea for this project was to select a local small business and explore how we might improve the online shopping experience for their customers. I selected an independent record store called Plan 9.

DISCOVER

Background

Plan 9 is an independent record store with locations in Richmond and Charlottesville, Virginia. They are known for being a great place to buy and sell records. They are also known for their support of the local music scene through their in-store performances and support of local music festivals.

Business objectives for this redesign:

  • Increase online sales through an improved e-commerce experience

  • Showcase their products in a modern and relevant way

  • Maintain the brand they have established over 40 years in business

I conducted competitive and comparative analysis along with secondary research to gain insights into the business landscape that Plan 9 is operating in.

Insights

  • Competitors were using more effective ways of facilitating search

  • Comparator sites used simple primary navigation, cards to display featured products, on-site pickup option available

  • Millennials are fueling the renewed interest in vinyl

Recommendations

  • Make it easier for users to find what they are looking for

  • Implement current design patterns and options that users have become accustomed to

  • Take design cues from sites that are popular with millennials

“In the longtime parlance of music retail, the vinyl format’s biggest enthusiasts over the years are sometimes known as crate diggers. But it might be time to put that image to bed… unless you consider the display racks at Target to be crates, and the young women who are flipping through contemporary releases by Harry Styles, Olivia Rodrigo and Taylor Swift to be diggers.”

— Chris Willman (Variety.com)

DEFINE

Persona

Based on market research, I developed a persona who is a female millennial, new to vinyl and record collecting. She typically streams music and prefers the convenience of shopping online.

Jessica Richardson
Occupation: Administrative Assistant
Age: 30
Location: Midlothian, VA

Problem Statement

Jessica needs an easy way to purchase records online and pick them up at her local record shop so that she can enjoy the convenience of shopping from any location and the instant gratification of having the record in hand on the day she purchased it.

How might we make it quick and easy for Jessica to purchase records online from Plan 9?

DESIGN

Redesigning Plan 9’s website by simplifying and improving website navigation, search, and checkout will improve the ecommerce experience for customers therefore helping Plan 9 achieve their goals of increasing online sales, showcasing their products, and maintaining their brand.

Information Architecture

I conducted a card sort study to see how users would group or categorize the current navigation links.

The results told me that users had a hard time categorizing several links that were unfamiliar. It also showed me that users are very familiar with genres, this is information I definitely wanted to make use of in the redesign.

From this analysis I came up with the following proposed flat navigation structure:

Primary Navigation

  • Search - to assist users, this page would feature buttons for popular search terms

  • Browse - this page would feature a sort-of secondary navigation focused on genres. It also has distinct sections for various types of featured music.

  • Merch - The various categories of merch available on the site would be consolidated on this one page and displayed in distinct sections on the page

  • About - This page would combine the existing about us page and the store hours page

Faceted Navigation

  • Filter dropdowns and sort by dropdown will be available on the search results page to refine the results displayed.

  • Availability

  • Price

  • Format

  • Label

Supplemental Navigation

Some less common links will be moved to a supplemental navigation menu.

  • Sell your stuff

  • Your band @ Plan 9

  • Stereo Gear

  • Events

Sketches

I developed sketches incorporating the proposed navigation and design patterns based on comparative research.

Home page

Home page

Browse

Wireframes

Browse

Search

I created mid-fidelity wireframes based on the sketches. Click images below to see detail.

Search

Usability Testing

After creating an initial prototype, I developed a usability testing plan and executed tests with 13 participants.

In my analysis of the testing results I noted some key takeaways and areas for improvement in the design

Deliver

Prototype Iteration

I iterated on the prototype and made changes to improve access to search and to make the pickup option easier to understand.

Improved Access to Search

Prototype walkthrough

Clarified Pickup Option

Next Steps

In addition to those changes, here are some other features that will improve user experience issues uncovered during testing.

Recommendations

  • Reconfigure cart panel to allow users to edit cart inside the panel

  • Reconfigure checkout page to use tabs or pagination to reduce scrolling

  • Add an option to allow user to switch to light theme

  • Build a prototype for mobile following standard responsive design patterns