Edge Sporting : E-commerce Website UX Design

Creating an intuitive navigation system and online shopping experience — with a “small store“ appeal

Summary

During a 2-week concept design sprint at my General Assembly UX Design Immersive course, I created a new e-commerce website for Edge Sporting Goods, a local independent sporting goods store. The new website met the key objectives of the brief by :

  • Showcasing the store’s curated products
  • Establishing their brand, and
  • Providing the users with a simple and intuitive online shopping experience

Building on what I had been learning at General Assembly, I developed my skills further with new techniques (eg; card sorting) and tools (Omnigraffle).

Design Sprint Duration : 2 weeks

Tools / Methodology : User Research, Competitive Analysis, Information Architecture (card-sorting), Sketching, Rapid Ideation & Wireframing, Digital Prototyping (low- to mid-fidelity)

Click here to jump to the final clickable prototype.

Project Brief

The concept brief from Edge Sporting Goods articulated the store’s history, values and unique philosophy. Unlike e-commerce retailers such as Amazon, they offered a highly-curated inventory, focusing on hand-picked quality over quantity.

The new e-commerce website had to:

  • Showcase their products
  • Maintain their brand image and ‘small shop’ appeal
  • Emphasise their customer-first philosophy

Challenge

My challenge was to design a clickable prototype of an e-commerce website that met the requirements of the brief.

The client brief also provided 3 representative user personas to help me develop specific project deliverables.

Process

I kicked off the week by learning some fundamental principles of lean UX and Dieter Rams’ good design principles that I could apply to my design process. These helped me quickly streamline my design concepts, and improve the design with every iteration.

Competitive Analysis

I began analysing some of Edge’s key competitors like JD Sports, Decathlon, InterSports and Sports Direct. I also visited some of the physical stores to observe their product placement and customer interaction.

Further analysis of indirect competitors like Amazon and Argos offered insights on their mass appeal to consumers.

My overall the impression of these industry leaders was that they were huge, impersonal and generic.

This was where Edge’s “small store” appeal could be a real differentiator and this informed my subsequent design decisions.

User Research

From the 3 user personas provided in the brief, I selected Max as my key persona as I believed that addressing his goals and frustrations in my design would enable me to look deeper into the user’s emotional journey and understand many of the nuances in the user flow.

The details in the persona helped flesh out his personality, key interests, pain points and goals.

Meet Max — my key persona

I then interviewed a few more users who were similar in needs and demographics to my persona — this gave me further insights on how they would use the website to solve their problem.

  • Quick & efficient shopping is key
  • Quality is very important for business purchases
  • Company values matter
“I am clear about what I like and what I don’t .”
“As a small business owner, I value quality and curated products as this will reflect in my business’s reputation.”

This initial user research and competitive analysis helped inform and refine my design decisions. It also helped me understand the main user problem, desired solution and outcome.

Information Architecture

A key element of the quick and efficient shopping experience that my users wanted was a simple and intuitive website navigation system.

To do this, I used the card sorting technique (with open and closed sorts) to organise the store’s product inventory.

Card Sorting

These sorting exercises helped me build a website sitemap that was logical and clear.

Website sitemap

User Journey

In my next stage, I began visualising the actual user journey for my persona Max from the problem right through to the outcome.

I then used the Experience Map visualising tool to flesh this out further and include user’s tasks and emotional journey.

Max’s red-to-green journey!

User Flow

I took this to the logical next step via iterations and user testing and drafted a user flow within the website that would solve the user problem.

Screen Design & Iterations

A rapid group brainstorming session in a design studio format generated lots of quick and interesting ideas on screen formats.

We picked the website home page and the product page as the key focus areas for the session.

Many brains at work

Using these ideas, I then sketched more wireflows of the website screens that would enable my user flow.

Early and continuous feedback from user testing of these wireflows which I took on board were:

  • Selection of product categories required too many clicks — I created product panels that could be directly clicked on
  • Product page was too crowded — I moved out options like product videos to below the page-fold to ensure that the page focused on the user’s primary product selection journey

Paper Prototyping

I was then ready to build a paper prototype of the revised screens and began testing them with multiple users.

General feedback (navigation between screens not clear) as well as specific feedback (what’s that floating button?) helped evolve my designs further.

Digital Prototyping

I then transferred these to a low-fidelity digital prototype which underwent further usability testing.

The user feedback at this stage helped me take my designs up a notch through additional screens and functionality to ensure they offered an intuitive user flow with minimal friction.

Improving the fidelity and moving it to a clickable prototype brought this closer to the actual user online experience.

Here is the Invision prototype.

And a demo video!

What’s next for the Edge Sporting website?

There were some interesting discussions and feedback from user interviews and many user tests which I’d like to explore further and incorporate in the next version of my prototype. A couple of these are:

  • Wholesale / trade pricing
  • A simpler checkout process with clearer call-to-action buttons

Closing thoughts

Weeks 2 and 3 of the GA UXDI course were an incredible learning experience. While I am not new to e-commerce (I ran an online kids’ t-shirt store before), the understanding and application of fundamental UX design principles combined with some new tools have enhanced my skills and thinking immensely.

I have learnt a lot, including the benefit of collaborative brainstorming and continuous user testing.

Contact Me:

meera.rao@gmail.com