Transforming an E-Commerce Site to a Where to Buy Solution
Overview
Client:
Warrior Hockey
Role:
UX Designer
Redesign key pages in the e-commerce experience to match the new strategy for the website, showing people where they can buy the product (other websites or physical locations).
Objective:
The Problem
Warrior Hockey was no longer selling goods directly from their e-commerce website. Instead, the site was to function as a “Where to buy” solution and point users to 3rd party vendors (other websites or brick and mortar locations) for purchase. How do we transform this website from an e-commerce website to a “where to buy” website using an e-commerce CMS? And how do we entice the users to use and reuse the website without the e-commerce functionality?
Solution
We transformed the e-commcerce experience into an educational experience. Educating the customers on the products and which products are the best for the athlete. Also, we worked with the Warrior hockey team to understand the CMS and fit the components to our needs.
Understand
Stakeholder interviews
During a series of interviews with the client, we aligned on expectations and requirements. We also discussed the technological limitations of Salesforce.
In these discussions, we learned the client's business modal had changed. They're looking for a "where to buy" experience that enhances the brand.
UX assessment
We conducted an assessment to better understand what needed to change in the experience. This assessment included
Competitive UX analysis
Content review
Usability heuristic evaluation
Accessibility heuristic evaluation
Accessibility heuristic evaluation using WAVE
These 4 criteria helped to determine any gaps in experience and things that needed remediating.
I was responsible for conducting usability and accessibility evaluations. I based these evaluations on Jakob Nielsen's 10 usability principles and WCAG 2.1 guidelines.
Define
Based on our assessment, my colleague and I were able to identify some design opportunities, but due to the scope of the project, we were only allowed to produce 6 wireframes. So, our 6 design opportunities consisted of
Sports landing page
Product category page
Product detail page
Store/Seller finder
Product comparison feature
Navigation
Ideate
After proposing and discussing our design opportunities with the client, we revised the list. The list now included 5 wireframes that included a site map to inform the navigation design.
Sitemap & navigation
Sports landing page
Collection/family landing page
Product category page
Product detailed page
Sitemap and navigation
To redesign the navigation, we needed to put together a sitemap. The sitemap helped us to restructure and expand the navigation to a tertiary level and add educational content that the client will add to the site later.
Existing Sitemap
Proposed Sitemap
Once the sitemap was completed, we were able to design the navigation. We used a mega menu so users would get more insight into the options for each category.
Lacrosse mega menu
Hockey mega menu
Custom mega menu
Wireframes
The pages selected to wireframe represents a user’s journey if they were to go from the homepage to the product detailed page. We included some options for a couple of the pages to give the client a better understanding of how their content could be laid out.
Sports landing page wireframe
Product category wireframe - option A
Product category wireframe - option B
Collection family page wireframe
Product detail wireframe - option A
Product detail wireframe - option B
Outcomes
The goal of this project was to redesign Warrior.com to fit the business needs without losing sight of its users. There were a few technology challenges as the CMS used is primarily created for e-commerce websites not where to buy websites.
This site is live. Our next step is to review our changes with users and gather feedback on the experience.