Hero Landing Image: Renders of microwaves with the Titania interface.
* Render is meant to show the placement of the digital interface on an imaginary microwave.
Titania

A digital interface designed for microwaves to enhance productivity while delivering a swift and simple user experience.

Role
UX Researcher & Designer
Duration
Jul '20 - Dec '20
tools
Figma, Fusion 360, Draw.io, Miro, GoodNotes
Key skills
Research, User Interview, Ideation, Information Architecture, Sketching, Wireframing, Design System, Visual Design, 3D CAD Modeling, Prototyping, Usability Testing.
Context
The Problem

In our busy lives, microwaves help us save time by providing quick access to hot food, but there have been times when we end up fidgeting with the microwave options, exhausting more time than required.

Heating something in a microwave can be relatively simple, but when you try to figure out how to heat something simple, it leads to a confused and irritating experience.

The Process
Image of process followed during the project
Research & Discovery
User Interview Takeaways

5 candidates interviewed were in their 20s and exhibited a busy lifestyle, with few in graduate school and few in the industry.

Affinity map from the user interview
Button Surplus
Users mostly used the quick start, stop, and timer buttons and barely used rest of the buttons on the interface.
Guesswork
Users normally started with a hit and trial method; eventually settling with the best-fit parameters for heating their food.
Repetitive
Users, usually, consumed similar food everyday and hence rely on a set pattern for heating them.
Support
Whenever the microwave had issues, a poor support system caused a confused and agitated experience.
Empathy Mapping
Left arrow
Right arrow
Personas

The Aspiring Entrepreneur

Persona One: Arjun

The Efficient Software Engineer

Persona Two: Alex

The Lazy Graduate Student

Persona Three: Lily
How Might We ....
make the microwave less mentally intensive?
Decrease clutters from the interface to make the experience as less intimidating as possible.
Quick settings or options for faster task completion.
Don’t make the user do the math. Enable the microwave to do as much work as possible.
allow users to solve problems conveniently?
Show solutions to common issues on the microwave interface itself.
Guided fix for solving the issues by themselves.
Tech support.
If still unable to fix the issue, provide tech support information.
enhance productivity while reducing confusion?
Reduce guesswork by liberating users from cognitive load.
Allow customization for utilizing the most from a personalized array of tasks.
Reduce repetitive tasks by enabling users to capture those processes in a button.
enable users to feel at ease while using the product?
Have a minimalistic welcoming screen to make the users feel calm and in control.
Aesthetically pleasing and straightforward interface.
Have feedbacks, like haptics and visuals, to all interactions to reduce misclick and confusion.
Goals
Simple

A less cluttered interface reducing confusion and making the user feel welcomed and at ease.

Productive

Maximum information, minimal interaction, and quicker access to task completion.

Consistent

Minimize confusion by delivering a uniform and clarity-driven interface creating a trustworthy environment.

Liberating

Optimum output with less involvement, liberating users from exhausting time at the microwave.

Intuitive

Easy to understand interactions and actions demanding less conscious reasoning.

Aesthetic

A pleasing and responsive experience that users can navigate through seamlessly.

Competitor Evaluation

To gather a better understanding of the market and ensure my design ideas match the needs of the users, I browsed through widely sold microwaves over amazon, auditing products through user control and freedom, system status clarity, and minimal aesthetics. While evaluating multiple products, I observed products are generally falling under three categories.

Clean fascia but cluttered interface.

Minimal interface but lacked control and freedom.

Minimal interface but low visibility of system status.

Information Architecture
Sitemap
Sitemap of the interface
User Flow
Instant
Timer
Start +30 secs
Support
Left arrow
Right arrow
Sketch & Wireframe
Sketch

Iteration 1

Sketch Iteration 1: Standby and Home screen Sketch Iteration 1: Cooking DurationSketch Iteration 1: Controls using iPod style haptic scrollerSketch Iteration 1: Cooking & DefrostingSketch Iteration 1: Cooking Duration & TemperatureSketch Iteration 1: Defrosting
Sketch Iteration 1: Image showing options between an iPod style haptic scroller or a full touch interface

The initial idea was to have an iPod style haptic scroller serving easy timer settings and smooth scrolling while having a very compact and clean design.

However, soon, it was evident that using such scrollers to set precise minutes and seconds would require focus and meticulous finger movement, contradicting the very goal of having quick interaction to get the food heated. Hence, I decided to move onto a full touch interface and visualize how that would look like.

Iteration 2

Standby
Sketch Iteration 2: Standby
Homescreen
Sketch Iteration 2: Home Screen
Quick Start
Sketch Iteration 2: Quick Start
Saved food
Sketch Iteration 2: Selecting a saved food
Timer
Sketch Iteration 2: Timer
Power
Sketch Iteration 2: Power
Auto
Sketch Iteration 2: Auto Cook/Defrost
Settings
Sketch Iteration 2: Settings
Wireframe
Standby
Wireframe: Standby
Homescreen
Wireframe: Home Screen
Quick Start
Wireframe: Quick Start
Saved food
Wireframe: Selecting a saved food
Name
Wireframe: Saving name for a new food
Power
Wireframe: Saving power level for a new food
Duration
Wireframe: Saving duration level for a new food
New saved food
Wireframe: New food saved
Timer
Wireframe: Timer
Set power
Wireframe: Setting power
Auto
Wireframe: Auto Cook/Defrost
Settings
Wireframe: Settings
Guerilla User Testing

To receive feedback on the early-stage low-fidelity wireframe, a quick guerilla usability testing was performed. Critical critiques captured during the testing helped structure my next iteration process.

Naming & information can be better.

Settings categorization can be refined.

Not enough space for input fields.

Confusion between weather & cooking temperature.

Unclear mode state.

Unclear button state.

Design System
Frame & Grid Size
Custom frame size
I wanted the frame to align with the interface dimensions on traditional microwaves. With this idea, I browsed through products currently available in the market and averaged down on a frame size of (1128 x 2224) px.
Branding

Before picturing the interface's visuals, I wanted to visualize the key personalities that I am striving to deliver on the user experience.  

Based on Shakespeare's Midsummer Night's Dream, Titania is the queen of fairies. The name reflects strong will, independence, control, and power; attributes I viscerally picture my users feeling while using the product.

Style Guide

The interface, while not going too far from a traditional microwave, should be simple to its core to use so that it is less mentally intensive and boosts productivity by erasing confusion. The interface needs to enable users to reduce and enhance their activity through automation. Whether it's their first time using it or the hundredth, I want the user to feel in control and at ease while using it.

The experience needs to personify the same principles, act consistently, and function together seamlessly. An intuitive experience helps establish trust, and a product that its users can trust builds confidence and an emotional connection.

Moodboard
Moodboard
Color Palette
Color Palette
Typography
Typography
Components
Custom component: Display InformationCustom component: Setting controlsCustom component: Basic controls
Custom component: Cooking ControlsCustom component: Main screen controlsCustom component: Instant mode controlsCustom component: InputsCustom component: KeyboardCustom component: Fill up field
Visual Design
Homescreen

Use presets more? Or prefer timers? Or you want to decide it at the moment?

Lock in whichever mode you want to get welcomed the way you like.

Standby
Final Visual: Standby
Homescreen
Final Visual: Homescreen
Instant
Final Visual: Instant
Timer
Final Visual: Timer
Instant

Your own customizable presets. Save foods with personalized parameters. Express heat your food as long as 9 minutes with just a tap.

Express heat or Instant start without worrying about setting the right heat level. Auto automatically senses the food weight, moisture, and temperature to set optimal heat temperature to provide evenly cooked food.

Instant
Final Visual: Instant
Save Name
Final Visual: Setting name for a new food
Save Duration
Final Visual: Setting duration for a new food
Save Heat Level
Final Visual: Setting heat for a new food
Instant
Final Visual: Instant
Express
Final Visual: Setting name for a new food
Homescreen
Final Visual: Setting duration for a new food
Instant Start
Final Visual: Instant Start
Timer

Save time and guesswork from cooking and defrosting using Auto.

Auto does all the heavy lifting to provide optimal heating distributed evenly and thoroughly.

Timer
Final Visual: Timer
Cook (Manual)
Final Visual: Cook
Defrost (Auto)
Final Visual: Defrost
Defrost (Ongoing)
Final Visual: Ongoing
Settings

With customizations comes liberation. Feel at ease with a product that acts more to your likings.

Settings
Final Visual: Settings
Wifi
Final Visual: Wifi
General
Final Visual: General
Assistant
Final Visual: Assistant
Support

Save money and time using Smart Diagnosis.

Smart Diagnose
assists you in detecting and solving potential issues with your system.

Smart Diagnose did not fix your issue? The interface can display you a list of common problems with solutions.

Don't feel comfortable doing it yourself? This IoT-enabled device also enables you to fix your software-related issues over-the-air or schedule a visit right from the comfort and convenience of your microwave with the help of Tech Support.

About
Final Visual: About
Smart Diagnosis
Final Visual: Smart Diagnosis
Smart Diagnose
Final Visual: Smart Diagnose
Detected Problem
Final Visual: Smart Diagnose problem detection
Common Problems
Final Visual: Common Problems
Tech Support
Final Visual: Tech Support
Usability Testing
Testing & Iteration

At this stage, assessing the interface's usability was crucial to evaluate the interface's design and ensure that it is intuitive and easy to use.

For the usability testing sessions, I decided on conducting two rounds with five users in each round, to validate issues and test solution iterations. All the interviews were conducted in person on my laptop, and each interview lasted about 30 minutes.

The testing shed light on some critical, major, and minor issues, which helped shape the next iteration process.

Users found adding a new item to be confusing.
Users expected to have Express heating option in the Instant tab.
Before
Final Visual: Standby
After
Instant screen: After usability testing
Three dots after entering edit confused users.
Users felt the need to save changes before exiting edit.
Before
Final Visual: Standby
After
Editing: After usability testing
Start and stop mis-clicks due to same visuals.
Before
Final Visual: Standby
After
Home Screen: After usability testing
Things users appreciated
Home screen
Option to lock home screen to their liking - Instant, Timer, or Nothing.
Option to save their own food presets.
Saving name for a new foodAuto Cook/Defrost
Ease of cooking and defrosting with Auto.
In-device smart support system.
Smart Diagnosis
Concluding Thoughts
Learnings

The underlying vision of this project was to find a scope of improvement in the microwave user experience. While not getting too far from a traditional microwave, this interface aims at validating that the microwave user experience needs not be complicated to perform simple tasks. 

Interviewing users, capturing pain points through their behavior, comprehending their goals, and empathizing with their perspectives equipped me with the necessary ingredients for designing this concept interface.

Admittedly, one of the most challenging tasks was to distribute time judiciously. Deciding on which feature to include, prioritizing issues captured from user testing to focus on, and the uncompromising urge to push a design adjustment to make the interface a little bit better did get daunting. Nonetheless, peeping back at the core pain points I picked up during my interviews with five individuals always helped me adhere to my vision on why I started this project. 

What's next?

If I had more time in hand or if I were to continue on this project, I would love to dive deeper into understanding productivity through simplicity. I would love to make the interface even more straightforward with more customizations, lesser interactions, and higher accessibility.

Moving forward, one can make a lot of potential adjustments to this idea. Full fascia touch interface? Lesser buttons yet more information? Multi-informational button layers? At this point, the sky is the limit!

Sub-Heading Image: Render of a microwave with the Titania interface.
Due to the size of the prototype, here's your interactive link.
Check out the prototype
Titania
Section separator
Context
Section separator
Research & Discovery
Section separator
Information Architecture
Section separator
Sketch & Wireframe
Section separator
Design System
Section separator
Visual Design
Section separator
Usability Testing
Section separator
Concluding Thoughts