UI/UX Design
|
System Design
|
Physical Device
Get back doing what you want
Team

Xinran Li
Sai Kukkadapu
Ben Wu

Duration

6 weeks

Home & well-being:

OTTO is a smart home IoT device designed to maintain your ideal environment as you transition between activities, saving your time and effort in preparing for your next task, especially for people working from home.

What Did I Do?

I took the main role of the research, system maps, information architecture, illustrations on storyboards, and interface animations, as well as all 3d modeling.

Otto maintains your vibes and saves time to prepare for your next task.
Problem Statement:
With the shift to remote work during the pandemic, many people struggle to maintain clear boundaries between work and personal life, leading to reduced productivity and emotional strain.


Our opportunity:
To address this, we desgined an Internet of Things (IoT) solution that automates and optimizes home environments, fostering a healthier work-life balance for remote workers.
Beyond the overall system, our main focus is the tangible interface on the controller.
My design challenge:
In the Otto project, my main task was to design a non-traditional interface using a tactile controller and round screen. Unlike traditional web or App design, I needed to run rounds of gesture and storyboard userbility tests to explore and refine the most intuitive interactions for users.
1. Research
+ Problem statement
+ Survey & Interviews & Photo Study
2. Insights
+ How Might We Statement
+ User Journey Map
+ Design Direction
+ Quote & Insights
3. System Design
+ Eco-system Map
+ User Flow Map
+ Storyboard
4. Final Design
+ High-fi Prototype
+ Concern Refelction
5. Reflection
+ What I Learned
+ What Was Challenge

Light IoT
We consider three elements of lighting: COLOR, SOURCE, and BRIGHTNESS.
- Only artificial lights can change colors
- Natural light is active while artificial lights are passive
- Brightness can be used functionally (such as while reading,) or ambiently (watching movies)

Sound IoT
We consider three elements of sound: ALERTS, AMBIENT, and NOISE.
- Urgent sounds such as a fire alarm,  doorbell, or a baby crying would not be filtered out
-Pleasant ambient sounds help promote awareness of the environment
-Noise pollution which interrupts well-being is blocked

Climate IoT
We consider three elements of lighting: HUMIDITY, TEMP, and AIR QUALITY.
- Humidity may differ based on seasons, scenarios, and individuals.
- Overall the ideal room temperature is 68F, but the ideal temperature may differ based on seasons, scenarios, and individuals
- The default air quality level is anything lower than 100 AQI, while an AQI higher than 100 may cause health issues. Also, personalized settings to address allergies and smells.

Research:
We dig into work-from-home daily activities during the pandemic.
As the pandemic pushes work into the home,  our research methods addressed participants' definitions of home and well-being, their feelings and relationship with home and home members, and their daily activities in the home.
35+ participants aged 16 to 50

Question: What are your likes and challenges in working from home?

I noticed that they mentioned a lot about Noise, light, air, and climate. These subtle environmental elements have a significant impact on their mood and productivity.
4 in-depth interviews with individuals working from home, asking them to map out their floor plans and walk us through their daily routines.

Question: What are their daily routines at home?

I noticed they would intentionally separate their home by activities and tasks. Specially distinction is easy, but the environmental distinction is hard.
8 Photo studies on participants' home spaces and emotional connections.  

Question: what do your work-from-home spaces look like?

This helped us uncover what their environments look like and what elements influence their work-life balance. I noticed most of them were using some smart home devices like Alex to help them focus.
In summary of the research, here are the findings and interview quote highlights:
Blending bundury
Remote work makes it harder to separate work from personal life.
Task transition
Many find it frustrating to set up and maintain routines for a comfortable space.
Smart home devices
Most participants live in urban apartments with smart home devices.
Shin
20-year-old college student

Lives in a studio in an urban city.
Cherishes his privacy.
Akhila
27-year-old Works  from home

Lived in a townhouse with three other people before moving into her current 1B1B apartment.
Kristy
16-year-old High school student

Lives in a 2B2B apartment with her parents and shares a room with her sister.
Dominic
41-year-old Full-time professor

Lives in a three-story house with three 5-year-olds and his wife.
Insights:
How might we help individuals seamlessly transition between tasks while maintaining an environment that supports their desired mood without distraction?
Imagine working from home. Setting up your space takes effort, and constant changes around you make it hard to focus. By improving these in-between moments and maintenance, we can make the day feel easier and more enjoyable. Our goal is to design a system that smoothly automates these transitions and maintains them.
Design Opptunities
Our goal is to streamline transitions, as in-between moments at home greatly impact well-being. We developed three design principles, each derived from key insights from our interviews.
Distinction
Create an intelligent system that could adapt to users’ existing behaviors and environments
“I always aim to separate my work and home life to help create a space where I can truly be myself.”— Akhila
Autonomy
Create clear distinctions between tasks while ensuring smooth transitions.
“I don’t trust my Google Mini, I don’t know when it is listening? But whatever.”
— Kristy
Adaptability
Ensure system processes are transparent and give users full control to orveride.
“I wish it could streamline my daily routine, not like add other things to me””
— Shin
System Design:
We defined environments by the atmosphere. Humans perceive space best with sight, hearing, and touch. Thus, we built three IoT scenarios for light, sound, and climate.
IoT System Map
We valued users' input and consent before switching their environment to maintain autonomy with this smart home. After the initial input, such as "I want to work," the IoT would loop between gathering environmental input, adjusting to maintain output, and checking to maintain that until the user changes their environment parameters.  It's more about changing the environment to meet human needs.

Together, these components work in a continuous loop, adapting the home environment to support Jun's need without requiring constant user input.
User flow Map
The user adjusts the environment via a controller, selecting presets or fine-tuning settings. Sensors continuously monitor conditions and send data to the hub, which processes both user input and real-time data to regulate the room, ensuring a seamless, personalized experience.
The Sensor
The sensor collects environmental data, such as light, temperature, and sound, and sends it to the hub. This information helps regulate the room’s settings automatically for a more comfortable experience.
The Controller
The Otto Controller has two main features: switching modes and adjusting individual items. It lets users change the overall room settings, like lighting, sound, and climate. Additionally, it works like a “find my device” tool, allowing users to fine-tune specific items, such as adjusting a single lamp.
The Hub
The hub is the central part of the system, storing data collected by the sensor and tracking changes made through the controller. It processes this information to adjust and regulate the room’s environment.
Usability test
To understand our system, we need to test each device, explore their interactions within the system, and analyze how users engage with them.
Our IoT system consists of three devices, so we focused on understanding whether users could grasp their relationships and effectively utilize them in different scenarios.
Since we designed the interface for a round display, we needed to refine the color, layout, and visual gestures to enhance interaction and provide clear visual feedback, ensuring better adaptation to the circular format.
We tested the shape of the hub, the size of the controller, and the interaction between the controller and sensor. By considering various hand sizes, we determined the optimal diameter for comfortable use.
Final design:
Our final design includes: a system of Sensor, Controller, and Hub
Sensor
Climate, light, and sound data is collected from your space and sent to the hub for further processing.
Controller
A universal dial that centralizes smart home devices for you to adjust. The go-to device to select scenes.
Hub
The logic processor of Otto. Process environmental data and commands your smart home ecosystem.
Controller
The controller can navigate between environmental modes as well as interact with individual products. The controller tells the hub what the user does so that it can change the environment. The controller is also a universal dial that lets you control everything in your smart home from one place and fine-tune your surroundings.
Create a mode
When creating a mode, users start off with a general set of parameters. To create a mode, simply choose a preset that best matches your desired mode. Here is our present environment. We used color and abstract terms to depict a setting, rather than the term "study/work mode."
Fine-tuning
After that, users can fine-tune more niche details of each mode. Twist and squeeze the controller to adjust ranges and values for the mode and save.
Gesture interface
Otto is based on the gestural user interface and some graphic interfaces. By simple physical touch to manipulate and interact with digital information, Otto minimizes interference and maximizes accessibility. The input of the gesture interface is the simplest and most intuitive actions: twist and press. The result is haptic vibration as well as a visual screen interface.

Our gesture interface aims to:
- Lower mis-touching
- Physical attachment
- Framework for Familiarity
Sensor
The sensor serves as the data collection for Otto. Sensors gather data from the environment and send it to the hub, the central processor of the IoT.

Sensors can be placed anywhere within the user’s space. Users can attach sensors near their activity areas and select what the interface senses to avoid inaccurate data (due to heaters or windows).
Onboarding
Setting up Otto is as simple as pairing your sensors with the Hub by snapping the two devices together.

Once paired, twist and squeeze to select what the sensor monitors and place it anywhere in your space.
Sensor Element
To ensure data is accurate, users can decide what each individual sensor is monitoring. LED indicators will inform users what the sensor is currently monitoring. Ex. a sensor near a heater will not monitor climate effectively.
Hub
The Hub is the logic processor of Otto and decides which devices need to be active to maintain homeostasis. The hub processes the environmental data captured by sensors and sends commands to the smart products based on the changes the user makes to the controller.
Speaker
As the central logic of the IoT, the hub is supposed to blend into the background. However, the hub can also be a speaker decorating their space. And if the sensor senses any danger, the hub is supposed to sent the message.
Data visualization
The hub also stores data on running products and visualizes the frequency of usage of modes. When the user attaches the Controller to the Hub and twists it, the walls of the Hub light up and visualize Otto’s usage history. Users are able to see which modes are used most often in different timeframes (indicated on the screen of the controller) via proportion diagrams.
Check our video ⇀
Reflection:
‍learned to integrate design and system thinking, creating cohesive experiences that balance technology, user control, and trust.
I learned to align user gestures with digital feedback while simplifying data visualization to avoid overwhelming users. This project also reinforced the value of collaboration, as our team combined research, interaction, content, and visual design. Working alongside specialists deepened my ability to embrace diverse perspectives and collaborate effectively.
Interaction on non-traditional screen
Designing for unconventional displays required careful consideration of gesture-based interactions, ensuring intuitive user control and seamless feedback.
Ergonomic on physical interaction
Understanding how users physically interact with the device helped refine gesture comfort, accessibility, and usability, balancing digital feedback with tactile input.
Team collaboration with designers
Working with specialists in content, interaction, and visual design reinforced the importance of cross-disciplinary collaboration in creating a cohesive user experience.
Back to top
Next Project