Firkant | Logo
Firkant

Tutto Bene Cups

Revolutionizing e-commerce UX: intuitive shopping mirroring our quick, easy, delicious instant pasta.
Overview

Tutto Bene Case Study

Our team was tasked with developing a seamless and engaging user experience for an e-commerce website selling an instant pasta cup product. Our main goal was to provide an intuitive and efficient online shopping journey for our customers, ensuring that they can easily find and purchase their desired products. We wanted to create an experience that not only felt intuitive but also conveyed the essence of our brand - quick, easy, and delicious.
Year
2023
Client
Tutto Bene
Project Typer
UX, UI, Production Design, Front End Dev, Back End Dev, Photography
Role
Lead UX/UI Designer
Lead Front End Dev
01
01

Problem

Research & Discovery

Before initiating the design, we thoroughly researched our target audience, their preferences, and behaviours. This allowed us to understand what our users might need and expect from an e-commerce platform. We also conducted a competitive analysis to identify industry trends and best practices.

02
03
user interface (UI) design

Have almost too much self-belief

Following the structure established in the wireframes, we developed high-fidelity designs in Figma. These designs captured our brand's personality and provided an appealing aesthetic to our users. We ensured that every element, from the product images to the buttons, aligned with our brand and contributed to a cohesive user experience.

03
04
Prototyping & User Testing

Have almost too much self-belief

We transformed the high-fidelity designs into a clickable prototype using Figma. This prototype was then tested with a group of users. Their feedback provided crucial insights into any potential issues and areas of confusion, which we addressed in subsequent design iterations.

04
05
05

Style Guide

Tutto Bene Cups Style Sheet
Tutto Bene Cups Style Sheet
06
Development

Have almost too much self-belief

Once the final design was approved, we moved into the development phase. The website was coded using HTML5, CSS3, and JavaScript. This ensured a responsive design, accommodating users across various devices. We also implemented features such as a real-time product availability check and an instant one-click purchase option for returning customers.

06