top of page
Fresh Crop Final yellow.jpg

Scope

UX | Designing an e-commerce concept website

Fresh Crop

A new online adventure for the local grocer

Description

Client Brief | 2 weeks | solo project 

overview

The client

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. 

Key deliverables

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 brief

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

Tools

Figma, Miro, Trello, Google Slides, Slack and Zoom

My role

My contribution

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

opportunity

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.

solution

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.

discover

User interviews

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

 

  • Check-out Experience

 

  • 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.

 

Pain points:

​

  • Expensive and limited product range is a general assumption made.

define

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.

Persona

Screen Shot 2021-04-05 at 11.18.27.png

Problem Statement

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

Information Architecture

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.

Screen Shot 2021-04-12 at 14.24.41.png

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. 

Site map

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.

Screen Shot 2021-04-12 at 14.10.35.png

develop

Ideation

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.

Screen Shot 2021-04-14 at 15.48.53.png

deliver

Outcomes

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.

Final prototype

Click below to see the mid-fidelity prototype:

For the complete case study on Medium click below:

bottom of page