Project Objective

TIO Home App is an universal app that integrates all smart systems into one app, allowing users to control household appliances as
well as pay bills for water, electricity, gas, and other utilities.

The application's main goal is to assist users in removing unnecessary worries about their homes, saving time on everyday
household tasks, and controlling smart home devices from afar.

Design Process

Design Process

Project Goal

The TIO Home App is a smart universal app that connects all of your smart devices. The client
required an app planned and developed in preparation for a global launch, with the purpose of
making users' lives easier.

Technology Used

Figma

Photoshop

After
Effects

FlowMapp

Miro

User
Testing

Persona & User Needs

John Jackman

Occupation

US IT Recruiter

Location

New York City

Age

26

Family

Married. 2 children.

Tech

About John

John and his wife have 2 kids: a teenager and a 10-year-old. They now focus more on their careers but their main worry is control everything from smartphone as both of them work. With a busy week days, the time they can really get together as a family is during the dinners time and weekends. So their meal is a really special part of their days.

Goals

Control everything from smartphone.

Frustrations

  • I am afraid to turn off gas or iron.
  • I am not able to control everything from his smartphone.

Kiara James

Occupation

Graduate Student

Location

Rochester

Age

22

Family

Single

Tech

About Kiara

Kiara is currently pursuing her bachelor's degree in Game Design and Development. She concentrates more on her exams, but she is concerned about the utlities deadlines she will miss. She finds time to go to the gym, set up her smart device automation, and improve security despite having a busy month.

Goals

Smart device automation & security.

Frustrations

  • I am not able to control smart devices.
  • I skip utlity deadlines.

Cliff Hearn

Occupation

Businessman

Location

Los Angeles

Age

38

Family

Married. 3 children.

Tech

About Cliff

Cliff is a businessman who has clients all over the world and travels to different cities every week for meetings and to expand his company. Because he is not always at home, he is concerned about home security and automation, and he frequently forgets to close and lock the door before leaving for the airport.

Goals

Home security and automation

Frustrations

  • I often forget to close & lock the doors.
  • I don’t prefer to clean and do little things around my home like washing dishes, etc.

Information Architecture

UI Style Guidelines

Typography

The fonts have been selected such that they
resonate well with the overall visual aesthetic of the
website.

Muli

Aa

Extra Bold
Bold
Semi Bold
Light

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

1234567890’?’”!”(%)[#]{@}/&\<-+=>$

Colors

TiO Smart Homer is a brand of trust and health.
The color palette selected exemplifies the essence of the brand well.

Primary Color

#FD7A54

Primary Text

#21293A

Secondary Text

#7C7C7C

Divider Color

#B0B0B0

Accent Color

#4BE06C

Accent Color

#0089B9

Accent Color

#00BA95

Accent Color

#554EBA

Accent Color

#FCB93C

Colors

TiO Smart Homer is a brand of trust and health.
The color palette selected exemplifies the essence of the brand well.

Primary Color

#FD7A54

Primary Text

#21293A

Secondary Text

#7C7C7C

Divider Color

#B0B0B0

Accent Color

#4BE06C

Accent Color

#0089B9

Accent Color

#00BA95

Accent Color

#554EBA

Accent Color

#FCB93C

Low - Fid Wireframe

After organising all of the concepts from the Ideation phase, we began creating the application. To begin, we drew some of the app's
most important screens, using the user flows as a guide. We were able to quickly test a range of layout possibilities as a result of this.

Low - Fid Wireframe

After organising all of the concepts from the Ideation phase, we began creating the application. To begin, we drew some of the app's most important screens, using the user flows as a guide. We were able to quickly test a range of layout possibilities as a result of this.

Mid - Fid Wireframe

Starting the Design step with the wireframes. We started with some mid-fi designs and tested them with some users. After
gathering some feedback, we tweaked them and came up with this final product. We next ran it through its paces with three
people to see if it met both user and business needs.

High - Fid Wireframe

Here are the digital wireframes that were designed for incorporating all features and for
furthur designing process.

Music

Music can be controlled directly from the TIO Home App,
and the user can sync his music from his favourite app. In
the same way that any other music application, he can
increase, decrease, go back, and forward.

Temperature

The user has access to his ventilation system while
outside or inside the house and can adjust the
temperature using the TIO Home App. The user can also
change fan speed and cooling at the same time with this.

Settings

The user can set up an application lock, grant remote
access to various smart devices, receive notifications,
change his home location, and, most importantly, manage
all of his elements or products using Settings.

Custom Experiences

One of the features of the TIO Home App is that it allows
users to save their data and create multiple custom
experiences and interactions in the cloud that are unique
to each user.

High - Fid Wireframe

Here are the digital wireframes that were designed for incorporating all features and for
furthur designing process.

All Screens

All Screens

Thank You!

Back to top