TOOLS

Figma
Miro
Marvel
Milanote
Google Suite

DURATION

In progress

MY ROLE

UX / UI Designer

BACKGROUND

Buell Air Horns is a small, family-owned business that has been around for over 100 years. It relies mainly on a small but solid customer base, who mostly order via email. The website has not been updated in 20 years. Only 20% of customers order from the site, and of those, over 40% have to call in with questions and end up ordering over the phone.

THE PROBLEM

The site is not serving its purpose of attracting and facilitating customer orders.
The website does not provide information to help guide new customers to purchase the
right products. 
There is no option for returning customers to re-order the same items from their last purchase.

COMPETITIVE ANALYSIS

What can we learn from other airhorn manufacturing sites?

I started by conducting a competitive analysis of Buell Air Horns and its top competitors, to see what areas we could improve.

Areas to Improve

The current site is very minimalist, which does not appeal to the typical air horn enthusiast or help Buell stand out among its competitors. The lack of information on the site also makes it difficult for users to find the right products if they aren’t already familiar with air horn systems.

USER RESEARCH

Who is buying our product, and what do they need?

I gathered information on our customer base to see how we could serve them better. Using Neilsen’s categories of eCommerce shoppers, I analyzed the purchasing patterns of our current customers, and found the following breakdown:

As Product Focused shoppers, over half of our customers want:

Clear identification of each product
Effective search function
Easy access to previously purchased items
Streamlined checkout

As Researchers and One Time shoppers, the remainder of our customers want:

User reviews
Easy comparison of products
Complete product descriptions
Checkout without registration

USER PERSONAS

Who are we designing for?

After compiling a basic understanding of our customers, I went on to gather more in-depth information. I looked at all the data we had about past customers, and interviewed all the staff who dealt with customers directly. The following personas sum up our three most common customers.

USABILITY TESTING

What issues do users encounter when placing an order?

Now that I knew who we were designing for and what they needed, I wanted to see what issues they were currently encountering with the site.

I conducted moderated usability tests on the desktop and mobile version, and synthesized the results.

When users were given specific products to find and add to their cart, they were able to do this fairly easily on the desktop version, but the lack of compatibility on the mobile version made things very difficult.

When users were not given a specific product and were asked to simply browse for their vehicle, they had a very hard time figuring out which products to buy.

This showed me that users were simply not finding the information they needed: whether that be which valve to pair with which compressor, or which horn provided the appropriate tone and volume for each user's specific needs.

SITEMAP

I created a sitemap for the new design, which included collapsing the vehicle categories into a "Shop by Vehicle" option for newer customers, and offering a "Shop by Product" option so customers who knew exactly what they needed could get to it quickly. However, I ran into an unexpcted issue.

PROTOTYPE

After addressing this structural issue, I created a Style Guide and developed the prototype from low to high fidelity.

NEXT STEPS

The Figma design is currently in the hands of the development team. After we have an MVP launched, I will recruit users to conduct usability testing and tweak the design as needed.