UX RESEARCH & DESIGN

TB Winds, E-commerce Responsive Redesign

TB Winds is a saxophone and clarinet shop based out of Denton, TX that sells instruments and accessories, while also offering repair services.

Year
2021
Role
Product Designer
Client
TB Winds
Constraints
4 weeks

The Challenge

To improve a user's understanding of the products and services that the store offers.

To increase product sales and ease of use.

Play with the prototype here.

Background

TB Winds is booked months in advance for repairs, but they wanted to bring in more revenue from the products they sell.

Stakeholders wanted to learn more about how they could change their website to help encourage instrument and accessory sales online.

Research

Since this was an existing site I performed user interviews with research participants and context inquiries in which I asked the same participants to locate and purchase a saxophone on the existing website.

Each participant was a musician between the ages of 23 and 27 who had bought instruments or accessories online before. Some were college students, while others were full-time professionals.

Key Findings

"I didn't realize that

All users wanted to try before buying

All participants like to look at reviews

All participants thought the main purpose of the site was to sell accessories, they did not know that they could purchase an instrument on the site

4/5 users shopped from home using their laptops

TB Winds Context Inquiry Affinity Map

Understand

TB Winds Sitemap

The sitemap allowed me to zoom out and see all of the possible routes that our user could take to get around the TB Winds site.

Our user wants to buy a saxophone. The user flow above shows how he would think through this process.  I used this as a roadmap for the redesign.

TB Winds User Flow

Design

With my user persona and sitemap as guides, I began to sketch out options for the redesign. This method allowed me to get my ideas out quickly and then decide which ones to move forward with.

I drew a homepage layout using data from the research to take note of what features were most important.

Then zeroed in on each feature and approached them from different angles to see what would work best.

TB Winds Low Fidelity Sketches
TB Winds Low Fidelity Sketches
TB Winds Low Fidelity Sketches

With wireframes as the bones of the design, I could see how the pages would be laid out and clearly articulate my reasoning for the placement of each feature of the design.

With the go ahead from Jen & Tony, I proceeded to create the initial prototype.

Responsive Design

I used the laptop screen size as the main focus, because the research showed that most users search for instruments or accessories using their computers at home.

Then I recreated some of the design for phone and tablet screens.

Test

I conducted usability tests with 5 new participants that fit within the parameters of my user persona.

The tasks were as follows:

With the findings from research synthesized on an affinity map, I created more HMW statements and a priority matrix to determine what edits were high priority.

Iterate

The following were trends and solutions I came up with to guide this iteration of the site.

  • Change CTA Copy to distinguish between a trial appointment and a repair consultation
  • Add trial appointment CTA to the services page, which is where the users expected it to be
  • Add a descriptive subheading to the hero to explain the company's specialization
  • Edit product review layout to include ratings and differentiate it from the customer testimonials

Action shots

Play with the final prototype or check it out below.

Next Steps

Conduct more qualitative user testing to ensure changes help the users complete the desired tasks with ease.

Conduct a 5 second test to ensure that the edits helped the user understand the goal of the website.

Develop a more organized and comprehensive design system for developers.

A/B testing will further validate what works and what doesn't.

Let’s work together, say hi.