Islington shoe shop is going online.
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.
“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
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.
Create a website that:
- Showcase products, while maintaining brand image
- Maintain the ‘small shop’ appeal and great customer service
- Focus on quality over quantity
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
- Mid-fidelity Prototype
- 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
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
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.
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.
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
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.
“You are trying to buy a pair of heels for your partner’s mother, because it’s her birthday next weekend”
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.
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.
You can see the process of the sketching throughout the design from lo to high fidelity.
- Create hi-fi prototype
- Establish color palette and new typography
- Add 360 videos on PDP
- Improve page load time
- Test, test & test a bit more
Let’s check out the Prototype: