Conceptual Project: designing an e-commerce website for a local grocery shop
UX Researcher/UI Designer (Solo Project)
Competitor analysis | User interviews | User persona | Experience mapping | User flows | Wire-flows| SiteMap | Sketching | Prototyping | User testing
Sketch | inVision | Photoshop | Pen and paper
For my second project as part of the User Experience course at General Assembly in London, I was tasked with creating an 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:
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 Contextual Inquiry observations and interviews with customers and staff to collect feedback that could help with my research.
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 supported costumers when buying.
The second step of the process was to do a Competitive Analysis to understand what the competitors were doing. I was also looking for potential gaps in the market to stand out.
I conducted research of YoShelf’s direct and indirect competitors using the following methods:
As one of the UK’s biggest groceries shop, Waitrose has a “Recipes” section on their website with many different categories but there are no actions that users can take from there to the actual products. A big and corporate e-commerce website wasn’t what my client wanted, it 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 had some physical shops in East London — and offered great hand-picked selections for customers.
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.
From my interviews, I’ve synthesised the data collected and created my persona. John was based upon my research to represent the different user types that might use our client’s service — helping me to understand users’ needs, experiences, behaviours and goals.
John’s customer journey was also created to show how his behaviour and the pain points while buying groceries online.
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 was that it is necessary to have two ways of browsing for a product:
During a card sorting session, participants were asked to organise products from the shop inventory into categories. This would later on be crucial to label these groups making all products more accessible and easy to find on the website.
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 session is that buying groceries is painful for customers with dietary restrictions. So why not change it so we can make those users feel cared and considered?
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:
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 users. This followed the iterative process:
Once you have identified a user need and have generated ideas to meet that need, 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 a Minimum Viable Product.
During my testing sessions, I gave the users a scenario with three tasks for them to complete :
After that, I created the happy path for John (otherwise known as the critical path) — steps he would need to take to complete all given tasks according to the scenario:
My first testing insights were:
Over the course of a week, I did more than 15 usability tests for five prototype iterations:
If we take a closer look at the Homepage:
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 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.