top of page
tittle banner

Redesign mobile app for Tittle light

Tittle is a highly interactive LED light cube that allows users to customize frames and select and play light animations by their smartphones.
 

During the time I was working in Clarity, we worked closely with the hardware team in this IoT project. We helped Tittle build the mobile app and worked continuously with them to design and develop more functions.

My roles
Date

Research 

Wireframe

UI Design

Animation

Prototype

2016, 3rd Quarter

Challenges
Revamp on the current design to make the mobile application looks modern and intuitive to use. it should be as natural as we use a remote to control our television or air conditioner.
Approach

First, I have discussed with the title light team to understand the product and gather their requirements & expectations for the new design. Then, I have conducted an expert review of the current design and created a strategic design plan. Here are some guidelines I have kept in mind when doing the design

  1. Simplify the control; users should be able to play with different feature with one tap
     

  2. Let user focus on the functionality without distractions
     

  3. User can scan all the primary function at a glance
     

  4. Easy to use
     

  5. It should provide instant feedback for user's actions 
     

  6. Provide sufficient hints and education for the new user
     

  7. Other than one tap to play, make sure users will be able to discover secondary functions easily.

Solutions

I have created sitemap and wireframes to illustrate my initial concept.

tittle-IA.jpg
TW-05.png

Once client have confirmed with the structure and design direction, I have created high fidelity wireframes with different colour schemes, at the end client have selected the black theme as the colour scheme of the application

Main screen - theme neutral 1.png
Main screen - theme fresh.png
Main screen - theme blue.png
Main screen - theme neutral 2.png
Main screen - option 4a.png
drawer1.gif
drawer2.gif

Animation design for open folder

Animation

Icon animation - One tap to play feature on tittle light

iconanimation.gif
light.gif
weather.gif
emoji.gif
clock.gif
mood.gif
music.gif
product2c.png

Setup instruction

blink.gif

Scan device

device-settings.gif

Splash Screen animation

splash-screen.gif

Final UI design

Main screen.png
color picker v2 fave color.png
moodlighting weather folder.png
software is up to date.png
Main screen - lamp on.png
device setting copy.png
paint copy 4.png
paint - frame.png
Main screen - new color picker (fav colo

View next case study :

© 2024 Natalie Wong

bottom of page