Smart home App- t.hub

Visual design/Interaction design/Illustration

What is T-Hub?
This device is aimed to provide vocally addressed smart assistance that sits within your living room. The Voice assistant Maya was designed to help the users control an array of smart home devices (like smart bulbs, Locks, switches etc) with far-field voice recognition. Besides controlling smart device, Maya has 3 major roles, Dispensing information, Enabling vocally addressed service integration and Entertainment.
The
Smarthome app is the supporting app that can be installed on any android or iOS device. This all also allows the users to have remote access to their smart device at home.

Scope of work and team:
The requirement was to create visual concepts for the app, along with defining the baseline design assets that could be used by other visual designers and subsequently other teams to this forward.
Before we began work the User experience (UX) team had laid down the wireframes of the workflow and needed concepts to support the UX for the application.

The team comprised of an user interface designer, an illustrator and me as the visual design lead.

Thub_AI.png
thub wireframes.png

Since the devices supported were usually placed within a users house, conveying the sense of space was of paramount importance. To achieve this we decided to adopt an isometric grid to illustrate device and spaces within a house in 3D.

We also ideadted and conceptualised illustrations for a list of rooms that are unique to the indian homes such as Varandas, idol or worship rooms, along with kitchens, libraries and bedroom etc.

Along with this we also illustrated a extensive list of smart-home devices that are already available in india such as speakers, switches, screencasting devices to name a few.

Icon and illustration style

Icon and illustration style

App icon design

App icon design

splash screen and app icon

splash screen and app icon

Since we were also launching T-hub in the indian market and this could pose a steep learning curve for the users, we had to design a detailed instruction set for the setup. The app loaders also reflects the light patterns visible on the T-hub smart home speaker, which provides a sense of continuity from the app onto the device.

Artboard Copy 4.png
onboarding

onboarding

loaders were created showing the state of the device

loaders were created showing the state of the device

During the development of the application we hit another roadblock, the implementation for a customised bird’s eye view of a house was turning out to be a real challenge for the team. We thus needed another solution to provide a list of rooms and associate the devices with each room and the ability to control each device.

To address this problem we conceptualised a two level navigation for the app. The top level list had all the rooms within a house. Once a room is selected the control of devices in that room and the control for them is revealed. We also went ahead and created an interesting look for the switches, rather than going for a conventional toggle switch.

device and area selection

device and area selection

device settings

device settings