Case Study - Hoyt Bow Builder

Hoyt Bow Builder UX Design

Hoyt Bow Builder

Challenge

Hoyt approached Gray Loon with a desire to be the first to market with a 3D bow builder that showcases all of their possible bow configurations. The goal of the project was to increase user engagement and sharing on hoyt.com.

Action

I led a team through the Design Thinking Process, starting with interviews and research, through the ideation phases, and on to wireframing, testing, iteration of desisgn, final visual design and deployment.

Results

The Bow Builder has been a large success for Hoyt. Not only have they beat competitors to market with this unique piece but the metrics were outstanding.

In the first 12 months of being live:

293k

Unique Users built bows

27k

Spec sheets emailed

32k

Social shares

9.4k

Spec sheets downloaded

My Roles

  • Lead UX Designer
  • Lead Creative and Visual Designer

Design Tools

  • Adobe XD
  • Adobe Photoshop
  • Adobe Illustrator
  • Maze

Stack

  • React/NextJS/Typescript
  • Symfony API
  • Klaviyo

Credits

  • Jordan Rogers, Lead UX Researcher
  • Ashley Schalasky, Project Manager
  • Dalton McCleary, Lead Developer
  • Catelyn Folkert and Brita Turbyfill, Discovery
  • 3D Modeling - Dopple.io

Design Thinking Process

Working with an internal team at Gray Loon and key partners at Hoyt, we worked through the Design Thinking process to ensure maximum usability and to create an equitable product that hit on all goals - increasing engagement and driving dealer conversion.

Hoyt Bow Builder

Phase 1. Research

In the early stages of the project, I worked alongside our UX Researchers to gain meaningful insight into the user base, so that we could learn what they need and how the use digital tools. In the research phase, our team performed the following:

  • Performed demographics research to outline 5 key demographics and potential users for the product.
  • Conducted personal interviews with users that were inline with our defined demographics.
  • We learned key traits of our demographics including, age, gender, education and income levels and marital status.
  • We also determined buying habits, hunting frequency and geographic details.
  • We also determined user's social media habits, brand loyalty and their technical literacy levels per demographic.

Phase 2. Define

Hoyt Bow Builder

After the initial research we developed further internal UX tools to help guide our further decision making and define the problems we aimed to provide solutions to with this product. These efforts included:

  • The creation of empathy maps for each key demographic.
  • The creation of user personas, hypothesis and problem statements for each key demographic.
  • The value proposition of the product.
Hoyt Bow Builder

In the beginnings of the research phase I had to take a serious inventory of their product offering and map dependencies and configurations so that the developer would have a model to reference when in development. I utilized Figma for this, outlining every step, all dependencies and all defaults in detail. This proved to be an invaluable tool for all parties involved.

Phase 3. Ideate

Moving on, we conducted competitive audits on several indirect and direct competitors, where we observed representatives of our demographics navigate each site with a set of predetermined goals. These audits provided useful insight on potential features, as well as allowed us discover pain points to avoid in the UX/UI.

Performing our initial competitive audits allowed our team to complete the remainder of the Ideate Phase, which included the following:

  • Creation of goal statements, KPIs and metrics.
  • Creation of user journey maps.
  • Creation of user flows.
  • Production of initial product wireframes.

Phase 4. Prototypes

Hoyt Bow Builder

After working through the wireframes and outlining the structure and features of the UI, I prototyped the UI in Adobe XD which would allow our client and testers the ability to get a feel for the UX. This ultimately allowed for us to discover some pain points and discover possible new features we had not thought of initially.

Hoyt Bow Builder

Determining that due to the complexity of the product and the thousands of possible configurations of bows, I made the decision to have our lead developer on the project proceed with programming a more refined prototype in React, which we would then use for testing and ultimately refine and build our final product from. It was a bit of gamble but it paid off, and helped us to eliminate some hurdles and overcome XDs limitations in the user testing phase.

Phase 5. User Testing

In the user testing phase we performed a usability study where we provided 8 users a set of goals to achieve with our prototypes. These were moderated studies where we observed time on task, conversion rates, and measured succes on a system usability scale.

Hoyt Bow Builder

After aggregating the results of the data, we discovered a few pain points, recognized some areas of improvement, and refined our product prototype.


Design System Development

After working through the Design Thinking process and developing our prototype, I built the design system for this product. Utilizing Hoyt's existing brand standards, I created this system in XD which provided design standards and requirements for all components in the site, and all views.

This design systems was then handed off to our development team for production. After production and testing the Bow Builder was launched in early August of 2023 - on time and within budget. We are currently monitoring analytics and further refining this tool today.

Hoyt Bow BuilderHoyt Bow BuilderHoyt Bow BuilderHoyt Bow Builder

Check out the Hoyt Bow Builder