MOVE

Project Overview

A website design created for a two week project as a General Assembly student.

This case study shows the double diamond process to designing a website to help with the online sales conversions at Move, the local sports store in Walthamstow, whilst maintaining it’s small shop appeal and great customer service.

1. Discover

Competitor analysis, interviews and card sorting.

Competitive and Comparative Analysis

I began with competitive and comparative analysis. This included looking at multiple sports retailers and brands— big and small, in order to get a good sense of the functionality of their websites. I also looked at retailers such as Amazon and clothing brands to get some comparative analysis. In general, I found that the bigger retailers and brands had more functional websites. I conducted a task analysis on each website, going from the home screen to the checkout page, and noted certain features which were useful and which were unnecessary.

The features I found most useful and important when doing the feature inventory were the following:

• Size guide
• Reviews
• Easy navigation
• Good filters
• Guest checkout
• 3 products per row

User Interviews

I then conducted 8 user interviews, which validated some of my assumptions made from the competitive and comparative analyses with regards to features and functionality.

Insights from the interviews:

• Almost everyone said they miss the in store experience
• Users like to support the local community when they can, but are influenced by other factors more heavily (see below points).
• Finding the best price for a product is important
• Delivery and Returns influence the way people shop
• The sizing and product descriptions are very important — if this isn’t accurate it can ruin the whole experience.
• Reviews are important to validate the quality of the products as quality is a very important factor.

Card Sorting

In order to discover which categories would best suit the MOVE website, we used the Card Sorting method. 5 participants sorted an inventory of about 70 items into their own categories.

This was very insightful. I found the following:

• Users categorised items into very specific categories
• Categories were mostly into specific sports or Men/ Women/ Kids

The categories were useful for site mapping, which I will explain in the ‘Define’ phase later on.

2. Define

Creating a persona, considering navigation followed by a user flow.

Meet Ben!

User Journey

The following user journey of Ben’s highlights the pain points he experiences when trying to shop online with MOVE before the re-structure of the website, which causes him to shop elsewhere.

Despite feeling as though Ben should shop at his local sports store in order to keep it alive post Covid, it causes too much frustration and the features on the website are too scarce and so he shops elsewhere.

Bens Problem Statement

Ben needs better product and sizing descriptions, reviews and specialised service to successfully compare and order trainers on the Move website. This will help him to support the local community whilst the store is closed due to COVID restrictions.

I began to integrate my findings into the beginnings of the website. I started with a sitemap.

Sitemap

I used my card sorting results to start building a sitemap to showcase the pages that my website would provide and in what order. Once I had completed the sitemap, I started thinking about the navigation.

Navigation

• Global Navigation: The red global navigation would always be present to the user throughout the website, so that these different sections of the website are easily accessible.
• Secondary Navigation: This would be displayed as a dropdown menu from the global navigation to find more specific areas.
• Breadcrumbs: To show users where they are in their shopping journey.
• Faceted: Use of filters down the side of the page

User Flow

I produced a user flow to show the journey that Ben will take from the home page to the checkout.

3. Develop

With Ben and his pain points in mind, I created some sketched wireframes. Considering my research, I included the option to speak with a specialist, a chat bot, price comparison, reviews and a visible size guide.

User testing sketches & feedback:

• The chat bot was not needed along with the option to speak with a specialist.
• A shorter, more comprehensive secondary navigation

With this feedback in mind, I created low fidelity wireframes in Figma:

Mid fidelity

I started prototyping my mid-fidelity wireframes and conducted usability tests which provided me with some insightful functional problems.

Quick view not necessary:

When you hovered over the product on the product listing page, a banner saying ‘quick view’ would appear. When asking a user to choose a pair of trainers and add them to their basket, they would sometimes click ‘quick view’ by accident, without knowing the real reason for the function (expecting that they would go to the product display page) I removed the quick view in high fidelity.

Run Type too specific

Users did not see the necessity for ‘run type’, they thought that ‘running/gym’ was enough. A comment from a user was that ‘sometimes filters can be too specific and you won’t find what you are looking for because you cancel out products’.

Add to bag not easy to locate

On the product display page, users had to scroll down below size and colour before finding ‘Add to bag’. This caused confusion amongst users.

Choosing colour

I chose orange for determination and strength. I looked at the Strava’s orange colour, and decided this was too vibrant for what I wanted to go for.

Final colour and logo

I chose this logo as it adopts Gestalt’s principles of similarity, continuation, closure, proximity and connectedness. Human’s like geometric shapes and this is an abstract image of a ball, to fit with the sporting theme.

4. Deliver

Following final iterations, I developed a functioning high fidelity prototype.

Conclusion

Individuals often had intentions to shop locally, however found that online local sports stores’ websites had features that made transactions frustrating and more difficult to fulfil.

To conclude, the following features were the most important according to users of sports e-commerce websites in order to keep the small shop appeal whilst also creating higher sales conversion rates:

• A seamless journey from home page to checkout
• A comprehensive size guide
• Trustworthy reviews
• Opportunity to speak to a specialist
• Free shipping

Key Learnings

• The main learning that I took from this project was that if user interviews are conducted effectively, this will avoid social desirability, a form of confirmation bias that can affect insights which will eventually affect final design decisions. I came across some users who talked of their good intentions with regards to shopping locally, and it took a few questions to really understand that although they had good intentions to shop locally, really it was the functionality of the website that made the largest difference, with all features stated above in the conclusion.
• This was my first 2 week sprint and I learnt how to manage my time effectively and I really started to develop and learn the research methodologies of UX design and learned that I really enjoyed the way that the methodologies make my brain work whilst analysing insights to inform decisions.
• It became extremely prevalent to me how important each stage of UX design is in order to make the most informative design decisions, from research to usability testing to final iterations of a high fidelity prototype.

Future Developments

• Further usability tests and iterations
• Interested to develop the ‘video appointment’ feature to gain more specialised service and an online chat service to keep the small shop appeal