Year
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
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.
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.