For this project I decided to work with an app that every time I use it I struggle with the interface. It´s an app called Hue made by Phillips, it´s an app that controls their proprietary light system. It is a system so useful but once you install the lights and then the app you feel it´s really complicated to use, it is not but it could be improved a lot, and here it´s my take on the UX.

This first image in the top is the BEFORE image of the app functionality.

Early sketches

Flux Diagram
What I did first was to think in the most important options that the app has, and I did an abstract of that with the help of a flux diagram.
Design Elements
Because I work a lot with motion graphics, and motion graphics is an área of design that focuses into abstraction, I started thinking in what elements could be helpful for a representation. A house, the sun and the moon.
Splash Screen
With that in mind I started thinking, what if the app could be 100% visual, to forget a little bit of the UX that it´s focused in buttons and boring elements. I went to study a the google website https://material.io/design/ that helps you see tendencies and good design practices to develop the idea. The idea that I landed was an abstraction of light and darkness through the use of the sun and the moon, my idea was to control those element through the app.

Illustration

My design process after the sketches is to go either to Photoshop or Illustrator to start building pieces, for this project I went to Illustrator.

Template
Gradient and Footer
House Design
Final Screen

Animated Gifs

After everything was designed on Illustrator, I went to After Effects and started building the mock up.

Splash Screen
The house was going to be a really important thing in the app so I wanted to animate it using abstraction, the movement was carefully done using custom easing and having in mind the principles of animation foundations.
Light Dimmer
Here you can see how dimming lights would work, the moon element is one of my favorite things in this proposal because if you dim the lights using the sun you’ll start see a small animation of the phases of the moon.
Navigation & Color change
If I could work on this piece a little bit more I would change how you help the user to understand how to move in between scenes, like Bedroom 1, Bedroom 2, Dinning Room, Kitchen etc.. Also in this GIF you could see the secondary function for changing the color of the light through a color picker.

Video

At the end I developed a full video so that you could see the timing while using the app, I know it’s a little slow but this was done on purpose so that you could see the animation.