Tuya Smart Bulb
Enhancing visuals and gestures for a seamless experience.

Context
The Smart Bulb App allows users to control smart lighting devices remotely. It offers features like adjusting brightness, changing colors, setting schedules, and creating automation scenes.
My Role
Designer & Researcher
My Contribution
UX Design, UI Design
Timeline
February - March 2022
User Story
I'm excited to try out my new smart light bulb after downloading the app, but I'm frustrated and confused because the adjustments in the app aren't working.
The Problem
The inconsistencies in the app hinders an intuitive and efficient user experience
How might we
...make this a more delightful experience?
...reduce the cognitive load on the user?
...improve the capabilities for user control?
...redefine and improve existing features?
The Solution
Restructuring and giving the user a more fluid and visually appealing control experience

Solution #1
Simplifying color changes with consistent gestures
-
All modifications uses the same gestures
-
A consistent visual that reflects live changes
Solution #2
Creating a easy and simplified design system
-
Clear focus on main component
-
Clear hierarchy and division of elements


Solution #3
Quality of Life Improvement to existing visuals
-
Visuals are in-line across the brand
-
Easy to make modifcations
Problem Discovery
The smart bulb app contains the basic essentials needed, but also has unique features and visuals that does not contribute to making the experience more friendly.
Inconsistent design system and lack of visual contrast and hierarchy.

User Flow
Removing one of the screens and defining a clear goal for the user when using the app for the first time.
Interchangeability and Necessity

Design Sprints
Within a short timeframe, I swiftly created multiple visuals at a basic level to find what would be the best fit for adjustment settings.




Testing & Improvements
Based on various critics from my peers and mentors. I continued making changes to the designs.
2 Major Improvements I made in my design.
Easy Interchangeability between the screens
Created a tab bar to easily switch between the other adjustment options


Overhauling visuals and preset creations
Making better accessibility to creating new presets and having more consistent color optics.


Final Designs
The Final Screens

Reflection
Key Learnings
The Design Process is Iterative
With a background rooted in design but limited experience in product design, I struggled to balance usability with creativity. There are multiple ways to arrive at a solution, and throughout this process, I continuously iterated and designed different ways for users to interact with the product, incorporating critiques and feedback from my peers.
There's Always More To Be Done
For this project, it was mean't to be a quick exercise to prepare us in finding new design solutions in an existing product under a one month time constraint. Given more time, I would also expand the sample size and demographic diversity in the feedback process to gain insights from a broader range of users.