Smart Home Application Report: UI/UX Design and Navigation

Desklib provides solved assignments and past papers to help students succeed.

Contents
Introduction................................................................................................................................3
Q 3..............................................................................................................................................4
1. Smart Home Screen............................................................................................................4
2. Login Screen......................................................................................................................5
3. Forgot Password Screen.....................................................................................................7
4. Change Password Screen...................................................................................................8
5. Facebook Screen................................................................................................................9
6. Registration Screen..........................................................................................................11
7. Home Screen....................................................................................................................12
8. Favorites Screen...............................................................................................................14
9. Notification Screen...........................................................................................................15
10. Settings Screen...............................................................................................................16
11. Support Screen...............................................................................................................17
Site Map...................................................................................................................................19
Conclusion................................................................................................................................20
References................................................................................................................................21
List of Figures
Figure 1: Smart Home Screen....................................................................................................4
Figure 2: Navigation 1...............................................................................................................5
Figure 3: Login Screen...............................................................................................................5
Figure 4: Navigation 2...............................................................................................................6
Figure 5: Navigation 3...............................................................................................................6
Figure 6: Navigation 4...............................................................................................................6
Figure 7: Forgot Password Screen.............................................................................................7
Figure 8: Navigation 5...............................................................................................................8
Figure 9: Change Password Screen............................................................................................8
Figure 10: Navigation 6.............................................................................................................9
Figure 11: Facebook Screen.......................................................................................................9
Figure 12: Navigation 7...........................................................................................................10
Figure 13: Registration Screen.................................................................................................11
Figure 14: Navigation 8...........................................................................................................12
Figure 15: Home Screen...........................................................................................................12

Figure 16: Navigation 9...........................................................................................................13
Figure 17: Navigation 10.........................................................................................................13
Figure 18: Navigation 11.........................................................................................................13
Figure 19: Favorite Screen.......................................................................................................14
Figure 20: Notification Screen.................................................................................................15
Figure 21: Settings Screen.......................................................................................................16
Figure 22: Navigation 12.........................................................................................................17
Figure 23: Support Screen........................................................................................................17

Introduction
The below-created report is based on the technology named as the Smart Home. An
application is created based on this topic that is completely related to the concepts on the
Internet of Things. There are different inventions mentioned in this application. The report
contains an explanation of the entire application along with the creation of a type of guide
that helps in using this application. A site-map is also created in this report at the end that
provides the proper navigation of the screens.

Q 3
1. Smart Home Screen
Figure 1: Smart Home Screen
Detail:
This is the First screen that would be seen while opening the application. This screen follows
the first principle of Heuristic. This mainly provides a proper understanding of the
application.
Components:
 It contains the logo of the company application.
 Also contains the buffering.
Reason:
This screen is mainly being created to provide a clear understanding of the entire application.
This purely uses the Visibility Principle of System usability.
Navigation:

Figure 2: Navigation 1
2. Login Screen
Figure 3: Login Screen
Detail:
This is the second screen that would be seen after opening the application. This screen is
mainly being used by the registered users to login into the application.
Components:
 It contains the logo of the company application.
 Text Fields are also being used in this screen in order to help the user to enter the various
details.
 Buttons are being used to move the user to different places with just a single click.
 Texts are used to provide the proper understanding to the user.
Reason:

This screen is mainly being created to be used by the registered users to login into the
application. This screen would take the user to the home screen of the application where the
user could utilize the application properly.
Navigation:
Figure 4: Navigation 2
Figure 5: Navigation 3
Figure 6: Navigation 4

3. Forgot Password Screen
Figure 7: Forgot Password Screen
Detail:
This is the third screen that would be seen after opening the application. This screen is mainly
being used by the users to change their passwords if they forget the passwords. The
passwords could easily be changed using the email_ids or by using the phone numbers
registered with the application.
Components:
 It contains the logo of the company application.
 Text Fields are also being used in this screen in order to help the user to enter the various
details.
 Buttons are being used to move the user to different places with just a single click.
 Texts are used to provide the proper understanding to the user.
Reason:
This screen is mainly being used by the users to change their passwords if they forget the
passwords. The passwords could easily be changed using the email_ids or by using the phone
numbers registered with the application. This is really helpful and helps in accessing the
application in various cases.
Navigation:

Figure 8: Navigation 5
4. Change Password Screen
Figure 9: Change Password Screen
Detail:
This is the fourth screen that would be seen after opening the application. This screen is
mainly being used by the users to change their passwords. This screen contains different
fields that are definitely required in order to change the password and get logged into the
application.
Components:
 It contains the logo of the company application.
 Text Fields are also being used in this screen in order to help the user to enter the various
details.
 Buttons are being used to move the user to different places with just a single click.
 Texts are used to provide the proper understanding to the user.

Reason:
This screen is mainly being used by the users to change their passwords. This screen contains
different fields that are definitely required in order to change the password and get logged
into the application. Many of the times users forget their passwords and this screen is really
required.
Navigation:
Figure 10: Navigation 6
5. Facebook Screen
Figure 11: Facebook Screen
Detail:
This is the second screen that would be seen after opening the application. This screen is
mainly being used by the registered users to login into the application. The users could easily
enter into the application using their Facebook accounts. A click can help them getting
entered into the application.

Components:
 It contains the logo of the company application.
 Text Fields are also being used in this screen in order to help the user to enter the various
details.
 Buttons are being used to move the user to different places with just a single click.
 Texts are used to provide the proper understanding to the user.
Reason:
This screen is mainly being created to be used by the registered users to login into the
application. This screen would take the user to the home screen of the application where the
user could utilize the application properly. This screen is mainly being used by the registered
users to login into the application. The users could easily enter into the application using their
Facebook accounts.
Navigation:
Figure 12: Navigation 7

6. Registration Screen
Figure 13: Registration Screen
Detail:
This is the third screen that would be seen after opening the application. This screen is mainly
being used by the users to get registered. With the help of this screen, registered users could
easily utilize the entire application and make most out of it.
Components:
 It contains the logo of the company application.
 Text Fields are also being used in this screen in order to help the user to enter the various
details.
 Buttons are being used to move the user to different places with just a single click.
 Texts are used to provide the proper understanding to the user.
Reason:
This screen is mainly being created to be used by is mainly being used by the users to get
registered. By getting registered users could easily utilize the entire application and make
most out of it.
Navigation:

Figure 14: Navigation 8
7. Home Screen
Figure 15: Home Screen
Detail:
This is the fourth screen that would be seen after opening the application. This screen is
mainly being used by the users to get to know the entire application. This is the main screen
of the application and this screen could take the user easily to the different screens.
Components:
 It contains the logo of the company application.
 Text Fields are also being used in this screen in order to help the user to enter the various
details.
 Buttons are being used to move the user to different places with just a single click.
 Texts are used to provide the proper understanding to the user.
Reason: