Lumen

visual identity

design systems

ui design

prototyping

Industry

IoT Management

Company

Atomic Robot

Product

UI Kit + Prototype

Challenge

Atomic Robot was looking to expand its work into the IoT space and tasked the design team with creating a UI kit providing users custom management of their IoT devices. We worked collectively on each phase of this project, from research to wireframing tasks flows to the final design system.

Solution/Approach

Lumen Lights' key features include a responsive design system, onboarding flows, device configuration, support for Apple Watch and iOS Widgets, and more. With its modern style and interactive approach to IoT management, the app stands out amongst its top competitors and solves the most common pain points customers find when trying to set up and manage their many devices.

Problem

In a crowded market such as IoT device management, we have been tasked with researching the gaps that currently exist in the most popular apps and creating various design solutions that address these problem areas, which will come together as a new, cohesive app to stand up to the competition.

Goals

Create a cohesive design system using the Atomic Design System methodology.

Create a cohesive design system using the Atomic Design System methodology.

Provide customization options for users, such as device naming and organization.

Provide customization options for users, such as device naming and organization.

Provide intuitive controls for adaptive lighting and individual light settings.

Provide intuitive controls for adaptive lighting and individual light settings.

Support for iOS widgets and App Watch.

Support for iOS widgets and App Watch.

Research

Top 5 Criteria When Choosing Smart Lights

Reliability
Compatibility, Easy Setup
Value/Price
RGB Saturation/Color
White Accuracy

Smart Light Management Pain Points

Connectivity issues, HomeKit can be unreliable and doesn’t feel native when devices lose connectivity to their hub or network
Apps not updating correctly with lights

What do you wish your lighting app could do?

Adjust brightness to match daylight easier to create scenes, and add new bulbs
Edit pre-existing voice commands personal floor plan upload
easier to see what lights are on and off

Competitor

Philips Hue

LifX

Nanoleaf

WiZ

Rating

4.5 • 41.9k ratings

3.9 • 5.8k ratings

4.4 • 22.1k ratings

4.7 • 30.7k ratings

Strengths

Able to sort rooms to maintain organization
Majorly improved UI - design improvement along with expanded features
Customization for users to make for a more personalized experience

Wide range of customization for users
A week view where you can schedule your lights out for the day
Can manipulate lights to be different colors and have different effects

Design is unlike one we have seen before with the lighted tiles
Customization is available to users
Has a learn page for users to learn more about their Nanoleaf’s products

UX is easy for users to understand and navigate
Provides multiple customization features
Lower price product, with an overall good review

Weaknesses

The UX does not make the sorting feature very obvious to users
Functionality of the old version was easier to understand
Customization complicates the app for some users who want a simple use

Setup process is very difficult and time consuming to link to both Wifi and HomeKit; becomes an issue when there are many lights to connect
Functionality issues in the app

Not intuitive app for users to navigate
App tends to crash and lights can no longer connect even after resets
Less customizable than previous apps - does not have a color picker

Cannot adjust a singular bulb once placed into a group
Issues with connection - hard to reconnect once disconnected

Cannot pick multiple colors to cycle through

Competitor List

Personas

Meghan, 30

Tech Engineer

Meghan is a curious tech engineer always looking for the best and newest releases of about everything. She is looking to improve the connectivity within her home and wants to be able to easily control all her devices in one place and customize her experience.

Goals:

Sophistication and efficiency
Easy access to all device settings
Long-term connection

George, 43

IoT Product Consumer

George works in tech, so he has some first hand knowledge of how IoT and smart devices work. He can usually figure most devices out on his own and thinks all IoT and digital products should be thoroughly tested before reaching the marketplace.

Goals:

Have devices connected quickly
Want the devices to work
Customization options

Information Architecture

Home Page

Save as Scene

Rename

iOS

Android

Delete Schedule

HomeKit

Google Assistant

Amazon Alexa

Rename

Change Location

Change Image

Change Room

Update Firmware

Replace Device

Remove Device

preset

take a photo

photo library

Light Adjuster

light adjuster

Light Adjuster

Room Light Settings

Individual Light Settings

Room Options

Light Options

New Device

New Scene

Select Room

Create Routine

Configure Scene

Routines/Automations

Scenes

New Routine

Floorplan

By Rooms

By Device

Scene Settings

Schedule Settings

Firmware

Manage Widgets

Sync/Setup Integrations

Support

About

Delete Scene

select/sync device

setup

preparing device

success

choose location

choose group

name device

home

color + brightness

whites + brightness

Scenes

Routines

Settings

All

UI Style Ideation

Lumen Lights

Smart

Sophisticated

Simple

TYPOGRAPHY

Lexend

STYLE

Heading

Screen Header

Heading 2

Heading 3

Heading 4/Input Text

Heading 5

Body 1

Body 2

Body 3

SIZE

WEIGHT

Bold

Medium

Light

Medium

Light

TYPOGRAPHY

Lexend

STYLE

Heading

Screen Header

Heading 2

Heading 3

Heading 4/Input Text

Heading 5

Body 1

Body 2

Body 3

SIZE

WEIGHT

Bold

Medium

Light

Medium

Light

Blurple Radial

#0E01A7 #04002F

rgba (14, 1, 167, 75)

Dark Blurple

#05012F

rgba (5, 1, 47, 100)

Light Blurple

#5A46FF

rgba (90, 70, 255, 100)

Bright Blurple

#8B83D0

rgba (139, 131, 208, 100)

Medium Blurple

#4A4867

rgba (74, 72, 103, 100)

Black 100%

#000000

rgba (0, 0, 0, 100)

Figma Prototype

View the full UI Kit and click-through prototype in Figma

Figma UI Kit

Prototype