Assignment

Human Computer Interaction and

Design
Student: Nguyen Thanh Long
Student ID: GCD17099
BannerID: 001137901
10/25/2020
 Table of Contents
Introduction ............................................................................................................................................ 5
1. Interaction design ............................................................................................................................ 5
2. Smart Gym Devices ? ....................................................................................................................... 6
2.1. Research about Similar Products .............................................................................................. 6
2.2. Design Framework ................................................................................................................... 8
2.2.1. User-centered design ....................................................................................................... 8
2.2.2. Goal-Directed Design ........................................................................................................ 8
2.2.3. Activity-Centred Design .................................................................................................. 10
2.2.4. Participatory Design ....................................................................................................... 10
3. Cognitive Aspects........................................................................................................................... 10
3.1. What is Cognition? ................................................................................................................. 10
3.1.1. Attention ........................................................................................................................ 11
3.1.2. Perception ...................................................................................................................... 12
3.1.3. Memory ......................................................................................................................... 12
3.1.4. Learning ......................................................................................................................... 13
3.1.5. Reading, Speaking, and Listening .................................................................................... 13
3.1.6. Problem Solving, Planning, Reasoning, and Decision Making........................................... 14
4. Choose Framework for the Coursework ......................................................................................... 14
5. Conceptual model design............................................................................................................... 15
5.1. Definition ............................................................................................................................... 15
5.1.1. Instructing ...................................................................................................................... 15
5.1.2. Conversing ..................................................................................................................... 16
5.1.3. Manipulating .................................................................................................................. 17
5.1.4. Exploring ........................................................................................................................ 18
5.2. Interface Metaphors .............................................................................................................. 19
5.3. Build a conceptual model for Smart Gym Devices ................................................................... 20
6. User requirement in project........................................................................................................... 21
6.1. Project idea design ................................................................................................................. 21
6.2. Target Users ........................................................................................................................... 21
6.3. Method for gathering data ..................................................................................................... 22
6.4. Create a mood board for the application ................................................................................ 26
7. Prototypes ..................................................................................................................................... 26
7.1. Definition ............................................................................................................................... 26
7.2. Why is prototyping important? .............................................................................................. 27
7.3. Low-fidelity prototyping ......................................................................................................... 27
7.4. High-Fidelity Prototyping........................................................................................................ 27
8. Design a low-fidelity prototype for the coursework........................................................................ 28
8.1. Site Map for Application of Smart Gym Device ....................................................................... 28
8.2. Story Board for Application of Smart Gym Device ................................................................... 28
8.3. Recap functions of the device and the application: ................................................................. 29
8.3.1. The Functions of Mobile application. .............................................................................. 29
8.3.2. The Functions of Smart Gym Device................................................................................ 30
8.3.3. Arguments in function of Course work ............................................................................ 30
8.4. Design paper prototype.......................................................................................................... 31
8.5. App Design a wireframe by using Axure: ................................................................................ 31
8.6. Design a high-fidelity prototype for the coursework ............................................................... 35
8.6.1. Design mood board for a Course Work ........................................................................... 35
8.6.2. Design App for a Course Work ........................................................................................ 36
8.6.3. General comparison: ...................................................................................................... 42
8.7. Physical Design....................................................................................................................... 42
9. Evaluation...................................................................................................................................... 42
9.1. Definition ............................................................................................................................... 42
9.2. Heuristic evaluation for the Smart Gym Devices ..................................................................... 43
Visibility of the system’s status ...................................................................................................... 43
Match between the system and real world .................................................................................... 44
User control and freedom .............................................................................................................. 45
Consistency and standards............................................................................................................. 46
Error prevention ............................................................................................................................ 47
Recognition rather than recall ........................................................................................................ 48
Flexibility and efficiency of use ...................................................................................................... 49
Aesthetics and minimalist design ................................................................................................... 50
Help users recognize, diagnose and recover from error ................................................................. 51
Help and documentation ............................................................................................................... 51
Conclusion............................................................................................................................................. 53
Survey Questionnaire ............................................................................................................................ 55

Table of Figure

Figure 1: NordicTrack RW900 .................................................................................................................. 6

Figure 2: Smart Mirrors ........................................................................................................................... 7
Figure 3: Diagram depicting the stages of UCD ........................................................................................ 8
Figure 4: Describe the steps of Goal-Directed Design ............................................................................... 9
Figure 5: Example of Atention................................................................................................................ 12
Figure 6: Example of Instructing ............................................................................................................ 16
Figure 7: Example of Conversing ............................................................................................................ 17
Figure 8: Example of Manipulating ........................................................................................................ 18
Figure 9: Example of Exploring ............................................................................................................... 19
Figure 10: Example of Interface Metaphors ........................................................................................... 20
Figure 11: Conceptual model for Smart Gym Devices ............................................................................. 21
Figure 12: Statistical chart of the collected data of question 1 ............................................................... 22
Figure 13: Statistical chart of the collected data of question 2 ............................................................... 23
Figure 14: Statistical chart of the collected data of question 3 ............................................................... 23
Figure 15: Statistical chart of the collected data of question 4 ............................................................... 24
Figure 16: Statistical chart of the collected data of question 5 ............................................................... 24
Figure 17: Statistical chart of the collected data of question 6 ............................................................... 25
Figure 18: Statistical chart of the collected data of question 7 ............................................................... 25
Figure 19: Basic mood board needed. .................................................................................................... 26
Figure 20: Site Map for SGD ................................................................................................................... 28
Figure 21: Story board of SGD ................................................................................................................ 29
Figure 22: Paper prototype for mobile app ............................................................................................ 31
Figure 23: Login page of Mobile app ...................................................................................................... 32
Figure 24: Home page of Mobile app ..................................................................................................... 32
Figure 25: Home page of Smart Gym Device .......................................................................................... 33
Figure 26: Workout page of Smart Gym Device ..................................................................................... 33
Figure 27: Online Class of Smart Gym Device ......................................................................................... 34
Figure 28: Planning page of Smart Gym Device ...................................................................................... 34
Figure 29: Mood board of SGD .............................................................................................................. 35
Figure 30: Low and high-fidelity prototype in login page ........................................................................ 36
Figure 31: Low and high-fidelity prototype in Home Page ...................................................................... 37
Figure 32: Low and high-fidelity prototype in Home Page of SGD........................................................... 38
Figure 33: Low and high-fidelity prototype in Course page of SGD ......................................................... 39
Figure 34: Low and high-fidelity prototype in Online Class of SGD.......................................................... 40
Figure 35: Low and high-fidelity prototype in Planning page of SGD ....................................................... 41
Figure 36: Physical Design of SGD .......................................................................................................... 42
Figure 37: Proof of Visibility of the system's status ................................................................................ 43
Figure 38: Proof of Match between the system and real world .............................................................. 44
Figure 39: Proof of User control and freedom ........................................................................................ 45
Figure 40: Proof of Consistency and standards....................................................................................... 46
Figure 41: Proof of Error prevention ...................................................................................................... 47
Figure 42: Proof of Recognition rather than recall.................................................................................. 48
Figure 43: Proof of Flexibility and efficiency of use ................................................................................ 49
Figure 44: Proof of Aesthetics and minimalist design ............................................................................. 50
Figure 45: Proof of Help users recognize, diagnose and recover from error ........................................... 51
Figure 46: Proof of Help and documentation ......................................................................................... 52
Introduction
This report will describe the definition of Interaction design and explain some of the current Smart Gym
Devices. Besides, I have analyzed and presented some of the types of Design framework I studied.
Readers can understand the types of framework designs and their differences. User-Center Design is the
framework that I used during product design this time. This process requires me to carefully study the
implementation steps, analyze and collect data from users most appropriately and accurately. All the
data I collect has been presented in this report. Next, I will talk about the Low and High-fidelity
prototype for coursework. The purpose is for me to easily visualize the functionality, the interface, the
development direction of user requirements, and this Course work. Then I can compare the two designs
and come up with new ideas.

Last but not least, I give an evaluation for my design, including two main elements that are Natural
settings involving users and Controlled settings involving users. It appears that On that basis, I have used
the Heuristic evaluation method to measure the usability and UI based on the evidence of the product I
have developed.

1. Interaction design
Interaction design is understood as the design of interactive service between users and the product that
they design, rather than developing, including how users interact with it. Therefore, the need to clearly
define the needs of the user is the biggest goal to have a good Interaction design (Yu Siang,2020).

The 5 dimensions of interaction design is a useful model to understand what interaction design involves.

 1D: Words: Words — do not be picky about using words to represent interaction. Content must
be meaningful and easy to understand. (Yu Siang,2020).
 2D: Visual representations: All the content that you put in to design the interface for the
product is always faithful to its name or meaning, including fonts, icons, etc. images, always
assisting users in compatibility cooperation (Yu Siang,2020).
 3D: Physical objects/space: Interactive devices related to the devices being designed. For
example, remote and television (Yu Siang,2020).
 4D: Time: Factors that change over time. Examples: animations, videos, loading, sound. Its
properties will change and end in a certain period. (Yu Siang,2020).
 5D: Behavior (5D): User behavior will be defined through the previous four steps to make a
product interacting well. For example, the search function will bring up what content users are
looking for first; in other words, user habits (Yu Siang,2020).
 2. Smart Gym Devices ?
Technology trends in the world today, the optimization and improvement of equipment always
happen every year. The aim is to help people have a convenient and more accessible life. The past 2020
can be said to be a year full of fluctuations in the world economy, especially the pandemic COVID 19. If,
for that reason that you cannot go to the center gym, the solution of the current world is that Smart
Gym Device at home.

Smart Gym Devices are understood as human health enhancement devices combined with some IoT
sensors (heart rate measurement, temperature measurement, time recording, Etc.) that can be
monitored training progress and sending notifications back to the user's smartphone.

2.1. Research about Similar Products

NordicTrack RW900

The NordicTrack RW900: Has 22 inch, 7 feet, 3 inches long and 1 foot, 10 inches wide touch screen. It
can be streamed with outdoor exercises. The HDMI port allows you to display the monitor screen on a
TV or separate monitor if you want. The device is designed with an interface that helps the user to
statistic data designed above the screen. Volume and resistance can be adjusted, enter full-screen
mode, or pause a workout. There are two wheels in front, so it is easy to move. (Moscaritolo,2020)

Figure 1: NordicTrack RW900

Through information, images I can understand. Human-device interaction is through 2 main factors:
 Horizontal hand tools with length about 30cm.
 Through a bout the devices touch screen. Show correct pictures, videos, steps. Basic parameters
are time, heart rate.
Smart Mirrors

The device is attached to your home's wall, so it will not take up too large an area of floor space. Users
more comfortable product experience with a yoga mat. It can be streamed with others while in class.
You can see Personal Trainers as well as themselves through the reflection in the mirror. With the
minor, it will help you closely observe the body for the most accurate exercise. The user's data
parameters will be displayed on the screen, including heart rate, calories, time, exercises details. The
device supports many exercises and online classes according to users' requirements, including cardio,
yoga, boxing, fitness exercises.

Figure 2: Smart Mirrors

Through information, images I can understand. Human-device interaction is through 2 main factors:
 Through a bout the devices touch screen. Show correct pictures, videos, steps. Basic parameters
are time, heart rate.
 In this device there is a live classroom application so interaction is also possible through the
user's voice or message.
 2.2. Design Framework

2.2.1. User-centered design

User-centered design (UCD): User-centric to design products. This process requires the designer to
design the product repeatedly during each design phase. It requires much interaction between designer
and user, so the user's requirements will also change from time to time. Therefore, in the completion
phase, the product will have the best product that increases usability and is easy to access. (The
Interaction Design Foundation. 2020).

Each interaction of the UCD approach involves four distinct phases:

 First: Provide the appropriate context for the users to use the system. Easier while
working in groups.
 Secondly: Collect user requests. From there, determine and select the reasonable
requirements for product development.
 Third: In the design phase, it is necessary to offer solutions to design for product
development. The next is to make an assessment.
 Four: Evaluate the product based on the user's requirements to check if its design meets
its requirements.

Figure 3: Diagram depicting the stages of UCD

More clearly, how and to what extent your assessment of the specific user contexts has met their needs.
Next, the Designer needs to repeat the previous four stages until the evaluation results have met all
requirements (The Interaction Design Foundation. 2020).

2.2.2. Goal-Directed Design

Goal-directed design: This process is geared towards the details, the user's behavior. Designers need to
know nature and understand their behavior to create a product with a design and function that meets
those requirements (H., S., H., S. and D., Y., 2020).
Notably, the designer's goal is to create user interaction plans, ensuring that the user will approve and
continue using the product. (H., S., H., S. and D., Y., 2020).

The design process in UX / UI design studio is divided into six steps:

Figure 4: Describe the steps of Goal-Directed Design

Project Planning

This is an important phase of the project, which helps us manage the research process by making a
Gantt chart, reporting on the project progress, and avoiding unnecessary risks.

Research

During this stage, your most important thing is to research and collect user-related data. Accuracy is a
top priority, so it is essential to ensure and audit those who regularly use the software regularly. From
there, we get the result that should be a sample of user behavior that can be analyzed and have a design
consensus consistent with user psychology.

Modeling

In this stage, you need to aggregate all the data that you have gathered during the research phase and
transform it into a domain model that is the detailed graphs and schemas that show the personality of
user. The goals are compared with the priority and selection of personality so the order is assigned
based on the reasonableness of the personality and the coverage of the goals of the models.

Requirements

During this phase, all individual goals and requirements will be created by a series of user interaction
events in the design. The design will be focused on the specifics of each event's behavior. From there
will be a highly productive, purely goal-oriented process as individual priorities will be genuinely clearer.

Framework

Crafting a product is the first important step in creating a software product. The overall structure is
guaranteed, and the interface ideas must be substantial. Each function or behavior needs to be set up
with different conditions. (H., S., H., S. and D., Y., 2020).

This stage aims to create a particular type of design technique to target perfection and detail of its
behavior. This process is similar to the previous stage, focusing more on improving, adjusting, and
making the functional structure in the most accurate direction. To achieve this, the designer needs
necessary to understand the approach to the scenario (H., S., H., S. and D., Y., 2020).

The challenge of finding the right balance between weak and simple software versions and good
software is involved. The GDD process uses behavioral analysis to understand better the adaptation,
understanding, and thinking processes of more than two types of users. This allows for systematic
synthesis and ease of use for different behaviors (H., S., H., S. and D., Y., 2020).

Development Support

Design obsolescence is always present today, so we need to maintain the main structural character of a
design while keeping its main intentions at the same time—will update changes as user needs.

2.2.3. Activity-Centred Design

Activity-Centred Design (ACD): This is a design paradigm that focuses on how systems generate results
from activities. The point is that all of the systems is more than just the focus of the user. It is important
to note that the ACD is only a model, not a process. The ACD is just an important piece that can be used
for design. It considers the system to be broader than one person. (Dermot, 2020).

For example, This perspective may allow us to focus our design work on community or social norms
more appropriate than individual user interfaces.

2.2.4. Participatory Design

Participatory design is considered – It is both a process and a magnetic needle - bringing end-users and
customers to the design process (they can debate, suggest development).

PD is a design, as opposed to empathy. In which researchers and designers transition to the state of the
end-user. Participatory design can be viewed from the end-user through research and development. PD
includes many different aspects. Users and customers in the early stages of the design process and then
in the evaluation process should test usability and test the design before getting the most accurate
assessment. (Cipan, V., Cipan, V., Cipan, V. and Jamak, A., 2020).

3. Cognitive Aspects

3.1. What is Cognition?

There are many different kinds of cognition, such as thinking, remembering, learning, daydreaming,
decision making, seeing, reading, writing, and talking. A well-known way of distinguishing between
different modes of cognition is whether it is experiential or reflective. Experiential cognition is a state of
mind where people perceive, act, and react to events around them intuitively and effortlessly. It
requires reaching a certain level of expertise and engagement (Rogers, Sharp, and Preece, 2011).
Examples include designing, learning, and writing a report. Both modes are essential for everyday life.
Another popular way of describing cognition is in terms of fast and slow thinking (Rogers, Sharp, and
Preece, 2011).

Rogers, Sharp, and Preece (2011) Suggested that In other words, in order to be able to understand or
articulate perceptions of the context in which it takes place, the tools used, the contents and interfaces
used, and the people involved. Depending on different situations, expand and define.

Awareness is described through the following specific processes: These include:

 Attention.
 Perception.
 Memory.
 Learning.
 Reading, speaking, and listening.
 Problem-solving, planning, reasoning, and decision-making.

3.1.1. Attention
Attention is the center of our lives. It allows us to be careful in all situations. It is like an attraction that
keeps an eye on it. Like someone calling my name and I turn around, It’s advises us to cross the street
safely. It involves choosing what to focus on over some time, from the range of available possibilities,
allowing me to focus on information regarding what I intend to do. To know whether the process is
simple or challenging depends on (i) whether there is a clear goal and (ii) whether their information
needs to stand out in the design. (Rogers, Sharp, and Preece, 2011).
(i)Your goal: In order to know exactly what they want to learn, they will try to combine these
goals with available information. If when you are unsure of exactly what they are looking for, they can
identify their information by consenting to information to allow that information to direct their
attention to their targets bigger or more prominent. (Rogers, Sharp, and Preece, 2011).
(ii) Information Presentation: The way information is displayed can also greatly influence how
easy or difficult it is to comprehend appropriate pieces of information. Look at Figure 5, and try the
activity (based on Tullis, 1997). Here, the information-searching tasks are precise, requiring specific
answers (Rogers, Sharp, and Preece, 2011).
 Figure 5: Example of Atention

3.1.2. Perception
Perception is the process by which when we determine the meaning or understand a problem from
which we come up with a solution to experience meaningful things. Sensation usually only occurs for
some time, and the consequences are immediate, without overthinking and untreated stimulation of
the sensory affected areas of the eyes, ears, nose, tongue. Or leather. Besides, the more descriptive
Perception darkens a person's ultimate experience, they will know what should and should not do.
Therefore, awareness is also concerned with the additional processing of sensory inputs (Cipan, V.,
Cipan, V., Cipan, V. and Jamak, A., 2020).

In order to have design that is valuable to consumers, designers and marketers can interact with users
by researching the market and they need to solve the following problems:

 Why should users use your product?

 Why do users compare your product with another product?
 For each product, can you come up own criteria?
 What is the change in user / customer perception of your product over time?

These answers can provided your product design process to be more complete. It is important that you
identify the audience for which we can advance the design process.

3.1.3. Memory
Memory is a significant and indispensable part of the way we perceive life around us. Humans can
memorize long term and short term. Everything would be more comfortable and more beautiful if we
could create the design by understanding and remembering how memory works, how we can work
within capacity instead of fighting it.
This is very important for all designers, especially visual information designers, as it is their job to ensure
that the viewer and users easily understand their works.

Perhaps one of the most useful bits of information about human memory is that humans have trouble
remembering and engaging with anything that has more than 7 (give or take 2) task items. Designers
take this memory limitation into account when presenting information and wireframing products, in
order to provide the most memorable and efficient user experience (Cipan, V., Cipan, V., Cipan, V. and
Jamak, A., 2020).

3.1.4. Learning
The easiest thing that everyone knows is that there are instructions in the guidebook that are difficult to
learn. Interface design is the same when designing graphic users, and presenting direct manipulation is
always meant to guide users for the next steps. Not only that, but it is also an excellent environment to
support different types of learning by assisting with interactive discovery, and importantly allowing
users to undo their action meaning to return to a previous state if there is an error.

There are solutions to look at the possibilities of different technologies to help users understand what
they are doing and where they are. One of the main benefits of interactive technologies is that they
provide alternatives to the type of design that represents and interacts with information that traditional
technologies cannot. (Rogers, Sharp, and Preece, 2011).

When you design your product in line with the user's theme and show clearly lean interactively with the
product, you need to identify the following factors:

 Should design discoverable interfaces that stimulate the curiosity of users.

 We should design some interfaces forcing users to perform some appropriate instruction when
first experiencing using.
 There should be some concrete representation animations and abstract concepts to facilitate
understanding of complex documents

3.1.5. Reading, Speaking, and Listening

Reading, speaking, and listening is three forms of information processing with other properties, such as
how we receive information by listening, Reading, and conveying information by speaking. However,
there is also a similarity that the meaning of the sentences or phrases are the same regardless of how it
is conveyed. (Rogers, Sharp, and Preece, 2011).

For example, the phrase "Computer is a great invention" basically means the same thing whether people
read it, say it or hear it. However, how easily anyone can read, hear, or speak varies depending on the
person, the task, and the context. For example, many people find it easier to hear than to read.

The specific differences between the three modes include:

When you design your product in line with the user's theme and show clearly lean interactively with the
product, you need to identify the following factors.
  Simplify menu design and instructions to a minimum. Because research shows that people find it
difficult to follow menus with more than 4 to 5 choices. Likewise, they poorly memorize
instruction sets that have many parts
 The voice and intonation you want to convey need to be emphasized clearly, easy to hear
because when we create, basically the voice is programmed will be more difficult to hear than
the human voice.
 When designing, you should provide opportunities to create text on the screen without affecting
the design structure or the font size is too small to make users feel difficult to read,
uncomfortable when looking at.

3.1.6. Problem Solving, Planning, Reasoning, and Decision Making

Problem-solving, planning, reasoning, and decision are the processes of giving solutions and analyzing
related perceptions. These include what needs to be done, the choices and possible consequences of
taking individual action (Rogers, Sharp, and Preece, 2011).
Working through different situations and deciding on choosing the most suitable solution to a given
problem involves reasoning and making a decision.
For a significant change of choice, what do we need to do to make it easier to make a decision?
Theoretically, making decisions involves weighing the costs and benefits of other processes through
different actions.
Giving too much information to allow people to compare products when making choice decisions is not
guaranteed to everyone. There is a better way that when designing, it is necessary to have the impact of
information technology in the form of sufficient and suitable for applications to facilitate the best
choice. (Rogers, Sharp, and Preece, 2011).
The conditions need to be understood:

 Confidential information needs to be made accessible for everyone to use and wants to learn
about how to do it with one-time, more efficient operations (e.g., Web searching).
 The interface should use functions that are not complicated and easy to remember at the
interface so that the tools support, calculate, plan, and make quick decisions when a specific
situation is occurring.

4. Choose Framework for the Coursework

For the requirement of Smart gym Devices product this time, I will use the Framework that is User-
Centered Design. Because with this Smart gym Design product, I have identified the following factors:

Regarding user requests from personalization data, sensor data, their main purpose product functions
experience dedicated to their requirements. Finally, do not bring any errors about the content of the
product.

In terms of Smart gym Design product experience, I can clearly understand that UCD is a design
repeating between designers and users, so when we implement UCD, we can improve User satisfaction
in each design phase brings confidence to the user, but we must always clearly define the user
requirements.

In terms of product design outlines, this is an excellent benefit for us because when we clearly define
the user requirements, the design phase will always repeat during project implementation, reducing the
risk, avoid errors are not needed.

In terms of design completion, whether or not the user accepts the product elements and functions in
the final design, it is no longer critical because I already know that I always comply with the user's
request during the design process.

5. Conceptual model design

5.1. Definition
A model is a simplified description of a system or process that helps describe how it works. In this
section, we look at a particular kind of model used in interaction design intended to articulate the
problem and design space—the conceptual model. In a later section, we describe more generally how
models have been developed to explain phenomena in human computer interaction (Rogers, Sharp, and
Preece, 2011).

Rogers, Sharp, and Preece, (2011) Suggested that the conceptual model provides a working strategy and
a framework of common concepts and the reciprocal relationship between them. The core ingredients
are as follows:

 Metaphors and analogies convey to people how information is understood, what a product is
used for, and what it means to use that product, and how it works.
 Concepts that people come into contact with through the product, including the domain objects
they create and manipulate, their properties, and the operations that can be performed on
them (such as saving, review and sort).
 Relationship between those concepts (for example, whether one object contains another).
 Mapping between concepts and user experience that a product is designed to support or invoke
(e.g. one can re-access a page through a list of visited most frequently or saved web pages).

Also, the label used for each type refers to the user’s action even though the system may be the active
partner in initiating the interaction in conceptual model:

5.1.1. Instructing
Instructing: A place where the system gives instructions to the user, this thing can be done in steps that
include entering commands, options from a menu in a window's environment or on the touch screen,
giving commands, giving gestures, pressing select buttons, or using function shortcuts.

Below are a few comparisons of 2 vending devices with instructions but with different usage. Figure 1
shows a picture of two different types of vending machines: one for the supply of technology equipment
and the other for the variety of snacks.
The first vending machine was designed with quite detailed instructions and easy to understand because
in front of it there is a very interactive touch screen for the user. There are a number of different
technology items to choose, each with a clear view of the product through the transparent glass and all
product information will be clear when you use the touch screen. The user just needs to select the
product via the interactive touch screen on the opposite and this will have the effect of delivering the
selected product. Its forms of payment include Cash, Coin, coin change, Credit & debit card and paytm.

Figure 6: Example of Instructing

The 2nd vending machine has the execution steps quite similar to the first, but complications can some
problems. (step 1) Read the code, then (step 2) enter this entry into the numeric keypad next to the
displayed items, and finally (step 3) check the price of the selected option. Problems that may arise from
this type of interaction are that the customer misread the code and / or entered the wrong code,
resulting in the machine not issuing the snack or supplying the wrong item.

5.1.2. Conversing
This form of interaction is based on a person's interaction, dialogue with a system, where the system
acts as a dialogue partner with that person. What is more, when chatting with others, the system should
be designed to respond in the way that someone else can while chatting. These practices have been
most commonly used for applications where users need to learn specific information types or want to
discuss an issue in detail. Examples include advisory systems, help facilities, chatbots, and robots
(Rogers, Sharp, and Preece, 2011).
The main benefit of developing a conceptual model using interactive conversational styles is that it
allows people to interact with the system familiarly. For example in real world:

Apple's smart voice system, Siri, allows you to talk with it as if someone else is talking to you.

Figure 7: Example of Conversing

In Figure Instead of unlocking your phone and then finding and selecting apps / settings, then you can
turn on / off Cellular Data. You should activate Siri by holding down the Home button and saying: "Hey
Siri, Turn on / off Cellular Data".

You can also save quite a bit of time by setting an alarm with Siri, the command "Set alarm at ...". For
example, to set an alarm at 6am, say to Siri: "Set alarm at 6 AM".

5.1.3. Manipulating
This form of interaction is related to the manipulation of used objects. Simultaneously, it takes
advantage of the user's pre-existing knowledge to suggest how to do so in the design world. For
example, most digital products today can be controlled by moving, selecting, agreeing, disagreeing,
opening, and closing. Human actions can be mimicked through the use of physical controllers or
gestures, such as gesture control technology currently used in cars (Rogers, Sharp, and Preece, 2011).
Direct manipulation has a significant impact on how to guide GUI application design. It proposes that
digital objects are designed at the interface level so that they can interact in ways similar to the way
physical objects in the physical world are manipulated. (Rogers, Sharp, and Preece, 2011).

In order for the direct manipulation interface to be assumed to allow the user to feel they are directly
controlling digital objects by computer, we have the following 3 core principles:

 It is always representative of the objects and actions of interest.

 Actions that are not of a compliance nature can be reversed quickly, so a response should be
provided immediately to the interested audience.
 Physical actions and button presses are required instead of commands with complex syntax.

Figure 8: Example of Manipulating

Above is a real-life example of a piano gaming application. The live polymorphic interface to play the
game when the user plays this game will just like in real life.

5.1.4. Exploring
Rogers, Sharp, and Preece, (2011) suggested that this interaction method be described to the user
moving in virtual or physical environments. User interaction will be through a physical device that will
show them or bring them into those virtual environments.
Besides, integrated with sensor technologies in the physical environment, they will detect the presence
of someone or movements on their body. This is followed by the response by triggering some physical or
digital event.

Virtual environments have become more common nowadays. The aim is to build a world larger than life,
allowing the user to experience things the naked eye cannot see or things that are not real in the world
(see Figure 9a); The architecture's highly realistic description allows customers to have a visualization of
how they will use, how to move, understand the architectural space and easily capture information
accurately. Complex datasets that scientists can almost experience inside (see figure 9 b).

Figure 9: Example of Exploring

5.2. Interface Metaphors

Rogers, Sharp, and Preece, (2011) suggested that a metaphor is considered to be the central component
of a conceptual model. They provide a somewhat similar structure with aspects of a familiar entity (or
entities), but they also have their own behaviors and properties. More specifically, an interface
metaphor is a metaphor created in some way as part of a user interface, such as the desktop metaphor.

The metaphor suggests a comparison between a mechanical engineer with many parts working and the
daily activities of looking at different places for something. It also performs these actions in ways that
are entirely different from how a mechanical engineer works or how people might search for books on a
particular topic in a library. Hence, the similarities implied by the term search engine users are at the
general level. They are intended to evoke the nature of the process of finding relevant information,
allowing users to link this information to less familiar aspects of provided functionality.

Here are a few examples of Interface Metaphors:

Figure 10: Example of Interface Metaphors

In image 2, we can see some metaphors expressed through the following icons:

Icon of sciencedirect / Google Translate / Draw.io / pinterest / kenh14 / Google Drive metaphor for the
function here is that when you click on any icon, it will lead you to the Homepage page of that website.
Besides, there are some icons of Setting / History / Customize the metaphor here will be equivalent to
each function exactly as with the image of the icon or the special icon of many subsequent actions.

5.3. Build a conceptual model for Smart Gym Devices

Build a conceptual model for Smart Gym Devices with full requirements from Course Work:

Based on the theoretical basis that I have outlined earlier, I have built a Conceptual model that
when users look at it can fully understand the factors that are: types of devices that can connect
from the types of user interactions and metaphors shown in the product are designed.
 Figure 11: Conceptual model for Smart Gym Devices

6. User requirement in project

6.1. Project idea design: For application development, we will set 2 primary colors for the
interface to enable the interface's content, buttons, and primary functions. The application
will have functions to help users edit their information. The main screen page will include
gym fitness exercises that are trending in the world. There is always one online class every
day. The device can help users interact with others in the course by sending messages in the
online classroom. Users can rate Personal Trainer.
For physical design development, the product will be charged through the charging port.
There is a speakerphone, microphone, and camera in the online classroom use. Then there
are sensations that help express the heart rate parameters.
6.2. Target Users
As far as I have researched and found out, I will give a group of 1 research object group with
the number more than 30 people in that group.
 Group: Those people who have had experience using products similar to Smart Gym Device.
6.3. Method for gathering data
To be able to collect data quickly and without spending too much money, I used the Online
Survey questionnaire method.
The benefits of online surveys questionnaire:
 Faster
Usually it will take me a long time to complete the live survey. This online survey has saved me a
lot of time and the audience for my data collection will not be limited. All data is evaluated and
summarized automatically.
 More accurate
Several studies have compared the accuracy between surveys and conclude that the online
survey method also provides data with the most accurate knowledge by allowing participants to
enter their own data transparently into the system without bias. Furthermore, subjects who are
not part of the research group are usually collected with more honest answers.
 Cost-effective
There is no need to spend money doing a survey like this because there are always a number of
tools available to help us do those surveys.
 Fast analysis
Survey results are available for analysis at any time. Most of the data will be presented in chart
form.
Below is the evidence I have gathered in the process:

Figure 12: Statistical chart of the collected data of question 1

The chart shows that the blue part (18 to 28 years old) has the highest percentage with 52.8% and the
lowest with orange (Over 50 years old) at 13.9%. The purpose of this question is because research
around the world shows that the younger they are, the more colorful products they will prefer products
than middle-aged people so that I can quickly grasp current user trends.
 Figure 13: Statistical chart of the collected data of question 2

The chart shows that the number of time users experiences products similar to Smart Gym Devices in a
day is the highest at 55.6% (1 hour to 2 hours) and the lowest with the blue part. 16.7%. The purpose of
this question is for me to understand that growing age will affect how long you spend using your
product.

Figure 14: Statistical chart of the collected data of question 3

The graph shows the number of colors selected for development in a product with the highest
proportion of 61.1% (2 primary colors) and the lowest percentage with other choices with ratios
respectively 5-10 colors in 1 product.
 Figure 15: Statistical chart of the collected data of question 4

The chart shows the number of people agrees that users' performance data has the highest rate of
80.6% and lowest with 19.4% for disagreeing. Data parameters need to be clarified for the best
optimization for the user. Meet all requirements about user data.

Figure 16: Statistical chart of the collected data of question 5

The chart shows the number of people who want to integrate sensors to design for the product,
accounting for 88.9% for integrating a heart rate sensor and the lowest with 2.8% for wanting to
integrate a temperature measurement. Heart rate sensor is very suitable for users' exercise. Design
parameters need to be displayed to help users manage their health during exercise. Furthermore, due to
the temperature, open the phone to have it immediately.
 Figure 17: Statistical chart of the collected data of question 6

The above column chart shows that the number of people who think designing Online classes has very
suitable for Smart Gym Devices with a very high proportion of 50%. The development of Smart Gym
Devices is about optimizing human needs. It will be a disadvantage for Smart Gym Devices without the
Online Class.

Figure 18: Statistical chart of the collected data of question 7

The above chart shows that the number of people who want the Feedback Personal Trainer function in
providing personalization with the highest proportion with 47.2% (Feedback Personal Trainer) the rest is
Edit Users information accounting for 30, 6% and Send message 22.2%. For functions related to
providing personalization for users, I will design all three of the above as this is an essential part of
increasing user engagement with the product.
 6.4. Create a mood board for the application
Setting the state is an essential and indispensable step in the
design development process. It helps designers and
stakeholders share a shared sense of the visual aspect of the
project. In UI and product design, the mood panel will include
everything you include in your design: for example, photos,
fonts, icons, button styles, colors, and UI elements to convey
the artistic direction of the project. (Ascani, P., 2019)

Figure 19: Basic mood board needed.

Here are a few tips before getting started on your mood board:

 Conduct user research. Before you design a mood board, you have to make sure that you define
your audience's personality. All details about the subjects need to be understood.
 Conduct stakeholder interviews. To get the most accurate information about the design
requirements, you should not be afraid of the requirements requiring the necessary information
and references to support the design process. How many percent of my product did I meet? Do
you see this product as beautifully designed?
 Know your market and competitors. Five clear your market in terms of design trends,
competitors. Besides, look for appropriate standards in the psychological market of color,
typography, and overall design. (Ascani, P., 2019)

7. Prototypes

7.1. Definition
Ramírez, (2018) suggested that a Prototypes are initial ideas that the designer sketches them out on
paper by drawing and then clearly specifies the required content and then develops to the next process.
A test piece is often used to evaluate a new design to improve analysts' and users' accuracy. This is the
step between formalizing and evaluating ideas.

In the design process, the prototype is an important part and a practice used in all design industries.
From construction engineers, architects, clothing designers, and even service designers, the goal is to
check their designs before proceeding with the development process.
 7.2. Why is prototyping important?
Goel, (2017) suggested that UI/UX has so many aspects that highlighting the underlying core
functionality while sharing designs with team members can be a struggle, thus, making it difficult for
stakeholders to comment and give feedback. With prototyping you can combat all this along with the
following benefits:

 Better understanding of the design intent.

 Early Feedback. One of the most important aspect of product building process is to gather
feedback.
 Early changes save time and cost.
 Validation before development.
 User research and user testing.

7.3. Low-fidelity prototyping

Busche, (2020) suggested that low-fidelity prototypes are generally limited function, limited interaction
prototyping efforts. They are constructed to depict concepts, design alternatives, and screen layouts…
These prototypes are created to communicate, educate, and inform. Low-fidelity prototypes are useful
because they tend to be simple, cheap, and quick to produce. This also means that they are simple,
cheap, and quick to modify so that they support the exploration of alternative designs and ideas.

Low-fidelity will not be integrated in the final product. There are some kinds of low-fidelity prototyping:

 Storyboarding: The storyboard consists of a series of sketches showing how a user can progress
through a task using the product in development. It can be a series of screen sketches or a series
of scenes showing how a user can perform a task with an interactive device.
 Sketching: Sketching is a special form of drawing that designers use to propose, explore, refine,
and communicate our ideas. As a UX designer, you can also use sketch as the first line of attack
to solve a design problem. Many people find it difficult to engage in sketching because they are
inhibited by the quality of their drawing.
 Prototyping with Index Cards: Using index cards (small pieces of cardboard about 3 × 5 inches) is
a successful and simple way to prototype an interaction, and it is used for developing a range of
interactive products including websites and smartphone apps.

7.4. High-Fidelity Prototyping

Rogers, Sharp, and Preece, (2011) suggest that a high-fidelity prototype looks more like the final product
and usually provides more functionality than a low-fidelity prototype. There is a continuum between
low- and high-fidelity, and prototypes used “in the wild,” for example, will have enough fidelity to be
able to answer their design questions and to learn about interaction or technological constraints or
contextual factors. It is common for prototypes to evolve through various stages of fidelity, within the
design-evaluate-redesign cycles.
 8. Design a low-fidelity prototype for the coursework

8.1. Site Map for Application of Smart Gym Device

A UX sitemap is a hierarchical diagram of a website or application that shows how pages are prioritized,
linked, and labeled. If a user flow is like the street view details, the sitemap is like the bird’s eye view
(Jhang, 2020).

Figure 20: Site Map for SGD

8.2. Story Board for Application of Smart Gym Device

Storyboard is a blueprint for a web project. It is a simple, flexible tool that can be used to display
elements on a Web page such as images, banners, navigation, graphic and textual elements.

Below is the picture that I have described how the user experience on the phone is different from that
on Smart Gym Devices and how to connect between the 2 devices.
 Figure 21: Story board of SGD

8.3. Recap functions of the device and the application:

The design of the mobile / device application will focus on the user experience interface from the
information and data collected from the online surveys and Course Work requirements. In particular,
the interface of Performance Data will be clarified for each exercise in the course. Data will always be
stored continuously for one week. The purpose is to help users to keep track of the practice time for
each exercise. All the requirements of the user are precise. In this section, we will discuss the
functionality of the application on the device and the phone.\.

8.3.1. The Functions of Mobile application.

 Login / logout / create user accounts.
 Retrieve password for the user.
  Users can change their info / password.
 Users can see their workout data saved in the app.
 Users can view personal information and training course workouts.
 Users can view the date in the purpose application to more easily schedule the exercise.
 All course workouts can be viewed by the user.
 The user can view recent workout.
 Users can experience exercises offline through course workout.

8.3.2. The Functions of Smart Gym Device.

 Login / logout / create user accounts.
 Retrieve password for the user.
 Users can change their info / password.
 Users can see their workout data saved in the app.
 Users can view personal information and training course workouts.
 Users can view the date in the purpose application to more easily schedule the exercise.
 All course workouts can be viewed by the user.
 The user can view recent workout.
 Users can experience exercises offline through course workout.
 Users can join online classes on Devices
 The user can rate the Personal Trainer.
 Users can interact with others by sending messages through online classrooms.
8.3.3. Arguments in function of Course work.

The purpose of not having the Online Class function on mobile is because:

Firstly, users will not have the best experience if practicing exercises through the screen is too small will
become bored with the process of training and very giving up. This information I have gathered from a
previous online survey.

The second is about the benefits of the product business. Providing more online classes for the device
will stimulate the users to buy the Smart Gym Device not just for the experience but also for the
product's further benefits.

Finally, I still design functions leading to Online classes for users from the phone via a Button link to
avoid the user's inability to participate in classes on the phone, and the user cannot control it. In this
function, users can only join classes and chat messages but cannot see face time chat.
 8.4. Design paper prototype

Figure 22: Paper prototype for mobile app

8.5. App Design a wireframe by using Axure:

I used Axure software to design the wireframe. Designing products from low to high will give me the
most accurate view of each product's functional application. Below are some of the functions of the
application.
Figure 23: Login page of Mobile app

Figure 24: Home page of Mobile app

 Figure 25: Home page of Smart Gym Device

Figure 26: Workout page of Smart Gym Device

Figure 27: Online Class of Smart Gym Device

Figure 28: Planning page of Smart Gym Device

 8.6. Design a high-fidelity prototype for the coursework
This section will show you a few high-fidelity prototype designs and compare them to the low-fidelity
prototype. All designs are based on the databases I have gathered from the questionnaire survey. I used
Axure to design this application.

8.6.1. Design mood board for a Course Work

Figure 29: Mood board of SGD

The meaning of choosing color and design logo in development for products:

Overall, I chose two primary pigments, which are Black and Yellow-Orange. The meaning of using
Yellow-Orange is because the two colors symbolize the dynamism and enthusiasm that always motivate
the user and does not cause boredom.
Along with it is the black background that will be the main wallpaper. The meaning of using black for
SMD products is to help highlight the Yellow-Orange color (some other colors). The contents and images
of the design will be easy to see and distinguish.

Besides, there are some cases of users who are color blind. Sinful colors have been avoided when
combining design colors. Using fewer colors for your design will be an excellent solution to help those
people avoid confusion between colors.

Hand dumbbells inspired me about the Logo of the product because it is easy to design, and users can
see the meaning of the Logo.

8.6.2. Design App for a Course Work

Figure 30: Low and high-fidelity prototype in login page

Comparison between two designs, for high-fidelity prototype, users easily understand the content or
instructions in the interface. In the section fill out the password for the user, I have an additional note
below so that the user can understand the meaning of that design. Besides that, I have enhanced user
interaction by giving an error message about wrong login password.
In terms of color, the font has been designed with 2 main colors from the created mood board. From the
data I have gathered in the survey is the reason why I designed it.

Figure 31: Low and high-fidelity prototype in Home Page

The purpose I include Trending Workout with three options in the main interface is to simplify the
content designed in it. If all the Course Workouts are included in the interface, it will decrease the
visibility of the main content.

Besides, the instruction function in the design is clearly shown through the Menu icon. Offering more
options to the user increases the personalization of the user designed in the product.

To comply with coursework requirements, I have designed a Button link (Go to Online Class). The
purpose is so that from the Smart phone users can control Smart GYM Devices without missing any
function.
 Figure 32: Low and high-fidelity prototype in Home Page of SGD

The difference between the two interfaces designed for Smart Phone and Smart Gym Devices is
between the Course Workout. All the content about the Course Workout I have on the same main
interface, use horizontal scroll to see the other Course. The purpose of this is to help users remove an
operation on the phone is to select the button link (See all).

Besides the function Online Class will be prominent and there is a blue dot in the upper right corner. The
goal is to let the user know that the Online Class is active and that the red color will be the inactive class.
 Figure 33: Low and high-fidelity prototype in Course page of SGD

Regarding the interface of Course Workout, Video Tutorials will be designed with a proportion of nearly
50% of the surface area of interface. The content files are highlighted in the interface. The goal is to
make the user easy to observe while using it.

The heart rate graph and heart rate parameters are used in red to draw attention to the important
content when using. Besides, I also designed a time frame with quite large size to help users easily
observe and control the practice time.

Button buttons are always designed with 2 main colors with larger sizes to highlight the 2 functions Start
/ Stop.
 Figure 34: Low and high-fidelity prototype in Online Class of SGD

In terms of the Online Class interface, the user rating function is designed via Feedback button link with
red and white font. Because the size of the Button is not too large, I combined with the red font to
attract the user's attention. The rating board will be displayed right after clicking on it. The rating board
will not be too large if you do not want to hide the other content and end with the (Done!) Button. The
above will include content descriptions for today's exercise, and the Personal Trainer.The image of Face
time will be displayed large in the interface, the user can stand quite a distance and still can see clearly
below there will be buttons with functions such as on / off microphone, on / off call face time, Turn on /
off the user's camera.

The function for users to send messages is also right next to that, through their phones, users can send
messages, chat with others. There is a list that will show everyone else in the online course below and a
green dot will show for those who are taking this class.

Figure 35: Low and high-fidelity prototype in Planning page of SGD

All data on the time spent in aggregate usage, exercises, calories for a week will be saved in this
interface. Designed for chart time use will occupy about 25% of the screen device, easy to observe.
Orange and blue will represent two exercises, as each exercise will have different timing exercises.
Below will be details of each segment of time. Next, I also design about detail of the Course Workout
that was active for that day including the time.
 8.6.3. General comparison:
For the low-fidelity prototype, it can only define the user's requirements, especially the aesthetics is not.
It is only beneficial when discussing and working in groups because it is easy to present, does not require
special skills. Completed in quick time. Finally, interaction is limited, unable to download content or
images during this process.

For the high-fidelity prototype, the detailed designs of the content, images, functionality and all the
other elements look like an app that really helps the user experience. The designs are highly practical in
their interactions. Giving the most accurate feedback during use, I used it to test its interactivity. That
has brought me to the best experience of the app that I have designed so that I can come up with better
ideas, giving the product a better experience when it comes to user reviews.

8.7. Physical Design

Figure 36: Physical Design of SGD

9. Evaluation

9.1. Definition
Evaluation is essential for us to be able to redefine what we have accomplished in product functional
development especially new design ideas. Because of today's trends, they are no longer looking for
products that only meet user needs but are also more interesting in terms of user interaction. The
assessment has been made clearer through the following issues:
Controlled settings involving users: I have identified the user's previous questionnaire survey evaluation
maps with the ultimate goal of testing the requirements, hypotheses, and collected data about certain
functions in product. In addition, I have checked usability with the aim of reducing the effects of external
impacts on the data I have collected.

Natural settings involving users: During the process of Natural settings involving users, we conducted
survey questions and got a large amount of data needed for conceptualization to design the product.
The goal is to understand user interaction in the natural environment with an approach that is best for
me in the product design process.

9.2. Heuristic evaluation for the Smart Gym Devices

Heuristic evaluation is a process where experts use rules of thumb to measure the usability of user
interfaces in independent walkthroughs and report issues. Evaluators use established heuristics (e.g.,
Nielsen-Molich’s) and reveal insights that can help design teams enhance product usability from early in
development (The Interaction Design Foundation. 2020)

To accomplish this process there are the following 10 evaluation criteria:

Visibility of the system’s status: Users should be given feedback on what is happening within a
reasonable timescale.

Figure 37: Proof of Visibility of the system's status

The above is evidence of system feedback for users. Smart Phone connected to Smart Gym Devices
successfully will display a “Successfull Connection” message board. The board is designed with white
accentuating in the black background with reasonable style size.

Match between the system and real world: All information designed in the product is accurate with the
real world including languages, information about the content is put into production in a reasonably
accurate manner with real world.

Figure 38: Proof of Match between the system and real world

The above is evidence that I have correctly included the information that I have designed. In terms of
language, users can read and understand because English is a popular language today. Next is the
Calendar, the details about the date have been researched and designed by me correctly. Colors are
highlighted in the black background.
User control and freedom: In the process of using the product, the system encountered an error or
depending on the user, there should be a solution for the user to get rid of the current situation without
having to log out of the system.

Figure 39: Proof of User control and freedom

Above is the evidence of User control and freedom: During the process of connecting to Smart Gym
Devices, the user has trouble connecting or doesn't want to connect anymore and then select the
“CANCEL” button to cancel the connection and return to the Home page.
Consistency and standards: In your design, users should always have a clear understanding of the
contents, meanings, words, icons, actions, etc. of everything in your design that doesn't need to be
explained while looking at it.

Figure 40: Proof of Consistency and standards

Looking at my above design, I can understand one and the next action without having to guide. Those
words, icons, actions are expressed in accordance with its definition. For example, from the Feedback
button I can understand that clicking on it will be evaluated whether the Personal Trainer is doing well
or not. The blue dots on each user icon represent that the user is online and participating in this class.
Error prevention: Error message or error prevention so users know and want to continue or not.

Figure 41: Proof of Error prevention

Looking at my design above, you can understand error prevention in my design. When the user forgets
to enter the account and password to log into the application, a message will appear asking the user to
enter his correct password account.
Recognition rather than recall: Displays lots of data, choices, goals and actions that the user doesn't
need to remember too much. Offloading user memory is the main purpose here.

Figure 42: Proof of Recognition rather than recall

Looking at the above design, all information, data, time, etc. is stored in one object and detailed about
Monday. The design saves the user from having to remember too much data for a week as it is archived.
Flexibility and efficiency of use: The product is designed for flexibility in use. Beneficial for users when
using, reducing unnecessary actions.

Figure 43: Proof of Flexibility and efficiency of use

Looking at the above design, the design flexibility is that when users visit their website they can easily
view the courses they have practiced. What's more, clicking on any Course workout will go to the app
page along with the content.
Aesthetics and minimalist design: Your main design interface should not contain extraneous and rarely
necessary content. The more content in the design, the more it reduces the visibility of the main
content, which loses the consistency to the user.

Figure 44: Proof of Aesthetics and minimalist design

Looking at the above design, the week design is required by Course work, so I only design the relevant
content, no external content. Besides, I choose the appropriate colors to highlight the functions of the
product.
Help users recognize, diagnose and recover from error: Report errors to users in clear text and provide
solutions for users.

Figure 45: Proof of Help users recognize, diagnose and recover from error

According to my design, it displays a message to the user about the password or account is invalid, and
instructs the user to try again.

Help and documentation: Designing an easy-to-use system for the user is not a good way towards long-
term product use for them.

A perfect design should have this factor because sometimes users often encounter difficult situations
and cannot be solved, and the solution to this problem is to give guidance, help but still keep limitation
for the product.
 Figure 46: Proof of Help and documentation

According to my design, this design page helps users to search and navigate through other device
features. The categories and frequently queries are designed to be displayed for the user to more easily
choose from.
Conclusion
Throughout the reporting process, I spent a lot of time understanding and perfecting this report
accurately. I have learned a lot more about Interaction design. I learned what types of framework,
interactions would suit which products and which user objects. In this report, I have fulfilled Coursework
requirements, including the theory, design styles, research method, and functional development of
Smart Gym Devices. Not only that, when product design not only fully meets the requirements of Course
Work but also how to attract users and whether your product is humanistic or not (the product of I have
researched the colors to be suitable for some color blind users). Finally, I evaluated my design using the
Heuristic evaluation method. With the criteria of the Heuristic evaluation method, I have fully
implemented, and my design has met all of them.
Bibliography

1. Yu Siang, T., 2020. What Is Interaction Design?. [online] The Interaction Design Foundation.
Available at: <https://www.interaction-design.org/literature/article/what-is-interaction-
design> [Accessed 10 November 2020].
2. Moscaritolo, A., 2020. The Best Smart Home Gym Equipment For 2020. [online] PCMag Asia.
Available at: <https://sea.pcmag.com/health-fitness/39791/the-best-smart-home-gym-
equipment-for-2020> [Accessed 10 November 2020].
3. The Interaction Design Foundation. 2020. What Is User Centered Design?. [online] Available
at: <https://www.interaction-design.org/literature/topics/user-centered-design> [Accessed
10 November 2020].
4. H., S., H., S. and D., Y., 2020. How To Design Products With Goal-Centered Design. [online]
Digital Product Design Agency – Qubstudio. Available at: <https://qubstudio.com/blog/how-
to-design-useful-products-with-goal-centered-design/> [Accessed 10 November 2020].
5. Dermot, 2020. Activity Centred Design. [online] Medium. Available at:
<https://medium.com/dermot-holmes/activity-centred-design-dd28ed1eec59> [Accessed
10 November 2020].
6. Cipan, V., Cipan, V., Cipan, V. and Jamak, A., 2020. What Is Participatory Design And What
Makes It Great? - Point Jupiter. [online] Point Jupiter - Web development & UX design
agency. Available at: <https://pointjupiter.com/what-is-participatory-design-what-makes-it-
great/> [Accessed 10 November 2020].
7. Ascani, P., 2019. A UX Guide To Designing Better Mood Boards. [online] Medium. Available
at: <https://uxdesign.cc/a-mood-board-strategy-for-cohesive-visual-design-5620dec3fed7>
[Accessed 10 November 2020].
8. Ramírez, V., 2018. What Is A Prototype?. [online] Medium. Available at:
<https://medium.com/nyc-design/what-is-a-prototype-924ff9400cfd> [Accessed 10
November 2020].
9. Rogers, Y., Sharp, H. and Preece, J., 2011. Interaction design: beyond human-computer
interaction.
10. Goel, R., 2017. Why Is Prototyping Important?. [online] Medium. Available at:
<https://blog.zipboard.co/why-is-prototyping-important-13150d76abc4> [Accessed 10
November 2020].
11. Busche, L., 2020. The Skeptic’S Guide To Low-Fidelity Prototyping — Smashing Magazine.
[online] Smashing Magazine. Available at:
<https://www.smashingmagazine.com/2014/10/the-skeptics-guide-to-low-fidelity-
prototyping/#:~:text=Low%2Dfidelity%20prototypes%20are%20generally,can%20be%20a%
20confusing%20term> [Accessed 10 November 2020].
12. Jhang, J., 2020. How To Create A UX Sitemap: A Simple Guideline. [online] Medium. Available
at: <https://uxdesign.cc/how-to-create-a-ux-sitemap-a-simple-guideline-
8786c16f85c1#:~:text=A%20UX%20sitemap%20is%20a,like%20the%20bird's%20eye%20vie
w> [Accessed 10 November 2020].
 Survey Questionnaire
Title: Survey product development suggestions.

Describe: Hello. I am a student of Greenwich University Vietnam. I am currently studying Human

Computer Interaction. The purpose of this survey is to get ideas for building developments on Smart
Gym Devices.

1. How old are you?

18 to 28 years old
28 to 50 years old
Over 50 years old
2. How much time do you spend a day to experience products similar to Smart Gym Devices?
30 minutes to 1 hour
1 hour to 2 hour
Over 2 hour
3. If the newly developed application is your own, how many main colors would you like it to be?
1
2
3
Other:…………………………………………………………………………………………………………
4. Do the parameters and data that users have experienced with the Course workout need to be
clarified?
Yes
No
5. What sensor data would you like to have integrated in the application?
Temperature
Moisture meters
Measure heartbeat
Other:………………………………………………………………………………………………………..
6. The function Online Class a reasonable idea for Smart Gym Devices products today?
1 2 3 4 5

Unsuitable Suitable

7. Do you want functionality related to providing user personalization?

Feedback Personal Trainer
Send message
Edit Users information
Other:……………………………………………………………………………………………………………

------------------------------------------------------------------------------------------------------------------------------------------