Skip to Main Content

Smart Home app

August 20-22, 2019
Duration 3 days
Role Concept Designer
It was a 3 days' assignment test in order to check creativity and concept skills.

Challenge

Design a mobile app UI that lets you control: ➔ Lights on/off, intensity, colour ➔ Temperature on/off ➔ Curtains open/close ➔ A made-up smart home functionality of your choosing (the sky's the limit; forget technical feasibility)

Idea

Smart devices with their own names living theirs smart lives in your smart house. Soulful objects trying to improve human life working and living in cooperation.

Preparation

Initially, I came up with raw ideas of transforming 4 required functions into 4 visually distinctive elements.  Patterns I started with were: 4 corners in a room – 4-side rotating element (like a Rubik's cube), a solar system of smart objects, trendy rotating UI controls (hey, dribbble), pattern recognition bot, typography variations (designer's special), real objects in "habitat".

I brainstormed devices states, which I'd wish to cover in my project and created a simple ecosystem of options. My imaginary function was pet control, however, I believe it's rather feasible.

Then I came up with a possible scenario: Now Hero is in his room with a cat named Wendy, enjoying a movie as he usually does on Thursday night. During this he'd like to take a short break and make a cup of tea, he plans to go to sleep right after the movie ends, but not later than 00:10.

Building a case:

  • NOW (my room: MOVIE NIGHT; other rooms: default) ➔ NEXT (all rooms: TEA, TOILET)
  • NEXT PLANNED (all rooms: SLEEP; timer: 00:10) ➔ EDIT, ADD
  • RECENT (HISTORY, SAVE TO SCHEDULE)

Concept

The dashboard screen includes scheduled and happening now activities. To adjust smart devices by room or by type of control function you can choose the second or the third icon in the Tab bar.

Command control

Immediate control of all smart devices by typing-in any command, you can get information about syntax by clicking the icon on the right. Can be improved with voice control.

Examples:

  • @ambie turnoff //turns off the light named Ambie
  • @wendy move(myroom) //moves Wendy cat to My room
  • @jay? //returns a current state of curtains named Jay

What’s happening right now?

By transferring activities from your real-life into the app, you can easier get used to thinking in group settings, instead of single adjustments, which can save a lot of your time, when your smart network will become bigger. That is what smart home was made for.

Movie night is an activity that has started at 21:00 and includes a group of temperature, light, curtains and pet settings adjusted by you once and for every Thursday for example.

Activities that come in handy

Quick access to useful activities during watching the movie. Some of them can be suggested by AI, others can be based on your habits or recent behaviour. One more step to trust your schedule to the app.

One thing is not for sure: if you really need to inform the app about your plans about making a cup of tea during the movie. But for the big distributed network of smart devices, it can help a lot.

Planned activities

Sleeping is going to start at the scheduled time with all you need to dive in comfort.

Controls: light

Light control screen includes states and adjustments of all lightning devices. Here you can control the state of every lamp separately. Add a new device by clicking plus icon in the Navigation bar. The screen can be initiated by clicking the third icon in the Tab bar.

Functionalities

Four Controls to rule them all.

Navigation Bar that includes Light, Curtains, Temperature and my 4th made-up functionality – Pet control.

Modes

A mode is a group setting for devices of one type. For example, you can turn on necessary light devices for cooking all in one instead of tuning separately. Do you have any routine, that makes you turn a set of lamps on? Simply add a new mode and schedule it in one click.

Smart devices

Here is a list and portraits of all smart lamps, to add more personality and controllability I named them. By adding names you also bring a connection between all devices like if they are a family. The current state is shown as a coloured circle depending on the intensity and color of light. Grey circled lamps are switched off.

Fine tuning

Interaction with a lamp starts with tapping it. To tune several lamps you can drag them one-by-one into the tuning circle. A long press turns on/off the lamp quickly with last settings. All changes apply immediately. Here are the settings of Cooky – the main kitchen lamp, cool bright light with an intensity of 10%. You can also check its technical state and history below.

Controls: curtains

Curtains control screen includes states and adjustments of all smart curtains in your home. On this step you can control the state of every curtain separately. Add a new device by clicking plus icon in the Navigation bar. This screen can be initiated by clicking the second icon in the Controls segment.

Controls: temperature

Temperature control screen includes states and adjustments of thermal conditions of all rooms. On this step you can control the state of every room separately. Add a new device by clicking plus icon in the Navigation bar. This screen can be initiated by clicking the third icon in the Controls segment. As long as heaters and conditioners usually are not visually distinct, I thought it’d be better to portray them by rooms instead of separate devices.

Controls: pets

You know your animals better than anyone, so smart petsitter webcam is trying its best showing you live pet selfies every 15 minutes, and depending on pet’s mood from your point of view you have to decide what might help to please Wendy and Max now. You thought the app could look after your little home monsters? No way.

Next Project
All projects
DHL Careers redesign
August 2019
Duration 1 week
Role Digital Designer