Record Krate

Project Summary

For this project we were tasked with finding a website with usability issues and finding a way to solve those issues. I decided to focus on a local, small-business record store named Record Krate. The business has 2 locations in Raleigh and primarily focuses on selling new & used records.

As the sole designer for this project, I was responsible for the entire design process including user research, usability testing, generating design solutions, building a prototype for testing, and evaluating test results to determine next steps.

Concept Project

Website

Project Details

Role:

Design Lead

Duration:

2.5 weeks

Tools:

Figma, Maze, OptimalWorkshop

Problem

The Record Krate website included multiple usability issues involving the navigation of their site. People found the navigation bar and product feed confusing and took a long to time locate products. and My goals were to improve users' ability to navigate the sight while also modernizing the visual design.

Solution

A high-fidelity prototype was developed that successfully addresses all of the usability issues presented by the original website. Users noted an improved experience navigating the site and enjoyed the modernized visual design.

Research Insights

Interviews and usability testing was conducted with a total of 5 users that were selected for their love of record collection and familiarity with online shopping. Through this research these insights were discovered:

Users felt overwhelmed trying to use the navigation

Users to struggled to identify products within the product feed

Users were frustrated by not being able to narrow down their results

Tree Test

After reviewing the inventory on the Record Krate website and comparing it to the navigation of competitor sites (Tower Records & Sound of Vinyl), a new navigation layout was conducted and tested by asking users where they might find a particular product or information on the tree.

Results

Results from the test were very encouraging, as 84% of participants quickly selected a category that fit the product or information that they were searching for. Through post-test interviews, it was found that most of the indirect successes' and failures were either due to users wanting to explore all options before making a selection or due to a product fitting into multiple categories (i.e., most popular, pop, and 2010s).

Mid-Fidelity Wireframes

In order to visualize the new flow from product search to checkout, a series of grayscale wireframes were built out with solutions for the user pain points that were discovered through the research phase. These main issues were addressed:

01. New Navigation

This new navigation drop-down allows users to view all categories at once and implements the structure created in the tree test. An "Events" tab was added based on feedback from users wanting to know more about Record Store Day.

02. Narrow Results

When users arrive at a category page like Pop, they will now see filters for artist, price, and format, as well as breadcrumbs to support path recognition.

03. Cart Overlay

The new cart overlay allows users to edit the cart without going to a new page and gives more accurate price information based on a users' location.

04. Checkout Page

On the checkout page, users can fill out out required sections in one condensed area and view confirmation when a section is completed. The cart is always visible and follows the same layout as the cart overlay. to support path recognition.

Usability Testing 2nd Round

In order to evaluate the effectiveness of the design solutions, users were asked to use a prototype to find out shipping information, read an album review, and complete a purchase process.

Results

Testing proved to be extremely successful. All users tested were able to search and locate their product in less than 8 seconds. Four out of five users utilized the artist filter to find their product. The main pain point that users noted was not being able to use all the options in the drop-down menu to find products that fit into multiple categories (i.e. wanting to find Taylor Swift in Pop or 2010s).

Next Steps & Prototype

The prototype was upgraded to high-fidelity with new color considerations based on the Record Krate brand and with images for all products to get a better idea of the final product. In future work on this project there should be more testing on the rest of the pathways that users could take to locate products. Also, the account system needs to analyzed to see if it's meeting user expectations.