BACHELOR OF SCIENCE (HONS) COMPUTING

COMP 1649 - HUMAN COMPUTER INTERACTION

DUE DATE: 12TH NOVEMBER, 2020

CENTRE: ZCAS UNIVERSITY

LECTURER: MR. S. MFUNE

WORD COUNT: 3,438

Table of Contents
1. Introduction ........................................................................................................................ 2

2. Background ......................................................................................................................... 3

2.1 Processes and Frameworks for Interactive Design.......................................................... 4

2.1.1 User Centered Design (UCD).................................................................................. 4

2.1.2 Goal-Oriented Design ............................................................................................ 5

2.1.3 Participatory Design (PD) ...................................................................................... 7

2.1.4 Justification ........................................................................................................... 7

2.2 Cognitive Psychology .................................................................................................... 8

2.2.1 Subdomains of Cognitive Psychology and their Effects on UX Design ...................... 8

2.3 Interaction Design Theory............................................................................................. 9

3. Design Process ....................................................................................................................11

3.1.1 Persona ................................................................................................................11

4. Prototype............................................................................................................................15

5. Research Study ...................................................................................................................18

6. Conclusion..........................................................................................................................19

7. References ..........................................................................................................................20

1
1. Introduction
The idea behind Smart Gym Equipment mobile application is to integrate gym equipment with
sensors to help keep track of user’s workout sessions and transmit the information via the
user’s phone (Valaitis, 2020). The tracking devices in smart gym equipment calculate the
amount of reps specific to the chosen weight or exercise and Bluetooth and other cloud
services are then used to send the data seamlessly to the user’s smart gym mobile app.

The application will allow to select different types of workouts available, monitor workout
progress, train through live sessions or alongside prerecorded sessions, and setting up workout
schedules.

This report details the steps taken to create a mid-fidelity interactive smart gym mobile app
prototype for a piece of smart gym equipment. The development process includes research
activities, framework methodologies and processes of design.

2
2. Background
Jain Abhay (2015) defines "smart gym" as a new model aimed at supporting both users and
trainers in keeping track of the work-out activities and tailor them to the real needs and
capacities of individuals. He further states that it is an intrusive technology that provide
valuable and innovative services to the user by integrating the user and the smart devices
thereby providing efficient utilisation of the resources present in the gym.

Smart gym equipment can be described as gym equipment that is fitted with tracking devices
which enable them to transmit work-out information to users' mobile devices. For example,
tracking devices can measure the number of reps at a certain weight a user completed for each
machine. Using some wireless technologies such as Wi-Fi or Bluetooth, data is transmitted
directly to the user's phone to view on smart gym applications installed. The smart gym
concept integrated with smart gym equipment is what makes up the smart gym ecosystem, a
series of connected devices with the internet of things (IoT) at its core.

Arm (Connected Devices), an Internet of Things (IoT) company defines connected devices as
physical objects that are able to connect with each other and other systems via the Internet and
are typically monitored and controlled remotely. They connect with the Internet and each other
via various wired and wireless networks and protocols, such as WiFi, NFC, 3G, and 4G
networks. Embedded with technology such as processing chips, software, and sensors, they
collect data and share it with other devices and systems. Connected devices include smart
TVs, smart speakers, toys, wearables, health and fitness monitors, environmental sensors, and
smart appliances.

According to TechnoGym (The Evolution of the Gym) gyms that offer a great customer
experience are now setting the bar for everyone else. Moreover, technology smart gym
equipment is fast becoming the deal breaker for many gym users. Connectivity to mobile
devices is more pervasive than ever with smartphone apps allowing users to control almost
anything, from setting the temperature on the central heating or instructing cars to turn on the
heater in advance, so why should exercise equipment be any different?

The development of gym ecosystems clearly shows the transformation taking place in the
health and fitness industry. Fitness enthusiasts no longer have to be physically present and use
the equipment. Through connected devices, they can still participate via mobile devices.

3
This also means that gym staff can interact with their clients both inside and outside the gym,
supporting them to stay motivated to change their lifestyle and stick with their fitness
objectives. Undoubtedly, smart gym equipment is game-changer in the industry for both gym
owners and gym users as it builds customer loyalty and helps build stronger and more
successful businesses (TechnoGym, The Evolution of the Gym)

The fitness industry has remarkably revolutionized in the past few years. With the potential to
increase the efficiency of current workout trends and enhance customer experience, technology
will continue to shape people’s active lifestyles, while also enabling gyms to offer more relevant
customisations of workouts (ITBrief, 2019).

2.1 Processes and Frameworks for Interactive Design

2.1.1 User Centered Design (UCD)

User centered design involves direct engagement with users through the processes of
research, understanding, observation, and interacting with real users. The main focus of
UCD is to understand the users and their needs and it is important for design teams to
engage users in every phase of the design process in order to create highly useable and
acceptable products for them (User Centered Design 2020).

Benefits of User Centered Design

▪ Each phase of the design process involves the users, it is more likely that the end-
product will meet the user’s expectations and requirements. This results to increased
business sales and lower costs incurred by service reamendments.

▪ UCD ensures that the system designers tailor products that are specific to the
context and specific tasks, which reduces the probability of human error arising.
UCD design process delivers safer products.

▪ By focusing on all the users the system will be interacting with, designers are
exposed to a diverse number of cultures and human values which is a step in the
right direction for building a sustainable business.

The following table explains the six steps used in the User-Centered design process.

4
Steps Process Activity

Step 1 Identify your user group It’s important to identify and categories our
target group. Finding out who you are going
to sell the product to is important whether
they are educated or not, male or female,
experts or laymen it’s important to identify
and categorize them (Idler 2012).
Step 2 Create Personas Personas help in grasping the intended target
group. But the best practice to making a
powerful persona is by knowing our users in
person and modeling the persona with the
information gathered (Idler 2012).
Step 3 Create User Scenarios User scenarios help describe situations in
which end users will use the product. The
help the designers and developers in the
perspective of the users and understand their
goals.
Step 4 Create Use Cases User scenarios help in understanding the
whole situation but use cases describe more
specific actions that a user needs to complete
before archiving a defined task (Idler 2012).
Step 5 Create Prototypes and With all above tasks completed creating a
Test with Stakeholders prototype is possible. The prototype created
does not have to be high fidelity but must at
least be able to justify every detail included
with what you know about the users (Idler
2012).
Step 6 Review Prototype Design This stage is the first cycle of the iterative
design process, meaning with the hypothetical
knowledge about the users is used to create a
design. At this point it is highly possible that
the design created does not meet the user’s
expectations so it is important to test what
actual users think of the design (Idler 2012).

Table 1: User Centered Design Stages

2.1.2 Goal-Oriented Design

Amann (2009) references on her website that “Goal Oriented Design was developed by
Allan Cooper to be a user centered methodology that addresses multiple users and
stakeholder’s desires for different things”. Often, development teams will try to satisfy

5
every user needs by adopting all the ideas thrown at them in order to build a system that
satisfies everyone but in most causes these systems end up not satisfying anybody
(Amann, 2009). In most causes the Goals of the users and the stakeholders may be not
be the same and that’s why Goal-oriented design was developed to address this issue by
merging the two in order to come up with a strong Goal Driven Design (Parler 2016).

Goal-oriented design details a three (3) phase or six-stage process for interacting with
users by analyzing what the users and stakeholders say and do, and whether they would
be satisfied with the same interface or if they will require different interfaces (Amann
2009). The table below identifies the phases and processes involved.

Phase Stages Activity

Investigative Research Gather information from end-users and
Phase stakeholders.
Modeling Using gathered information to develop models
including personas and workflows. Personas
embody different patterns and goals expected
from end-user interviews and are not based on
one particular individual or average user.
Workflows highlight what a particular individual
do, the sequence, and the relations with other
workflows.
Requirements This describes the type of requirements for each
definition persona and whether the data can be used to
develop functional needs.
Framework Framework The framework describes sketches of the layout
Phase definition before the final blueprint is created. Each
primary persona will most likely require an
interface to go with it. A framework illustrates
how functional elements are related to each other
and these elements are based on a persona’s
context scenarios.
Design and Design After a framework has been created a detailed
Development design of the primary screens are developed. For
Phase each screen development will probably follow
close behind
Development

Table 2: Goal-Oriented Design Processes

6
2.1.3 Participatory Design (PD)

Participatory design, also known as Cooperative design (in its original Scandinavian),
is a framework that is both considered a process and strategy which brings the end-users
and customers to the design and development processes. This framework is a relatively
new approach to developing products. The designing process involves the designers,
stakeholders, end-users, and researchers to ensure that the end product satisfies its user
base (Cipan, 2019). This framework has been adopted into product design, architecture
design, graphic design and medicine.

Participatory design sessions give users the tools to create and design dummy software
or products they would want to use and enables them to explain why they developed
their perfect software in that particular way (ibid). One of the advantages of
Participatory Design exercises is that it comes with the necessary tools to help you
design what’s on your mind and the only limit is your imagination.

Participatory design is best applicable in running participatory design sessions. When

you want to understand what users think of a particular problem, technology or
discipline; When there is a conception that, what the users say and actually do are not
corresponding; and when there is cultural or political disconnect between you as a
designer and the end user. A framework such as this helps to better understand the users
and also help in bridging the gap.

2.1.4 Justification

User Centered Design (UCD) provides framework that requires designers to research
and interact with real users in that it “provides tools and process to achieving a particular
goal”. The Smart Gym Application prototype will require identifying and interacting
with end users and this framework enables designers to document information through
the processes of creating personas and user scenarios and step by step interactions using
use-cases. The user personas and scenarios enable me as a designer to put myself in the
perspectives of the end users. This process will also help me in identifying the needs of
the end users and these needs will be interpreted into screens on the prototype of the
smart gym app.

7
2.2 Cognitive Psychology

Alex Margot (2019) identifies Cognitive psychology as a study that deals with mental
processes such as perception, memory and problem solving. Psychology defines
cognitive load as the effort put in the learning of new information. In user experience
(UX) design, cognitive load is the mental processing power required to use a product. If
the information load is higher than the user’s ability to process it, the general
performance is affected (ibid).

2.2.1 Subdomains of Cognitive Psychology and their Effects on UX Design

i) Attention - Attention handles the problem of excess information in cognitive

processing systems by filtering some information for further processing. Investigation
by empirical means has shown how attention can improve performance and how lack of
attention can set back overall performance (Dosher, 2007). The targeted users of this
application will be gym goers, and just like every other user of mobile systems, the
prototype application must apply the principle of attention, meaning the screens should
only display information that is necessary for the gym goers to complete certain tasks
and the components on the screens should be kept neat and simple and not cluttered with
too much information.

ii) Perception - Systems that utilize perception are made up of different senses.
Perception study looks to understand how we handle subjective elucidation of proximal
information (Dosher, 2007). Perception in UX design refers to how users will receive
information from the prototype design. This puts to account all the elements and
components used to create the user interface.

To ensure that the information for the gym application prototype is correctly perceived,
the following UX design tactics that have been proven to work with perception:

▪ Selection of appropriate icons and graphical illustrations should make it easier

for the user to understand their meanings (Preece 2007, p. 78).

▪ Texts should be readable and distinguishable from the background (Preece 2007,
p. 78).

8
 iii) Memory - Human memory and fragility are one of the most highly studied aspects
of cognitive psychology. Memory study is concentrated on how the human memories
are stored, acquired and retrieved (Dosher 2007). Humans are more likely to recognize
something than remember it, so it is important for UX designers to target recognition
over recall with their UX designs. The mobile gym app prototype will use familiar
design patterns used in most applications to make it easier for users to use it and it will
follow the following principles:

▪ Keeping things simple not to overload users’ memories with complicated

procedures.

▪ Develop interfaces that trigger recognition rather than recall by using icons,
menus and consistently placed components.

iv) Learning - In order to adopt to their environments, living organisms need to learn.
Cognitive psychologists’ study which information is acquired and in which conditions
it is acquired (Dosher 2007). The mobile prototype will use designs that will encourage
the users to explore and these designs will constrain and guide the users to use
appropriate actions.

v) Reading, Speaking and Listening - Just like many applications the gym app
prototype will utilize people’s abilities to read and write. The gym app prototype will
utilize where it can large texts without disturbing the formatting in order to make it
easier for people who have a hard time reading small texts.

2.3 Interaction Design Theory

Interaction design can be understood as the way in which users interact with products.
In most cases, when people talk about interaction design it is about software like apps
and websites (Siang 2020). The following are some interaction modes and types and
how they apply:

2.3.1 Voice Driven Interface

Voice user interface refers to how humans interact with voice-controlled interfaces.
With the improvements in voice recognition technology, it is both integrated in smart

9
phones as well as smart homes it is not only growing but also sometimes preferred to
graphical interfaces (Mortensen 2020).

2.3.2 Touch Driven Interface

Touch interaction has become the world’s leading technology between users and
products, and that has put into different perspectives in which users and UX designers
think about human-computer interaction (Pagan 2012).

2.3.3 Graphical User Interface (GUI)

Graphical interfaces enable users to interact with computers through the use of graphical
icons. A GUI is considered to be more user friendly than a command-based interface
(GUI 2019).

2.3.4 Command Line Interface (CLI)

A command line interface is purely text-oriented interface and enables the user to
communicate with a computer by typing in commands. This type of interface will only
allow users to enter predefined commands in order to accomplish certain tasks. Before
GUI interfaces were developed, CLI were the most used type of interfaces.

2.3.5 Touch Sensitive Interface

Touch interfaces mostly known as touchscreens are the most popular ways for users to
communicate with computers. Users communicate with these interferes via finger or
stylus pen due the touch sensitive interfaces embedded in them.

2.3.6 Menu Driven Interfaces

This interface enables users to interact with a computer via presentation of menus and
the users are able to browse through different menu items.

10
3. Design Process

3.1 Interaction Design Research

User centered design requires designers to create prisoners and scenarios in order to get a good
decryption of the user target group. This section consists of research carried out in order to
design a conceptual prototype model.

3.1.1 Persona
End User / Gym App Prototype

Personal Info:

Name: John Smith

Age: 30

Date of Birth: 22/10/90

Email: [email protected]

Address: Lives with his mom

Occupation: School Gym Teacher

Bio

John Smith is a gym teacher at a local secondary school, where he teaches physical
fitness classes to school students.

Needs and Wants

▪ I need to be able to sign up and login to the system.

▪ I want to be able to view my monthly workouts.

▪ I need to be able to view my overall workout statistics.

▪ I need to be able to choose a workout routine.

▪ I need to be able to watch live or prerecorded workout videos

User Scenarios

User Story End User:

11
 As an end-user I should be able to register, login and start a workout session. I also want
to be able to select different types of workouts. I need to be able to watch live or
prerecorded workouts.

Use Case Modeling

1. The user chooses the option to login or sign up.

2. The user chooses workout options.

3. The user views workout monthly history.

4. The user chooses weather to watch prerecorded or live videos.

3.2 Conceptual Design

This proposed prototype will consist of several screens that will demonstrate the interaction
flow. The first screen will be a welcome screen that shows the app logo and some text and a

12
button. The following screens are influenced by the user persona and the interactions that are
mapped using the use case diagram.

Slash Screen Login Screen Signup Screen

Home Screen Stat Screen Workout Screen

13
Display Details Session Type Start Workout Screen

14
4. Prototype
The final prototype uses a familiar design concept that most applications use to create
familiarity following the cognitive principals keeping it neat and simple. The final prototype
is modeled after the conceptual design and adds more detail to make it more complete. The
final prototype is developed using the user centered design framework and looks to deliver
the needs and wants found in the user personas and user scenarios.

Landing Screen Sign Up Screen Login Screen

15
 Home Screen Statistics Screen Statistics Screen
Live

Workout Categories Screen Work-out Details Screen Session Type Screen

16
Start Screen Browse Details Screen

17
5. Research Study
The aim of this coursework is to develop a mid-fidelity prototype for a piece of smart gym
equipment. The purpose of the application is to enable its users to setup and keep track of their
workouts.

Is the prototype design consistent throughout?

All the pages of the prototype use the same design for navigation. The main navigation is the
bottom navigation bar which allows the users to navigate between the three main pages which
is the Home, Workout and browse pages. The prototype also uses a contestant colors on all
pages to help keep the pages constant to one another.

Does the prototype use easy to understand icons?

The icons used in the prototype are common icons found in most applications an example, is
the home and browse icons found on the bottom bar menu. The only fault is the icon used for
the workout section on the bottom navigation menu.

Are the texts images and buttons clearly visible?

The texts, buttons and images use appropriate sizes the all the pages in the prototype use an
easy to read font to make it easy for the user to perform operations.

Is the color choice used in the prototype appropriate?

The prototype uses flat colors which have been proven to be more accepted by users through
research by UX designers. The main color used in the prototype is Robin’s Egg Blue from the
American palette.

Are the interactive elements used in the prototype appropriately sized and fit for touch
screens?

The elements used in the prototype are appropriately spaced making it easy for touch screen
users to easily use the application. The buttons are properly sized and placed in appropriate
areas in the prototype making it easy for uses to easy perform a task. The interactive images
are sized largely enough that touch screen users will find it easy to accomplish what ever task
the feel like doing.

18
6. Conclusion
From the research conducted to develop the prototype, the developed product meets most of
the design criteria discussed in the design principles. The prototype can be further improved
by adding a menu that slides from the left to present the user with different options to manage
their account, furthermore design concepts can be added to improve the current prototype and
make it easier for the targeted use the application.

19
7. References
1. Valaitis, A. (2020), Smart Gym. Available on: <https://www.alexvalaitis.com/smart-gym
Accessed on: 31/10/2020

2. Jain, Abhay. (2015). A Smart Gym Framework: Theoretical Approach. 191-196.

10.1109/iNIS.2015.32.

3. Arm, Connected devices. Available on: (https://www.arm.com/glossary/smart-devices)

Accessed on 28/10/2020

4. TechnoGym. The Evolution of the Gym. Available at:

https://www.technogym.com/int/wellness/the-evolution-of-the-gym/ Accessed on:

5. User Centered Design 2020, Interaction Design Foundation, viewed 31 October 2020, <
https://www.interaction-design.org/literature/topics/user-centered-
design#:~:text=User%2Dcentered%20design%20(UCD),and%20accessible%20products%20for
%20them.>.

6. Amann, K 2009, Goal Directed Design, Sakai Project, viewed 31 October 2020, <
https://confluence.sakaiproject.org/display/UX/Goal-
Directed+Design#:~:text=Goal%20Directed%20Design%20describes%20a,or%20will%20requir
e%20different%20interfaces>.

7. Parler, M 2016, Goal-Driven Design in 3 Steps, Medium, viewed 31 October 2020, <
https://medium.com/purple-rock-scissors/goal-driven-design-in-3-steps-58fd15a25aba>.

8. Cipan, V 2019, Participatory design: What is and what makes it so great, Point Jupiter, viewed 31
October 2020, < https://pointjupiter.com/what-is-participatory-design-what-makes-it-great/>.

9. Participatory Design: What is it, and what makes it so great? 2015, UX Passion, viewed 1
November 2020, < https://www.uxpassion.com/blog/participatory-design-what-makes-it-great/>.

10. Idler, S 2012, Towards User Centered Design in 5 Steps, usabilla, viewed 1 November 2020, <
https://usabilla.com/blog/towards-user-centred-design-in-5-steps/>.

11. Margot, A 2019, Cognitive psychology in UX design: Minimizing the cognitive load, Medium,
viewed 2 November 2020, < https://medium.com/design-signals/cognitive-psychology-in-ux-
minimising-the-cognitive-load-
d97ad8e3115b#:~:text=Broadly%20put%2C%20cognitive%20psychology%20deals,relevant%20
for%20us%20as%20designers.&text=In%20psychology%2C%20cognitive%20load%20describes
,needed%20to%20use%20a%20product>.

12. Dosher, B 2007, Cognitive Psychology, SCHOLARPEDIA, viewed 2 November 2020, Available
at: <
http://www.scholarpedia.org/article/Cognitive_psychology#:~:text=Traditionally%2C%20cogniti
ve%20psychology%20includes%20human,problem%20solving%2C%20and%20language%20pr
ocessing.>.

20
13. Preece, J 2007, Interaction design: beyond human- computer interaction, 3rd edition, John Wiley
& Sons, New York.

14. Siang, T 2020, What is Interaction Design, Interaction Design Foundation, viewed 3 November
2020, < https://www.interaction-design.org/literature/article/what-is-interaction-design>.

15. Mortensen, D 2020, How to Design Voice User Interfaces, Interaction Design Foundation,
viewed 3 November 2020, < https://www.interaction-design.org/literature/article/how-to-design-
voice-user-interfaces>.

16. Pagan, B. 2012, New Design Practices for Touch-free Interactions, UX Magazine, <
https://uxmag.com/articles/new-design-practices-for-touch-free-interactions>. viewed 3
November 2020

17. GUI 2019, Computer Hope, viewed 3 November 2020, <

https://www.computerhope.com/jargon/g/gui.htm#:~:text=A%20GUI%20(graphical%20user%20
interface)%20is%20a%20system%20of%20interactive,the%20user%20interacts%20with%20the
m.>.

18. Connected Devices 2020, ARM, < https://www.arm.com/glossary/connected-devices >.

Accessed on: viewed 4 November 2020

21
Digital Receipt
This receipt acknowledges that Turnitin received your paper. Below you will nd the receipt information regarding your
submission.

Submission Author Emmanuel Hapunda

Turnitin Paper ID (Ref. ID) 136166360

Submission Title HUMAN COMPUTER INTERACTION

Assignment Title Get a Turnitin authenticity report - Term 1 (November 2020)

Submission Date 12/11/20, 19:03

Print

22