University of Dublin
TRINITY COLLEGE
GAMIFICATION OF HOME FITNESS APPLICATION WITH
BEHAVIOURAL CHANGE TECHNIQUES
Aleksandr Koreckij
B.A.(Mod.) Business and Computing
Final Year Project April 2015
Supervisor: Lucy Hederman
School of Computer Science and Statistics
O’Reilly Institute, Trinity College, Dublin 2, Ireland
1
ACKNOWLEDGEMENTS
I would love to thank my final year project mentor/supervisor Lucy Hederman
for her help, support, advice and guidance throughout the year, without which
this project would have not been completed.
I would also like to extend my gratitude to all my family and friends who
supported and encouraged me in the completion of this project.
2
TABLE OF CONTENTS
Declaration……………………………………………………………………………………………………….1
Acknowledgements………………………………………………………………………………………….2
List of Figures…………………………………………………………………………………………………...6
Chapter 1: Introduction……………………...……………………………………………………………8
1.1 Aims/Goals…………………………………………………………………………………………………..…9
1.2 Motivation…………………………………………………………………………………………………….10
Chapter 2: Background & Literature Review…………………………………………………..12
2.1 Fitness Application Market…………………………………………………………………………….12
2.2 Health Behavioral Science……………………………………………………………………………...16
2.3 Behavioural Change Strategies in Fitness Applications/ mHealth……………………19
2.4 Review of Existing Applications & Feedback…………………………………………………..22
2.4.1 Physical Activity Applications…………………………………………………………………..23
2.4.2 Weight Loss Applications………………………………………………………………………...25
2.4.2.1 Overall Analysis…………………………………………………………………………25
2.4.2.2 Behavioural Science Strategies in Selected Mobile Apps…………...27
2.5 Conclusion………………………………………………………………………………………..28
Chapter 3: Design…………………………………………………………………………………………….29
3.1Requirements……………………………………………………………………………………29
3.2 Task Analysis…………………………………………………………………………………….30
3.3 User Interface…………………………………………………………………………………..31
3.3.1 Low & High Fidelity Prototypes………………………………………………………...31
3.3.1.1 Main Page………………………………………………………………………………….34
3.3.1.2 Exercise Progression………………………………………………………………….34
3.3.1.3 Calendar Planner……………………………………………………………………….36
3
3.3.1.4 Rewards System………………………………………………………………………..38
3.4 Technology Used………………………………………………………………………………40
3.4.1 PhoneGap………………………………………………………………………………………..40
3.4.1.1 Ionic Framework……………………………………………………………………….42
3.4.2 OPENUI5…………………………………………………………………………………………..42
3.4.2.1 SAPUI5……………………………………………………………………………………...43
3.4.3 ECLIPSE IDE……………………………………………………………………………………….43
3.5 Software Used…………………………………………………………………………………………………..44
3.6 Summary……………………………………………………………………………….…………45
Chapter 4: Implementation……………………………………………………………………………..45
4.1 Model View Controller……………………………………………………………………..46
4.2 Publish/Subscribe……………………………………………………………………………..48
4.3 Main View/Main Menu…………………………………………………………………….49
4.4 Exercise Progression………………………………………………………………………...51
4.5 Calendar Planner………………………………………………………………………………54
4.6 Rewards System……………………………………………………………………………….56
4.7 HTML5 Local Storage………………………………………………………………………..58
Chapter 5: Business Model……………………………………………………………………………..59
5.1 Key Partners……………………………………………………………………………………..60
5.2 Key Activities………………………………………………………………………………..…..60
5.3 Key Resources…………………………………………………………………………………..60
5.4 Costs………………………………………………………………………………………….……..61
5.5 Value Proposition……………………………………………………………….…………….61
5.6 Channels…………………………………………………………………………………………..62
5.7 Customer Relationship……………………………………………………………………..62
4
5.8 Customer Segments………………………………………………………………………….62
5.9 Revenue…………………………………………………………………………………………...63
Chapter 6: Evaluation………………………………………………………………………………………64
6.1 Testing……………………………………………………………………………………………..64
6.2 Available on All Platforms…………………………………………………………………65
6.3 Future Work……………………………………………………………………………………..66
6.3.1 More Advanced Action Planning……………………………………………………….66
6.3.2 Personalisation for User…………………………………………………………………...66
6.3.3 Facilitate Social Comparison……………………………………………………………..67
6.3.4 Plan Social Support Change………………………………………………………………67
6.3.5 Parameter Setting…………………………………………………………………………….68
6.3.6 Better User Interface………………………………………………………………………..68
6.3.7 Database…………………………………………………………………………………………..69
Chapter 7: Conclusion……………………………………………………………………………………..70
Appendices……………………………………………………………………………………………………..71
Appendix A: Part A of the Model…………………………………………………………….71
Appendix A: Part B of the Model…………………………………………………………….71
Appendix A: Continue: Update List Function…………………………………………..72
Appendix A: Creation of the Model & Local Storage Function………………..72
Appendix B……………………………………………………………………………………………..73
References……………………………………………………………………………………………………….74
5
LIST OF FIGURES
2.1 Research2Guidance Graph
2.2 Growth in Application Use
2.3 HAPA Graph
2.4 Behavioural Change Techniques in Physical Activity Applications
2.5 Behavioural Change Techniques in Weight Loss Applications
2.6 State of Art Review of % Criteria Met For Behavioural Change
3.1 Design Process
3.2 Hierarchical Task Analysis
3.3 Low Fidelity Prototype
3.4 High Fidelity Prototype
3.5 Calendar View Low FIdelity Prototype
3.6 Calendar View High Fidelity Prototype
3.7 Reward System Low FIdelity Prototype
3.8 Reward System High Fidelity Prototype
3.9 PhoneGap Build Image
3.10 OpenUI5 Logo
4.1 Index.html File
4.2 Area Detail Page View File Content
4.3 Area Pressed Function
4.4 On Initialisation Page Function
4.5 Main Menu XML Layout
6
4.6 Main Menu Controller JavaScript Functions
4.7 Exercise Progression Updatelist Function
4.8 Starttimer Function
4.9 Playsound Function
4.10 Ondialogokbutton Function
4.11 CSS Styling
4.12 JavaScript Styling Function
5.1 Business Model
6.1 Local Storage Clear Function Called
7
CHAPTER 1: INTRODUCTION
Mobile devices such as smartphones are becoming an essential part of our daily
lives and have transformed the way we socialise and communicate with others.
Today’s fast‐pace information work, reliance on processed foods and lifestyle of
inactive physical activity has contributed to the massive increase of health risks
such as overweight, sleep problems and stress. These health problems are
becoming more and more evident in current modern societies and can be
related to many health diseases (mainly cardiovascular diseases). It also has
greatly increased the costs of the health care in developed countries. “According
to World Health Organisation in 2008, worldwide leader in cause of most deaths
are cardiovascular diseases amounting to 17.3 million deaths representing 30%
globally. It is also estimated that by year 2030 more than 23 million people will
die annually from cardiovascular diseases”[1].
Looking at these statistics it is important that these numbers are reduced, and
creating a companion mobile application which will use the behavioural science
techniques in order to prevent chronic diseases and improve the overall health
of user, and to gamify the health application in order to make exercising more
fun and engaging. It is important to understand that there is a small percentage
of mobile applications that are gamified and looking at the applications that
have health behavioural science techniques is even lower. This project will stand
out by the research it had to go through for it to be different, that’s not
currently in market at this moment in time.
8
1.1 AIMS/GOALS
While significant number of fitness applications exist, many don’t contain the
health behavioural science techniques in order to make the application to be
helpful and to increase the actual well being of the user. In contrast to most
health applications, this project proposes an alternative solution.
The aim of this project is to create a gamified mobile applications with
behavioural science techniques through development using PhoneGap so it can
be easily target users across all smartphone platforms. The application attempts
to achieve a useful and functional gamified health application by means of the
following:
1. Provide instruction on how to perform exercising behaviour by
progressing through different difficulties.
2. Provide action planning and prompt self‐monitoring of behavioural
outcomes through calendar planner.
3. Create a rewards system to make the application more engaging and
prompt rewards contingent on effort or progress toward behaviour.
4. Store data in a mobile internal memory.
This health mobile application should be used in a home environment, where
user can’t afford or is comfortable in purchasing a gym membership, and wants
to improve the overall health or physical activity. To accomplish this, the
application needs to be simple and efficient in order to provide value to the
users trying to become more healthier in fun way.
9
1.2 MOTIVATION
The main motivation for tackling this project is from personal experience in
exercising, trying to lose excess weight and improving overall health. The
developer before starting Trinity College Dublin was overweight and had
confidence issues. Knowing how hard it is being overweight has motivated the
developer to develop an health mobile application which will try to help the user
with gamification aspects and behavioural science techniques to increase
physical activity, lose weight and overall just feel confident in their own skin.
There are many fitness mobile applications as the market is currently in the
“Boom Phase”. Between 2013 December to 2014 June, health mobile
applications shown double the average growth compared to overall growth of
mobile applications. But most health related applications are poorly designed
and contain no behavioural science techniques. The top fitness applications are
well designed as they have capital and resources to make their applications
fancy, but still the amount of behavioural strategies implemented are relatively
low. It creates lack of mobile applications in this area that are well designed and
contain many health behavioural methods due to the large quotes professional
developers ask for mobile software development. HowMuchToMakeanApp is a
website where individuals can obtain mobile application estimates [2]. Based on
the criteria for this gamified fitness application, it would cost up to $19,100 to
be developed by a professional app developer.
10
The criteria for gamified fitness application are as follows:
1. An application written natively for Android device.
2. No social integration.
3. No login screen.
4. In‐app purchases or in‐app advertisement.
5. No rate or review system for the application.
6. Second, to basic user interface design ‐ “Stock”.
7. Application icon.
The price of this mobile application creates a barrier to many individuals with
innovative ideas that can improve experience and everyday life of people living
in the modern age. There are many applications that have great amount of
behavioural science techniques, but with lack of advertisement and appealing
user interface design these applications are neglected. Significant costs for
development of mobile applications are not feasible for many businesses in an
economic recovery, but proposing a new Business Model with this application
can challenge current offerings. Detailed view of the Business Model can be
seen in Chapter 5.That is why the application being discussed here will have the
easy flowing and appealing user interface, and numerous of health behavioural
science strategies with the mechanics of the game making fun and enjoyable.
11
CHAPTER 2: BACKGROUND/LITERATURE REVIEW
This chapter briefly looks into the rapid growth of health and fitness mobile
applications in the past few years. It also identifies different behavioural science
techniques used in current fitness applications, and how they are integrated to
develop a mobile application. To finish off it will review existing software and
applications that can be applied to solution of this project.
2.1. FITNESS APPLICATION MARKET
Modern communication and information technologies are an integral part of our
daily lives. Today’s fast‐pace information work, reliance on processed foods and
lifestyle of inactive physical activity has contributed to the massive increase of
health risks such as overweight, sleep problems and stress. “According to World
Health Organisation in 2008, worldwide leader in cause of most deaths are
cardiovascular diseases amounting to 17.3 million deaths representing 30%
globally. It is also estimated that by year 2030 more than 23 million people will
die annually from cardiovascular diseases” [1].
All statistics considered it is important that these numbers are reduced, not only
in public/private health care institutions such as hospitals, but also in people’s
homes and workplaces. To meet this aim mHealth is of absolute importance and
need. “MHealth stands for mobile‐based or mobile‐enhanced solutions that
improve health. The ubiquity of mobile devices in the developed or developing
countries presents the opportunity to improve health outcomes through the
delivery of innovative medical and health services with information and
communication technologies to the farthest reaches of the world” [3]. As seen in
12
figure 1. 30% of mHealth applications relate to fitness, according to
Research2guidance, 2014 [4].
Fig: 2.1 Research2Guidance Graph [4].
With appropriate adaptation of emerging technology such as mobile
applications can improve efficiency and quality of healthcare delivery, lower
overall costs, allow real time communication between patients and healthcare
professionals and improve quality of life of the population. “EU also believes
with the use of these applications could lead to 99 billion euros saved in Europe
cutting healthcare costs in the following ways:” [5].
● Enabling early diagnosis of health problems.
● Encouraging users and population to move towards prevention of
diseases and health risks rather than cure.
● Allowing health professionals to spend more time on assessing and
analysing data.
13
As a result mobile and fitness applications are currently in a boom phase as
people are more conscious of their health and well being. The market has a huge
potential to expand as in 2012 alone more than 40% of all mobile phones
purchased globally are smart phones. The overall health and fitness application
market has shown an above average growth in the market which is double the
overall growth of applications overall (see figure 2.2).
FIGURE 2.2: GROWTH IN APPLICATION USE [6].
Currently, Apple Store (iOS) and Google’s Play Store (Android) have the biggest
application markets, both consisting of approximately 800,000 applications
each. But the number of fitness and medical applications are unequal, as Apple
has more than 20,000 applications compared to Google which has over 9000.
14
This rapid growth promises a lot of great advancements in monitoring and
improving health, but it has a downside as well. The main issue that arises is
identifying suitable applications for healthcare professionals and the general
public. Rapid growth and creation of fitness mobile applications made it difficult
for users and professionals to differentiate which applications do actually
improve health and well being. Thus the applications that aren’t tested by
medical practitioners creates a problem that some applications might do more
harm than help. As well as checking validity of application information,
applications should be evaluated for effectiveness, the same way a drug or
treatment is. One study recruited 20 males and females to use a mobile diary for
wellness management that had applied “psychological approach that aims at
inducing behavioural changes in order to cope with problems such as stress,
cardiovascular diseases and type 2 diabetes which was Cognitive‐Behavioural
Therapy. CBT consists of cognitive and behavioural procedures to help the
individual to identify and change problem‐maintaining mechanisms” [7]. As the
result subjects of this study gave a 7.25 points from a scale of 1 to 10 and 64% of
the subjects wanted to continue the use of Wellness Diary.
15
2.2. HEALTH BEHAVIOURAL SCIENCE
Health Behaviour Science has been one of the most central public health
interventions over the past decade. Its aim is to explore and analyze human
behaviour, along with their communications and environment in order to
prevent chronic diseases, improve the overall population health, and creating a
better environment to enhance human lifespan by involving in local, global and
social level [8].
Health complications arise from number of causes such as stress, substance
abuse, lack of sleep and sedentary lifestyle. These health risks can be reduced by
self‐monitoring and adapting health‐enhancing behaviour. Examples of such
health improving and monitoring activities are balanced nutrition, physical
activity such as exercising, and weight control. Health Behaviour change is a
process of motivating, making a decision and taking action to discontinue
behaviours which endanger populations health in order to take up and continue
health improving behaviours.
Health Behaviour programs such as Health Action Process Approach (HAPA),
Theory of Reasoned Action and Transtheoretical Model were developed over
time which contain wider range of approaches and activities. HAPA draws a lot
of attention from researchers who want to change, anticipate and analyse
health‐associated behaviour [9].
16
Figure 2.3: HAPA Graph(HEALTH ACTION PROCESS APPROACH) [10].
The HAPA model is a social‐cognition model which suggests that engaging in
healthy behaviour is made up of two processes: individual forms an intention
(motivational phase), followed by a stage of implementing those intentions to
actual behavior (volition phase).
The Motivational phase in the HAPA is comprised of growing risk awareness,
outcome expectancies, and perceived task self‐efficacy that lead to the
formulation of an intention to either change a health risks or adopt a health
protective behaviour (see Figure 2.3).
17
“1. Risk awareness refers to the perceived health threat or concern that is
needed to mobilize action.
2. Task self‐efficacy is the degree to which a person believes he or she is able to
complete a particular behavior.
3. Outcome expectancies refer to whether an individual believes the behavior
will bring about the desired change.
If the evaluation of the outcome of the behavior is positive, an individual is more
likely to form an intention to engage in this behavior. “[11].
Once intentions are formed to change a health behaviour, individual must plan,
take initiative, maintain and relapse (recovery) must be managed for that health
behaviour change to be successful (see the right hand side of the diagram
above). “Planning operates similarly to implementation intentions, in that plans
commit the individual to a specific course of action when certain environmental
conditions are present. For the process of maintaining behavior, coping
self‐efficacy helps to overcome incompatible goals, urges, interfering emotions,
and environmental obstacles that occur during the execution of the planned
behavior. Finally, recovery self‐efficacy allows an individual to recover if they
experience behavior relapses or they disengage from the planned action” [11].
Individual with good intentions, self‐regulatory skills and high self‐efficacy are
deemed to have more positive opportunities to act, well thought out plans,
endurance and confidence in their ability to recover from setbacks quickly when
running into unanticipated events.
18
“Research has found evidence suggesting that self‐management programs such
as HAPA for chronic diseases, including diabetes, can improve health status at 6
months. For example, a HAPA‐based physical activity planning intervention for
obese individuals, consisting of brief counseling and telephone sessions, was
found to improve physical activity up to 12 months later” [11].
2.3. BEHAVIOURAL CHANGE STRATEGIES IN FITNESS APPLICATIONS/
MHEALTH
“As mobile access spreads, more people have the ability and increasingly, the
habit ‐ of tracking their workout routines, posting reviews of their medical
treatments, and raising awareness about certain health conditions“ [12].
Healthcare is going through revolution and one of promising moves is towards
integration of behavioural science techniques in mobile applications. Mhealth is
an abbreviation of mobile health, with the help of mobile devices it allows to
collect and monitor data more effectively and efficiently. With the use of
behavioural change science it grants early diagnosis & better treatment, it
motivates users to care for their own health & maintain healthier lifestyle,
increase health risk preventions and help to improve sustainability and
efficiency in healthcare.
19
UN Foundation and Vodafone Foundation report [13] segmented mHealth into
six applications categories, although other categories exist, these are the main
ones:
1. Education and Awareness
Education and Awareness programs within the mhealth field concentrated
in providing mass information about health issues from the source such as
medical practitioners to users through short message services.
2. Remote Data Collection
Data collection is an integral part of public health programs. Health
providers at global, local and social levels need accurate information and
data in order to gauge the effectiveness of existing policies and programs
and to shape new ones.
3. Remote Monitoring
Opens new possibilities for treating patients in an outpatient setting, a
central capability in developing countries where access to hospital beds
and clinics is highly limited.
4. Communication and Training for Healthcare Workers
Connecting health practitioners with sources of information via mobile
devices is a strong basis for empowerment, as it provides the support they
need to perform their functions effectively and self‐sufficiently.
5. Disease and Epidemic Outbreak Tracking
Outbreaks of communicable diseases often begin unexpected and
undetected, with deployment of mobile technology capturing and
20
transmitting data on disease incidence, can be decisive in the prevention
and containment of outbreaks.
6. Diagnostics and Treatment Support
Mhealth‐enabled diagnostics and treatment support, patients are able to
receive treatment in their villages and homes, averting the need for
expensive hospital visits, which are beyond reach for many.
[13].
mHealth is revolutionising current healthcare systems, but according to Penn
state researchers: “Behaviour change techniques are not well represented in the
marketing materials for top‐ranked physical‐activity applications” [14].
Researchers suggested that mobile application developers have not
incorporated many behaviour‐change techniques and that there are
opportunities to integrate more behavioural science to make apps more
effective in either preventing health risks or adopting health protective
behaviour. Another research papers points out that commercial developers
excel at development of an application, not behavioural strategies in them.
“They develop mobile apps swiftly and expertly, and with products that are
often more engaging and user‐friendly than those developed by researchers.
The resulting product often look attractive, function well, and are tailored to the
interests of customers” [15]. In 2012 MHealth Summit, mhealth innovations
have been praised by many, but it was argued that the field needs clinical trials
to establish its evidence base. Taking the weight loss as an example: The top five
free weight applications have over 10 million users each, in terms of reach to the
public it has an outstanding potential, far more greater than traditional
21
behavioural weight loss strategies. Nonetheless, none of these applications have
been evaluated in clinical trials. Correct evaluation of mHealth applications is
necessary to estimate the magnitude of their outcomes, but also to ensure they
do no harm. This will be a huge challenge as research and the pace of innovation
move at different speeds. “Estimates suggest that it can take up to 17 years for a
research innovation to be adopted in clinical practice. By the time a
research‐derived digital health tool reaches clinical practice it might be
obsolete” [15].
2.4. REVIEW OF EXISTING APPLICATIONS & FEEDBACK
The aim of Mobile health is to use mobile technology such as tablets and
smartphones to improve and monitor public health. “Approximately one in five
smartphone users utilise at least one software application to support their
health‐related goals and 38% health application users have downloaded an
application for weight‐loss or physical activity” [16]. There are thousands of
mobile applications in “health and fitness” category on the two major online
marketplaces: Apple iTunes & Google Play. But given the vast number of mobile
applications and lack of standards, these software tend not to be created in
health behaviour strategies, and sheer majority of them have not been
evaluated using clinical methods in order to estimate their usefulness. The
applications reviewed that have behavioural science techniques are categorised
in two groups: Physical Activity & Weight Loss mobile applications.
22
2.4.1. PHYSICAL ACTIVITY APPLICATIONS
In this review mobile health applications were chosen and an overall analysis
have been made on software descriptions across different operating systems.
“Most physical activity applications tend to address either beginners during
initiative state or advanced users during maintenance state” [18].
23
FIGURE 2.4: BEHAVIOURAL CHANGE TECHNIQUES IN PHYSICAL ACTIVITY
APPLICATIONS [16].
This table shows the frequencies of behavioural change methods used in the
applications.
The most common and used techniques were as follows:
1. providing instruction on how to perform behaviour ‐ application providing
descriptive information on how to perform a specific exercise or action.
2. demonstrate the behaviour ‐ application demonstrating behaviour with an
image or a video.
3. provide feedback on performance ‐ application providing some sort of
information in how the exercise was executed.
Other methods such as:
1. shaping ‐ most applications didn’t implement high detailed
personalisation of the user to his/her needs and wants.
2. coping planning/relapse prevention ‐ most applications didn’t integrated
reminders to do planned exercises thus user forgetting about the
application and stopping from using it as frequent as they would liked.
3. stimulate anticipation of future rewards ‐ application didn’t provide with
any of reward system or achievements for completing the desired
behaviour.
were rare and less frequently used as seen in Figure 2.4.
24
The most used techniques were educational and were concentrated on
providing information on how to perform the physical activity. Providing
information on how to perform health behaviour methods is crucially important
as it adds to task self‐efficacy, which allows to form intentions to be more
physically active. “Surprisingly, the most well‐established behaviour change
strategies such as bridging intention ‐ behaviour gap, action planning, was
relatively rare in descriptions of the top ranked physical activity applications”
[16].
2.4.2. WEIGHT LOSS APPLICATIONS
In this Evidence Based Strategies in Weight‐Loss Apps [17] review an overall
analysis have been made on software descriptions and two applications were
chosen from personal use and experience.
2.4.2.1. OVERALL ANALYSIS
“Weight loss applications address mainly users in the action planning and
initiative state and weight management applications address users during
maintenance state with partial overlapping” [18]. From the table below
observation can be made that three main evidence‐based behavioural
weight‐loss strategies are as follows: weight‐loss goal, dietary goal and calorie
balance. Goal setting option in the mobile applications obtained users goals by
allowing users to select their objective and then showing a daily or weekly
calorie intake according to their weight goal. “Only 20% of mobile software gave
users a specific physical activity goal in terms of days or minutes per week” [17].
The most common feature of behavioural techniques was a calorie balance
25
which showed net calories user needs to consume or has consumed already. A
large proportion of behavioural methods have not been used such as stress
reduction, relapse intervention, negative thinking, social cues and so on. This
provides a lot of ground in developing a better and more helpful application in
regard of health behaviour strategies.
FIGURE 2.5: BEHAVIOURAL CHANGE TECHNIQUES IN WEIGHT LOSS
APPLICATIONS [17].
26
2.4.2.2. BEHAVIOURAL SCIENCE STRATEGIES IN SELECTED MOBILE APPS
FIGURE 2.6: STATE OF ART REVIEW OF % CRITERIA MET FOR BEHAVIOURAL
CHANGE [18].
In the review the two applications that have the highest percentage of
behavioural science techniques were MyNetDiary and MyNetDiary Pro both of
which have 65% criteria met. The food item barcode scanner, social media, and
reminders when tracking lapsed were found in both applications that are listen
on the table above had it. MyNetDiary had a paid and free versions of the
application “but were no more likely than free apps to include behavioural
change techniques. In terms of technology‐assisted features, 40% of paid mobile
apps compared to 73% of free apps included barcode scanner, and only 27% of
paid apps included social networks compared to 60% of free apps” (WEIGHT).
27
2.5 CONCLUSION
The rapid advancement of the technology provides huge potential for mHealth
mobile applications to reduce health related risks such as cardiovascular
diseases, sleep problems, obesity and other health problems.
Most used health behavioural change techniques in physical activity applications
were educational and were mainly concentrated in providing information about
the exercises or demonstrating the desired behaviour. “Knowledge about how
to practice a desired health behaviour is a necessary precursor to behavior
change because it contributes to task self‐efficacy, which facilitates the
formation of intentions to be physically active”. Further motivational support is
crucial and needed highly in the current mobile applications. Behavioural change
strategies such as prompting focus on past success, providing rewards
contingent on successful behaviour, stimulate anticipation of future rewards are
rarely used and these “well‐established techniques are needed for bridging
intention‐behaviour gap”.
28
CHAPTER 3: DESIGN
This chapter will discuss the human interface design as well as illustrating design
process for the mobile application. It also introduces different software
technologies that are used throughout the mobile application, briefly why each
was chosen and how they were designed and integrated.
FIGURE 3.1 DESIGN PROCESS
3.1 REQUIREMENTS
The data gathering of requirements for this application has primarily
incorporated research from similar products/applications to identify problems
and develop an innovative and design‐driven idea to solve them. This research is
discussed in more detail in Chapter 2, outlining the Fitness Application Market,
the Health Behavioural Science theory and techniques, mHealth and review of
existing applications in both physical and weight‐loss applications. However,
29
most mobile applications available for physical activity have little or no
behavioural science strategies. This leads to an alternative design opportunity.
3.2 TASK ANALYSIS
The primary technique that is used in developing alternative designs is
prototyping. Nonetheless, other concepts and tools in the earlier phases are
incorporated into the prototypes. The most important of these is task analysis.
This technique is used to investigate existing applications before prototyping is
used to envision new products and ideas [19]. It also helps to establish existing
practices that can be built upon to create the application. Hierarchical Task
Analysis (HTA) is the most used method in task analysis, and involves breaking
task down into subtasks. It starts with a user opening the mobile application and
choosing an exercise to do, demonstration is in Figure 3.2.
FIGURE 3.2 HIERARCHICAL TASK ANALYSIS
30
This task begins by user opening the fitness application. Then user is prompt to
choose an exercise type (1.1 ‐ 1.4). Once an exercise type is chosen, user is
prompt to choose an exercise. After the exercise is picked, the aim now is to
start the exercise, which will begin the timer and user will begin to exercise.
Finished the exercise a table pops up and asks the user to go back to the main
menu or choose another exercise to do. This task analysis is just the starting
prototype and more design features were added while designing the
application.
3.3 USER INTERFACE
Having done the task analysis designs, the next step is to design or redesign the
application into low and high fidelity prototypes.
3.3.1 LOW & HIGH FIDELITY PROTOTYPES
The early stages of design included paper‐based sketches resembling low‐fidelity
prototypes and they illustrated the tasks outlined from task analysis (Exhibit
below). The purpose of this phase is to allow interaction with the interface
before the final design has started, where changes are more difficult to
implement. Exhibit below presents rectangular cards of interface screens. At this
early stage, the cards represent scenarios that users can find themselves in
when using the application.
Low fidelity prototypes are useful because they are simple, quick and cheap to
product, and they can be easily modified to explore alternative designs [19]. For
example, in Figure 3.3, the first screen user sees when opening application is the
31
main menu of exercise/body type exercises, calendar planner and reward
system. All of these features are in the final design, but they are separated with
headings for better User Interface navigation.
FIGURE 3.3 LOW FIDELITY PROTOTYPE
After considering alternative designs through paper cards, high‐fidelity
prototypes are useful in producing a design that resembles the final application.
A software tool, Balsamiq, is used to develop wireframes of the application. The
two main reasons for creating prototypes presented in Figure 3.3 are for
proposing the idea as final year project, and for resting out technical issues that
might arise from the design. Unlike in the low‐fidelity prototypes, high quality
user interface guidelines are considered in the design of software assisted
prototypes illustrated in Figure 3.4.
32
Prototyping can be seen as tinkering when building systems, and Banzi (2009)
believes “reusing existing technology is one of best ways of tinkering” [19]. This
project effectively ‘tickers’ existing ideas (level progression and calendar
planner) to create an interactive gamified application for the user. The design
process is very much an iterative one, and each phase above is integrated and
concurrent in development.
FIGURE 3.4 HIGH FIDELITY PROTOTYPE
33
3.3.1.1 MAIN PAGE
It can be observed that in the low‐fidelity prototype the main page only consists
of 6 widgets/buttons, simple layout. In high‐fidelity prototype similar layout can
be seen, but this time widgets are separated by headings which provides a
clearer and better user interface design.
3.3.1.2 EXERCISE PROGRESSION
In low‐fidelity prototypes exhibit above, once you select a body type exercise
e.g. “Abdominals” it opens a new page where there are 3 levels of difficulty. At
the start “Easy” exercises are always open. Select one of the exercises and it
opens a new page. With an image of the exercise, a timer and a start button.
Once start button is pressed the timer begins to go down. When the timer stops,
it brings you back to the main page.
In high‐fidelity prototypes there were slight adjustments. The colors green, red
and the numbers beside each exercise help to understand the gamification of
the application. The exercises that are colored green are exercises that the user
can use, thus they are open. But “Medium and Hard” exercises are closed. They
are closed because the “Easy” exercises aren’t completed fully, to progress in
this game, the user has to complete specific amount of “Easy” exercises in order
to open the following “Medium” exercises and so on. For this specific example
the user needs to do each exercise at least 10 times in order to open “Medium”.
34
The behavioural technique used in this section is set graded tasks for the user,
as each exercise type of difficulty such as “Easy” contains 2 points per exercise,
“Medium” contains 5 points per exercise and “Hard” contains 10 points per
exercise. This point/score system will be discussed in more detail in Reward
System.
Next page, where user begins the exercise there was a design change. This time
user can see the image of the exercise and the description. It is one of the
behavioural science techniques: provide instruction on how to perform
behaviour, also the image and performing the exercise itself provides with the
following health behaviour change strategies: demonstrate behaviour and
prompt behavioural outcomes of the user.
Once, the user begins the exercise the timer starts. Another design change was
considered, in the implementation part two timers are provided: one for
completing the exercise and other for resting. Also a flaw was found in the
implementation of the application. There was no “Beep” noise in order for the
user to know when to switch from exercising to rest. In the implementation
section of Exercise Progression it will be discuss how “Beep” was incorporated
and in the final application it was working smoothly. When the user completes
the exercise, he/she is prompt to choose the following: go back to the main
menu or go return to same exercise type and choose a different exercise.
35
3.3.1.3 CALENDAR PLANNER
FIGURE 3.5 CALENDAR VIEW LOW FIDELITY PROTOTYPE
Once Exercise Progression was completed, considering all design flaws, new
additions and how to incorporate behavioural change techniques, next function
has to be designed which was Calendar Planner. As can be observed from Figure
3.5 once navigated from the main menu user sees a calendar and a plan exercise
widget/button. If the user presses the plan exercise button a pop up
message/window opens and following information can be chosen: the date for
that exercise to be completed and what type of body part user wishes to train. If
he/she is happy with the chosen data ok button is to be pressed or otherwise
press cancel.
In high‐fidelity prototype Figure 3.6 a lot more planning has been involved.
Same as Figure 3.5, the Calendar Planner page contains a calendar, plan exercise
widget, but this time another addition was put in which is a box down below the
button. The box part will be explain in few short moments. As last time with
36
low‐fidelity prototype if user wants to plan an exercise, it presses the button,
chooses to date and body type, and pressed ok. Once pressed ok, if user selects
the date it chose to plan the exercise the box in the bottom of the screen
creates a widget/button for the user to press and he/she is brought to the body
type they planned initially and can choose any exercise for that body type. The
behavioural aspects incorporated in the planner were as following: action
planning and prompt self‐monitoring of behavioural outcomes. Action planning
is achieved by allowing user to plan exercises in advance. Prompt
self‐monitoring of behavioural outcomes can be seen when the user goes back
through the calendar and see what kind of exercise the user did on what date.
Allowing user to plan a more efficient workouts in the future, and observing
what exercises or body types work best for him/her in what days they have
completed them.
FIGURE 3.6 CALENDAR VIEW HIGH FIDELITY PROTOTYPE
37
3.3.1.4 REWARDS SYSTEM
FIGURE 3.7 REWARD SYSTEM LOW FIDELITY PROTOTYPE
FIGURE 3.8 REWARD SYSTEM HIGH FIDELITY PROTOTYPE
38
This is not only a fitness application that uses behavioural science, it is also a
game. There are two aspects of gamification in this application, Exercise
Progression and this section which is Reward System. In low fidelity‐prototypes
Figure 3.7 once navigated from the main menu is a page with different types of
rewards. The first type is a leveling system, as discussed in last section in
Exercise Progression user is awarded points for exercise difficulty in completes.
“Easy” exercises provide with 2 points, “Medium” provides 5 points and “Hard”
gives 10 points. The level system is easy to understand. Example: To reach level
2, user needs 40 points. This means that user has to complete 20 easy exercises
of any body type in order to get a level 2. And this system keeps going as higher
levels needs higher points, and more difficult exercises provide with more
points. Other reward is receiving medals for completing difficulties of each body
type. For example, once user completes all “Easy” exercises in “Abdominal”
type, he/she is promoted by a medal. That goes to all difficulties, complete
“Medium” or “Hard” and user receives a medal.
Now having a look at high‐fidelity prototypes in Figure 3.8 the reward system
doesn’t change much from low‐fidelity, but there are few changes in the design.
Nothing has changed in leveling system, it is the same as described above.
Although, a new addition has been added which is score points. Instead of user
just seeing a level increasing, now he/she can see the actually score
accumulated by completing exercises. And a slight adjustment has been made
for medals, instead of just receiving any type of color, now user receives “Bronze
for Easy”, “Silver for Medium” and “Gold for Hard”. This provides a better user
interface and will show the user a bit more rewarding view of his/her
39
achievements. The health behaviour change techniques used in this function of
the application are: provide rewards contingent on successful behaviour which
can be see by leveling, reward, and score systems; Set graded tasks is by giving
medals for each difficulty user completed; prompt review of outcome goals
seeing his/her level, how much score they accumulated over time and what
medals they’ve earned for each body part; and prompting focus on past success
which is similar to the last one discussed. Stimulate anticipation of future
rewards is another strategy used which is achieved by the user anticipating level
up or medals for finishing different difficulties.
3.4 TECHNOLOGY USED
In this section, an overview of the technologies that were planned to be
deployed and used in the initial designs of the project will be discussed.
3.4.1 PHONEGAP
PhoneGap is a new mobile development framework which allows programmers
to build mobile applications using HTML5, CSS3 and JavaScript languages ‐
instead of native application such as Objective‐C (for iOS) and Java (for Android)
[20]. PhoneGap provides an application programming interface (API) that
enables you to access native operating system functionality using JavaScript and
as these API’s are the same with across different mobile platforms, as they are
developed on web standards thus cross platform applications can be built with
little to no changes [21].
40
PhoneGap provides this project to be built across all mobile platforms reaching
every single person with a smartphone. Instead of just writing code for one
native platform, like Android or iOs, PhoneGap gives you a choice to launch
across seven different operating platforms.
Advantages of PhoneGap [22]:
1. Cut down on development time by reusing existing web development
skills, frameworks and tools.
2. PhoneGap compiles applications using the cloud and provides with
up‐to‐date SDK for any platform.
3. Supports multiple platforms such as iOS, Android, Windows, and so on.
4. Speeds up collaboration for development teams.
5. Faster building and debugging cycles.
FIGURE 3.9 PHONEGAP BUILD IMAGE [22].
41
3.4.1.1 IONIC FRAMEWORK
Ionic is an open source front‐end framework for developing hybrid mobile
applications using a library of mobile optimised HTML, CSS and JavaScript
components for building highly interactive mobile applications [23]. This
framework was used at the start of the designing of the project, but then it was
moved to OPENUI5 and SAPUI5 as they contained a better user interface library
and easily understood concepts. But this framework was still used with
PhoneGap to compile and test application. This will be discussed more in the
Implementation and Evaluation sections.
3.4.2 OPENUI5
FIGURE 3.10 OPENUI5 LOGO [24].
OPENUI5 is an open source JavaScript UI library, maintained by SAP and
available under the Apache 2.0 license. OPENUI5 lets you build enterprise‐ready
web applications, responsive to all devices, running on almost any browser of
your choice. It’s based on Javascript, using JQuery as its foundation and follows
web standards [24]. With the use of HTML5 rendering library provides an easy
development which includes rich set of control and support mechanisms in
order to databind different models such as JSON, XML, ODATA.
42
3.4.2.1 SAPUI5
The difference between SAPUI5 and OpenUI5, is that OPENUI5 is a free version
available online, and SAPUI5 is a version only SAP customers can use, as they
have the certain kind of license provided to them. The good news is: most
importantly, the entire core of OPENUI5 and SAPUI5 (containing all central
functionality) is identical. This means that all of the rich library SAP customers
can use are also available to OPENUI5 users, but there is a small difference.
Some more exotic and more advanced control libraries have not been put under
the Apache 2.0 license. But for this project the library used provided with lots of
possibilities to program the application in anyway desired [25].
3.4.3 ECLIPSE IDE
The Java eclipse is a free, open source integrated development environment
(IDE). It contains a base workspace and extensive plug‐in for customising the
environment. Eclipse can be used to develop applications by means of various
plug‐ins such as SAPUI5. For this project a SAPUI5 plug in was downloaded into
the Eclipse IDE, as it provides with a great and clear programing structure,
perfect filing and fast operating speed. Another plug‐in added was Tomcat v.8
Apache server in order to test the mobile application on the localhost server.
Testing on a local server was not only time efficient, but it also helpful in styling
the application as the browser could be shaped to a size of a mobile phone.
Also having all the files and plug‐ins stored in Eclipse provided ease and relief as
this project was using couple of frameworks at the same time which at times
was tedious and stressful.
43
3.5 SOFTWARE USED
Below are all the software technologies used throughout the project. A brief
explanation is provided stating why each of these languages/software
technologies were chosen:
1. XML:
Extensive Markup Language and was used for the dynamic user interface
structure.
2. HTML:
is a HyperText Markup Language and was used for displaying the mobile
application.
3. CSS:
is a Cascading Style Sheet and was used to style and optimise user
interface and formatting of application.
4. Ionic View:
Easy way to test and share Ionic and Cordova type mobile applications.
5. JavaScript:
is a dynamic programming language used to make web and mobile
applications interactive. Mainly used for creating the structure of data and
main functions of the application.
44
3.6 SUMMARY
This chapter provided with the design process of the application. It started off
with task analysis that functions of the application have to be created using
Hierarchical Task analysis before the prototypes. Later on low and high fidelity
prototypes were discussed and how the designed change with the use of
behavioural change strategies. And finished off with some technologies that
have been used in the development of this project. Chapter 4will now look into
the implementation of the mobile application.
CHAPTER 4: IMPLEMENTATION
This chapter describes a low‐level analysis of various steps taken in the
implementation of this mobile application. For structural purposes this chapter
is divided into the model view controller, publish/subscribe and followed by
each of the three core components of the fitness application.
Using PhoneGap enabled the mobile application to be developed using
well‐known web technologies such as HTML, CSS, XML and JavaScript. With this,
OPENUI5 framework was used. OPENUI5 provides with user interface and
JavaScript helps to create functions and main functionality of the application.
45
4.1 MODEL VIEW CONTROLLER
Model View Controller (MVC) is a well‐known and handy design pattern. This
project application was split into three main parts:
1. Data (Model).
2. An interface to view and modify the data (View).
3. Functions that can be performed on the data (Controller).
The MVC pattern, in a nutshell, is:
1. The model represents the data, and does nothing else. The model does
NOT depend on the controller or the view. The “index.html” is the main
file where the views of the application are stored and generated when the
application starts. It also contains the main JavaScript files in order for the
application to start (app.js) and for the main structure of the application
data (appModel.js).
FIGURE 4.1 INDEX.HTML FILE
46
2. The view displays the model data, and sends user actions (e.g. button
clicks) to the controller. The view can:
‐ be independent of both model and controller; or
‐ actually be the controller, and therefore depend on the model.
An example of one of the views is the difficulty level page which shows
“Easy”, “Medium” and “Hard” difficulties of each body type and gets all
the data structure for it from “appModel.js” file.
FIGURE 4.2 AREA DETAIL PAGE VIEW FILE CONTENT
3. The controller provides model data to the view, and interprets user
actions such as button clicks. The controller depends on the view and the
model. In some cases, the controller and the view are the same object.
“appModel.js” is the main controller and contains all the data needed for
the mobile application structure. It also contains all internal data storage
functions for updating the application once the function is completed.
Parts of the model and some functions can be seen in the Appendix A.
[26].
47
4.2 PUBLISH/SUBSCRIBE
The publish/subscribe interaction paradigm provides subscribers with the ability
to express their interest in an event or a pattern of events, in order to be
notified subsequently of any event, generated by a publisher, that matches their
registered interest [27]. In simpler words this design pattern helps
communication between disconnected components such as different view and
controller files. In this case, one controller doesn’t have a direct access to
another controller to pass the binding path. An example that can be shown from
the mobile application code is when a user navigates from “MainView” (which is
main menu) to “AreaDetail” (is the page of exercises for a selected body type).
FIGURE 4.3 AREA PRESSED FUNCTION
Figure 4.3 shows how “MainView” how it publishes data for “AreaDetail”
through “areaPressed” function. It begins when the user selects a specific body
type, lets say “Abdominals”. Users presses “Abdominals” and “areaPressed”
function is activated. The function looks at the event and sees that user selected
“Abdominals” by event.getSource().data(“name”). Knowing which body part
users wants to train, the function knows what kind of property to set and bind
from the “appModel.js” file, where the structure is stored. The then function
publishes the needed information and binds the paths.
48
FIGURE 4.4 ON INITIALISATION PAGE FUNCTION
Published information is then caught by “AreaDetail” which subscribes on
initialisation function of the page seen on Figure 4.4. Publish/subscribe
paradigm allows for a dynamic navigation of the application, lowering the need
of tedious amount of files for navigation through them, and uses an efficient app
model for the navigation structure and storage of the data.
All the user interface was implemented from the SAPUI5 library.
4.3 MAIN VIEW/MAIN MENU
Using prototypes made in Chapter 3, the design was first implemented. Don’t
forget that each file contains both view (XML) and controller (JAVASCRIPT), the
MVC model which was discussed at the start of this chapter.
In the view file, simple xml layout. It has a title which has a header content
inside of it showing the reward system points, main content which has a 3 lists
for each main function of the application. Them 3 lists have standard List Items
which are same as buttons/widgets, once the widget is pressed for example
“Calendar”, the user is brought to Calendar Page. The user interface was created
in “view” which is a xml file and SAPUI5 framework provides with a wide range
of items to be used for the interface.
49
FIGURE 4.5 MAIN MENU XML LAYOUT
The more complex standard list customisation was made is “custom:name”
which looks at which type of body part user has pressed and navigates to the
selected body type for exercising.
In controller file, which contains main functionality of the application contains 3
functions. “areaPressed”, “calendarPressed” and “rewardsPressed”.
“areaPressed” is the hardest function as it contains data binding & publish
method. As seen in Figure 4.6 and talked about the publish/subscribe, once user
presses the body part it wants to exercise the data is binded to the
“appModel.js” where the body part is selected and navigates to “AreaDetail”
page of the body part.
“calendarPressed” is a function that navigates user to the Calendar Planner
page.
“rewardsPressed” is a function that navigates user to Rewards System Page.
50
FIGURE 4.6 MAIN MENU CONTROLLER JAVASCRIPT FUNCTIONS
4.4 EXERCISE PROGRESSION
The user interface was created in “view” which is a xml file and SAPUI5
framework provides with a wide range of items to be used for the interface. This
is the trickiest of functions, as it contains two view and controller files. The more
complex function will be discussed as the layout of the view files doesn’t change
as much, if any significant change was made it will be discussed below.
In the controller file of “AreaDetail”, a design flaw was noticed. The back
function button was created in order for the user to go back. It also contains
“onInit”, “updateBinding”, “exercisePress” functions which was discussed for
data binding and publish/subscribe above.
The main functionality in this area is the two functions in figure 4.7. “updateList”
function is used to go through the “appModel.js” and look if the right amount of
exercises in for example “Easy” column are completed. If all exercises are
completed, then the “Medium” exercises for that body type are unlocked. The
function is just a nested loop that grows through app exercises for that body
51
type and checks if they are completed or not. TRUE & FALSE values are used to
determine which of the difficulties are done and which ones are not.The second
function “listStateFormater” is used to change the list buttons from “red” to
“neutral” color thus “unlocking” the difficult the user reached.
FIGURE 4.7 EXERCISE PROGRESSION UPDATELIST FUNCTION
In the controller file of “ExerciseView” contained smiliar functions as the last
controller: onInit, goBack, updateBinding.
52
Other functions were needed to be implemented so the timer would work. The
following were implemented for the timer to work efficiently: startTimer,
__handleTime, __handleRestTime, playSound and percentFormat.
FIGURE 4.8 STARTTIMER FUNCTION
“startTimer” function took data from the “appModel.js” through data binding.
The needed parameters for the timer needed were “timeToDo”, “rest” and
“reps”. All of these parameters could be changed in the “appModel.js” manually.
This data was needed in order to set intervals for the timer and call the
“_handleTime” function which did all the functionality and started the timer.
Looking at Appendix B the function begins by storing local variables from
“appModel.js”. Then the function goes through several “if” statements to check
if the time for the exercise has been completed if not, the timer is still continues
to go. When the timer stops, the application makes beep noise to let the user
know that it can start the rest time. The “_handleRestTime” function is then
called which is same as “_handleTime” and it keeps going in a loop or iteration
till the reps are equal to zero. Also in the “_handleTime” function there are
several additions for the updating local storage of the application, updating the
list of exercise and updating reward system. All this is needed for the
“appModel.js” to be re‐populated with the data to know which exercises are
completed for each body type and for rewards part to know how much score to
53
be added, how much level the user has increased or if a certain difficult was
completed. When the reps go to zero and user finishes the exercise, pop up box
appears. SAPUI5 framework library provides with the code to call the box. It has
two wedgits “Yes” ‐ return to main page or “No” return to same body type
where user can do more exercises. This is coded by simple “if else” statement.
“playSound” function was easily introduced. A “beep.vaw” file was put into the
library of files and referenced. Once the “handleTime” and “handleRestTime”
functions were called the “playSound” function would be called in them.
FIGURE 4.9 PLAYSOUND FUNCTION
4.5 CALENDAR PLANNER
The calendar view was an extension used in the SAPUI5 framework library. And
the lists and widgets are same as discussed above.
In the controller file of “calendarView” contained similar functions as the last
two controllers: onInit, goBack and itemPressed. “itemPressed” function is
similar to “exercisePress” both are using the publish/subscribe paradigm talked
at the start of this chapter.
54
“dateTypeFormatter” function is where it takes a value of the date and sets a
color for a specific date planned. The SAPUI5 provides with 8 colors, and if a user
plans to exercise, the selected dates will show different colors for that date.
“handleCalendarSelect” function is when the user presses a specific date, the
date is stored as an event and calls “updateList” function with that specific date.
“updateList” function looks at the current current items stored in the
“appModel.js” in the calendar part. “updateList” function contains a specific
date that will be added to the “appModel.js” calendar part as
“specificDateItem”. This “specificDateItem” is a date that user picked for when it
wants to do a certain body type.
“openDialog” function opens a dialog box for user to plan an exercise.
“onDialogCloseButton” function closes a dialog box when user cancels to plan an
exercise.
“onDialogOkButton” function is called when the user planned an exercise. It
takes that event and looks at what user has chosen for date and body type to
exercise. Then the data is sets bind path with “exerciseview” page and gets
values from “appModel.js” calendar part. After that it pushes the date and body
type user has planned to exercise, also binds the paths. The date and exercise is
stored into the “appModel.js” calendar part structure and updates the internal
storage of the phone. This can be seen in FIGURE 45.
55
FIGURE 4.10 ONDIALOGOKBUTTON FUNCTION
“itemPressed” function takes in an event, which contains what body type user
wants to train from the selected date when user pressed the widget that was
created there. It looks at the binded paths and navigates the user to the planned
body type.
Also for the plan exercise button, its an xml file. Just created a footer that once
the button “plan exercise” is pressed it pops up a dialog box which can be found
SAPUI5 framework library.
4.6 REWARDS SYSTEM
The rewards view xml file is a bit more larger than the rest but it has the same
content taken out from the SAPUI5 library. A new addition was a Table view for
the each body type and there difficulties that the medal would have a better
layout. The table view was also in SAPUI5 library. The rewards view is similar to
the main view header content. It shows the score user has accumulated. Down
below the header, a vertical layout has implemented with a progress indicator
which shows the levels user has achieved. The progress bar indicator was again
56
used from SAPUI5 library. Next is the table view for the medals with body types
and difficulties separating them in a simple view. Icons for the medals and the
levels in the footer were also provided by the SAPUI5 library. A bit of CSS work
was added on the medals and the levels on the footer (see Figure 46A), also
some simple JavaScript function was done to change the colors on the levels on
the footer figure 46B.
FIGURE 4.11 CSS STYLING
FIGURE 4.12 JAVASCRIPT STYLING FUNCTION
The functionality of this application are the same as all the main function:
goBack.
“percentFormat” function is used to format the “%” in the level progress bar. It
takes the the current score and divides it by the points needed for that level.
Then multiplied by 100 and percentage is calculated.
57
“updateRewardSystem” is not in the “rewardView” controller, it is in the main
controller “appModel.js”. “updateRewardSystem” does two jobs ‐ calculates the
score points and controls when the medals show up in the rewards page.
The score is calculated by a triple nested loop, that goes into the specific
exercises, looks at the amount the exercise has been completed and compares it
to a specific difficulty, as difficulties get rewarded for different amount of points.
“Easy” are 2 points, “Medium” are 5 points and “Hard” are 10 points. It goes
through the nested loop and calculates the total score. When the total score is
calculated the “updateRewardSystem” starts going through another loop to see
if the right amount of exercises have been completed for specific difficulty. For
example if in “Abdominals” page, user completed all needed “Easy” exercises.
The loop goes and checks it, if so status of the image that is stored in the
“rewardview” page changes from FALSE to TRUE, and it creates a “Bronze”
medal for completing all easy exercises in abdominals page.
4.7 HTML5 LOCALSTORAGE
It can be observed in Appendix A that the structure is created in the
“appModel.js” file. To store the data into the internal mobile storage only takes
few lines which can be seen in Appendix A: Continued: Creation of the Model &
Local Storage Function. HTML5 does all the work for storing the data.
HTML5 Storage is a way for web pages to store named key/value pairs locally,
within the client web browser or in this case in internal mobile storage. The data
is never transmitted to the remote web server unless it is done manually [28].
Thus this creates a huge disadvantage to all the applications that use databases
58
or internet connection to get items or needed information from the web. For
this project at this moment HTML5 local storage was a gift as it was easily
implemented and consumed time for development process.
CHAPTER 5: BUSINESS MODEL
Building mobile applications especially for Apple Store iOS and Android Play
Store can be highly profitable undertaking for a professional developer, but
understanding these application markets, competitors and most important how
the application will generate future revenue is a big decision, one which can be
generated through the use of a business model canvas which will be discussed in
this chapter. A business model is divided into 9 parts:
FIGURE 5.1 BUSINESS MODEL [29].
59
5.1 KEY PARTNERS
As this application is being developed by the author, no partnerships exists at
the current time. Future partnership can be received through pitching this idea
to investors who are interested in the field of mhealth such as medical
practitioners or fitness enthusiasts. Author has few friend studying in computer
science and giving a piece of the ownership of the application can forge a new
partnership and could create something new and potentially viable product.
5.2 KEY ACTIVITIES
The key activities such as designing and implementation of the application is
already done and dusted, the main part is to upload the application to Google
Play, Apple Store and Nokia Ovi Stores. Once the application is upload, some
advertising through social media, college, friends and family could get the
application more downloads and publicity.
5.3 KEY RESOURCES
Key resources such as investors if any would provide more capital to improve,
develop and test the application, to increases it’s quality and expand it’s
content. Another few resources are the eclipse IDE, Ionic View and PhoneGap
would be one of the main key resources. In order to make the application
available to the market, the Google Play, Apple Store and Nokia Ovi stores will
also be main resources.
60
5.4 COSTS
The application uses numerous of resources, but the costs of development are
low to none. In fact the resources used for the development of the application
are all available free from the internet and are perfect legal to use. However, the
time the developer used in the designing, coding and developing the application
can be seen as a time cost, but no monetary value is assumed except for the
Google Play which is $25. There are some issues uploading the application to the
Apple Store, as you need to be an Apple developer to receive access to do so.
But a great pitch of the application would persuade the Apple Store in publishing
the application, and there would be a small fee to pay. Nokia Ovi store provides
with free access of uploading the application to the store.
5.5 VALUE PROPOSITION
As fitness application are currently in a boom phase and more people being
conscious of their health and wellbeing, publishing a gamified fitness application
with behavioural change techniques which helps people in exercising at home
who can’t afford a gym membership or are self‐conscious of entering the gym
shows great value to the customers. Not only that progressing through levels
will increase the physical activity of the user thus reducing risks associated with
cardiovascular diseases that in 2030 is estimated to take 23 million lives. By
exercising and being physical active user will improve their quality of life and
feel better in their own skin.
61
5.6 CHANNELS
As the application is available cross platform, the distribution channels are
unlimited. The main three distribution channels would be the Apple Store,
Google Play and Nokia Ovi Stores. By publishing the application in all three
stores will increase it changes to blow up on all of the operating system few
months down the road. As of February 2015, Google Play and Apple Store both
have over 1.4million applications in their markets, showing a huge customer
base they have accumulated.
5.7 CUSTOMER RELATIONSHIP
To achieve great customer relationship three steps must be achieved. Firstly,
acquiring a strong customer base is crucial, that can be achieved by
advertisement, eye appealing app icon and alluring description of the
application. Next step is to provide with an application that is user friendly and it
is addictive. And last step is once the application has a loyal customer base, the
application will need to provide with new features, such as personalising
application more to the needs of user or a routine generator.
5.8 CUSTOMERS SEGMENTS
The potential market for the mobile application is anyone that wants to get
physically active without leaving their homes or people who cannot afford an
expensive gym membership. Customers who want to improve their personal
health and to decrease the health related risks such as cardiovascular diseases.
62
5.9 REVENUE
This application will be free to download and make use of in‐app advertising to
generate some start‐up revenue, which by application developers has been
indicated to be more beneficial than direct payment. The revenue generated by
the application lies under ad‐supported model. As research done by Cambridge
University computer scientists found that 73% of applications in Google
PlayStore were free, and of those, 80% relied on advertising as their main
business model.
Free apps are also far more popular in terms of downloads. Just 20% of paid
apps are downloaded more than 100 times and only 0.2% of paid apps are
downloaded more than 10,000 times. On the other hand, 20% of free
applications get 10,000 or more downloads. Receiving more downloads will lead
to higher profits, thus new features can be developed (personalisation for the
user, routine generator, facebook comparison). These new features can be
in‐app purchases in lead to even more revenue generated [30].
63
CHAPTER 6: EVALUATION
The objective of this section is to review the project as a whole. Firstly, the
application was successful the main features of the application are working
smoothly which were Exercise Progression, Calendar Planner and Rewards
System. The aim of the exercise progression was to create a game where user
had to complete set amount of exercises in order to progress in levels. The aim
of Calendar Planner was to create a exercise planner for the user to plan his/her
exercises in advance and thus motivate himself to exercise. The aim of rewards
system was to make it more enjoyable and fun to exercise, to receive some sort
of reward for working out and trying to become more physically active. But most
important and crucial part was implemented into this application was the
behavioural change techniques. The application contains numerous strategies
and it only has 3 functions. Later in future work, more features will be discussed
that could be implemented to make this application even better and more
appealing to the user. Secondly, testing will be discussed next and lastly, the
future work.
6.1 TESTING
The testing the mobile applications was a breeze. Instead of using the slow
android emulator which can be installed in the eclipse IDE, for this project Ionic
View was used which is an application that can be downloaded for android or
apple phone and it provides with real time testing of the application. All it takes
is to upload the application through the command log which is then sent to the
application, uploaded on the phone and can be tested in space of less than a
minute. Even faster way of testing small functionality of the application was
64
achieved with a Tomcat Apache server on eclipse IDE, another plug‐in used.
Tomcat server allowed to create a localhost were the application could of been
uploaded like a web application and tested in a space of seconds. The author
with a bit of research overcome the long and tedious wait of android emulator.
One of the problems has been that Ionic View application was still not fully
developed and had some glitches, such that when application was reuploaded
for testing, the data was still stored in the internal storage of the phone. The
solution was found, adding a clear storage function inside the “appModel.js” at
the start, once the application starts data is cleared thus allowing to test the
application with no data stored in the internal storage.
FIGURE 6.1 LOCAL STORAGE CLEAR FUNCTION CALLED
6.2 AVAILABLE ON ALL PLATFORMS
Using the PhoneGap framework it allowed to deploy the application on all
mobile platforms. At the beginning of this project, the main objective was to
target users who want to be more physically active at home with an Android
platform. In the end a mobile application was created that can be used on on all
mobile platform, without losing any of design or functionality aspects.
65
6.3 FUTURE WORK
As with any smartphone application, there is always room for future
improvements and updates. In this section further development features for the
mobile application will be discussed, not only that but some behavioural change
techniques also.
6.3.1 MORE ADVANCED ACTION PLANNING
A more advanced action planning such as routine generator would be a great
addition. Instead of just picking exercises one by one which takes time and can
make a user frustrated. A routine generator would allow the user to pick several
exercises from different body types and do a circuit type workout.
6.3.2 PERSONALISATION FOR USER
Personalisation for the user would be the most important feature that could be
added for in the mobile application. Taking user parameters such as weight, age,
gender and so on would provide with a better customisation, shaping and
personalisation around the user needs, wants and current physical level. This
could be achieved by having a login page or register page, where user provides
his/her personal information. Then using that information in showing content
that would be more relevant to their wants and needs.
66
6.3.3 FACILITATE SOCIAL COMPARISON
Facilitate social comparison is one of the behavioural change techniques that
can be implemented into the mobile application. It can be done with the use of
Facebook Login. Where the user logs in and can compare to his/hers peers who
are using the same application and are connect through Facebook also. Thus the
rewards system has another functionality. Users can compare to their friends in
both the levels, who achieves the maximum level the fastest or by score, who
does the most exercises by racking up bigger amount of score points.
6.3.4 PLAN SOCIAL SUPPORT CHANGE
This is another behavioural science strategy that can be integrated into the
mobile application. It would use Facebook login again, and when user get a level
up or receives a new medal for completing difficulties, user can “share” the
current achievement on Facebook for his/her peers to see and acknowledge the
hard work user is doing. Receiving “likes” or “comments” for the medal or level
user achieved would socially support them and by “sharing” allows user plan
when the desired social support is needed most.
67
6.3.5 PARAMETER SETTING
Parameter setting would allow the user to avail of another two behavioural
change methods which are goal setting behavior and goal setting outcome (See
figure physical table). This two strategies can be achieved by allowing user to
personalise the exercise time for doing the exercise and rest between the sets
for doing the exercise. Also, the amount of sets the user does could be also
personalised by the user allowing goal setting behaviour and outcome.
6.3.6 BETTER USER INTERFACE
The user interface is simple and flows well in the current mobile application, but
few things would be nice to change such as the rewards system icons.
Generating actually more appealing icons to the user would motivate the user to
exercise slightly harder and to be more happier with the reward received.
Another design change could be having .gif images in exercise view pages such
that the images moves in such way the exercise is needed to be completed.
Having a description and .gif image would provide with a better instruction on
how to perform behaviour, increasing the benefits of the this behavioural
science technique.
68
6.3.7 DATABASE
As looked into personalisation of the user feature, database for the backend of
the application is important in order to store the data/user details such as
weight, age, sex and so on. Having all the data store online helps the application
not to overload with the information. Storing images and .gif files online will
greatly increase the functionality of the application. It will also help with the
social comparison and social support change in storing additional data. Icons,
levels, score, everything could be stored online. Here are few advantages of
having a database instead of internal phone memory:
1. Data is only store once ‐ providing with no multiple record changes, more
efficient storage, simple to delete or modify details [31].
2. Cater for future requirements ‐ by having data held in separate tables, it
allows records that are not yet needed but may be in the future [31].
3. Developing an institutional memory ‐ a database is also a vehicle to
capture peoples knowledge. All data collected about the users can be
used in research for mhealth by medical practitioners [32].
69
CHAPTER 7: CONCLUSION
This report has outlined the successful design and implementation of a gamified
home fitness application with behavioural science techniques that provides not
only a fun way to exercise but to do it free, physical active and in time reduce
the health risks. The current application could undergo beta testing by friends,
family and college colleagues or can be released into iOS Apple Store and Google
Play Store in order to get some feedback from users. The feedback would
provide with a better understanding where the applications stands and further
developments could be overtaken in order to make this application more
efficient.
In undertaking this final year project, a more detailed knowledge into the design
and implementation of mobile application software has been attained. Also, the
ability to find a business opportunity for software products has demonstrated
for the author applying his knowledge gained in Business and Management
practice to Computer Science project.
70
APPENDICES:
APPENDIX A: Part A of the Model:
APPENDIX A: Part B of the Model:
71
APPENDIX A: CONTINUED:
Update List Function:
Creation of the Model & Local Storage Function:
72
APPENDIX B:
73
REFERENCES:
[1]. “Mobile Apps in Cardiology: Review” (2013) ‐ Borja Martinez‐Perez, Isabel de la Torre‐Diez,
Miguel Lopez‐Coronado, Jesus Herreros‐Gonzalez.
[2]. HOWMUCHTOMAKEANAPP.COM Accessed: (2015/04/05).
[3]. http://www.himss.org/ResourceLibrary/GenResourceDetail.aspx?ItemNumber=20221
Accessed: (2015/01/10).
[4]. http://mobihealthnews.com/33336/report‐health‐app‐market‐has‐a‐few‐big‐winners/
Graph Accessed: (2015/01/10).
[5]. http://ec.europa.eu/news/environment/140410_en.htm Accessed: (2015/01/10).
[6].http://www.flurry.com/blog/flurry‐insights/health‐and‐fitness‐apps‐finally‐take‐fueled‐fitne
ss‐fanatics#.VSLmDPnF8WI Graph Accessed: (2015/04/06).
[7]. “Mobile Diary for Wellness Management ‐ Results on Usage and Usability in Two User
Studies” (July, 2008)‐ Elina Mattila, Juha Parkla, Mario Hermersdorf, Jussi Kaasinen, Janne
Vainiom Kai Samposalo, Juho Merilahti, Juha Kolari, Mianna Kulju, Raimo Lappalainen and Ilkka
Korhonen.
[8]. http://en.wikipedia.org/wiki/Behavior_change_%28public_health%29
Acessed: (2015/04/06).
[9]. http://en.wikipedia.org/wiki/Health_action_process_approach Accessed (2015/04/06).
[10].http://web.fu‐berlin.de/gesund/hapa_web.pdf Graph Accessed (2015/01/10).
[11]. “Using the health action process approach to predict and improve health outcomes in
individuals with type 2 diabetes mellitus” ‐ Mariana MacPhail, Barbara Mullan, Louse Sharpe,
Carolyn MacCann, Jemma Todd.
[12]. “The Good, the Bad and the Ugly about social networks for health apps” ‐ Valerie Gay and
Peter Leijdekkers ‐ 2011 ‐ Faculty of Engineering and Information Technology.
[13]. http://www.vitalwaveconsulting.com/pdf/2011/mHealth.pdf Accessed (2015/01/10).
[14]. http://news.psu.edu/story/314757/2014/05/06/research/
mobile‐health‐apps‐lack‐behavior‐change‐techniques Accessed (2015/01/10).
[15]. “How behavioural science can advance digital health” (September, 2013)‐ Sherry Pagoto,
Gary G. Bennett.
74
[16]. “Behavior change techniques in top‐ranked mobile apps for physical activity” (May, 2014)
‐ David E. Conroy, Chih‐Hsiang Yang, Jaclyn P. Maher.
[17]. “Evidence‐Based Strategies in Weight‐Loss Mobile Apps” (October, 2013) ‐ Sherry Pagoto,
Kristen Schneider, Mirjana Jojic, Michele DeBiasse, Devin Mann
[18]. “State of Art for Integrating mHealth and Health Behaviour Theories for Guiding the
Development of Health and Fitness Mobile Applications” ‐ Dr. Angela Brunstein, Senior LEcturer
in Psychology, Royal College of Surgeons in Ireland
[19]. Rogers Y., Sharp H. & Preece!J.(2011), Interaction Design: Beyond Human‐Computer
Interaction, 3rd Edition
[20]. http://gigaom.com/2009/04/05/phonegap‐seeks‐to‐bridge‐the‐gap‐between‐
mobile‐app‐platforms Accessed (2015/04/05).
[21]. http://phonegap.com/2012/05/02/phonegap‐explained‐visually/ Accessed (2015/04/05).
[22]. https://build.phonegap.com/ Accessed (2015/04/05).
[23]. http://ionicframework.com/ Accessed (2015/04/05).
[24]. http://openui5.org/index.html Accessed (2015/04/05).
[25]. http://scn.sap.com/community/developer‐center/front‐end/blog/2013/12/11
/what‐is‐openui5‐sapui5 Accessed (2015/04/05).
[26].http://www.tomdalling.com/blog/software‐design/model‐view‐controller‐explained/
Accessed (2015/04/06).
[27]. http://infoscience.epfl.ch/record/165428/files/10.1.1.10.1076.pdf Accessed (2015/03/27),
[28]. http://diveintohtml5.info/storage.htm Accessed (2015/03/27).
[29]. http://www.zebramc.com/wp‐content/uploads/2012/02/bmcanvas‐basic‐model3.jpg
Graph Accessed (2015/04/06).
[30].http://techcrunch.com/2012/08/26/how‐free‐apps‐can‐make‐more‐money‐than‐paid‐app
s/ Accessed (2015/04/05).
[31].http://www.teach‐ict.com/as_as_computing/ocr/H447/F453/3_3_9/database_design/mini
web/pg8.htm Accessed (2015/04/05).
[32]. http://www.uka.amu.edu.pl/expand/database.html Accessed (2015/04/05).
75
Recommended
