Johnny Music Site Redesign

Redesigning a local music store’s website information architecture and e-commerce experience

Role: UX Researcher, UX Designer - Hypothetical Redesign

Responsibilities: Website Redesign, Usability Testing, Comparative Research, Card Sorting, Information Architecture Redesign, Wireframing

Deliverables: Low-Fi Prototype, High-Fi Homepage

Tools: Figma, Optimal Workshop

Timeline: 2 weeks (September 2024)

Summary

After observing users’ difficulties with the Repairs page and the lack of in-site shopping functionality, I reorganized the Repairs page and designed an in-site e-commerce functionality.

Outcome

Average task completion time was then reduced by an average of 60% in final usability testing.

The Challenge

Johnny Music is a local music shop in Monterey Park, CA. Growing up, I bought my elementary school violin at Johnny Music and remember having a good experience. Upon exploring the site, however, I noticed the site lacked an in-site shopping cart and was overall frustrating to navigate.

Hypothesis

Disjointed site navigation and overwhelming and inaccessible text makes the site difficult to use.

Usability Testing Reveals Problems

To understand how other users felt about the site, I conducted 5 usability tests. The 4 tasks took them through the shopping, repairs, rental, and home page. Though most of the users were able to successfully complete the all given tasks, there was a lot of confusion and frustration on the users' end throughout the process.

“I don’t even know what site I’m on anymore. This looks so different from the other page and the font color is not the same.”
“When I clicked this [repairs navigation bar], I thought there was going to be a pop up or an external screen that was going to give me information. But then it just scrolled all the way down. I had to do it a couple of times to figure out what was going on.”
“This place is called Johnny Music? I didn’t even notice [until I saw the instructions for the task].”

Findings

80%

of users cited confusion and frustration over the navigation bars on the site

60%

of users stated that they did not prefer to contact the business through the email form

80%

of users had to repeat the task to identify the correct repair service due to lack of labeling

Additional Issues

  • Branding unclear

  • Lack of organization of the information on the site pages left users feeling overwhelmed

It was important to address these issues to prevent users from getting frustrated and leaving the site before they got the information they needed.

Where Competitive Analysis Lacks, Get Creative with Comparative Analysis

Competitive Analysis

While examining other competitors, I noticed that though many music stores had similar features, there wasn’t a standard way their sites were laid out and items were categorized.

Comparative Analysis

To get inspiration on how to layout information and improve the site’s e-commerce flow, I looked to card sorting (below) and examined other business types, like car dealerships and optometrists, that both provided their information on their services and had an e-commerce functionality.

Card Sorts to Improve Site Organization

To address the issue of users feeling overwhelmed navigating the site and finding information on the repairs page, 2 card sorts were conducted to

  1. Determine the different categories users organized products into

  2. Determine how users intuitively grouped the repair types Johnny Music offered

Old Sitemap

New Sitemap

With inspiration from competitive and comparative analyses, the card sorts, and seeing users’ difficulty navigating the Product page and identifying information on the Repairs page, I:

  1. Redesigned the e-commerce user flow

  2. Grouped the products into different categories on the products page

  3. Reorganized the information on the repairs page

The Solution

Can’t Always Get it Right the 1st Time!

Upon receiving feedback on the wireframes, I was informed by senior designers that having the site navigation pages both in the header and as buttons below was redundant. The same was said for having the shop categories both on one whole page, as well as in the dropdown. With this feedback, I iterated on my design to minimize the number of clicks users have to make to get to their destination page.

Issues with the First Iteration

Outcome

With the new redesign, the average task completion time was then reduced by of 60% in final usability testing.

Next Steps

Usability Testing with the E-Commerce flow

While much of my initial testing was on product and repair recategorizations are intuitive, I was unable to conduct user testing on the e-commerce flow.

High-Fidelity

Design the prototype in high fidelity and have the opportunity to select a text color that allows for readability and accessibility.

Learnings

Recruiting takes longer than expected.

Research is a lot of waiting around for interviewees to get back to you and it often takes longer than expected.

When there isn’t a standard, lean on comparative research.

While examining many music shop sites I noticed there wasn’t really a standard as to how products were categorized and how the site was laid out, which led to me leaning on a lot of comparative research on places like Nike (e-commerce layout), optometrists (information architecture), etc. for my designs.