Hype sporting goods e-commerce — Case study
One of the biggest challenge for any store launching their e-commerce website has always been to transfer the human experience from real life to the screen and make sure they keep the same customer service standards.
Because when you shop online and you need an advice or some help, who do you turn to when it’s just you behind your screen?
That was the main goal that I kept in mind when starting to work on the e-commerce website for the sporting goods store Hype. Located in Liverpool street, the store is very well established within the local community and pride themselves on their amazing customer service, from advising the beginners and the experts to finding the most uncommon and qualitative products on the market.
The problem
Build an e-shop for a local sporting goods store that showcases their wide range of products and services while keeping the “small local shop” feeling and offers the same quality of customer service.
User research
We were given 3 personas to start digging into the customer’s behaviors:
- Yoshi, a 26 years old junior landscape architect.
- Max, 34, a yoga studio entrepreneur
- Robert, 42 a senior construction manager that loves running and trains for the London Marathon
I decided to take Yoshi as my primary persona because she’s the only one that isn’t very much into sports so she’s the least likely to visit the website, she’s interested in supporting local businesses and she has a hard time trusting customer service, what is actually one of the best asset of the client’s company. In my eyes she was the most challenging to satisfy regarding this project so that’s why I decided to focus on her needs.
I conducted interviews with 3 users matching Yoshi’s profile to get a better insight of what she enjoyed about online shopping, the frustrations she encounters and her general habits when shopping.
I found out that the main reasons why my users would chose to turn to the online stores was the accessibility of a website and the time saving aspect — an e-shop is always open and you only need an internet connection to enter it-, the many reviews and customer comments that can help them make up their mind and they enjoyed when the website offered a quick checkout process and fast deliveries.
The aspects that they disliked the most in online shopping was first and foremost suffering from a bad or inexistant customer service. Whether it was getting answers from unexperienced staff, encountering problems after the purchase and not getting any help or not being able to return the items easily, they all communicated a lot of disappointment when they felt like the brand didn’t care about them. The second point that came up repeatedly was the unability to check the quality of a product. Since you can’t really see the product, bad quality pictures and not being able to rely on previous customer’s feedback was a big issue for my users, to the point where they would just not complete the purchase.
From these interviews I identified the 4 main pain points of my persona:
- the lack of support from customer service
- getting unsatisfying answers & advices
- restricted options in terms of payment and delivery
- long and complicated processes, especially when checking out
The solution
After all that research, I wanted to design a solution that fits user needs and answers the clients requests, by designing an e-shop that translates the high quality of customer service and expertise available in the physical store, that would be easy to use and navigate through, while providing flexible and fast services.
Competitive analysis
I started by studying what was already available on the market and analyzing the websites of both directs and un-directs competitors.
From giant retailers offering a wide range of brands like JD Sports ans Sports Direct, to Nike -huge international and independent brand but representing many different sports and known for its amazing customer service- as well as small specialized stores.
I completed the research by visiting the physical stores of Sports Direct and NikeLab to compare their customer service, their visual identity, and their organization and navigation through the store. The goal was to have a better understanding of how those companies translate their brand image online.
That allowed me to determine 4 features to build and focus on in order to address the 4 pain points of my user:
- A live chat with the experts of each department in store
- Reviews from customers and established sources like specialized magazines or websites
- A side by side comparison of products to help the user make the right choice
- Quic and flexible checkout options
The happy path
Primary user journey
To start building my design I focused on Yoshi’s user journey when she would be looking for inspiration to buy a gift for her friend that loves hiking.
Based on the user interviews and after testing it with one of my users, this is the happy path I was able to define:
User flow
From that user journey, I could start determining the user flow that would then help me design the wireframes. I separated the 3 steps of her journey while browsing for inspiration, and put at the bottom the finalization of her process — from buying the item to receiving the parcel.
Building the prototype
The first sketches helped me put all my ideas on paper and start visualizing the results of all the user research that was done previously. Starting with the home page, product page and checkout page. Those first sketcheswere then digitized and used to make a paper prototype that I could test with my users.
After watching my users interact with the prototype I could improve my design and iterate. The biggest change that I went for was the live chat option: I had first decided to offer a video chat with the specialists of each sections in store thinking it would be the best way to transfer the quality of the customer service available in store. But when my users clicked on ‘Live chat’, most of them were actually really uncomfortable at the idea of having a video chat with a sales assistant, and a few of them actually said it would be annoying to have to chat to someone on your computer and it’s not something they would feel comfortable doing in any kind of environment (trying to get advices at work would make it impossible to video chat with someone). In consequences, I decided to replace it by a message chat.
I then focused on refining the details of the layout on the interface:
- Changed the names of the sport’s categories: on the first prototype, I had used the categories name that came out of the cart sorting exercise I did when analyzing user’s behaviour to determine the site map. But when those names appeared on the drop down menu of the sports category my users were quite confused as it wasn’t obvious what kind of products they would find in each category. I decided to replace them by more generic names that would be easier to understand by most.
- Underlined clickable links: a few of my users were a bit lost when trying to find the texts that were links to other pages, and this issue was even more obvious on the breadcrumb navigation links as none of my user actually used them to navigate (I had no “Back” button on the product page and all my users thought they were stuck on the page even though the breadcrumb links could have taken them back on the previous page). To make it easier for them to navigate within the site and to stay consistent, I underlined all of the clickable links.
- Presence of the customer’s reviews: during my user’s research, my interviewees mentioned that they relied a lot on customer’s opinions when making a purchase but I hadn’t realised it could also compel them to open a product page, so I added the stars rating of each product on each link of a product page to make sure the users will be interested in knowing more about the items.
Next steps
During all the research and sketches produced to build that prototype I came across a few more ideas that i would like to test and include in the future updates of that project:
- Personalized account: after registering, the users would be able to access their account where they could save their address and payment details, but the website would also generate a personalized home page featuring the products that would most likely interest the user, based on their previous purchases, the reviews they posted and their favorite sports.
- Video view of the product: as verifying the quality of the items was one of the major concerns of my users, I would like to implement a video of the products being worn/used.
- Bring the customer’s community online and allow them to interact & help each other: Hype sporting goods being established since 1998 in their neighborhood, they have built a community of sports enthusiasts over the years and that is part of what makes their business special and successful. I would like for their customer’s to be able to find that local community online and have a forum option on their account where they could exchange about the products they liked and their favorite sport in general.
Clickable prototype: https://invis.io/8AAL64JBH
