New beginnings for a pillar in the hockey community

2022
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

Despite 63% of first time users being on mobile devices, the website was not mobile friendly. In fact, the website content and information architecture has not been updated since the early 2000s.

Technologies
Miro
Invision
Zapier
Webflow
Lightroom
Photoshop
Google Analytics
Klaviyo
HTML CSS JS
Solution
Reinvented the site's information architecture to make product browsing more intuitive on smaller screens
This is a 3.3 minute read, a total of 434 words.

Transforming challenges into opportunities

Big Stick Custom Jerseys underwent immense change when the original owner transferred 49% ownership to three dedicated staff members. However, right after finalizing the deal, the pandemic hit, halting supplies, sending staff home, and pausing the entire business.

Mobile: Due to the complicated information architecture, less than half of the mobile navigation fits on screen. Desktop: 900 product options are loaded static on a single page.

At the time, the website was lacking mobile compatibility in 2021, forcing users to sift through nearly 900 jerseys in a single column grid. Despite this, I quickly discovered that 62% of users were on mobile devices, highlighting a critical area for improvement.

Building upon the earlier findings, it becamev evident why conversions took place primarily on desktop, mobile users often forced into multiple sessions.

Desktop users have 33% more engaged sessions thatn mobile.

A coat of paint won’t cut it

Suggesting a site redesign sparked significant conflict due to the company's financial strain from the pandemic. I discovered that the site's content and information architecture were outdated, unchanged since the early 2000s, despite a recent superficial update by a contract web designer.

Superficial redesigns by a contractor leave the original 2001 interfaces largely untouched.

Facing this, along with the challenge of essentially creating a new role for myself, I tackled the issue by crafting and presenting a comprehensive 12-page competitive audit, highlighting our competitors' strengths and weaknesses, to make a compelling case for the redesign.

Detailed competitive audits explaining pros and cons of each site.

Tapping into staff interviews and competitive insights

Facing tight timelines and budget constraints, I honed in on competitive audits and secondary research for ideation, complemented by primary research through staff interviews, leveraging their insights as avid hockey players and potential customers.

Extensive video capture of competitor sites

The project's turning point occurred during a pivotal meeting at a local pub, where the team, convinced by my comprehensive presentation, recognized the redesign as a strategic move to capitalize on the anticipated post-pandemic demand surge.


Listening to the locker room: how user behaviours inspired the redesign

Initially met with resistance, the project's pivotal moment came when I identified the need to transform the site into a mobile-friendly platform and overhaul its information architecture to better serve our hockey-savvy clientele.

Wireframing multiple different user journeys


My breakthrough emerged from synthesizing staff conversations and online jersey discussions, leading to a new design philosophy: 'Thinking like a hockey coach.' This shift reimagined the site's structure to reflect locker room talks, categorizing jerseys by team associations rather than standard SKUs, aligning with how our customers think and communicate.

New information architecture reflects how real hockey players discuss jerseys.

Fine tuning without formal usability tests

Initially unfamiliar with usability testing, I recognized the importance of iteration for project success. I actively sought feedback on the designs from staff and my hockey-playing peers, using their insights to refine and evolve the project's direction.

Wireframing different methods of customer education

This collaborative approach ensured that the redesign stayed aligned with the users' needs and preferences, guiding the development process effectively.


Shelves full of work

Following the website's launch, I organized group training sessions to familiarize the team with its functionalities. During these sessions, I demonstrated updating and editing site information, altering product details, and removing old product listings. The primary goal of these meetings was to facilitate a smooth transition for the sales team, given that the website serves as their primary sales tool.

Teaching the team how to use the back end of Webflow.

Just 60 days after launching, the site boasted a 7% conversion rate. Without historical data from Google Analytics, we measured success traditionally: our shelves stayed full, signaling a shift in sales dynamics.


Conclusion

Process Summary

1. Data from Google Analytics reveals 62% of users are using mobile devices, and experience 33% less engaged sessions compared to desktop.

2. Proposing a site redesign amid financial strain revealed outdated content and structure, despite a recent cosmetic update.

3. I prepared detailed mobile usage analysis and lenghty competitve audits to highlight areas ready for significant improvement.

4. I deliberated reorganizing our information architecture with the team to mirror real customer conversations about jersey designs.

5. I mocked up, then prototyped our discussions using Miro.

6. I built out the site using Webflow CMS, and handled all content / media.

7. I launched the site and educated the team how to use and update site content.