SlideShare uma empresa Scribd logo
1 de 61
Baixar para ler offline
Interactive
Design
COMP 1649
Table of Content
1. Introduction 4-----------------------------------------------------------
1.1 Background 4-------------------------------------------------------------------
1.2 Classifying the Target Users 4-------------------------------------------------
2. Frameworks 5-----------------------------------------------------------
2.1 Framework Studies 5-----------------------------------------------------------
2.2 Framework Used 6--------------------------------------------------------------
3. Research and Requirement Definition 7------------------------------
3.1 Similar System Analysis (Research) 7-----------------------------------------
3.2 Users Requirements Research 14---------------------------------------------
3.3 Requirement Definition 18-----------------------------------------------------
Summary 19-------------------------------------------------------------------------
5. Framework Definition 20-----------------------------------------------
5.1 Sitemap 20-----------------------------------------------------------------------
5.2 Low Fidelity Prototype 22------------------------------------------------------
Summary 26-------------------------------------------------------------------------
6. Detailed Design 27------------------------------------------------------
6.1 High Fidelity Prototype For iOS Application 27------------------------------
6.2 High Fidelity Prototype For WatchOS Application 44------------------------
7. Evaluation 46------------------------------------------------------------
7.1 Cognitive Psychology 46-------------------------------------------------------
7.2 Design Principle 49-------------------------------------------------------------
7.3 Survey 51------------------------------------------------------------------------
Conclusion 54--------------------------------------------------------------
Appendix 55----------------------------------------------------------------
Appendix A : Smart Home Users by age 55--------------------------------------
Appendix B : Questionnaires of the users’ requirement research 56----------
Appendix C : Detail Informational Answers of the Rest Questions 58---------
References 60--------------------------------------------------------------
1. Introduction
A smart home hub which is one of the IoT devices, is to connect the smart home devices like
smart bulb, CCTV camera, door and thermostats. The smart hub connect the other devices through
bluetooth and the users can commend the smart hub with voice commend. However, the users cannot
fully manage with just voice commend of the smart hub. To manage the connected devices fully, it need
to have an application on phone, table or smart watch. (Rouse, 2018)
1.1 Background
In 2010, the company called “Nest” firstly picture the idea of smart hub. In 2012, the first smart
home hub called SmartThings, has been launched and in 2014, the system was bought by Samsung. Now
most of the company had been launched many smart hub. The most famous smart hubs in 2020 are
Amazon Echo Plus, Google Home Hub (Google Nest Hub) and Samsung SmartThings Hub. (Starr, 2020)
Apple also release the smart hub called Apple TV.
According to statistic, In 2017, only 4% of worldwide people lived in smart home rather than
traditional home, whereas in 2020, the number is up to 9.3%. This rate show The age of the people living
in smart home are mostly 25-34 years old. Thus the target users for this coursework will partially be
chosen according to that numbers. (Smart Home - worldwide | Statista Market Forecast, 2020) (See more
about the detail number of smart home users by age in Appendix A)
1.2 Classifying the Target Users
In this coursework, the design of the smart hub will be targeted to three target users. The primary
target users are the people who have been 18 to 24 years old, with having some technology knowledge
and fluent in English.
The secondary targeted users are the people who have been 25 to 34 years old, with having little
technology knowledge and fluent in English.
The third targeted users are the people who have been 35 to 44 yers old, with little technology
knowledge and doesn’t good at English.
Before drawing the design for these three target users, the design framework to be used for this
coursework will be set.
2. Frameworks
There are a lot of design frameworks to be chosen before drawing a prototype. However, in this
coursework only three frameworks will be studied and then one of them will be chosen to draw the
design.
2.1 Framework Studies
1. User Center Design
User-center design (UCD) is an iterative design process where designers draw the design with the
ideas and the needs of the users throughout the process. There are four stages in this design process;
Understand context of use, specify user requirements, Design solutions and finally Evaluation against
requirements. (What is User Centred Design?, 2020)
There are also many techniques to involve the users in this process. These are background
Interviews and questionnaires, walkthroughs, role playing and simulations and usability testing. (Abras,
Maloney-Krichmar and Preece, 2014)
2. Goal Directed Design
Goal Directed Design (GDD) is the design process which mainly put the users at the centre of the
process and make a huge attention to the needs and goals of the users. Then change these goals into tasks
and actives which will finally make the good usable design.
In GDD design process can be describes as the six steps process. These are Research, Modelling,
Requirements definition, Framework definition, Design and Development. (Amann, 2009)
3. Activity Centred Design
Activity Centred Design (ACD) is little differed from User Centred Design and Goal Directed
Design. Instead of focusing on uses needs and goals, ACD is mainly focuses on activities performed by
users. In activities, there are included about tasks and the tasks again included actions. (Saffer, 2010)
Unlike other two, ACD there is just a model. Thus it has not process like the above two, but the
designers observe the behaviours of the users using this eight actives nodes; motivation, outcome, object,
subject, community, division of labor, rules and rituals and tools and artefact. (Activity Centred Design,
2018)
2.2 Framework Used
After studying the three design framework, one of them will be chosen for this coursework. All of
these frameworks have their own meaning and process/ nodes. However, to develop this coursework Goal
Directed Design (GDD) will be the best option.
The Reason of chosen GDD is because it is mainly focus on the users’ needs and goals while
UCD is only focus on the needs and ideas of the users. ACD on the other head, does not have a specific
process, and have to observe the behaviours of the users with its defined actives nodes. Thus ACD design
will be strongly depended on the observing users’ behaviours. In GDD, the involvement of the users is
moderate and it has specific and clarify process, so not only its framework is not fully depend on the
observing users’ but also the design using this framework will fulfil the goals of the users.
As mention above, in GDD there are six design process, however, only four of them will be used
for this coursework.
1. Research - where research about the similar system and make the Questionnaires to know about the
users’ requirements
2. Requirement Definition - where define the requirements for this coursework to design
3. Framework Definition - where the initial/ low fidelity design will be drawn
4. Design - where high fidelity design will be drawn with evaluations at the end of the coursework
FIGURE OF GDD SIX STEPS (AMANN, 2009)
3. Research and Requirement Definition
There are Three main section in this Research and Requirement Definition. Analysing of Similar
System, Users Requirements Research and Requirement Definition. There are two parts to analyse the
similar system; Functional requirements analysis and non-functional requirements analysis. The detail
about the similar system analysis will discuss in the next section.
3.1 Similar System Analysis (Research)
As mention in above, this course will have four step to design this smart hub application. In this
first step, Research, there will be analysed about the similar system. In real world, there have been a lot of
smart hub devices and softwares; Among them, two of these softwares will be analysed for this
coursework; Apple Home (by Apple Company), SmartThings (by Samsung Company). In the following
there will be analysed the overall concept these two softwares.
FIGURE OF APPLE HOME KIT (LEFT) AND SAMSUNG SMARTTHINGS (RIGHT)

3.1.1 Functional Requirements
After using and analysing these two applications, three main functions included all of these
softwares. These function are as follow -
Connect Function - All of these software have the same connect function. As soon as the application is
opened they need to register the account and have to connect the other smart devices like smart bulb,
CCTV camera, door and thermostats.
Control Function - After connected the devices, these can be controlled by the software like on/ off
function, volume up/ volume down, adjust the condition and so on. There are two want to control from
these software, one is to control by touching the screen and the other is controlled by voice commend.
Real Time Function - This function is a little similar like the control function, however, this function can
see real time. Like looking the front door through CCTV camera and so on.
3.1.2 Non-functional Requirements
There will be two main sections in this non-functional requirements analyses; Cognitive
Psychology and Design Principles Used.
Section 1 : Cognitive Psychology
In cognitive psychology, there are two general modes called experimental and reflective
cognition. The first one is the state of mind that people act, react and perceive to things effortlessly and
effectively. The later one is another state of mind that people think, compare and decisions making. There
are six kinds of process to describe the cognitive psychology. These are -
1. attention
2. perception and recognition
3. memory
4. learning
5. reading, speaking, and listening
6. problem solving, planning, reasoning, decision making
However, in this coursework, only three of these processes will be adopted to analyse the similar
products.
1. Perception
Perception means how users can get information by looking at the system. In this case, the button
and symbol from Apple Home Kit is more clear than SmartThings. In SmartThings the color of the home
background is light and the words and button chosen are white, thus personally the colour chosen from
Samsung is a little confuse than Home Kit.
FIGURE OF PERCEPTION OF TWO APPLICATIONS

2. Attention
Attention is the process of getting more concentration to specific thing while other informations
are showing at the same time. In this case, both two softwares get attention of their own purpose in the
home page. In home page both of them intend the users to connect other smart devices and the connect
button of them is get attention to the users.
FIGURE OF GETTING ATTENTION TO THEIRS MAIN FUNCTION
3. Memory or Recognisable
Memory or Recognisable means the design can be memorised easily, which does not have to be
recalled what the do and how to continue. In this analysis, bot of these two design are memorisable and
clean. Thus there is no confused button, words and symbol are used to confuse recognisable.
FIGURE OF HOW EASILY RECOGNISED THE DESIGNS ARE
Section 2 : Design Principles Used
In this section, Nelson heuristic design principles will be used to analysed the similar design.
(Nielsen, 1994). In Nelson’s principles, there are totally ten principles, however, in this coursework, only
five of them will be used to analysed the similar system. After analysing the mistaken made by these
similar application, the upcoming design form this coursework will avoid them as much as possible.
#1: Visibility of system status
Analysis whether the status of both application is visible and the users have been informed clearly. In
SmartThing, because of the light wallpaper and the white text colour, the status of the system is difficult
to see for the users. The detail about the visibility of system status will be shown in the figure below.
FIGURE OF ANALYSING THE VISIBLE THE STATUS
#3: User control and freedom
User control and freedom means users have no risk to click button and if something is wrong, “emergency
exit” is visible enough for the users to use. Or the users can undo or redo the process from back to front
and vice visa. In SmartThing, the hamburger icon is more clear and give the users’ freedom to go
anywhere of the application whereas Home kit “HOME icon” is small and difficult to see. The detail
about the user control and freedom will be shown in the figure below.
FIGURE OF ANALYSING USER CONTROL AND FREEDOM
#4: Consistency and standards
Consistency and standards means users do not have to face with different words, actions or situation from
the application. In both Samsung and Apple have a little different words, however, in Apple is a personal
case. But for Samsung, a lot of similar users can get confused. The detail about the consisted and
standards will be shown in the figure below.
FIGURE OF ANALYSING CONSISTENCY AND STANDARDS

#6: Recognition rather than recall
A Recognition design means users can use the design that users does not have to recall the design while
using. In SmartThings, the design have to recall to connect the smart devices, because of the two area and
bad colour chosen. Whereas in Apple Home the home button is small and less visible, thus it also have to
recall when to go the main page of the application. The detail about the recall design mistakes will be
shown in the figure below.
FIGURE OF ANALYSING RECALL DESIGN MISTAKES
#8: Aesthetic and minimalist design
Aesthetic and minimalist design means, there should not be duplicate features or button in design.
Moreover, there should not be unnecessary informations which can lead misunderstanding for users. The
detail about the recall design mistakes will be shown in the figure below.
FIGURE OF ANALYSING RECALL DESIGN MISTAKES
3.2 Users Requirements Research
Questionnaires method will be used to make this users requirements research. In this research
Twelve people have been participated and this research has been taken by “Google Form”. However,
only eleven people have been answered.
There are three sections included in this questionnaires. The first one is personal information, the
second is about the smart hub and the last about application interface design. The detail about the
questions will be shown in Appendix B.
After researching about the users requirements, the following facts will be applied for this
upcoming design. The rest answers from the questionnaires will be shown in Appendix C.
Fact 1 : Background Colour and Text Colour
FIGURE OF BACKGROUND COLOUR AND TEXT COLOUR CHOSEN
From the research about 54.5% of the people love back background colour and white text colour,
thus the design colour chosen will be drawn according to that. However, 36.4% of the people like
background colour white and text colour black thus this colour will also be added as optional in design.
Fact 2 : Popular Font Design
FIGURE OF CHOSEN FONT DESIGN
Arial is the best choice from research thus, it will be set as the primary font design, while Time
New Roman Font design will be used as the secondary font design for this coursework prototype.
Fact 3 : Popular Button Design
FIGURE OF CHOSEN BUTTON DESIGN
Most of the people choose Button Design 2 and 3, thus these two designs will be chosen as
Primary and secondary designs. (See more about Button Design in Question Figures | Appendix B)
Fact 4 : Popular Icon Design
FIGURE OF CHOSEN ICON DESIGN
The icon design 3 will be used as the primary icon design in this coursework design and the icon
design 1 will be used as the secondary icon design. (See more about Icon Design in Question Figures |
Appendix B)
Fact 5 : Chosen Devices
FIGURE OF CHOSEN DEVICES
From the end result of the questionnaires, this prototype design will be drawn for two devices;
Phone as the primary devices and the Watch as the secondary devices.
3.3 Requirement Definition
According to research of users requirements, the participants want to get the for smartphone and
smart watch. In this coursework the prototype will be drawn for apple devices as the personal preference.
In this section, there will be defined about the iOS Design Guidelines and Watch OS Design Guidelines to
be applied for design.
3.3.1 iOS Design Guidelines
There are iOS six design guidelines to be followed. However, as this is an educational
coursework, there will be mainly three guidelines will be followed and the detail will be shown in the
table below. (Themes - iOS - Human Interface Guidelines - Apple Developer, 2020)
Number Description In detail
Guideline ONE: Consistency Consistency design means using general icons,
terminology, design elements and typography which
users will easily understand and easy to use. Thus this
coursework design will only used general icons, design
elements and typography which users have been used to.
Guideline TWO: Feedback Feedback are used to know what users are doing and
what users did. To show the feedback, the designs are
typically shown by animation, sound and vibration. In
this coursework, to get user acknowledge the feedback
will mainly be shown by animations.
Guideline THREE: User Control Users Control means in case if uses make the dangerous
decision like delete the connected devices, they have
been asked for double check whether it is a wrong
decision or mistakenly touch. In this prototype when
users delete the application the error message will be
shown to make the second decision for users.
3.3.2 WatchOS Design Guidelines
In this coursework, watchOS application have been chosen as the secondary control device. To
make the smartwatch application, there are three design guidelines to be followed. Since there is not
coding and only prototyping only one can be applied for this prototype. The applied guideline for
WatchOS will be explained below. (Themes - watchOS - Human Interface Guidelines - Apple Developer,
2020)
Summary
In summary, in this section 3, there have been researched and analysed about the Similar System,
Research about users requirements by making survey and have been set the requirement definition for the
design. All of the these facts will be used to apply for the up coming prototype designs.
In this coursework, the application design will have three main functional features; Connect,
Control and Real Time control (Voice Command). The design for the prototype will be drawn by
following the cognitive psychology of the users, 5 principles from Nelson’s Design Principles and the
iOS and watchOS Guidelines.
However, there will be a few different between smartphone design and the watch design, due to
the smaller screen size the the followed guideline (Glanceable). In the next section there will be shown
about the sitemap for two devices and the low fidelity prototypes drawn by following their respective
design guidelines.
Number Description In detail
Guideline ONE: Glanceable Glanceable means users can use the application short to
the point with showing main information without
distributing by others unnecessary information. Thus to
draw this watch application some of the features
included in iOS app will be removed.
The others guidelines; Actionable and Responsible are not suitable to use for the prototype make.
5. Framework Definition
5.1 Sitemap
Since the prototype will be drawn for two different devices with different guidelines, the sitemap
for these two will be different. In primary device (mobile), users have function like connect and control to
the devices whereas in Smartwatch there will be included only control to the connected devices. This is
because smart watch have the limited screen size and followed design guidelines.
FIGURE OF SITEMAP PROTOTYPE FOR IOS DEVICE

FIGURE OF SITEMAP PROTOTYPE FOR SMART WATCH
5.2 Low Fidelity Prototype
As mention above, the below low fidelity prototype will be only drawn by following its
respective design guidelines.
5.2.1 Low Fidelity Prototype for primary device (Mobile Phone)
Consistency Design
FIGURE OF WATCH CONTROL BULBFIGURE OF IOS CONTROL BULB
A consistency design isn’t just about using general design icon, design elements, but also the design of
the different devices should be a consistency design. In the above two figures the basic layout, icons and
design elements for two different devices are similar.
Feedback
FIGURE OF DEVICES CONNECT ROOM
Since this is the low fidelity prototype, the feedback show to users clarify, however, if your click
some of the buttons included in the system, it change colour to know what they do.
User Control
FIGURE OF USERS DELETING THE CONNECTED BULB DEVICE
In the figure if users want to delete a connected device, they have been asked whether they want
to delete the derives for sure or not. Thus applying the user control guidelines from iOS devices will make
users to except from dangerous condition.
FIGURE OF WATCH CONTROL BULB
5.2.2 Low Fidelity Prototype for secondary device (Smartwatch)
Glanceable


FIGURE OF IOS CONTROL BULB
As mention above the prototype design of the smart watch is not as same as mobile since it has the
smaller size. From this two low fidelity prototype the design elements of the two devices are similar,
however the layout of smartwatch is different from the mobile one.
Summary
In this section, there have been included about the sitemap to know the process of prototype for
both devices. And then drawn about the low fidelity prototype. By drawing low fidelity prototype the
general layout and design elements used for this prototype have been visualised and the next section,
there will be drawn about the high fidelity prototype based on this low fidelity one.
6. Detailed Design
6.1 High Fidelity Prototype For iOS Application
Before starting about to the home page and the connection page, there need to be an introduction
page for the first time users. Thus they can easily get how to use the smart hub application and how to
connect the application with the hub device.
FIGURE OF FIRST WELCOME PAGE
FIGURE OF INSTRUCTION PAGE TO
CONNECT WITH SMART HUB
(USED USERS FAMILIAR SMILE FACE )
FIGURE OF INSTRUCTION STEPS BY STEP
TO CONNECT WITH SMART HUB
FIGURE OF SEARCHING SMART HUB
FIGURE OF FOUNDING DEVICE FIGURE OF ERROR PREVENTION PAGE
IF USERS DOESN’T SELECT ANY DEVICE
AN ERROR MESSAGE WILL BE POP UP
FIGURE OF CHANGING COLOUR
WHEN USERS CHOOSE THE DEVICE
FIGURE OF GETTING HOME PAGE
OF THE SMART HUB APPLICATION
FIGURE OF ADDING DEVICES FIGURE OF ADDING DEVICE
USERS HAVE TO SCAN QR CODE
OR HAVE TO ADD
THE DEVICE CODE MANUALLY
FIGURE OF
AFTER CONNECTING THE DEVICE
CHOOSE THE PLACE OF THE DEVICE
FIGURE OF DEVICES ADDED
SUCCESSFULLY WITH THE PLACE
FIGURE OF
USERS CONTROLLING THEIR DEVICES
WITH VOICE COMMAND
(BUTTON TURN RED WHEN USING VOICE)
FIGURE OF CONTROL TO
CONNECTED BULB DEVICES
FIGURE OF
ERROR PREVENTION THAT
USERS CANNOT CONTROL THE THE
DEVICE WITHIN CHOOSING ONE
FIGURE OF
USERS DELETING THE CONNECTED BULB
BY LONG PRESSING THE DEVICE ICON
FIGURE OF
SECOND DECISION MAKING WHETHER
USERS IS SURE TO DELETE
FIGURE OF SHOWING
THERE IS NO CONNECTED DEVICES
FIGURE OF SHOWING THE COLOUR
CHANGING WHEN CHOOSING THE DEVICE
FIGURE OF
ENTERING THE BULB CONTROL PAGE
FIGURE OF USERS
CHANGING THE LIGHT
BY TOUCHING THE COLOURS
(SHOWING WHICH COLOUR HAVE BEEN
CHOSEN BY SHOWING
BLACK COLOUR CIRCLE
AROUND THE TOUCHED COLOUR)
FIGURE OF ADJUSTING
THE BRIGHTNESS PERCENTAGE
FIGURE OF
ANOTHER DEVICES IS ADDED
SIMILAR PROCESS AS
ADDING THE FIRST ONE
FIGURE OF
CHOOSING DEVICES TO GET INTO
CONTROL PAGE
FIGURE OF
SIMILAR COLOUR HAVE BEEN SHOWN
WHEN CHOOSING THE DEVICE
FIGURE OF
ENTERING THE DOOR CONTROL PAGE
FIGURE OF
SHOWING SOS WHEN CLICKED
THE SOS BUTTON
(EMERGENCY WILL BE ACTIVATED WITH
SOS MODE IS ON FOR 3 MINUTES)
FIGURE OF
CHOOSING ANOTHER THERMOSTAT
DEVICES FOR THE PLACE
FIGURE OF SHOWING
TO CONTROL THE THERMOSTAT
(UP AND DOWN BUTTON WILL BE
COLOUR CHANGED WHEN USE CLICKED
THE TARGET ROOM TEMPERATURE
WILL ALSO BE CHANGED)
FIGURE OF
CONNECTING ERROR WITH RED BORDER
ON THE SMART TV
FIGURE OF
SHOWING ERROR WHEN TOUCH
TO THE SMART TV
FIGURE OF
USERS DOUBLE TAB
TO CONNECT AGAIN
FIGURE OF
CONNECTED SUCCESSFULLY AFTER
RECONNECTING TO SMART TV
FIGURE OF
NO RED BORDER IN SMART TV ICON
(THE DEVICE IS CONNECTED)
6.2 High Fidelity Prototype For WatchOS Application
FIGURE OF HOME PAGE FIGURE OF CONNECTED DEVICES
FIGURE OF SHOWING ERROR FIGURE OF CHOOSING DEVICE PAGE
FIGURE OF SHOWING ERROR WHEN USERS
DOES NOT CHOOSE THE DEVICE
FIGURE OF CHOOSING DEVICES
FIGURE OF BULB CONTROL PAGE
7. Evaluation
7.1 Cognitive Psychology
7.1.1 Perception
The button of both design have been easily visible and users can notice what is this button means,
especially for Mic icon, users can get used to with voice command button in phone since this is the
similar icon, there will be no problem for users. Thus the design have been proof the perception rule from
cognitive psychology.
FIGURE OF IOS BUTTON DESIGN FIGURE OF WATCH BUTTON DESIGN
7.1.2 Attention
FIGURE OF IOS SELECT DEVICE FIGURE OF WATCH SELECT DEVICE
When users clicked the connected bulb in the bed room, there have to choose which device that
users want to control. The little box will be pop up and get the users attention to get know what to do
next.
7.1.3 Memory or Recognisable
To get the good memory and recognisable design, there need to be a consistency design without
having much layout and design elements changes. In the above figures (shown in attention), both iOS and
WatchOS design are similar with using the similar layout, design elements, background and front colours.
The other pages in this prototype have been drawn in similar ways. Thus users have no issues of
unmemorable between devices or each page. Thus the design can be called as the recognised design rather
than recalled design.
7.2 Design Principle
#1: Visibility of system status
The device selection of the device window is
visibility when it pop up which other background have
been blur. This concept proof that the system was
drawn by following the Design principles analysed in
the previous section.
#3: User control and freedom
When users want to delete the delete confirm
window will be pop up and get the user attention and
asked whether they are sure to delete the device or not.
This is proof that the design have been following the
Nelson Design principles.
#8: Aesthetic and minimalist design
In this prototype design, there have not been any misleading information or words duplication.
All of the features have been place as necessary and only show the necessary design elements. Thus the
prototype have been prove that it is following the Nelson Design Principles.
#4: Consistency and standards & #6: Recognition rather than recall
For both of the design principles have been proved in the above sections. However, the proof
more about that the words are using the standards
words, in the delete window the words of the buttons
have been used cancel and delete and using the different
colours shown in below.
7.3 Survey
After evaluation the design of the prototype with the followed design principles and guidelines,
there have been asked to the users about the how they feel and what is there users experience while
testing the prototypes and the following answer have been answers. People involved in this survey have
been classified by the target users and there are twelve participators have been taken.
Question 1 :
Question 2 :
Question 3 :
Question 4 :
Question 5 :
Conclusion
In conclusion the design prototype have been visualised well by following the users requirement,
design principles, cognitive psychology and design guidelines. In the prototype, there have been some
difficulties to do in some cases, however, the basic process, transactions of the prototype design have
been created.
In the coursework, it had the chance to get know thee things; Number 1 : how to plan for a
prototype design, Number 2 : how to draw high fidelity prototype and Number 3 : how to evaluate after
the design is done.
The main difficulties in making the coursework are the prototyping tools limitations and there is
no background experience of drawing prototyping. Except from this, the coursework have been done
smoothly. Since this coursework have been involved every parts of the process to make a prototype, it can
called the successful coursework and the feedback from the last survey have been positive, thus the
design can be called good design.
Appendix
Appendix A : Smart Home Users by age
FIGURE OF SMART HOME USERS BY AGE
(Smart Home - worldwide | Statista Market Forecast, 2020)
0
0.1
0.2
0.3
0.4
User by Age
18-24 years 25-34 years 35-44 years 45-54 years 55-64 years
Appendix B : Questionnaires of the users’ requirement research
FIGURE OF QUESTIONNAIRES
SECTION 1 : PERSONAL INFORMATION
FIGURE OF QUESTIONNAIRES
SECTION 2 : ABOUT SMART HOME HUB
FIGURE OF QUESTIONNAIRES
SECTION 3 : ABOUT HOME APPLICATION INTERFACE
Appendix C : Detail Informational Answers of the Rest Questions
References
Rouse, M., 2018. What Is Smart Home Hub (Home Automation Hub)?. [online] IoT Agenda.
Available at: <https://internetofthingsagenda.techtarget.com/definition/smart-home-hub-home-
automation-hub?amp=1> [Accessed 17 April 2020].
Starr, D., 2020. 10 Best Smart Home Hubs Of 2020. [online] Safety.com.
Available at: <https://www.safety.com/best-smart-home-hubs/> [Accessed 17 April 2020].
Statista. 2020. Smart Home - Worldwide | Statista Market Forecast. [online]
Available at: <https://www.statista.com/outlook/283/100/smart-home/worldwide#market-age> [Accessed
17 April 2020].
The Interaction Design Foundation. 2020. What Is User Centered Design?. [online]
Available at: <https://www.interaction-design.org/literature/topics/user-centered-design> [Accessed 19
April 2020].
Abras, C., Maloney-Krichmar, D. and Preece, J., 2014. User-Centered Design. Bainbridge: Thousand
Oaks: Sage Publications, pp.5, 6.
Saffer, D., 2010. Designing for Interaction: Creating Innovative Applications and Devices. 2nd ed.
London: Pearson Education Inc.
Medium. 2018. Activity Centred Design. [online] Available at: <https://medium.com/dermot-holmes/
activity-centred-design-dd28ed1eec59> [Accessed 19 April 2020].
Amann, K., 2009. Goal-Directed Design. [online] Confluence.sakaiproject.org. Available at: <https://
confluence.sakaiproject.org/display/UX/Goal-Directed+Design> [Accessed 22 April 2020].
Preece, J., Sharp , H. & Rogers, Y., 2015. Interaction Design: Beyond Human-Computer Interaction. 4th
Edition ed. Chichester: John Wiley & Sons, Inc.
Nielsen, J., 1994. 10 Heuristics For User Interface Design. [online] Nielsen Norman Group. Available at:
<https://www.nngroup.com/articles/ten-usability-heuristics/> [Accessed 24 April 2020].
Developer.apple.com. 2020. Themes - Ios - Human Interface Guidelines - Apple Developer. [online]
Available at: <https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/>
[Accessed 4 May 2020].
Developer.apple.com. 2020. Themes - Watchos - Human Interface Guidelines - Apple Developer. [online]
Available at: <https://developer.apple.com/design/human-interface-guidelines/watchos/overview/themes/
> [Accessed 4 May 2020].

Mais conteúdo relacionado

Semelhante a Interactive Design Coursework (ID Coursework)

Secrets of going codeless - How to build enterprise apps without coding
Secrets of going codeless - How to build enterprise apps without codingSecrets of going codeless - How to build enterprise apps without coding
Secrets of going codeless - How to build enterprise apps without codingNewton Day Uploads
 
Dashboard settings design in SVARA using user-centred design method
Dashboard settings design in SVARA using user-centred design methodDashboard settings design in SVARA using user-centred design method
Dashboard settings design in SVARA using user-centred design methodTELKOMNIKA JOURNAL
 
Hci in-the-software-process-1
Hci in-the-software-process-1Hci in-the-software-process-1
Hci in-the-software-process-1Ali javed
 
UCD Assignment 2 – Final Report – Training Everywhere
UCD Assignment 2 – Final Report – Training EverywhereUCD Assignment 2 – Final Report – Training Everywhere
UCD Assignment 2 – Final Report – Training EverywhereTimothy Adrian Lam
 
Improving Effort Estimation in Agile Software Development Projects
Improving Effort Estimation in Agile Software Development ProjectsImproving Effort Estimation in Agile Software Development Projects
Improving Effort Estimation in Agile Software Development ProjectsGedi Siuskus
 
CHAPTER 8 User InterfaceDesignChapter 8 is the first of thre.docx
CHAPTER 8 User InterfaceDesignChapter 8 is the first of thre.docxCHAPTER 8 User InterfaceDesignChapter 8 is the first of thre.docx
CHAPTER 8 User InterfaceDesignChapter 8 is the first of thre.docxchristinemaritza
 
Latest proposal project info zakat
Latest proposal project info zakatLatest proposal project info zakat
Latest proposal project info zakatUmmi Zakiah
 
Usability in product development
Usability in product developmentUsability in product development
Usability in product developmentRavi Shyam
 
Ijsred v2 i5p95
Ijsred v2 i5p95Ijsred v2 i5p95
Ijsred v2 i5p95IJSRED
 
Appendix AProof of effectiveness of some of the agile methods us.docx
Appendix AProof of effectiveness of some of the agile methods us.docxAppendix AProof of effectiveness of some of the agile methods us.docx
Appendix AProof of effectiveness of some of the agile methods us.docxarmitageclaire49
 
1. object oriented concepts & principles
1. object oriented concepts & principles 1. object oriented concepts & principles
1. object oriented concepts & principles poonam bora
 
Extreme software estimation (xsoft estimation)
Extreme software estimation (xsoft estimation)Extreme software estimation (xsoft estimation)
Extreme software estimation (xsoft estimation)eSAT Publishing House
 
System Development Life Cycle ( Sdlc )
System Development Life Cycle ( Sdlc )System Development Life Cycle ( Sdlc )
System Development Life Cycle ( Sdlc )Jennifer Wright
 
Extreme software estimation (xsoft estimation)
Extreme software estimation (xsoft estimation)Extreme software estimation (xsoft estimation)
Extreme software estimation (xsoft estimation)eSAT Journals
 
IRJET- City Complaint Management System
IRJET-  	  City Complaint Management SystemIRJET-  	  City Complaint Management System
IRJET- City Complaint Management SystemIRJET Journal
 
Management Information Systems – Week 7 Lecture 2Developme.docx
Management Information Systems – Week 7 Lecture 2Developme.docxManagement Information Systems – Week 7 Lecture 2Developme.docx
Management Information Systems – Week 7 Lecture 2Developme.docxcroysierkathey
 
Introduction to UX for Mesiniaga Academy
Introduction to UX for Mesiniaga AcademyIntroduction to UX for Mesiniaga Academy
Introduction to UX for Mesiniaga AcademyZainul Zain
 
project (Salon Management).pptx
project (Salon Management).pptxproject (Salon Management).pptx
project (Salon Management).pptxssuserefca8b
 
LunchBox:- A Web And Mobile Application
LunchBox:- A Web And Mobile ApplicationLunchBox:- A Web And Mobile Application
LunchBox:- A Web And Mobile ApplicationIRJET Journal
 

Semelhante a Interactive Design Coursework (ID Coursework) (20)

Secrets of going codeless - How to build enterprise apps without coding
Secrets of going codeless - How to build enterprise apps without codingSecrets of going codeless - How to build enterprise apps without coding
Secrets of going codeless - How to build enterprise apps without coding
 
Dashboard settings design in SVARA using user-centred design method
Dashboard settings design in SVARA using user-centred design methodDashboard settings design in SVARA using user-centred design method
Dashboard settings design in SVARA using user-centred design method
 
Hci in-the-software-process-1
Hci in-the-software-process-1Hci in-the-software-process-1
Hci in-the-software-process-1
 
UCD Assignment 2 – Final Report – Training Everywhere
UCD Assignment 2 – Final Report – Training EverywhereUCD Assignment 2 – Final Report – Training Everywhere
UCD Assignment 2 – Final Report – Training Everywhere
 
Improving Effort Estimation in Agile Software Development Projects
Improving Effort Estimation in Agile Software Development ProjectsImproving Effort Estimation in Agile Software Development Projects
Improving Effort Estimation in Agile Software Development Projects
 
CHAPTER 8 User InterfaceDesignChapter 8 is the first of thre.docx
CHAPTER 8 User InterfaceDesignChapter 8 is the first of thre.docxCHAPTER 8 User InterfaceDesignChapter 8 is the first of thre.docx
CHAPTER 8 User InterfaceDesignChapter 8 is the first of thre.docx
 
Latest proposal project info zakat
Latest proposal project info zakatLatest proposal project info zakat
Latest proposal project info zakat
 
Usability in product development
Usability in product developmentUsability in product development
Usability in product development
 
Ijsred v2 i5p95
Ijsred v2 i5p95Ijsred v2 i5p95
Ijsred v2 i5p95
 
Appendix AProof of effectiveness of some of the agile methods us.docx
Appendix AProof of effectiveness of some of the agile methods us.docxAppendix AProof of effectiveness of some of the agile methods us.docx
Appendix AProof of effectiveness of some of the agile methods us.docx
 
1. object oriented concepts & principles
1. object oriented concepts & principles 1. object oriented concepts & principles
1. object oriented concepts & principles
 
Extreme software estimation (xsoft estimation)
Extreme software estimation (xsoft estimation)Extreme software estimation (xsoft estimation)
Extreme software estimation (xsoft estimation)
 
System Development Life Cycle ( Sdlc )
System Development Life Cycle ( Sdlc )System Development Life Cycle ( Sdlc )
System Development Life Cycle ( Sdlc )
 
Extreme software estimation (xsoft estimation)
Extreme software estimation (xsoft estimation)Extreme software estimation (xsoft estimation)
Extreme software estimation (xsoft estimation)
 
IRJET- City Complaint Management System
IRJET-  	  City Complaint Management SystemIRJET-  	  City Complaint Management System
IRJET- City Complaint Management System
 
Management Information Systems – Week 7 Lecture 2Developme.docx
Management Information Systems – Week 7 Lecture 2Developme.docxManagement Information Systems – Week 7 Lecture 2Developme.docx
Management Information Systems – Week 7 Lecture 2Developme.docx
 
Introduction to UX for Mesiniaga Academy
Introduction to UX for Mesiniaga AcademyIntroduction to UX for Mesiniaga Academy
Introduction to UX for Mesiniaga Academy
 
project (Salon Management).pptx
project (Salon Management).pptxproject (Salon Management).pptx
project (Salon Management).pptx
 
CLup System DD
CLup System DDCLup System DD
CLup System DD
 
LunchBox:- A Web And Mobile Application
LunchBox:- A Web And Mobile ApplicationLunchBox:- A Web And Mobile Application
LunchBox:- A Web And Mobile Application
 

Último

Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfPoh-Sun Goh
 
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxHMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxmarlenawright1
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - Englishneillewis46
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptxMaritesTamaniVerdade
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxRamakrishna Reddy Bijjam
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxDr. Sarita Anand
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024Elizabeth Walsh
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.MaryamAhmad92
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxCeline George
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsKarakKing
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.christianmathematics
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Pooja Bhuva
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...Poonam Aher Patil
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsMebane Rash
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...Nguyen Thanh Tu Collection
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentationcamerronhm
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.pptRamjanShidvankar
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxheathfieldcps1
 

Último (20)

Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxHMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptx
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
Spatium Project Simulation student brief
Spatium Project Simulation student briefSpatium Project Simulation student brief
Spatium Project Simulation student brief
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 

Interactive Design Coursework (ID Coursework)

  • 2. Table of Content 1. Introduction 4----------------------------------------------------------- 1.1 Background 4------------------------------------------------------------------- 1.2 Classifying the Target Users 4------------------------------------------------- 2. Frameworks 5----------------------------------------------------------- 2.1 Framework Studies 5----------------------------------------------------------- 2.2 Framework Used 6-------------------------------------------------------------- 3. Research and Requirement Definition 7------------------------------ 3.1 Similar System Analysis (Research) 7----------------------------------------- 3.2 Users Requirements Research 14--------------------------------------------- 3.3 Requirement Definition 18----------------------------------------------------- Summary 19------------------------------------------------------------------------- 5. Framework Definition 20----------------------------------------------- 5.1 Sitemap 20----------------------------------------------------------------------- 5.2 Low Fidelity Prototype 22------------------------------------------------------ Summary 26------------------------------------------------------------------------- 6. Detailed Design 27------------------------------------------------------ 6.1 High Fidelity Prototype For iOS Application 27------------------------------ 6.2 High Fidelity Prototype For WatchOS Application 44------------------------ 7. Evaluation 46------------------------------------------------------------ 7.1 Cognitive Psychology 46------------------------------------------------------- 7.2 Design Principle 49------------------------------------------------------------- 7.3 Survey 51------------------------------------------------------------------------ Conclusion 54--------------------------------------------------------------
  • 3. Appendix 55---------------------------------------------------------------- Appendix A : Smart Home Users by age 55-------------------------------------- Appendix B : Questionnaires of the users’ requirement research 56---------- Appendix C : Detail Informational Answers of the Rest Questions 58--------- References 60--------------------------------------------------------------
  • 4. 1. Introduction A smart home hub which is one of the IoT devices, is to connect the smart home devices like smart bulb, CCTV camera, door and thermostats. The smart hub connect the other devices through bluetooth and the users can commend the smart hub with voice commend. However, the users cannot fully manage with just voice commend of the smart hub. To manage the connected devices fully, it need to have an application on phone, table or smart watch. (Rouse, 2018) 1.1 Background In 2010, the company called “Nest” firstly picture the idea of smart hub. In 2012, the first smart home hub called SmartThings, has been launched and in 2014, the system was bought by Samsung. Now most of the company had been launched many smart hub. The most famous smart hubs in 2020 are Amazon Echo Plus, Google Home Hub (Google Nest Hub) and Samsung SmartThings Hub. (Starr, 2020) Apple also release the smart hub called Apple TV. According to statistic, In 2017, only 4% of worldwide people lived in smart home rather than traditional home, whereas in 2020, the number is up to 9.3%. This rate show The age of the people living in smart home are mostly 25-34 years old. Thus the target users for this coursework will partially be chosen according to that numbers. (Smart Home - worldwide | Statista Market Forecast, 2020) (See more about the detail number of smart home users by age in Appendix A) 1.2 Classifying the Target Users In this coursework, the design of the smart hub will be targeted to three target users. The primary target users are the people who have been 18 to 24 years old, with having some technology knowledge and fluent in English. The secondary targeted users are the people who have been 25 to 34 years old, with having little technology knowledge and fluent in English. The third targeted users are the people who have been 35 to 44 yers old, with little technology knowledge and doesn’t good at English. Before drawing the design for these three target users, the design framework to be used for this coursework will be set.
  • 5. 2. Frameworks There are a lot of design frameworks to be chosen before drawing a prototype. However, in this coursework only three frameworks will be studied and then one of them will be chosen to draw the design. 2.1 Framework Studies 1. User Center Design User-center design (UCD) is an iterative design process where designers draw the design with the ideas and the needs of the users throughout the process. There are four stages in this design process; Understand context of use, specify user requirements, Design solutions and finally Evaluation against requirements. (What is User Centred Design?, 2020) There are also many techniques to involve the users in this process. These are background Interviews and questionnaires, walkthroughs, role playing and simulations and usability testing. (Abras, Maloney-Krichmar and Preece, 2014) 2. Goal Directed Design Goal Directed Design (GDD) is the design process which mainly put the users at the centre of the process and make a huge attention to the needs and goals of the users. Then change these goals into tasks and actives which will finally make the good usable design. In GDD design process can be describes as the six steps process. These are Research, Modelling, Requirements definition, Framework definition, Design and Development. (Amann, 2009) 3. Activity Centred Design Activity Centred Design (ACD) is little differed from User Centred Design and Goal Directed Design. Instead of focusing on uses needs and goals, ACD is mainly focuses on activities performed by users. In activities, there are included about tasks and the tasks again included actions. (Saffer, 2010) Unlike other two, ACD there is just a model. Thus it has not process like the above two, but the designers observe the behaviours of the users using this eight actives nodes; motivation, outcome, object, subject, community, division of labor, rules and rituals and tools and artefact. (Activity Centred Design, 2018)
  • 6. 2.2 Framework Used After studying the three design framework, one of them will be chosen for this coursework. All of these frameworks have their own meaning and process/ nodes. However, to develop this coursework Goal Directed Design (GDD) will be the best option. The Reason of chosen GDD is because it is mainly focus on the users’ needs and goals while UCD is only focus on the needs and ideas of the users. ACD on the other head, does not have a specific process, and have to observe the behaviours of the users with its defined actives nodes. Thus ACD design will be strongly depended on the observing users’ behaviours. In GDD, the involvement of the users is moderate and it has specific and clarify process, so not only its framework is not fully depend on the observing users’ but also the design using this framework will fulfil the goals of the users. As mention above, in GDD there are six design process, however, only four of them will be used for this coursework. 1. Research - where research about the similar system and make the Questionnaires to know about the users’ requirements 2. Requirement Definition - where define the requirements for this coursework to design 3. Framework Definition - where the initial/ low fidelity design will be drawn 4. Design - where high fidelity design will be drawn with evaluations at the end of the coursework FIGURE OF GDD SIX STEPS (AMANN, 2009)
  • 7. 3. Research and Requirement Definition There are Three main section in this Research and Requirement Definition. Analysing of Similar System, Users Requirements Research and Requirement Definition. There are two parts to analyse the similar system; Functional requirements analysis and non-functional requirements analysis. The detail about the similar system analysis will discuss in the next section. 3.1 Similar System Analysis (Research) As mention in above, this course will have four step to design this smart hub application. In this first step, Research, there will be analysed about the similar system. In real world, there have been a lot of smart hub devices and softwares; Among them, two of these softwares will be analysed for this coursework; Apple Home (by Apple Company), SmartThings (by Samsung Company). In the following there will be analysed the overall concept these two softwares. FIGURE OF APPLE HOME KIT (LEFT) AND SAMSUNG SMARTTHINGS (RIGHT)

  • 8. 3.1.1 Functional Requirements After using and analysing these two applications, three main functions included all of these softwares. These function are as follow - Connect Function - All of these software have the same connect function. As soon as the application is opened they need to register the account and have to connect the other smart devices like smart bulb, CCTV camera, door and thermostats. Control Function - After connected the devices, these can be controlled by the software like on/ off function, volume up/ volume down, adjust the condition and so on. There are two want to control from these software, one is to control by touching the screen and the other is controlled by voice commend. Real Time Function - This function is a little similar like the control function, however, this function can see real time. Like looking the front door through CCTV camera and so on.
  • 9. 3.1.2 Non-functional Requirements There will be two main sections in this non-functional requirements analyses; Cognitive Psychology and Design Principles Used. Section 1 : Cognitive Psychology In cognitive psychology, there are two general modes called experimental and reflective cognition. The first one is the state of mind that people act, react and perceive to things effortlessly and effectively. The later one is another state of mind that people think, compare and decisions making. There are six kinds of process to describe the cognitive psychology. These are - 1. attention 2. perception and recognition 3. memory 4. learning 5. reading, speaking, and listening 6. problem solving, planning, reasoning, decision making However, in this coursework, only three of these processes will be adopted to analyse the similar products. 1. Perception Perception means how users can get information by looking at the system. In this case, the button and symbol from Apple Home Kit is more clear than SmartThings. In SmartThings the color of the home background is light and the words and button chosen are white, thus personally the colour chosen from Samsung is a little confuse than Home Kit. FIGURE OF PERCEPTION OF TWO APPLICATIONS

  • 10. 2. Attention Attention is the process of getting more concentration to specific thing while other informations are showing at the same time. In this case, both two softwares get attention of their own purpose in the home page. In home page both of them intend the users to connect other smart devices and the connect button of them is get attention to the users. FIGURE OF GETTING ATTENTION TO THEIRS MAIN FUNCTION 3. Memory or Recognisable Memory or Recognisable means the design can be memorised easily, which does not have to be recalled what the do and how to continue. In this analysis, bot of these two design are memorisable and clean. Thus there is no confused button, words and symbol are used to confuse recognisable. FIGURE OF HOW EASILY RECOGNISED THE DESIGNS ARE
  • 11. Section 2 : Design Principles Used In this section, Nelson heuristic design principles will be used to analysed the similar design. (Nielsen, 1994). In Nelson’s principles, there are totally ten principles, however, in this coursework, only five of them will be used to analysed the similar system. After analysing the mistaken made by these similar application, the upcoming design form this coursework will avoid them as much as possible. #1: Visibility of system status Analysis whether the status of both application is visible and the users have been informed clearly. In SmartThing, because of the light wallpaper and the white text colour, the status of the system is difficult to see for the users. The detail about the visibility of system status will be shown in the figure below. FIGURE OF ANALYSING THE VISIBLE THE STATUS
  • 12. #3: User control and freedom User control and freedom means users have no risk to click button and if something is wrong, “emergency exit” is visible enough for the users to use. Or the users can undo or redo the process from back to front and vice visa. In SmartThing, the hamburger icon is more clear and give the users’ freedom to go anywhere of the application whereas Home kit “HOME icon” is small and difficult to see. The detail about the user control and freedom will be shown in the figure below. FIGURE OF ANALYSING USER CONTROL AND FREEDOM #4: Consistency and standards Consistency and standards means users do not have to face with different words, actions or situation from the application. In both Samsung and Apple have a little different words, however, in Apple is a personal case. But for Samsung, a lot of similar users can get confused. The detail about the consisted and standards will be shown in the figure below. FIGURE OF ANALYSING CONSISTENCY AND STANDARDS

  • 13. #6: Recognition rather than recall A Recognition design means users can use the design that users does not have to recall the design while using. In SmartThings, the design have to recall to connect the smart devices, because of the two area and bad colour chosen. Whereas in Apple Home the home button is small and less visible, thus it also have to recall when to go the main page of the application. The detail about the recall design mistakes will be shown in the figure below. FIGURE OF ANALYSING RECALL DESIGN MISTAKES #8: Aesthetic and minimalist design Aesthetic and minimalist design means, there should not be duplicate features or button in design. Moreover, there should not be unnecessary informations which can lead misunderstanding for users. The detail about the recall design mistakes will be shown in the figure below. FIGURE OF ANALYSING RECALL DESIGN MISTAKES
  • 14. 3.2 Users Requirements Research Questionnaires method will be used to make this users requirements research. In this research Twelve people have been participated and this research has been taken by “Google Form”. However, only eleven people have been answered. There are three sections included in this questionnaires. The first one is personal information, the second is about the smart hub and the last about application interface design. The detail about the questions will be shown in Appendix B. After researching about the users requirements, the following facts will be applied for this upcoming design. The rest answers from the questionnaires will be shown in Appendix C. Fact 1 : Background Colour and Text Colour FIGURE OF BACKGROUND COLOUR AND TEXT COLOUR CHOSEN From the research about 54.5% of the people love back background colour and white text colour, thus the design colour chosen will be drawn according to that. However, 36.4% of the people like background colour white and text colour black thus this colour will also be added as optional in design.
  • 15. Fact 2 : Popular Font Design FIGURE OF CHOSEN FONT DESIGN Arial is the best choice from research thus, it will be set as the primary font design, while Time New Roman Font design will be used as the secondary font design for this coursework prototype.
  • 16. Fact 3 : Popular Button Design FIGURE OF CHOSEN BUTTON DESIGN Most of the people choose Button Design 2 and 3, thus these two designs will be chosen as Primary and secondary designs. (See more about Button Design in Question Figures | Appendix B) Fact 4 : Popular Icon Design FIGURE OF CHOSEN ICON DESIGN The icon design 3 will be used as the primary icon design in this coursework design and the icon design 1 will be used as the secondary icon design. (See more about Icon Design in Question Figures | Appendix B)
  • 17. Fact 5 : Chosen Devices FIGURE OF CHOSEN DEVICES From the end result of the questionnaires, this prototype design will be drawn for two devices; Phone as the primary devices and the Watch as the secondary devices.
  • 18. 3.3 Requirement Definition According to research of users requirements, the participants want to get the for smartphone and smart watch. In this coursework the prototype will be drawn for apple devices as the personal preference. In this section, there will be defined about the iOS Design Guidelines and Watch OS Design Guidelines to be applied for design. 3.3.1 iOS Design Guidelines There are iOS six design guidelines to be followed. However, as this is an educational coursework, there will be mainly three guidelines will be followed and the detail will be shown in the table below. (Themes - iOS - Human Interface Guidelines - Apple Developer, 2020) Number Description In detail Guideline ONE: Consistency Consistency design means using general icons, terminology, design elements and typography which users will easily understand and easy to use. Thus this coursework design will only used general icons, design elements and typography which users have been used to. Guideline TWO: Feedback Feedback are used to know what users are doing and what users did. To show the feedback, the designs are typically shown by animation, sound and vibration. In this coursework, to get user acknowledge the feedback will mainly be shown by animations. Guideline THREE: User Control Users Control means in case if uses make the dangerous decision like delete the connected devices, they have been asked for double check whether it is a wrong decision or mistakenly touch. In this prototype when users delete the application the error message will be shown to make the second decision for users.
  • 19. 3.3.2 WatchOS Design Guidelines In this coursework, watchOS application have been chosen as the secondary control device. To make the smartwatch application, there are three design guidelines to be followed. Since there is not coding and only prototyping only one can be applied for this prototype. The applied guideline for WatchOS will be explained below. (Themes - watchOS - Human Interface Guidelines - Apple Developer, 2020) Summary In summary, in this section 3, there have been researched and analysed about the Similar System, Research about users requirements by making survey and have been set the requirement definition for the design. All of the these facts will be used to apply for the up coming prototype designs. In this coursework, the application design will have three main functional features; Connect, Control and Real Time control (Voice Command). The design for the prototype will be drawn by following the cognitive psychology of the users, 5 principles from Nelson’s Design Principles and the iOS and watchOS Guidelines. However, there will be a few different between smartphone design and the watch design, due to the smaller screen size the the followed guideline (Glanceable). In the next section there will be shown about the sitemap for two devices and the low fidelity prototypes drawn by following their respective design guidelines. Number Description In detail Guideline ONE: Glanceable Glanceable means users can use the application short to the point with showing main information without distributing by others unnecessary information. Thus to draw this watch application some of the features included in iOS app will be removed. The others guidelines; Actionable and Responsible are not suitable to use for the prototype make.
  • 20. 5. Framework Definition 5.1 Sitemap Since the prototype will be drawn for two different devices with different guidelines, the sitemap for these two will be different. In primary device (mobile), users have function like connect and control to the devices whereas in Smartwatch there will be included only control to the connected devices. This is because smart watch have the limited screen size and followed design guidelines. FIGURE OF SITEMAP PROTOTYPE FOR IOS DEVICE

  • 21. FIGURE OF SITEMAP PROTOTYPE FOR SMART WATCH
  • 22. 5.2 Low Fidelity Prototype As mention above, the below low fidelity prototype will be only drawn by following its respective design guidelines. 5.2.1 Low Fidelity Prototype for primary device (Mobile Phone) Consistency Design FIGURE OF WATCH CONTROL BULBFIGURE OF IOS CONTROL BULB A consistency design isn’t just about using general design icon, design elements, but also the design of the different devices should be a consistency design. In the above two figures the basic layout, icons and design elements for two different devices are similar.
  • 23. Feedback FIGURE OF DEVICES CONNECT ROOM Since this is the low fidelity prototype, the feedback show to users clarify, however, if your click some of the buttons included in the system, it change colour to know what they do.
  • 24. User Control FIGURE OF USERS DELETING THE CONNECTED BULB DEVICE In the figure if users want to delete a connected device, they have been asked whether they want to delete the derives for sure or not. Thus applying the user control guidelines from iOS devices will make users to except from dangerous condition. FIGURE OF WATCH CONTROL BULB
  • 25. 5.2.2 Low Fidelity Prototype for secondary device (Smartwatch) Glanceable 
 FIGURE OF IOS CONTROL BULB As mention above the prototype design of the smart watch is not as same as mobile since it has the smaller size. From this two low fidelity prototype the design elements of the two devices are similar, however the layout of smartwatch is different from the mobile one.
  • 26. Summary In this section, there have been included about the sitemap to know the process of prototype for both devices. And then drawn about the low fidelity prototype. By drawing low fidelity prototype the general layout and design elements used for this prototype have been visualised and the next section, there will be drawn about the high fidelity prototype based on this low fidelity one.
  • 27. 6. Detailed Design 6.1 High Fidelity Prototype For iOS Application Before starting about to the home page and the connection page, there need to be an introduction page for the first time users. Thus they can easily get how to use the smart hub application and how to connect the application with the hub device. FIGURE OF FIRST WELCOME PAGE FIGURE OF INSTRUCTION PAGE TO CONNECT WITH SMART HUB (USED USERS FAMILIAR SMILE FACE )
  • 28. FIGURE OF INSTRUCTION STEPS BY STEP TO CONNECT WITH SMART HUB FIGURE OF SEARCHING SMART HUB
  • 29. FIGURE OF FOUNDING DEVICE FIGURE OF ERROR PREVENTION PAGE IF USERS DOESN’T SELECT ANY DEVICE AN ERROR MESSAGE WILL BE POP UP
  • 30. FIGURE OF CHANGING COLOUR WHEN USERS CHOOSE THE DEVICE FIGURE OF GETTING HOME PAGE OF THE SMART HUB APPLICATION
  • 31. FIGURE OF ADDING DEVICES FIGURE OF ADDING DEVICE USERS HAVE TO SCAN QR CODE OR HAVE TO ADD THE DEVICE CODE MANUALLY
  • 32. FIGURE OF AFTER CONNECTING THE DEVICE CHOOSE THE PLACE OF THE DEVICE FIGURE OF DEVICES ADDED SUCCESSFULLY WITH THE PLACE
  • 33. FIGURE OF USERS CONTROLLING THEIR DEVICES WITH VOICE COMMAND (BUTTON TURN RED WHEN USING VOICE) FIGURE OF CONTROL TO CONNECTED BULB DEVICES
  • 34. FIGURE OF ERROR PREVENTION THAT USERS CANNOT CONTROL THE THE DEVICE WITHIN CHOOSING ONE FIGURE OF USERS DELETING THE CONNECTED BULB BY LONG PRESSING THE DEVICE ICON
  • 35. FIGURE OF SECOND DECISION MAKING WHETHER USERS IS SURE TO DELETE FIGURE OF SHOWING THERE IS NO CONNECTED DEVICES
  • 36. FIGURE OF SHOWING THE COLOUR CHANGING WHEN CHOOSING THE DEVICE FIGURE OF ENTERING THE BULB CONTROL PAGE
  • 37. FIGURE OF USERS CHANGING THE LIGHT BY TOUCHING THE COLOURS (SHOWING WHICH COLOUR HAVE BEEN CHOSEN BY SHOWING BLACK COLOUR CIRCLE AROUND THE TOUCHED COLOUR) FIGURE OF ADJUSTING THE BRIGHTNESS PERCENTAGE
  • 38. FIGURE OF ANOTHER DEVICES IS ADDED SIMILAR PROCESS AS ADDING THE FIRST ONE FIGURE OF CHOOSING DEVICES TO GET INTO CONTROL PAGE
  • 39. FIGURE OF SIMILAR COLOUR HAVE BEEN SHOWN WHEN CHOOSING THE DEVICE FIGURE OF ENTERING THE DOOR CONTROL PAGE
  • 40. FIGURE OF SHOWING SOS WHEN CLICKED THE SOS BUTTON (EMERGENCY WILL BE ACTIVATED WITH SOS MODE IS ON FOR 3 MINUTES) FIGURE OF CHOOSING ANOTHER THERMOSTAT DEVICES FOR THE PLACE
  • 41. FIGURE OF SHOWING TO CONTROL THE THERMOSTAT (UP AND DOWN BUTTON WILL BE COLOUR CHANGED WHEN USE CLICKED THE TARGET ROOM TEMPERATURE WILL ALSO BE CHANGED) FIGURE OF CONNECTING ERROR WITH RED BORDER ON THE SMART TV
  • 42. FIGURE OF SHOWING ERROR WHEN TOUCH TO THE SMART TV FIGURE OF USERS DOUBLE TAB TO CONNECT AGAIN
  • 43. FIGURE OF CONNECTED SUCCESSFULLY AFTER RECONNECTING TO SMART TV FIGURE OF NO RED BORDER IN SMART TV ICON (THE DEVICE IS CONNECTED)
  • 44. 6.2 High Fidelity Prototype For WatchOS Application FIGURE OF HOME PAGE FIGURE OF CONNECTED DEVICES FIGURE OF SHOWING ERROR FIGURE OF CHOOSING DEVICE PAGE
  • 45. FIGURE OF SHOWING ERROR WHEN USERS DOES NOT CHOOSE THE DEVICE FIGURE OF CHOOSING DEVICES FIGURE OF BULB CONTROL PAGE
  • 46. 7. Evaluation 7.1 Cognitive Psychology 7.1.1 Perception The button of both design have been easily visible and users can notice what is this button means, especially for Mic icon, users can get used to with voice command button in phone since this is the similar icon, there will be no problem for users. Thus the design have been proof the perception rule from cognitive psychology. FIGURE OF IOS BUTTON DESIGN FIGURE OF WATCH BUTTON DESIGN
  • 47. 7.1.2 Attention FIGURE OF IOS SELECT DEVICE FIGURE OF WATCH SELECT DEVICE When users clicked the connected bulb in the bed room, there have to choose which device that users want to control. The little box will be pop up and get the users attention to get know what to do next.
  • 48. 7.1.3 Memory or Recognisable To get the good memory and recognisable design, there need to be a consistency design without having much layout and design elements changes. In the above figures (shown in attention), both iOS and WatchOS design are similar with using the similar layout, design elements, background and front colours. The other pages in this prototype have been drawn in similar ways. Thus users have no issues of unmemorable between devices or each page. Thus the design can be called as the recognised design rather than recalled design.
  • 49. 7.2 Design Principle #1: Visibility of system status The device selection of the device window is visibility when it pop up which other background have been blur. This concept proof that the system was drawn by following the Design principles analysed in the previous section. #3: User control and freedom When users want to delete the delete confirm window will be pop up and get the user attention and asked whether they are sure to delete the device or not. This is proof that the design have been following the Nelson Design principles.
  • 50. #8: Aesthetic and minimalist design In this prototype design, there have not been any misleading information or words duplication. All of the features have been place as necessary and only show the necessary design elements. Thus the prototype have been prove that it is following the Nelson Design Principles. #4: Consistency and standards & #6: Recognition rather than recall For both of the design principles have been proved in the above sections. However, the proof more about that the words are using the standards words, in the delete window the words of the buttons have been used cancel and delete and using the different colours shown in below.
  • 51. 7.3 Survey After evaluation the design of the prototype with the followed design principles and guidelines, there have been asked to the users about the how they feel and what is there users experience while testing the prototypes and the following answer have been answers. People involved in this survey have been classified by the target users and there are twelve participators have been taken. Question 1 : Question 2 :
  • 54. Conclusion In conclusion the design prototype have been visualised well by following the users requirement, design principles, cognitive psychology and design guidelines. In the prototype, there have been some difficulties to do in some cases, however, the basic process, transactions of the prototype design have been created. In the coursework, it had the chance to get know thee things; Number 1 : how to plan for a prototype design, Number 2 : how to draw high fidelity prototype and Number 3 : how to evaluate after the design is done. The main difficulties in making the coursework are the prototyping tools limitations and there is no background experience of drawing prototyping. Except from this, the coursework have been done smoothly. Since this coursework have been involved every parts of the process to make a prototype, it can called the successful coursework and the feedback from the last survey have been positive, thus the design can be called good design.
  • 55. Appendix Appendix A : Smart Home Users by age FIGURE OF SMART HOME USERS BY AGE (Smart Home - worldwide | Statista Market Forecast, 2020) 0 0.1 0.2 0.3 0.4 User by Age 18-24 years 25-34 years 35-44 years 45-54 years 55-64 years
  • 56. Appendix B : Questionnaires of the users’ requirement research FIGURE OF QUESTIONNAIRES SECTION 1 : PERSONAL INFORMATION FIGURE OF QUESTIONNAIRES SECTION 2 : ABOUT SMART HOME HUB
  • 57. FIGURE OF QUESTIONNAIRES SECTION 3 : ABOUT HOME APPLICATION INTERFACE
  • 58. Appendix C : Detail Informational Answers of the Rest Questions
  • 59.
  • 60. References Rouse, M., 2018. What Is Smart Home Hub (Home Automation Hub)?. [online] IoT Agenda. Available at: <https://internetofthingsagenda.techtarget.com/definition/smart-home-hub-home- automation-hub?amp=1> [Accessed 17 April 2020]. Starr, D., 2020. 10 Best Smart Home Hubs Of 2020. [online] Safety.com. Available at: <https://www.safety.com/best-smart-home-hubs/> [Accessed 17 April 2020]. Statista. 2020. Smart Home - Worldwide | Statista Market Forecast. [online] Available at: <https://www.statista.com/outlook/283/100/smart-home/worldwide#market-age> [Accessed 17 April 2020]. The Interaction Design Foundation. 2020. What Is User Centered Design?. [online] Available at: <https://www.interaction-design.org/literature/topics/user-centered-design> [Accessed 19 April 2020]. Abras, C., Maloney-Krichmar, D. and Preece, J., 2014. User-Centered Design. Bainbridge: Thousand Oaks: Sage Publications, pp.5, 6. Saffer, D., 2010. Designing for Interaction: Creating Innovative Applications and Devices. 2nd ed. London: Pearson Education Inc. Medium. 2018. Activity Centred Design. [online] Available at: <https://medium.com/dermot-holmes/ activity-centred-design-dd28ed1eec59> [Accessed 19 April 2020]. Amann, K., 2009. Goal-Directed Design. [online] Confluence.sakaiproject.org. Available at: <https:// confluence.sakaiproject.org/display/UX/Goal-Directed+Design> [Accessed 22 April 2020]. Preece, J., Sharp , H. & Rogers, Y., 2015. Interaction Design: Beyond Human-Computer Interaction. 4th Edition ed. Chichester: John Wiley & Sons, Inc. Nielsen, J., 1994. 10 Heuristics For User Interface Design. [online] Nielsen Norman Group. Available at: <https://www.nngroup.com/articles/ten-usability-heuristics/> [Accessed 24 April 2020].
  • 61. Developer.apple.com. 2020. Themes - Ios - Human Interface Guidelines - Apple Developer. [online] Available at: <https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/> [Accessed 4 May 2020]. Developer.apple.com. 2020. Themes - Watchos - Human Interface Guidelines - Apple Developer. [online] Available at: <https://developer.apple.com/design/human-interface-guidelines/watchos/overview/themes/ > [Accessed 4 May 2020].