The challenge

To increase product sales and ease of use.

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

Play with the prototype here.

Background

TB Winds, a repair shop with consistently high service demand, wanted to boost revenue by optimizing their online product sales.

Stakeholders sought UX insights to improve the e-commerce experience and increase instrument and accessory conversions.

Research

I context inquiries with participsant 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 30 who had bought instruments or accessories online before. Some were college students, while others were full-time professionals.

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

Understand

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.

The challenge

To increase product sales and ease of use.

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

Play with the prototype here.

Background

TB Winds, a repair shop with consistently high service demand, wanted to boost revenue by optimizing their online product sales. Stakeholders sought UX insights to improve the e-commerce experience and increase instrument and accessory conversions.

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.

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

Understand

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.

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:

• Purchase a saxophone
• Book a repair
• Book a trial appointment

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.

Conclusion

This project increased online product sales by 8%.

During this project I learned to ensure that musicians can quickly find products through intentional menu placement and hierarchy.

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.