Website Page

Smeg Manual

Welcome to

ECF01

Model Name

Website Design

Smeg

INTRODUCTION

For the content design project, I developed this user-friendly website to guide people on the proper usage of the Smeg coffee machine, ECF01, based on its printed manual. For this project, I thoroughly studied Smeg's official manual and carefully crafted an intuitively simple step-by-step process. For the process, I used a 3D model of Smeg ECF01 to allow users to meticulously observe the model and simplify the information.

American Digital Design Awards 2023

AWARD

4 Weeks

DURATION

Solo Project

TEAM

ROLE

Art Directing

UX Research

Prototyping

UI Design

TOOLS

Figma

After Effects

Cinema 4D

PROBLEM STATEMENT

Despite the classic and best-selling status of the SMEG ECF01 coffee machine, which boasts an iconic design, there's a notable drawback.

SMEG continues to furnish customers with traditional paper-printed manuals. The frustration triggered by the complexity of information presentation, particularly concerning the intricate coffee extraction process, sparked my inspiration to devise an alternative solution. This solution involves a digital format, providing SMEG users with an interactive platform for a more intuitive and engaging understanding of their product.

DESK RESEARCH

Gathering Data from Existing Resources

I conducted desk research to gain insights into various user perspectives on the product's functionality, laying the foundation for the development of the manual website. To gather insights, I examined user comments and posts across diverse communities and online market platforms.

SUMMARY

Users struggled with setting up the machine.

Several users encountered similar difficulties even when diligently following the provided instructions.

The majority of users face challenges with the functionality of the espresso machine.

SOLUTIONS

Upon analyzing the extracted summary, I devised three solutions to address the predominant challenges experienced by users.

Offering an intuitive introduction and guidelines for setup

By incorporating visual aids such as images of the model and icons indicating the specific locations to press, I have developed simplified and organized setup guidelines for users experiencing difficulties.

Optimizing Information Flow

To solve information complexity and minimize overwhelming text amount, I streamlined each screen's content and implemented a clear hierarchy for information presentation with visuals.

Simple Information for Functionality

Utilizing subtle animations and minor interactions like glowing icons or cubic transitions, I restructured the information on the machine's functionality, ensuring a user-friendly presentation for easy comprehension.

USER PERSONA

I created two user personas to highlight the challenges associated with using an unorganized physical manual for the coffee machine, illustrating potential issues that users may encounter.

CONTENTS DESIGN

Systematical Development of the Machine Manual Content

Drawing from the original physical manual, I systematically organized and crafted an enhanced version for the website, focusing on simplification. Additionally, I introduced new information, including a 'First Aid' section not present in the original document, to prioritize user safety and deepen understanding of the machine.

WIREFRAME

Exploring Optimal Layouts for Easy Comprehension and Effective Design through Practice

Through experimenting with various wireframes and incorporating valuable feedback, I explored to identify the most intuitive layouts.

HOME SCREEN FOR INTRODUCTION

This page provides an introduction to the accompanying accessories and highlights the main functions of the coffee machine before guiding users to the next page.

Primary font - Vancouver

I selected the Vancouver font as the primary typeface for its curvy edges, mirroring the design elements of the espresso machine.

Secondary font - Chakra Petch

Chakra Petch has high legibility with an iconic design, so I chose this typeface for body text. In addition to this, it's an appropriate typeface to contrast with the primary typeface.

Color Palette

To accentuate the website's simplicity, I opted for a single highlighted light blue color, complemented by greyscale tones for secondary elements.

VISUAL SYSTEM

OBSERVING AND ANALYZING MACHINE COMPONENTS

I integrated a 3-dimensional representation of the coffee machine, providing users with a detailed and interactive exploration of its components. This approach not only facilitates a meticulous understanding but also adds an element of enjoyment to the interactive control of the 3D model.

GUIDING USERS STEP BY STEP WITH VISUAL ELEMENTS

To prevent confusion, each page presents bite-sized information, guiding users step by step through visual elements and interactions.

In addition to incorporating information from the original manual, I included first aid details that were previously omitted. This addition ensures that users, in the event of injuries resulting from machine use, can take appropriate actions for their well-being.

GETTING FIRST AID INFORMATION

MOBILE VERSION

SITEMAP

Establishing a Structured Order for the Espresso Machine Manual

I created a visual representation of the app's structure, providing users with a clear and intuitive navigation system to easily access desired features.