top of page
SYLVANIA Smart Lighting Mobile App UI

Problem

Project goal is to create starting points for Android UI/UX and look outside the box on ways to control RGB and soft white light bulbs with an interactive color picker controller. The interactive color picker design is the key piece and the primary focus for this project.

​

Solution

The color picker design solves several problems with a new diamond shape. The user can now land on a perfect red, blue, green, or warm yellow color. The design also lends itself to have smoother interactions and chooses between colors.

​

Role

Research, Explore, Design, Define, Test, Implement, Test

​

Research and Discover

During the research phase I found hundreds of different color pickers but only tested a few and found the angular designs to be my favorite. My goal from the start was to make it easy for the user.

​

16,777,216 is the number of RGB color possibilities.

color_picker_research.jpg
shape_color_exploration.jpg

Exploration

I had several concepts but gravitated towards the triangle and diamond shapes.

​

The square color scheme below became the base of my design and the diamond is the shape that worked best for the user.

Color_quadrant exploration_01.png

Exploration

The core colors to the right define the color controller, RGB options and a clear path of up and down for warm and cool light.

Color_quadrant exploration_02.png
Color_quadrant exploration_03.png
Color and Light_controller_edited.png
Capture_03.PNG

Design

A method for selecting colors to be projected from a lamp is provided.  In one embodiment, the method includes pairing a lamp with a graphic user interface having a diamond shaped perimeter grid of selectable light color settings surrounding a selectable dimming setting. The diamond shaped perimeter grid including four color based segments, wherein each of the four color based segments provides a different family of colors.

Design

Defining the light controller

design and functionality.

​

Below are the two designs that had the strongest impact.

color_picker_update.png
color_picker_update_02.png
Capture_02.PNG
Capture.PNG

Design

The first phase of the UI explored a dark background

SMART_plus_s8_mockup_RGB_welcome.png
SMART_plus_s8_mockup_RGB_lounge.png
SMART_plus_s8_mockup_RGB_controller.png
SMART_plus_s8_mockup_RGB_new_scene.png
SMART_plus_s8_mockup_RGB_groups.png
SMART_plus_s8_mockup_RGB_favorites.png

Design Continued

The second phase of the UI explored a white background and connected with the SYLVANIA brand. At this point we handed the project off for agency help and development. 

Ledvance - Phase1 - 25June2018-10.png
Ledvance - Phase1 - 25June2018-12.png
Ledvance - Phase1 - 25June2018-14.png
bottom of page