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 Hockey Wax did not have its own website. They maintained a temporary Ecwid store, but a majority of their sales came from repeat and corporate clients which led to internal complacency in regards to rebuilding their website.
In January 2021, I was hired by Jack's Hockey Wax to inject UX principles into both customer-facing and internal processes. The first problem that I was tasked with solving was to design a fully-functional online store within a three-month window.
Role
UX Designer
Duration
January - March 2022
Tools
Pen & Paper, Adobe Illustrator, Balsamiq, Figma, Shopify, HTML, CSS
Design Process
Problems to Solve
The main task was to build a functional website to serve as an online storefront for Jack's Hockey Wax. However, the specifics of the challenge meant that there were various problems to solve when designing such a site.
1. No Coding Allowed
Between having a limited budget, limited time, and no coding experience as a small company, it was necessary to design a new website would require no coding abilities to maintain.
-
Rationale: Stakeholder interviews and listening tours revealed that nobody at Jack's Hockey Wax is capable of coding a website.
-
Approach: Research "no-code" platforms and choose one that aligns with business needs.
2. Brand Identity
Jack's has used the same logo and word mark for its entire existence, but the color palettes and design elements that have been used in the past were entirely inconsistent.
-
Rationale: UX audit of design files revealed there is no existing design system to be utilized by the web or marketing teams.
-
Approach: Write design guidelines and create a style guide that can be understood and used by all internal stakeholders.
3. Increase Sales
While sales were good enough to keep the company afloat in the past, the costs of new hires and a new website necessitated a measurable increase in sales.
-
Rationale: Stakeholder interviews revealed that the costs of wax production, website maintenance, and marketing were about the same as incoming sales revenue.
-
Approach: User research to understand needs of target audience, competitive analysis to understand industry trends, integrate insights into site design.
The Solution
I successfully designed, helped code, and released a new Shopify website in a two-month period by applying my design process to the problem. A Shopify store was chosen to avoid the need to hire a developer and because it offers apps that will support key functions to grow the business in the future.
Additionally, I redesigned several visual elements and created a full set of brand guidelines that are now used by the company on both digital and physical products. In the short time that I have been with the company, we have seen an increase in sales, especially online purchases through the new website.
Before
.png)
After
UX Audit
The domain name www.JacksHockeyWax.com used to be associated with a site which included a marketplace, an "About Us" page, and even a blog with various contributors from hockey world.
However, that site crashed in 2018 and since then, Jack's has relied entirely on an Ecwid temporary store. This made the process of conducting a UX audit very simple...
Jack's Hockey Wax had two separate websites with virtually NO user experience.
Ecwid Instant Site
-
URL is impossible to remember (store7801452.ecwid.com)
-
Some product categories are empty
-
Expired promotions are still available for purchase
-
Store inventory does not reflect actual inventory
"Original" JacksHockeyWax.com
-
No 404 page
-
All links are "dead ends"
-
Domain name purchased through hosting service
Competitive and UX Analyses
I conducted competitive and UX analyses on six hockey wax producers in North America to familiarize myself with the industry and its big players.
Howie's Hockey produces the best selling and most popular wax.
YEW! Hockey Wax is a startup embracing modern web design principles to sell their environmentally-friendly wax.
User Research
User research was conducted in two phases for this project -- User Surveys and Guerrilla Interviews. The purpose of these processes was to define the various target audiences of Jack's Hockey Wax and then to understand the unique needs, pain points, desires, and behaviors of those groups.
The second phase of research was initially planned as proper user interviews. However, the timing of our research conflicted with the end of competitive hockey seasons in North America which made it impossible to arrange interviews. I decided to remedy this issue by conducting three rounds of guerrilla interviews in three different locations--two hockey rinks and one hockey store.
User Surveys and Guerrilla Interviews allowed me to define our user groups and understand their unique needs, pain points, desires, and behaviors.
MailChimp was chosen to create and share a user survey with existing customers and members of various hockey communities.
Research Goals and Insights
1. Where do hockey players typically buy wax and what factors contribute to their brand selection at the time of purchase?
-
Most hockey players purchase wax online
-
Players choose brands they are already familiar with
-
Players prefer waxes that smell good
-
Players prefer waxes that are stickier
All players prefer waxes that are sticky and smell great.
2. What are current frustrations and pain points that hockey players are experiencing when buying accessories like hockey wax?
-
COVID has closed or reduced the hours of most hockey stores
-
Some wax packaging doesn't last as long as the wax
-
The preferred brand of players in the Pacific Northwest shut down operations during COVID
-
Sticky hands from melted or old wax
COVID has shut down wax producers and hockey stores across the country.
3. How do hockey players engage with existing hockey content on the web and social media?
-
Older players (30+) rely on Facebook and sports websites (ESPN, TSN)
-
Competitive players (≤22) prefer to use Tik Tok and Instagram
-
Word of mouth was the most common way that players learn about hockey wax brands
Every user group has different preferences for staying up to date with hockey trends and news.
User Personas
I crafted several proto-personas to represent six different user groups by synthesizing the insights from my research. However, the research participants were not fully representative of all defined customer groups so only two of my proto-personas were evolved into fully-informed user personas.
User research provided data on our two main user groups, the "Young Guns" and the "Beer Leaguers", to craft user personas to serve as their advocates for design decisions.
Tanner Trenton is the user persona who will advocate for the "Young Guns," a customer group that consists of young, competitive hockey players with dreams of playing at the highest level of the sport.
Nate Wheeler, on the other hand, is the voice of the gritty veterans of the game. The "Beer Leaguers" consist of men and women who have a wide range of hockey experience, but share common interests in terms of their needs, pain points, and expectations.
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.”
Website Functional Requirements
The following high-level requirements of the website were determined and approved after reviewing the information gathered during stakeholder interviews in addition to the needs of our various target audiences. With no prior e-commerce experience, I also referred to Nielsen Norman Group's "UX Guidelines for Ecommerce Product Pages" to determine what to include on the product pages:
High Level Requirements
-
Menu for navigation
-
Home Page
-
Category Pages
-
Product Pages
-
Contact Us
-
Links to Social Networks
Product Page Requirements
-
Descriptive product name
-
Recognizable image(s)
-
Enlarged view of image(s)
-
Price, including any additional product-specific charges
-
Clear product options, such as color and size, and a way to select them
-
Product availability
-
Clear way to add an item to the cart, and clear feedback when it has been added
-
Concise and informative product description
Paper Sketches
Home Page
Category Pages
Menu for Navigation
Product Page
Recognizable Image
Clear Product Options
Clear Way to Add Item to Cart
Informative Product Description
Mid-Fidelity Prototype
I digitized the paper sketches using Balsamiq to define the positions of elements at various breakpoints.
High-Fidelity Prototype
Utilizing the new "Makers" tool on Figma, I was able to design a high-fidelity prototype that would also provide coded elements to implement on our live website. I felt that this was the best approach because I have had bad experiences in the past when trying to turn my Figma designs into actual coded products. Using Makers allowed me to design with the confidence that I could actually use my designs on our final website.
Preference Tests
With limited access to actual users, I conducted preference tests on design elements that did not require target audience feedback.
Color Test
The first preference test was to determine which primary color to use on the website. This test served a dual purpose as the results would also influence the direction of the brand's overall color palette as I developed the style guide later.
While the company's logo (a monkey) is mostly brown and white, the two color choices I tested were blue and yellow. I chose blue and yellow because when Jack's Hockey Wax began, they only had two products--a banana wax in a yellow tin and a pina colada wax in a blue tin.
The results of this test were overwhelmingly in favor of the yellow color choice. In fact, 91% of test participants preferred yellow which made it an easy choice to proceed with. A common theme in the follow up question asking why participants chose yellow was that "Yellow is easier on the eyes."
91%
9%
44%
56%
Font Test
Once I knew which color to proceed with, I wanted to test the font choice for my headline fonts. I wanted to test our brand's font, Hobo Standard, against the default Shopify font, Fjalla One.
Unlike the first test, the results were fiercely divided with 56% preferring Fjalla One. However, the results were not statistically significant and the comments were not persuasive enough to create any usable insights.
For that reason, I decided to opt for brand consistency and proceeded with the Hobo Standard font that I had used in my high-fidelity mockups.
Brand Guidelines
Over the years, countless animators, illustrators, and designers had done work for Jack's which resulted in inconsistent color schemes, typography, logo designs, and a mishmash of label designs on the wax tins. I utilized Figma and Adobe Illustrator to gather and recreate all of the visual elements that are used both online and on physical products. After the elements were redesigned in various formats, I wrote brand guidelines to give guidance to our marketing team and any future employees.
A new design system remedied years of inconsistent branding and provides all teams with reusable elements for use on digital and physical product designs.
Platform Selection
-
No coding required
-
Easy to design visual elements
- Not exclusive to e-commerce
- Fewer e-commerce apps than Shopify
-
E-commerce exclusive site
-
Apps to support subscriptions and wishlists
-
Easy to implement Makers designs
- Some coding required
-
Can produce usable code
-
Visual elements are designed in code-friendly manner
- Still need a hosting service
- Need to implement code produced
Website Launch
I built the functional requirements of the store by translating my Figma designs into the Shopify store. Unfortunately, there were some default features that I was unable to change with my limited coding knowledge.
Using my free time to learn HTML and CSS, I was able to update our font to the brand standard "Hobo" font, resize font families and adjust their opacity, and give customers the ability to create their own accounts.
Results
Launching JacksHockeyWax.com had an instant impact on online engagement. Website traffic was a key metric determined to measure the success of our project. In its first three months, the new website saw:
• 847% increase in average monthly website traffic
• 75% increase in online sales
Next Steps
Next Quarter
Add Custom Wax Ordering Page
The biggest difference between Jack's Hockey Wax and its competitors is the ability to offer fully customized wax. My first design sprint for Jack's will be to research, design, and implement a new page dedicated to custom orders.
End of Year
Subscription Box Service
In the past, Jack's Hockey Wax offered a monthly subscription service with basic hockey accessories. One of the factors that was considered when choosing Shopify was the ability to add a subscription service by the end of this year.
End of Year
All Products Available for Purchase on Website
The current economic situation in the USA has led to shortages on various supplies required for wax production. The impact has trickled into our inventory which means that the current website only features about half of the full Jack's Hockey Wax catalogue.
Conclusion
Working at Jack's Hockey Wax has finally given me the opportunity to apply my design skills and professional experience to a real product. In addition to the case study outlined here, I was lucky to work with a company that allowed me to apply UX principles to several facets of the company. For example, I was also put in charge of organizing the internal files for production, manufacturing, and shipping which I completed by building a Notion page to provide structure and consistency.
I've also been able to dip into the business side of the company as the only west coast-based employee. Doing field research on the hockey environment in Washington put me in a position to cross paths with one of the largest equipment suppliers in the state. With that connection, I was able to secure custom wax orders that have had dramatic impacts on the overall revenue.
I am excited to continue using my abilities to turn Jack's Hockey Wax into one of the major players in the hockey retail world.