VISUAL DESIGN, MOTION GRAPHIC, PROTOTYPING, INTERACTION DESIGN


Intro

Electrolux Oven User Interface

We were asked to design and develop the Electrolux web style guideline and apply it to the next generation Oven User Interface. Hence, the style guide can be utilized across different platform when designing for different screen size such as traditional mobile phone size and unusual TFT screen size.

Inputs:User Interviews, Consumer Segmentation, Competitor Analysis provided by marketing people.

Role: Trend Research, Animation, Interaction Design, Prototyping

Key Challenges

  • • We do not have an exisiting design language to follow.
  • • The screen size and ratio is unique.
  • • Design should still looks elegant after 5 years.
  • Another Output

    Prototype for Test

    We took a workshop about prototyping in QT environment since our engineers were developing in QT. Fortunately, I learned QML through this process which is very similar to HTML. However, in the beginning, to present the concept to the team, I choose Priniple and After Effects.

    Low Fidelity:

    by Principle

    Full Simulation

    by After Effects

    The Process


    The Design and Research Process

    How I made each design decision through the journey. We were fed with customer research such as customer segmentation and persona. After these in mind, I first started with trend research, so I am able to cover key trend and design words to develop a web style guide framwork.

    Visual Design | Research

    Trend Research

    It appears you don't have a PDF plugin for this browser. No biggie... you can click here to download the PDF file.

    Check Web Style Guide (Open in a new tab is recommended)

    Visual Design | Moodboard

    I led the design workshop for this project. Prior to the design workshop, I prepared all the material including trend research, moodboard, interaction framwork, initial visual exploration, interaction concept and motion graphic.

    Task analysis | Scenario

    Interaction Framework based on User Research

  • Scenario1: Clark is a first-time user, he connects oven to power, after installment. He is already very tired today. He plans to buy steak for tomorrow dinner.
  • Scenario2: After coming back from grocery store, Clark quickly goes through all the function then selects bake function which he has used in the old oven.
  • Scenario3: After Selecting Bake function, he checks the default temp for Bake function, he wants to use maximum temp to save time every time.
  • Scenario4: Everything set up, he wraps up steak then put it into oven to start. At the same time, he starts to prepare his salad.
  • Scenario5: Several minutes later, he can smell the flavor of the steak. He glanced at oven from time to time to check whether it is working properly.
  • Visual Design | Framework

    Initial Exploration of Visual Components and Interaction

    As I mentioned before, first key challenge is that we do not have any design language to follow. What's more, the sreen size is very unqiue. So I start my initial Exploration. Basic questions like whether to use icon, how big the font should be, which background is compatible with black glass is considered.

    "Material Design" Language: Judged to be not suitable to this screen size.

    Icon Based: Judged to be old and main-stream.

    Circular Element (time control | temperature): Judged to be old and main-stream.

    Circular Element: Judged to have usability issue(not big enougn size for rotation).

    Visual Design | Concepts

    Visual Concepts Based on Initial Exploration

    Drum

    Gradient

    "iOS10" UI: Big Bold

    Vintage Red

    "Ruler" UI

    Interaction Design | Concepts

    Interaction

    Interaction Concept

    Awake:

    Light Swipe

    Feedback:

    Border Animation + Wave

    Transition:

    Opacity + Type in effect

    Progress Indication:

    Extension

    Interaction Design | Animation

    Awake Mode

    Icon:

    Snappy Line

    Icon:

    Snappy Line

    Icon:

    Particular

    Interaction Design | Progress Indication

    Motion Graphic

    Motion graphic is not there just for cool, it is there for a purpose. In addition, we realize micro interaction as a big trend through research.

  • For better communication with customers.
  • Enjoy the process, feel the happiness of controlling time and temperature.
  • It is all about BRAND STRATEGY.
  • Steam:

    After Effects

    Flame:

    After Effects Trapcode