Qi Ziyun

About

Qi Ziyun

About

2018-2019

|

Cuisinart
UIUX Design

Launched

Project

Cuisinart FPC-100 is a recipe based multi-function food processor. The project challenged to deliver a smooth and simple UXUI of knob-based screen interaction.

Role

UXUI Designer

Client

Cuisinart

Challenge and Goal

01/ Knob-based interaction

FPC-100 targets on high-end kitchen appliance market. It has a unique recipe-based complex system. Most of the interaction and controls have to be achieved by using the knob.


- Minimize steps and smooth the UX is the primary goal to create a user friendly experience.

02/ Recipe based user experience

Recipe-based is a key feature of PFC-100. Customized and imported recipes will be enabled in the future.

- Highlight "recipe" function.
‍
-Enhance connection between recipes and main functions of the machine.

03/ Multi-function kitchen appliance

FCP-100 includes both food processing and cooking functionalities. It covers a full experience for making a dish.

04/ Overwhelming accessories

There are over ten accessories for FCP-100 that covers most of the food processing or cooking methods.


- Appropriate instructions on the screen are needed to guide user install the correct accessory.

- Build a warning system for installing wrong accessory.
‍

Original Sitemap

User Flow Test

Solution

01
Build recipe-based UX

01/ Highlight recipe

Make recipe an independent category.

The change was made due to the scenario test:
‍
01/
It causes overwhelming user flows if a recipe needs both food processing and cook.

02/
Almost all the cook recipes include food processing steps.

03/
Users may confuse about where to find the recipe they want. Un-friendly user experience for making user think before use.

04/
User doesn’t care about if it is a non-cook or cook needed recipe.
‍

02/ Short cut between recipe page and setting page

Make short cut between recipe page and setting/ working pages.

As showed in scenario test:

It takes at least 6 steps from recipe page to a setting page. Users may check the recipe again during the operation. Repeated steps will become a huge pain point.

02
Simplify UX

Merge "Basic" and "Advanced" feature.
Make "Accessory instruction" an optional screen in the flow.

03
Accessory UX

A warning system is designed to help user pick up the correct accessory.

Wireframe

Final Sitemap

Flow test

Processing food & cook based on a recipe

Mood Board

01/ Futuristic Minimal

This mood board focuses on a futuristic yet modern minimal aesthetic.

This look will highlight typography and imagery features. Modern minimal is a popular style on screens due to its clear, neutral, minimal and function-centered style.  
‍
The type will use light sans serif fonts, which will utilize bold weights and size built for display to help establish hierarchy.
‍
The layout will highlight the beauty of empty space, allowing the typography and imagery to stand out on the page.
‍
A few colors will be applied to enrich/highlight some details of the UI.

02/ Luxury Elegant

This mood board focuses on a luxury and elegant aesthetic. This look will feature rich color treatments and highlight key information.
‍
Gradient is one of the most popular trends in UI and appliances with metal shells. It creates a sense of poetry, softness and calm.The dynamic colors and gradients give space for motion graphics.
‍
The type will use light sans serif fonts, which will utilize gradient elements to help establish hierarchy and an elegant aesthetic.

The layout will make use of abundant white space with colors, allowing the typography and icons to stand out on the page.

The final gradient on the page will match Cuisinart brand color(s) rather than the exact color values shown in the example images. A gradient can be represented with just a few colors to work within the the color limitations of the screen.

UI

next project

BioDesign Studio