YoShelf Groceries

Concept Project: designing an e-commerce website for a local groceries shop

Role: UX/UI/Interaction Design (Solo Project)
Duration: 2 weeks

UX Techniques
Competitor analysis | User interviews | User persona | Experience mapping | User flows | Wire-flows| SiteMap | Sketching | Prototyping | User testing

Sketch | inVision | Photoshop | Pen and paper

The Brief

For my second project as part of the User Experience course at General Assembly in London, I was tasked with creating a mid-fidelity e-commerce website for a local independent grocery shop. My client was YoShelf groceries. They’ve been the City’s neighbourhood grocery store since 1998. Located near Liverpool Street Station, they are proud of being part of a dynamic community.

Their business model is based on customer service, reasonable pricing and keeping it local — employing local staff and supporting the community they serve.

Through a new e-commerce desktop website, YoShelf wants to showcase their products while maintaining their brand image.


YoShelf defined a few priorities on their brief. The new website must:

  • Have clear ways of locating specific products
  • Support a single page for each product which can be linked to directly
  • Have an efficient means of purchasing one or more products
  • Steer costumers toward popular products
  • Establish the brand and its points of difference
  • Allow customers to contact the business (including to request a product not otherwise stocked)


Contextual Inquiry

To understand the problem scope and the experience of users when buying groceries, I went to Planet Organic and As Nature Intended to understand what were the pain points of customers during their shopping process. Both shops were near Liverpool Street Station – where YoShelf is also located. I conducted some Contextual Inquiry observations and interviews with customers and staff to collect some feedback that could help with my research.


  • Customers were asking for a specific product from a brand to the staff members  —showing the requested product with their phones.
  • They were comparing prices in-store with prices they were browsing online —knowing they were making the best deal was also important.
  • They were browsing products but were not sure of what they actually needed —some of them were wishing they’ve brought a shopping list instead of randomly wandering around the aisles.

This exercise confirmed that there was an opportunity to make YoShelf’s website a unique offering in the groceries market by showcasing their expert advice and also creating an experience on the website that costumers could have some help when it comes to buying what they want to serve their purposes.

Competitive Analysis

The second step of the process was to do a Competitive Analysis so we could understand what the competitors were doing. I was also looking for potential gaps so we could explore and stand out as a groceries e-commerce.

I conducted thorough research of YoShelf’s direct and indirect competitors using the following methods:

  • Features Analysis of competitor’s websites
  • Contextual Inquiry & Site visits to local competitor shops
  • Interviews with shoppers & staff at these competitor shops

Waitrose is one of the UK’s biggest groceries shop and it was interesting to understand what they were doing. They have a “Recipes” section on their website with many different categories but there are no actions the users can take from there with the actual products. According to the brief, a big and corporate e-commerce website wasn’t what my client would want as YoShelf wants to keep its brand image as a local small shop focusing on hand-picked quality over quantity.

Planet Organic and As Nature Intended were good shops to compare as they have some physical shops in East London — and they do offer great hand-picked selections for their customers.

User interviews

Based on surveys and interviews with customers to understand their shopping behaviours, I identified the main needs I wanted to address in the website while also taking into consideration the needs of YoShelf.

  • Clear product organisation for a seamless shopping experience
  • Product search to easily find products
  • Helpful Product Suggestions that reflects YoShelf expertise and focus on the local area
  • Customer brand relationship to establish trust
  • Detailed product information to ensure proper product selection
  • Product reviews to help make informed buying decisions and allow for user input
  • Efficient checkout process to save users time and allow for easy purchase of products

From my interviews, I’ve created my persona. John was based upon my research in order to represent the different user types that might use our client’s service — it helps us to understand the users’ needs, experiences, behaviours and goals.

I also created John’s journey map to show how his behaviour and pain points while buying groceries online.


  • John doesn’t always shop online because he needs to know what to buy and what he wants to eat — so he usually wastes some time browsing for random stuff.
  • He’s currently on a Low-Carb Diet — which links to our “Lifestyle” idea that will be introduced later.
  • He would like to buy more on Waitrose but he doesn’t find shops nearby — a great opportunity to introduce our e-commerce service.
  • He values great quality and product selection — which YoShelf groceries currently offer.

Site Structure & Navigation

With Information Architecture being an integral part of a customer’s experience of a website, I conducted a card sorting exercise using a sample inventory of YoShelf’s products. My main finding from this was that it was necessary to have two ways of searching for a product:

1. By product category (e.g. Bakery, Vegetables)
2. By lifestyle (e.g. Low-Carb, Gluten-Free)

User during the card sorting exercise

During a Card Sorting session, participants are asked to organise topics/products from the shop inventory into categories that make sense to them which could help us to label these groups making the content more accessible and easy to find. This would be crucial to create categories on the website.


  • Cultural/Language barriers are a challenge as people come from different backgrounds— which leads them to categorise items according to their personal experiences/cultures
  • Not all categories are the same to everyone as people have different criteria— they are not that obvious
  • If you have a serious allergy conditions/specific diet, you would want to shop the products you can consume (e.g. dairy-free/vegan)

One of my card sorting participants was Vegan so she gave me a very precious insight. When it comes to buying groceries, we should consider some people follow different lifestyles and they would like to feel like there’s somebody paying attention to their needs and life choices. Instead of categorising the inventory in Meat/Fish/Bakery/etc, the vegan user classified as:

My main learning from this feedback is that buying groceries can be actually painful for some people with dietary restrictions. So why not change it so we can make those users feel cared and respected?


A Sitemap is a diagrammatic representation of a hierarchical system. It usually depicts the parent-sibling relationship between pages in a website, showing how subpages might be arranged underneath their parent groupings. So I’ve created YoShelf’s sitemap below:

Global Navigation

How users would find what they need in the website

To understand if we were on the right path for this project, we tested the first prototype with some users following the iterative process. 

User Testing & Iterations

Once, through user research, you have identified a user need and have generated ideas to meet that need, you develop a prototype. Test, collect feedback and refine. Following that, you create a new prototype and begin the process all over again until you are satisfied that you’ve reached the best possible product for release to the market as an MVP.

During my testing sessions, I gave the users a scenario and 3 tasks for them to complete — imagining they were John:

After that, I created the Happy Path for John — steps he would need to take to complete all given tasks according to the scenario:

My first testing insights were:

  • It wasn’t clear to users what “Lifestyle” meant
  • Delivery Option — you need to know the shipping cost will be added later — it should be mentioned somehow
  • Users were confused about the menu — words were too close with no separation between them
  • We would need to have a page confirming your purchase/order confirmation will be sent via e-mail

Over the course of a week, I did over 15 usability tests over five prototype iterations. My mid-fidelity homepage (on the left) to a high-fidelity (on the right):

Mid-Fi (left), Hi-Fi (right)


If we take a closer look to the Homepage:

  1. Global Navigation Menu: An easy way for you to find yourself through the website — it will appear on every single page in case you want to use one of the Menu options.
  2. Browse Your Lifestyle: an easy way to help the customers finding what they need. The pictures and words help users to understand what “Lifestyle” means.
  3. Meet our staff: To keep the sense of a local business where you can meet the staff and get in touch if customers want to. Once they click and are redirected to the staff page, customers will be able to read some recommendations and interesting content produced by the staff — for example, interesting recipes or recommended products.
  4. Hand-Picked selections: The importance of highlighting the business cares about what they sell — quality over quantity. 
  5. Bottom Menu: Customers can sign in to the newsletter and receive offers and news (about the shop or the local community) and clients can also get in touch if they want (via phone, or social media). The main point here is to establish a connection between the business and the customer.

inVision Prototype

Homepage – Hi-Fi Prototype as an example

Next Steps

  1. Develop the “Guided Shopping” tool
  2. Apply colours to all screens and create a high-fidelity prototype
  3. Continue testing with users

What I’ve learnt…

I’ve learned how important it is to document every single step of the whole process. As a UX Designer, the amount of data we can collect is impressive and it’s quite important to keep a track of the whole process. As it was a solo project, it was a Research and Ideation process I’ve had full control over from the brief until final delivery. Working on a brief like this was both challenging and incredibly rewarding! As this was a concept project, I was unable to go back to the client with our findings and had to find a way to incorporate user insights with the brief.