UX RESEARCH & DESIGN

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. Right near a university known for its music programs. Because of this school, both Tony and Jen hold higher degrees in their respective instruments and feel they are able to provide a higher level of service to those who are serious about music.

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.

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 not only performed user interviews with research participants, but also context inquiries in which I asked the users to locate and purchase a saxophone on the existing website while they spoke aloud about their thought processes and motivations.

Each participant was a musician between the ages of 23 and 27 who had bought either 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.

TB Winds Initial Interview Affinity MapTB Winds Context Inquiry Affinity Map

Understand

Based off of my research participants, 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.

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 then moved to mid fidelity wireframes, using Figma to lay out and annotate my ideas for the website redesign. 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.

Test

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

Each user 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 are 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

Users found the flags on each message within the group tags to be confusing.  I chose to remove the flags and add a report feature to a menu represented by ellipsis on the top right corner.

On the profile page, users were unsure about the name and username forms.  I had chose to lock them so that once you connect with someone your name will not change, eliminating any confusion that could happen during a connection. I then removed the input form and labeled each category.

People were confused about "messages for approval". Now this could have occurred for two reasons: one being that this is a relatively new pattern and users are not used to approving each message connection, or the copy was confusing and led the user to overthink it's meaning.  Because I believe it is a combination of both issues, I changed the copy to something I believe to be more clear, "new message requests".

Check out the final prototype below or play with it here.

Next Steps

Conduct more user testing to ensure changes are the best possible options.

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

Reflection

What went wrong and why?
What could I have done better?
What did I learn?