UX RESEARCH & DESIGN

TB Winds, E-commerce Responsive Redesign

Year
2021
Role
Research and Design
Company
TB Winds
TB Winds E-Commerce Responsive Redesign Mockup, Project Image

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

The owners of the shop, Jen and Tony, both wanted to learn more about how they could change their website to help encourage instrument and accessory sales online.

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.

Check out the prototype below or play with it here.

Background

TB Winds is a modern mom & pop shop located in Denton, TX.

They offer repairs, instruments and accessories for those who play in either saxophone or clarinet. Their e-commerce site already offered clean aesthetics and clear prices, but they were looking to up the ante with strong, but not pushy, messaging about their products.

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

The goal was to bring more awareness to all of the products that TB Winds had for sale on the e-commerce site.

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.

I then synthesized the research from both findings in two affinity maps. Then used these as a reference for the decisions I made in the empathize and design phases of the process.

Two surprises came up when conducting context inquiries that I thought would be important to address in the redesign.

The first was that Paypal and add to cart were offered at the same time which made it unclear to one participant whether or not he could purchase more items.

The second surprise was that two participants were confused by the organization of the dropdown navigation. They initially clicked the "saxophone" option, but it took them to another page that was not helpful to achieve the task.

Understand

Based off of the research, I took further steps to personify their needs with a user persona. This persona would then be used to guide design decisions, ensuring that each decision was made to benefit the user.

TB Winds User Persona

I wanted to get an overview of all of the options a user has once arriving at the site, so I created a sitemap to get a feel for how someone would navigate through the entire website.

This sitemap gives me a complete overview of the project.

TB Winds Sitemap

I then mapped out the user's journey through what would eventually guide the prototype of the TB Winds website by creating a user flow.

TB Winds User Flow

Design

With my user persona and sitemap as guides, I began to sketch out options for the redesign. This quick 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.

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.

Each participant was asked to complete four tasks while being observed over Zoom. I also created a usability test via Maze, in which 6 users completed the tasks. I extracted insights from that as well.

The tasks were as follows:

The objectives for testing were to discover context, pain points and insights about how users interact with the prototype.

Using the gathered research, I created yet another affinity map to search for patterns that provided insights as to what needed to be adjusted to make the experience as easy for the user as possible.

With the findings from the 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.

Play with the final prototype.

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.

Reflection

What went wrong and why?

Initially I had only conducted the usability test via Maze, but because I had made each task too long, the users got confused.

I eventually had broken down the tasks into smaller tasks.  I eventually conducted usability tests over Zoom and recreated the Maze with more achievable tasks. This helped me gain more useful research and insights about the product.

What did I learn?

I learned how to prep for and conduct usability tests in a comprehensive way that uncovers the motivations of each user.