Data driven discovery leads to major site overhaul

2024
Context

Big Stick Custom Jerseys is a small business that specializes in boutique custom sportswear. They have been in business since 1996 and have strong ties with local and national recreational leagues, charities, businesses, and film production studios.

Problem

With approximately 1000 jerseys to choose from, customers found the product exploration process overly complex.

Technologies
Google Analytics
Google Tag Manager
Draw.io
Figma
Google Forms
Notion
Webflow
FinSweet Attributes
HTML CSS JS
Solution
Introduced a one page dynamic filtering system allowing for improved user autonomy
This is a 4.7 minute read, a total of 609 words.

Taking a data dive and surfacing with hidden usability challenges

After the site's successful redesign, Big Stick Custom Jerseys experienced a wave of positive feedback and increased traffic, leading me to integrate Google Analytics (GA) for a deeper dive into user behavior.

Engaged users that convert
Comparing the same subset of engaged users (session length >10 seconds, min. 5 page views) over our busiest periods, I found that those who converted viewed 52% less pages, and made 47% less actions on our site than those who exited.

Referencing both path exploration and user explorer stats from GA, the data uncovered a clear challenge: when faced with an almost 1000 quantity jersey selection, customers were frequently restarting their jersey exploration process and then exiting in frustration.

Recursive behaviour mapped out: Users sort through up to 60 categories of jersey styles, to then sort through up to 15 individual jerseys. If the desired jersey is not found, the user restarts the process.

This insight shifted my focus towards making the jersey selection process more intuitive and simplifying the quote submission, aiming for a seamless user experience.

Example of recursive behaviour: A user sifts through almost 1000 products to find their perfect red jersey

Navigating a maze of stakeholder priorities and user needs

To deepen the insights gained from Google Analytics, I pursued direct customer feedback.

In our tight-knit team of seven employees, juggling roles is part of the job. Peak hockey season demanded full focus on jersey production, necessitating an efficient, hands-off strategy for collecting site feedback.


Gathering direct customer feedback

By integrating a System Usability Scale (SUS) survey into our site's forms via Google Forms, I aimed to gauge user satisfaction and pain points more precisely.

Implementation of SUS on site

Leveraging the data collected, I crafted a detailed presentation with Excel and PowerPoint, highlighting both primary and secondary findings.

Normalizing and interpreting SUS data and assigning scores

This analysis, informed by 202 SUS responses, underscored three issues (in order of significance):

  1. Customers overall find the website overly complex
  2. Customers feel they need to learn a lot before filling a quote
  3. Customers find our quote form options unnecessarily complex
Condensing findings into a presentation

Restructuring information architecture for user simplicity

The insights from our research paved the way for a radical redesign of our site's information architecture.

Moving away from a convoluted product exploration system, I introduced a one-page dynamic filter that significantly simplified the process of discovering jersey options.

This strategic shift was aimed at enhancing user navigation and decision-making, making the selection process more intuitive and less overwhelming.

The new user journey map aims to reduce friction

To validate this new design direction, I leaned heavily on secondary research, using the insights we had gathered as a foundation.

This approach ensured that the proposed changes were not only based on direct user feedback but also aligned with broader usability best practices, reinforcing the effectiveness and relevance of our redesign efforts.

Competitive audit example: One of our rivals' filtering sytems

Turning conflict into clarity by implementing feedback systems

Following the presentation, I immediately set to work on Figma, crafting mockups and prototypes that would bring our vision to life.

Figma mockups for all device sizes

A key focus was ensuring these prototypes accurately represented the dynamic filtering process, a challenge I met by quickly learning and integrating Figma's beta feature, Figma Variables, into our prototypes.

Interactive prototype using Figma Variables beta feature

Refinement of these initial concepts was a collaborative effort, involving detailed discussions with stakeholders and our team to incorporate a range of perspectives.

To bolster the design's foundation, I undertook secondary research beyond my previous competitive audit

This process illuminated crucial design principles and the concept of 'the happy path,' guiding users smoothly through the site without unnecessary diversions, thus enhancing the overall user experience and reducing friction in the jersey selection and quote process.


From presentation to prototype

With the prototypes approved, I swiftly implemented the new features on our Webflow site, utilizing the Finsweet Attributes library for advanced filtering capabilities. This integration marked the culmination of the design phase, transitioning into the live environment where real user interactions could begin.

Creating and building the live production feature in Webflow, using FinSweet library for Javascript capabilties

The project's success is gauged through continuous monitoring via Google Analytics and the System Usability Scale (SUS), ensuring that the implemented changes meet our objectives and enhance user experience. This iterative approach to evaluation underscores our commitment to data-driven improvements and user-centric design, setting the stage for ongoing optimization based on real-world usage and feedback.


Conclusion

1. Data from Google Analytics reveals persistent revursive behaviour on our site. Additionally, engaged users who convert visit 52% less pages and perform 47% less actions than those who did not convert.

2. I validated this data by seeking direct customer feedback. I implemented a System Usabilty Scale and a direct feedback system via Google Forms.

3. After generating 200 responses validating the findings from Google Analytics, I presented the findings to the team using Google Sheets, Slides and Draw.io.

4. I conducted secondary research via competitive audits and ux articles to support my primary research in developing solutions.

5. I mocked up, then prototyped a one page product filtering system using the Figma Variables beta feature.

6. I implemented the new feature on our site.