Context

Pomodoro is an Italian Deli based in London. They have a varied customer base, ranging from local residents to small businesses. Recently the business has been flourishing and it’s seeking new ways to expand.

The Brief

A local Italian Deli seeks an opportunity to expand its business online.

The goal

To deliver a website that allows customers to confidently buy groceries online.
Showcase products while maintaining a ‘small shop’ brand image.
Improve purchasing efficiency/Steps to checkout
Make it quick and easy to find products
Inspire customers to try different products

Process

I used the Double Diamond model: Discover, Define, Develop, and Deliver

Methods

Toolkit

Figma, Google Docs, Google Slides, Zoom.

Solution

I created a desktop site with clear global navigation, filters and breadcrumbs to make the website intuitive and easily navigable for the users. I also focused on reducing the number of clicks to purchase a product, and added 5-star ratings, recommended products to enhance the browsing experience for users.

Scroll down to view the full case study

DISCOVER

Competitive Analysis

Key insights: The main takeaway was that competitors have more similarities than differences. E-commerce website nowadays have reached a high level of industry standards and expectation, making all the websites and check-out processes very similar.

User Research

Quotes:

“I wish they would do delivery as I can’t visit the shop during working hours”

“Weekend food is the best but needs organisation”

“We like to have quality food on a consistent basis”

“I’m trying to educate my children to different types of cuisine”

“Every time I go in there I spend more than I’d want to”

User Persona

DEFINE

HMW

How might we help busy professionals to efficiently buy quality food?

How might we support working parents to find ingredients for family meals to share with their children?

Card Sorting

This was one of the most interesting parts of the design sprint. During this process I’ve established in which categories I should place different products.

DEVELOP

Low Fidelity Wireframes

With Card Sorting in place I could then organise the content of the website into wireframes.

Mood Board

The mood board was based on all things Italian, from brands to food and scenery. Something that captured my interest was how Italian brands portray themselves through the use of typography and colour.

Logo Ideation

This was one of the most interesting parts of this design sprint. In order to establish brand identity I began designing a variety of possible logos for the e-commerce website. The idea was that the logo would convey that this brand is a food-related brand and that it is friendly and of high-quality.

Style Guide

Based on the mood board I’ve chosen a colour palette that would fully represent Italian tradition. Which basically is made of the Italian flag colours plus blue (a colour vastly used in Italian tradition). The typeface is Josefin Sans Regular, which looks smart and modern but is also easy to read.

DELIVER

High Fidelity Prototype Round 1

High Fidelity Prototype Round 2

Prototype Video

Recommended Next Steps

Change iconography
Add recommended products
Improve alignment/ratios throughout
Add delivery and payment options
Add account and reviews pages
Improve product page with nutritional information and ingredients
Add loyalty scheme and discounts
Add footer/social media
Mobile App

Key Learnings

During this project I particularly enjoyed learning about card sorting and information architecture and how they can improve the overall user experience. And so, I’m looking forward to applying those methods in future projects. As e-commerce sites structures are heavily standardised, UI was what I explored the most during this project. From colour theory to typography and layout I had a lot of fun trying to design a functional website that is also appealing to customers.