Beta
SMart lightingControl
Through the LIFX app, users can customise their lighting experience, controlling power, brightness and colour, room grouping, advanced features, and ecosystem integrations.
Client
LIFX is a global smart lighting company known for its app-controlled lighting products.
Design Team
Solo UX/UI Designer (me): End-to-End Product Design
My Contribution
User Research, Research Synthesis, User Persona, IA mapping, Design Iterations, Interactive Prototype, Usability Testing
Timeline
2 months
Context
Where the friction began
The LIFX app's lighting control originally lived on a single screen (A), for both single-zone and multi-zone products. As the business expanded its multi-zone product line and introduced more advanced lighting capabilities such as colour blending and zone-level control, a more advanced, feature-rich control screen (B) replaced the legacy version in a subsequent release.
After the rollout, a subset of users expressed frustration and usability issues. After joining the team as the UX designer, I started digging into the feedback to understand what was really driving their concerns.
Legacy control
B. Advanced control
Discover
Starting with the right questions
Alongside reviewing user comments and Firebase analytics, I conducted two surveys combining open-ended & closed-ended questions: one for users who reverted back to the legacy control (Survey A) and another for users of the advanced control (Survey B), aiming to understand the specific factors driving their experiences.
Survey A - 214 participants
Survey B - 341 participants
Key Insights
What the Data Told Us
#2
49.6% of new screen users were dissatisfied
Main pain points: brightness slider (88%), white wheel (57%), precise selection (38%), and interface complexity (35%).
#3
Reverters were power users, not casual ones
Users who switched back to the legacy screen averaged 9 devices (SD= 7.15), the opposite of what was expected.
#1
Core interactions dominate
Brightness, power, and white temperature account for the vast majority of daily use, regardless of product type or user segment. Visualised usage proportions based on survey data:
What users were frustrated by
Brightness Control
Slider too small, off-centre
Lacks precision; hard to make fine adjustments (e.g., 1–3% brightness)
Slider jumps / is overly sensitive, making gradual changes frustrating
Lacks haptic feedback or visual cues for precise control.
White/Colour Selection
Wheels overly precise for daily use
Difficult to select desired kelvin (e.g., 2500K)
The circular white wheel is less intuitive than a linear warm-to-cool slider
Lack of quick access to commonly used colours/temperatures
Interaction & Layout
Layout feels cluttered, overwhelming, and less tactile
Core daily tasks (brightness, white selection, power) are given lower priority than the advanced functions
Small touch areas make controls harder to use
Segmenting the user base
White-only Users
Brightness & white temperature
Frequent daily adjustments
Needs speed and precision
Clean interface with essential functions only
Rarely explores advanced features
Palette Users
Saved presets & scenes
Relies on saved favourites and presets
Occasionally tweaks & saves
Changes scenes based on activity or mood
Structured over freeform
Advanced colour Users
Atmospheric & aesthetic
Need granular colour adjustments (e.g. saturation)
Prefers manual over presets
Occasional zone-level adjustments
Confident with advanced tools
Strategy
Design principles
With these insights, my role as the designer is to find a solution that retains key user preferences while still supporting more advanced features aligned with business growth objectives.
Restructure
Control hierarchy
The most-used controls are always one thumb away. Everything else waits until users need it.
Always visible: Covers ~80% of daily interactions
Power
White Wheel
Brightness
1 tap to reveal: On-demand access
Colour Wheel
Palette
Advanced wheel
Zones
Themes
Effects
2 taps to reveal: Low-frequency, power-user features
Gradient
Blend
Radial
Picker Combination
Ideation
Design Iteration
1) Shaping the wheel
The legacy scroller had strong user attachment, so it stayed. The new wheel was designed around it, borrowing the circular language of the brand logo to deliver a more intuitive colour selection experience that still felt familiar.
Legacy wheel
+
Brand logo
=
Final solution
2) Layering the controls
The focus was on simplifying the control layout by moving advanced controls to a secondary tier, refining the placement of core features, and improving visual balance.
Outcome
The final design
Switchable layout
Supports Wheel, Palette, and Multi-colour users through separate layouts tailored to their needs, accessible via a switchable tab
Ergonomic brightness scroller
A centred grey scroller provides granular control matching daily behaviour. Haptic feedback at key thresholds.
Dial or tap to select
Preserves legacy dial-based interaction — rotate to browse, tap to select. Familiar muscle memory retained.
Colour selection
(wheel)
Label-free tab bar
Replaced text labels (White, Colour, Themes, Effects) with intuitive icons to reduce visual clutter & localisation challenges
Dialling segments
The white wheel retains legacy dialling segments to support the most common use case, with defined presets and familiar dial behaviour that allows gradual adjustments without requiring precise finger movements. Its linear form reflects the warm-to-cool transition.
Unified geometry
The white segment wheel is refined to align with the 'Colour' wheel layout, ensuring visual consistency.
White selection
(wheel)
Centred layout
A centred layout creates visual balance and strengthen clarity.
Brightness control shortcut for Palette & Multi-colour users
As palette presets include predefined brightness values, the need for precise brightness control is reduced for Palette users.
Colour selection
(palette)
White selection
(palette)
Advanced settings
Colour blending mode and picker combination settings are tucked into a tertiary panel, as they are low-frequency actions.
Colour selection
(Multi-colour)
White selection
(Multi-white)
Zone selector
The zone selector remains visible alongside the layout selection tab,. Users can access the panel to select zones of the lighting product and assign different colours.
Colour selection
(wheel)
