UX | Designing an e-commerce concept website
Client Brief | 2 weeks | solo project
Fresh Crop is a neighbourhood grocery located in the area of Clapham, London. As a shop, they have been a part of the community since 1998. The shop's business model is based on customer service, reasonable pricing and keeping it local.
A number of deliverables were required for the project, including:
Competitive Analysis | User Interviews | Persona and Scenario | Information Architecture |Card Sorts | Navigational Structure | User Flow | User Testing | Mid Fidelity Prototype
The primary goals:
Having a clear structure to locate specific products.
Support a single page for each product.
Finding an efficient way to purchase one or more products.
Steer customers toward popular products
Figma, Miro, Trello, Google Slides, Slack and Zoom
User interviews | Data analysis | Affinity Mapping | Facilitator Design Studio with the clients | Creating the High Fidelity Prototype and developing Visual Design
This was a solo concept project of two weeks during the 12-week UX Immersive Design Bootcamp from General Assembly. Through the course of the project, I performed User research, Interviews and Card Sorts. Also, I made my debut in Figma creating the final Mid-fidelity clickable prototype
Starting off the project, I researched direct and indirect competitors to understand the landscape in which Fresh Crop lives. The authentic values and product range can set the shop apart from their competition and it needs to be reflected in their website.
Fresh Crop’s heritage, customer service values and hand-selected quality products were also identified as key unique selling points in relation to their competitors.
The design of the new website grants users with:
Efficient and easy find-ability of products by having clear structured product pages. Also, by giving the user the ability to narrow down the search with the use of filters to sub-categories.
Product focused advice. The user is provided with a clear product description, product reviews and recommendations of inspirational recipes based on the shop's inventory.
A fast and simple checkout experience where the user fills out the delivery- and payment details in a few uncomplicated steps.
I interviewed 3 people from Fresh Crop’s target audience to understand 2 elements, users' wants and needs and their pain points. My key findings below are organised in stages of a shopping experience.
Preparation to Shop
During Shop and Product Decision
About the Independent Local Grocer
The key elements of my user research showed:
Wants and needs:
Quality of the product their purchasing.
Convenience, quick and easy delivery.
Dietary requirements are present in different forms.
Expensive and limited product range is a general assumption made.
With the findings of our research in mind, we created the persona of Sam. Doing so allowed me to keep the user at the centre of the design process, ensuring I met her needs and goals.
Sam needs a way to learn about how they could use food products she hasn’t cooked with before as she is shopping for them at the grocery’s online store
It is important to organize and structure the content of the website in a way that users can find the products without too much effort.
To synthesize data for a sitemap, I performed 2 closed card sorts and 2 open card sorts.
Key findings cart sort
Insights I retrieved from the cart sort was the need for sub-categories based on dietary requirements. Also, it became apparent to me that the products needed a clear description of the food products and how to use them in recipes.
The site map is a hierarchical layout of the website that shows how pages are prioritized, linked, and labelled. I used the main categories founded from the card sorts ensuring the site structure was easy to navigate for the user.
Starting with simple sketches on paper of how the website could look like — Wireframes — I quickly moved on to Figma to start developing low-fidelity wireframes. After 3 rounds of user tests, I iterated the wireframes into a clickable mid-fidelity prototype. This increased the value of the usability tests and resulted in several changes to the designs based on user feedback.
Through user testing, I was able to observe user frustrations and discover which areas of the designs needed improving in each iteration.
The Final Prototype includes:
An inviting homepage with an intuitive structure to either explore the content or have a fast process making an order.
A well-arranged product page with filters to special requirements to narrow down the users’ needs.
The details product page includes reviews and testimonials with additional recipes based on the shop's inventory.
Finally, a fast and efficient checkout process with the users needs for convenience in mind.
Click below to see the mid-fidelity prototype:
For the complete case study on Medium click below: