Building an Online Store for a Hockey Wax Company from Scratch

Context

Jack's Hockey Wax is a small business that has managed to thrive in the ice hockey world for nearly a decade. Their success can be attributed to the quality of their product and the loyalty of their customers. For nearly three years, Jack's did not have its own website. They maintained a temporary Ecwid store, but a majority of sales came from repeat and corporate clients, which led to internal complacency about rebuilding their web presence.

In January 2021, I was hired to inject UX principles into both customer-facing and internal processes. The first problem I was tasked with solving: design a fully-functional online store within a three-month window.

Problems to Solve

The main task was to build a functional website storefront, but the specifics of the challenge meant several distinct problems to solve simultaneously.

No Coding Allowed

With a limited budget, limited time, and no coding experience internally, the new website needed to require zero coding knowledge to maintain. Stakeholder interviews and listening tours revealed that nobody at Jack's Hockey Wax is capable of maintaining a coded site. The approach: research "no-code" platforms and choose one that aligns with business needs.

Brand Identity

Jack's had used the same logo and word mark for its entire existence, but color palettes and design elements had been entirely inconsistent. A UX audit of existing design files revealed no usable design system. The fix: write design guidelines and create a style guide that all internal stakeholders could actually use.

Increase Sales

Costs of new hires and a new website necessitated a measurable increase in revenue. Stakeholder interviews revealed costs of wax production, website maintenance, and marketing were roughly equal to incoming sales. User research, competitive analysis, and integration of insights into the site design would be the path forward.

UX Audit

The domain name jackshockeywax.com used to host a marketplace, an About Us page, and a blog. That site crashed in 2018. Since then, Jack's had relied entirely on an Ecwid temporary store. This made the UX audit straightforward: Jack's Hockey Wax had two separate websites with virtually no user experience.

The old Ecwid store: an impossible-to-remember URL, empty product categories, expired promotions still for sale, and inventory that didn't reflect reality.

Competitive and UX Analysis

I conducted competitive and UX analyses on six hockey wax producers in North America to familiarize myself with the industry. Key findings: Howie's Hockey produces the best-selling and most popular wax, while YEW! Hockey Wax is a startup embracing modern web design principles to sell their environmentally-friendly product. These benchmarks informed both the visual direction and the feature set of the new site.

User Research

Research was conducted in two phases: user surveys and guerrilla interviews. The purpose was to define the various target audiences and understand their unique needs, pain points, desires, and behaviors.

The second phase was initially planned as structured user interviews, but the timing conflicted with the end of competitive hockey seasons in North America, making scheduling impossible. I remedied this by conducting three rounds of guerrilla interviews in three different locations: two hockey rinks and one hockey store.

Key Insights

Most hockey players purchase wax online and choose brands they're already familiar with. Players prefer waxes that smell good and are sticky. COVID had closed or reduced hours at most hockey stores, cutting off access to physical retail. Word of mouth was the most common way players learned about wax brands. Older players (30+) relied on Facebook and sports sites; competitive players (22 and under) preferred TikTok and Instagram.

User Personas

I crafted two fully-informed user personas from the research: Tanner Trenton, representing the "Young Guns," young, competitive hockey players with dreams of playing at the highest level, and Nate Wheeler, the voice of the "Beer Leaguers," experienced recreational players who share common needs around convenience and reliability.

Tanner Trenton, the "Young Gun" persona advocating for competitive young hockey players.

Problem Statement

"Ice hockey players of all ages need to easily purchase Jack's Hockey Wax products online because there is limited in-store availability in North America. We will know this to be true when we see an increase in website traffic and a high visitor-to-sales conversion rate on the new Jack's Hockey Wax website."

Ideation and Requirements

I determined high-level website requirements by synthesizing stakeholder interviews and user research insights, supplemented by Nielsen Norman Group's UX guidelines for e-commerce product pages. Key requirements included navigation, a home page, category pages, product pages with enlarged imagery, clear product options, pricing, add-to-cart affordance, and a contact page with social links.

I then digitized paper sketches using Balsamiq to define the positions of elements at various breakpoints before moving into high-fidelity work in Figma.

Mid-fidelity wireframes in Balsamiq defining element positions at multiple breakpoints.

Preference Tests

With limited access to actual users, I conducted preference tests on key design elements that didn't require target audience specificity.

Color Test

The first test determined which primary color to use, blue or yellow, based on the company's two original products (banana wax in a yellow tin, pina colada wax in a blue tin). Results were overwhelming: 91% of participants preferred yellow, with a common theme in follow-up responses that "yellow is easier on the eyes." Easy decision.

Font Test

I tested the brand font, Hobo Standard, against Shopify's default Fjalla One. Results were fiercely divided (56% preferred Fjalla One), but not statistically significant, and the comments weren't persuasive enough to generate actionable insights. I opted for brand consistency and proceeded with Hobo Standard.

Brand Guidelines

Over the years, countless designers had done work for Jack's, resulting in inconsistent color schemes, typography, logo designs, and label designs across products. I used Figma and Adobe Illustrator to gather and recreate all visual elements used both online and on physical products. After redesigning everything in multiple formats, I wrote brand guidelines to give clarity to the marketing team and any future employees.

A new design system remedied years of inconsistent branding, giving all teams reusable elements for digital and physical products.

Website Launch

Shopify was chosen over no-code alternatives because of its e-commerce exclusivity, app ecosystem for subscriptions and wishlists, and compatibility with Figma's Makers tool for directly converting designs into usable code. I built the functional requirements by translating my Figma designs into the Shopify store and then used my free time to learn the HTML and CSS needed to implement the Hobo brand font, resize font families, adjust opacity, and give customers the ability to create accounts.

The new jackshockeywax.com, launched in March 2022.

Results

Launching JacksHockeyWax.com had an immediate impact on online engagement. In its first three months, the new website delivered measurable improvements across every tracked metric.

Next Steps

Following the website launch, the roadmap for Jack's Hockey Wax included adding a custom wax ordering page (see the Custom Wax Ordering case study), launching a subscription box service using Shopify's app ecosystem, and expanding the product catalog as supply chain issues resolved and inventory recovered.