Unique Home

Overview

PROBLEM

Concept project to create an e-commerce site, for a fictitious grocery store, Fresh Crop, as part of a course for General Assembly. Fresh Crop wanted to showcase their high quality products, whilst still keeping their small shop appeal and great customer service.

SOLUTION

A clickable mid fidelity prototype in Figma including the homepage, product category/detail pages, cart and checkout pages. The solution allows for:

Expertise and recommendations establishes brand trust online, which replicates the experience in store.

Fresh Crop are able to expand their business to existing and new customers online, whilst still maintaining their brand image and values.

MY ROLE

This was a solo concept project where I followed the double diamond approach.

I completed all UX Research, UX Design and Mid-Fidelity UI

DURATION

2 week design sprint

TOOLS

The Challenge

THE CLIENT

Fresh Crop is a speciality grocery based in Clapham, London, run by Freddie Crop.

His business model is based on customer service, reasonable pricing and keeping it local.

THE OPPORTUNITY

Through a new e-commerce website, Fresh Crop want to:

Showcase their products, while maintaining their brand image.

Maintain their ‘small shop’ appeal and great customer service.

Almost 3 in 5 people say they prefer to buy from someone they know and 60% trust recommendations made by local shopkeepers.

- Retail Week

THE PROCESS

1

DISCOVER

User Research

Competitive Analysis

2

DEFINE

Persona

Information Architecture

Card Sorts

Navigational Structure

3

DEVELOP

Ideation

User Testing

Iteration

4

DELIVER

Mid-fidelity Prototype

Discover

User Interviews | Competitor Analysis

WHAT ARE COMPETITORS DOING?

Firstly, I reviewed Fresh Crop’s competitors to understand the landscape. Focusing on the main features of both national and more local stores.

This highlighted gaps in the market. Expert recommendations, and supporting local produce is lacking for many of their competitors. Fresh Crop could differentiate themselves to better serve their customers and still meet their brand objectives.

WHAT ARE USERS SAYING

To understand users needs and wants better, I interviewed 3 people from Fresh Crop’s target audience, aged between 25–45.

The results highlighted the following was important to our user:

Quality and expertise, either from the shop owners or reviews from other customers, are the most important to them.

Convenience is really important. They are leading busy lives, and want easy delivery options to suit their routine.

Define

UNDERSTANDING OUR USER

To represent the findings I created a persona whose likes and frustrations were inspired by research observations and would guide the design decisions moving forward.

KIRA'S SCENARIO

Kira is looking for meal inspiration for a dinner party she is hosting with close friends at her new flat. She wants to have some fancy chocolates to share as a dessert at the end of the evening.

MY HYPOTHESIS

By creating an online experience, which replicates the expertise and recommendations she is used to getting from in store, she will have a convenient and pleasurable shopping experience. We’ll know this to be true when Kira is able to find and purchase recommended products easily online, and get them delivered straight to her door.

KIRA'S USER FLOW

INFORMATION ARCHITECTURE

In order to make this journey as seamless as possible for Kira, I needed to organise Fresh Crop’s hand selected inventory into an intuitive site map. I used the card sorting method which allows users to categorise the products in a way they think fit. This was done through 2 closed card sorts, and 2 open card sorts.

Site map based on insights from conducting a card sort with 8 user

NAVIGATIONAL STRUCTURE

Global Navigation and Secondary Navigation to reflect the categories from the site map.

Breadcrumbs allow users to see where they are vs where they came from.

Filters can be used to further shortlist products, and are expected by users. For example, dietary options are really important to our users, so they can filter for these in the Faceted Navigation.

Users are also able to easily contact the store, with information available in the Supplemental Navigation, in the footer.

Develop

Ideation | User Testing | Iterations

IDEATION

Initially, I created some low fidelity paper sketch wireframes in order to quickly and easily test design solutions.

The process moved from sketches to low-fi wireframes and I ended in mid-fi clickable prototypes produced on Figma. These were deliberately left in black and white not distract users with the UI.

USER TESTING AND ITERATIONS

I tested Kira’s scenario and task on 4 users, where I gathered a huge amount of feedback.

Users appreciated seeing the owner on the homepage, and seeing his personal recommendations throughout the site replicated the high level of customer service in store.

Improvements were needed in the following areas:

Navigation: The categorisation developed through the card sort unfortunately confused users in the wireframes. Although this had been tested in the define phase, users were confused when presented the menu in testing. Categorisation of chocolates in 'desserts' needed to be revised, and the site map and navigation were updated to allow for a whole new category of 'Chocolates & Sweets' which users responded to better. This was a GREAT learning for me, as it highlighted the importance of iterative design, and the benefit of continuous testing!

Shopping cart and product recommendations: users needed the ability to delete from cart! An obvious miss, but a quick fix! Also product recommendations cluttered the page, and some users thought extra items were actually in their basket.

Delivery and payments: Having delivery and payments in one page confused users, these were separated out with a progress indicator bar added to allow users to see exactly where they were in the process.

Shopping cart iterations based on feedback above

Deliver

Prototype

MID FIDELITY PROTOTYPE

You can view the mid-fidelity prototype by clicking here, alternatively you can see a few select screenshots below:

SO, HOW DOES THE PROTOTYPE TACKLE THE BRIEF?

Expertise and recommendations based process strengthens user interaction and establishes brand trust online, which replicates the experience in store.

Users are able to have an easy online experience to purchase their much loved, local and hand-curated quality produce, and get it delivered to their door.

Fresh Crop are able to expand their business to existing and new customers online, whilst still maintaining their brand image and values.

Final Thoughts

A key learning for me here was a reminder of how important it is to have an iterative process, and not to be afraid to go back to research or design phases to change issues users faced in testing. In this case it was was particularly important to readdress the site map.

In addition, there is a fine balance between innovation and user expectations, if there is a design convention of where users expect information to be, it should be kept in place. This allows for trust, especially with e-commerce sites, where users are sharing payment information.

This was my first project using Figma, it was a great learning experience, and has given me a real taste for the tool!

READ THE FULL CASE STUDY