Assignment
The brief was to develop a smartphone app for a client in a field of smart home devices and help make a shift from corporate clients to domestic households.
- Transform an old app into the usable, enjoyable, and functional tool.
- Present relevant information in an optimized structure.
- Make sure the app not only follows the guidelines but also embodies the company’s corporate identity.
Understanding The Problem
- Functional Inconsistency. Many UI components such as navigation bars have different interactions and functionalities, which affects the system’s overall learnability and usability. The meaning of some icons is not clear.
- Style Inconsistency. Similar to functional inconsistency, the app is lacking consistency in terms of typography, interaction, look and feel. The app doesn’t follow the company’s brand book.
- Style Problems. The old app was designed by engineers for engineers. It doesn’t follow Apple’s Human Interface Guidelines and confuses new users. Some elements such as statistics were copied from the desktop version. The overall design feels outdated.
The old app was developed for corporate clients. The redesign helps the client to shift from corporate clients to domestic households. We were focusing on organizing available features in the intuitive, simple and informative way. We used corporate colors and white background for the user interface to make it look simple, minimalistic and non-obstructive.
Project created by Pavlo Vytkalov, Johanna Kerschensteiner, Krzysztof Walencik, Matthew Hühnlein.
Usability problem
The old app didn’t help a user to achieve his goal. Smart home apps are meant to ease a life not complicate it. We tried to imagine how a user would perform simple routine tasks such as turn off a heater in the living room when leaving the apartment or turn all lights on in bedroom on your way from work home. Every action took too much time, efforts, and clicks.
Goals
- Transform an old app into the usable, enjoyable, and functional tool.
- Present relevant information in an optimized structure.
- Make sure the app not only follows the guidelines but also embodies the company’s corporate identity.
Design process
We opted for hierarchical informational architecture because it has clear and simple structure. It consists of the main home screen and three sub screens (rooms, scenes and, statistics).
It consists of the main home screen and three sub screens (rooms, scenes and, statistics).
A user could manually type a password written on the smart home device or scan a QR code. It speeds up a registration. While setting up the device, animation helps to communicate the progress and the result of an action.
Onboarding screens is a virtual unboxing experience that helps users get started with an app. Users could navigate through screens with a tap or fling or completely skip screens. We chose white outlined illustrations to keep the visual style consistent throughout a website and app.
The idea behind the home screen is to make it functional and customizable. A user could pick which scenes and rooms to show so he could quickly open them with one click.
It was a challenge to develop a navigation system for rooms. We chose to group types of devices into a horizontal slider and detailed list into a vertical slider.
Scenes function allows changing settings for selected devices as a group. A user could choose from five preinstalled scenes. To create a new scene, press plus icon.
Statistic screen helps to keep track of electricity usage and expenditure.