Caffarel – Mobile Design

Category

Year

2021

Company

caffarel-top-banner

The client

From a pioneering chocolate laboratory in Turin, Caffarel became a brand recognized in the world of "gusto" as an ambassador of Made in Italy. For 200 years, Caffarel has been a chocolate-manufacturing company, inventors of well-known "Gianduiotto".

Project requirements

  • B2B platform Caffarel asked for a customer-facing application to strengthen B2B relationships. The mobile app allows customers: - to discover recipes and how to use the Caffarel products; - to visit the product catalog and its related info-commerce.

Design process

HLD Functional Architecture

architectureHLD-caffarel@2x

Information Architecture

The mobile app organizational system has the same Caffarel website's contents hierarchy to address users' needs by providing only necessary information.

information-architecture-caffarel@2x

User flow

Navigation from the main view to pre-order

caffarel-userflow@2xuserlfow-legend-caffarel@2x

Navigation from the main view to video recipe

caffarel-userflow-2@2xuserlfow-legend-caffarel@2x

Wireframe

caffarel-wireframe@2x

Look and feel

The Design System is related to the website already in use by Caffarel. The User Interface has the layout, colors, typography and interaction of the website to grant the same experience above all touchpoints.

website-caffarel

Design System

Typeface

1-typeface-caffarel@2x2-typeface-caffarel@2x

Colors

colors-caffarel@2x

(Some) Atoms and Components

components-caffarel@2x

Mobile App Caffarel

The B2B platform consists of an administration dashboard and a mobile app for tablets and smartphones. The mobile app can be downloaded from the most common app stores and users can use it behind authentication.

tablet+phone-caffarel@2x

Info-commerce feature

The product catalog contains all the products divided into categories (Pastry, Chocolate, Ice cream), and for each of them there is a product detail page. Users can add to the shopping cart all the items they prefer and complete the checkout to generate a pre-order automatically. The pre-order is sent to the related supplier by email.

prodotti-caffarel@2x

The University of Chocolate and video-recipes

Caffarel has founded the University of Chocolate to promote training courses for pastry chefs, create new recipes and experiment with new products. Videos organized into categories will be available to users of the application.

video-caffarel@2x

Push Notifications

A section on the app collects all the push notifications received by users. They may refer to new videos published, new products in the catalog and updates about the pre-orders.

notification-caffarel@2x
mockup-caffarel