“We love feet”

6 min readAug 30, 2020

Islington shoe shop is going online.

Overview

This was my second project for the General Assembly academy, in the UX design immersive course. It was a solo concept project, where I had to design an e-commerce web site for shoes from scratch.

Client Values

“We Love Feet has been Highbury’s neighbourhood shoe shop since 1979. Located on Blackstock Road, we are very proud to be a part of our dynamic community. Our customers are varied — ranging from local residents to small businesses. The business model is based on customer service, reasonable pricing, and keeping it local. We employ local staff and support the community that we serve. Highest priority will always be given to the face-to-face contact that we have with our customers, but we see opportunities to support the local community by allowing people to order some products online, and either have them shipped to their home or work, or picked up at the store.”

OUR BRAND PERSONALITY

Bold but not intimidating

Knowledgeable but not academic

Informal but not too casual

Playful but not silly

Hi-tech but not confusing

Project Brief

Through a new e-commerce website, we want to showcase our products, while maintaining our brand image. At the same time, we want to maintain our ‘small shop’ appeal and great customer service. Unlike e-commerce retailers such as Amazon, we offer a highly-curated inventory, focusing on hand-picked quality over quantity.

Problem statement

Create a website that:

Showcase products, while maintaining brand image
Maintain the ‘small shop’ appeal and great customer service
Focus on quality over quantity

Goal

The website needs to have specific functions:

Locate specific hand picked products
A single page for each product which can be linked to directly
Efficiency on purchasing products
Clear directions of the user’s choice
Allow customers to shop with filters

Deliverables

Mid-fidelity Prototype
Sitemap
Personas
Wireframes based on the specific user flow and scenarios you chose
Global elements, such as navigation
Common elements, such as breadcrumbs
Custom elements, such as pricing, buttons, sizing

Design process

The Double Diamond Design Process

Empathize: Understand the place of the e-shop in the market, the brand values, the goals

Define: Define the competitors, the gaps in the market

Ideate: Design first wireframes, get the ideas out in the paper

Prototype + usability testing

Tools used: Sketch + InVision

Competitive research

Table with competitors

I started the project by conducting competitive analysis, this method helps to understand the direct and indirect competitors. I included 4 competitors from different business environment. I chose a large brand, a big only e-shop one, a London based with handmade products and a small family company that makes shoes just for children.

This way I knew I covered different styles and profiles of competitors and I could take important features from each one. Above you can see the most important features, outlined in the table. The reserve in store option was not available in any of our competitors, some of them because they don’t have physical stores. That is the space for our brand to stand out, so I made sure that this feature will be on our e-commerce site.

Users and audience

To collect data for our users, I used a quick and easy way to get users insights, interviews. I carefully decided the criteria for our users, people that shop online, are London based and love supporting the local community. Interviews can be a great way to empathise with the users because interviews can give an in-depth understanding of the users’ values, perceptions, and experiences. They allow to ask specific questions, while remaining open to exploring the participants’ points of view.

Persona

Persona

After interviewing 10 users, I proceeded on creating a “persona” the profile of the average client. I carefully chose his goal, occupation age, salary rank, amount of money spent online in retail shopping, how he spent his weekends.

Card sorting

The client provided with a product inventory with the names of the pairs of shoes and I had to decide the categories that this will be divided into. For this reason, I asked 3–4 users to put these product-items into categories that I created. I asked them to clarify if something is unclear and what other adjustments they would have done. I used a technique called card-sorting. It is a technique in user experience design in which a person tests a group of subject experts or users to generate a taxonomy. It is a useful approach for designing information architecture, workflows, menu structure, or web site navigation paths.

These are the results:

Screenshot from Miro Board with card sorting, grouping items into product categories

Challenges

The problem that arose was that people would expect heeled boots under heels category and most of the items on sandals also found them irrelevant to be there.

Following to that I created a scenario, that the persona will go through and create a sitemap and user-flow.

Scenario

“You are trying to buy a pair of heels for your partner’s mother, because it’s her birthday next weekend”

Site Map

E-commerce site-map

That’s the site map I created based on the interviews from the users.

Simple navigation sales option is important as all of them love discounted products, I made sure the community work and brand values are easily reachable to maintain the brand’s face to face interaction, show humanity, brands search as well as the shop highlighted to me that they hand picked each product. I did usability testing for each stage, asking if the users can find the discounted products, as this came up as one of the most important reasons why our users shop online.

Screenshot from Sketch file, Navigation Table

This is the global navigation I used, I wanted to make sure that all visitors know where they are at any point of their user journey through breadcrumbs. They can also access homepage and discounted products, their basket, their favourite products, their profile and the brand’s community work at any point of their journey.

User flow

Based on the scenario given earlier, I performed usability testing to see if everything is working naturally and simple for the users. Throughout the testing, I was asking them to speak out loud to me and explain what they are looking on the page and point out on me if any icons is unclear, if they can navigate easily, and if they know where they are at every stage.