HYPE Sporting Goods — your local spot for sporting needs
A conceptual project developing an e-commerce platform for a local business.
HYPE Sporting Goods has been the neighbourhood sports store for the City since 1998. They are looking to increase their online presence with an e-commerce website that brings the passion and experience of the store team onto the digital platform, and that creates a link between the online and offline experiences.
Context
The company’s business model was focused on customer service, reasonable pricing and keeping it local, and I wanted to translate that in my design solution. Alongside this, they were also proud of the ‘small shop’ appeal and had a highly curated inventory, focusing on quality over quantity, and these things were important to maintaining the brand image online.
The company also wanted some key features such as a clear way of locating specific products, a product page with multiple views and information, and a means of purchasing one or more products with a smooth and efficient check-out process.
Competitor Analysis
I first completed a competitor analysis in order to establish what nearby businesses were doing. I viewed the online presence of 5 competitors (SportsDirect, Mountain Warehouse, Lululemon, Decathalon & Amazon) as well as visiting the Lululemon store located in Spitalfields Market, approximately 10 minutes walk fro HYPE’s location. Overall I found that the companies websites were impersonal, with little to no direct interaction with customers and had a very large inventory that was sometimes difficult to navigate and find an item that you wanted.
User Research & Persona

As part of my research I conducted interviews with a number of users with similar traits to customers of HYPE. In the course of my interview I discovered that Kate likes to shop online for research but will often go into the store to try things on or ask questions before she makes a decision. She often feels overwhelmed when there is an abundance of choice, and will switch off or get bored if she can’t reach a find what she wants in a short timeframe. Kate is also a keen supporter of local businesses and is
“If customer service is great, I wouldn’t mind paying a little bit more [to shop local], rather than going to a corporation.”
Kate was the best fit for the project as she share many traits with one of the personas given to me by the company — Amber.

Amber is often not confident in her purchasing choices, and asks questions of store staff to get the answers she needs. She wants to access information to make a good decision easily. She is also keen to support local business and avoid big brand stores.
Card Sorting & Sitemap
I was provided with a sample inventory of the store with which to construct the architecture of the website and to help create a navigation structure. Initially, the users that completed the open card sorts were sorting the items primarily by sport, with equipment and attire sitting under each sport heading.


However, when I then completed closed card sorts with different users, it highlighted that this system would not account for all the inventory that the store carries and as a consequence I had to go back and re-evaluate the structure of the site.
Further testing revealed a clothing/equipment sort would much better account for the stores inventory and closed card sorts verified this.
User Journey
My next step was to return to my persona, Amber, and think through her process on the HYPE website, by creating a user journey.

By imagining Amber’s process before and during her encounter with the HYPE website, I was better able to prioritise which pages would be most important to her, and focus on those as I began to plan my design solution.

As Amber has difficulty being confident in her decisions, she is least happy when she has an abundance of choice and most happy when she has had her choices verified and supported by HYPE store staff. She also enjoys the convenience of being able to collect for the store, as it is local to her workplace.
Storyboard & User Flows
By creating a storyboard it helped cement Amber’s journey and reinforced her presence in the design process.

Sketches & Wireflow
During the design studio that I participated in with my group, we explored the problem that Amber was having, which was a way to have confidence in her purchasing choices. I wanted a way that she could relate the experiences she has in store and online. The result we came up with was a page which showed recommendations from the store staff, who she could — were she so inclined — meet in store. If not, she had the comfort of knowing that the people who were recommending the products knew what they were talking about, which in turn related back to one of the principles of the store, to be knowledgeable but not academic.

From that solution that emerged from the design studio, I was able to further iterate the visual look of the website and start relating the pages I needed to create to my user journey, and Amber’s path through the website.

Paper Prototyping & Further Iterations

I moved on to Paper Prototype testing with my users. Initial feedback gave useful comments about how the site felt and operated, including some pages that had been missed out of the check out process, as well as simple things like a notification that items had been added to the basket.
One user noted:
“I don’t know how to got back to the previous screen [from staff recommendations]. Adding a back button to navigate between screens would help”
Other users also observed:
“ I would like to see that will I receive confirmation email on confirmation page, just so I can be reassured the order is complete“

This enabled me to make further changes to the prototype as I moved into a digital format, and ironed out a few of the layout issues that had been highlighted in the initial testing phase.

Usability Testing
Low fidelity wireframes translated into a clickable prototype in InVision. From a ‘testing shuffle’, with rapid user testing, I was able to get quick and valuable information about the usability of the prototype website. Users noted that the design was clear and easy to navigate, but had feedback on the discoverability of some of the features, such as additional customer reviews, and navigability of the checkout process.
“Unless i hovered over it, I wouldn’t realise there were more reviews”
Another user commented:
“When [basket box] came up I was looking for something to click to go to the basket. If that was there it would be more convenient.”
Users were also happy with some of the specific design choices, such as the basket menu, which was visible through the checkout process:
“I like the reassurance that that is what I‘m buying and that is what I‘m paying.”
It was also important to adhere to some of the industry best practices, regarding the layout of specific pages, such as login, payment details and address input, which were highlighted by one user, and changes were made based on this. The next iterations can be seen in the mid-fidelity prototype below.

Next Steps
- High fidelity prototyping & testing
- Mobile optimisation
- Filters for areas with larger inventory
- Development of UI for other user journeys
- Analytics on site traffic and usage
