Keep track of your development of professional competencies with a gamified mobile application
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
Självständigt arbete i informationsteknologi
14 juni 2021
Keep track of your development of
professional competencies with a
gamified mobile application
Adam Axelsson
August Bredberg
Petter Jerndal
Erik Norén
Civilingenjörsprogrammet i informationsteknologi
Master Programme in Computer and Information Engineering
Abstract
Institutionen för Keep track of your development of professional
informationsteknologi
competencies with a gamified mobile applica-
Besöksadress: tion
ITC, Polacksbacken
Lägerhyddsvägen 2
Postadress:
Adam Axelsson
Box 337 August Bredberg
751 05 Uppsala Petter Jerndal
Erik Norén
Hemsida:
https://www.it.uu.se
The SkillMill project is an initiative co-funded by the Erasmus+ pro-
gramme of the European Union. The primary goal is to provide students
who study abroad a way to keep track of the existence and development
of their professional competencies. These competencies include skills
like interacting with colleagues, how you solve problems, and how you
plan your work. These competencies are highly sought after by employ-
ers, and according to some employers, many candidates lack the neces-
sary professional competencies they need to be effective in the working
environment. We provide the SkillMill project with a mobile application
in which the target group, students, can keep a journal about transforma-
tive experiences. The created mobile application serves as a foundation
for the SkillMill project to build upon further to allow users to identify,
understand and verbalize their professional competencies. A usability
test was used to evaluate the design of the application, which showed
that the design works well.
Extern handledare: Björn Nyström, SkillMill
Handledare: Mats Daniels, Virginia Grande Castro, Anne-Kathrin Peters, Björn Victor och Tina
Vrieler
Examinator: Björn Victor
Sammanfattning
SkillMill-projektet är ett initiativ samfinansierat under Erasmus+ programmet inom
den Europeiska unionen. Huvudmålet är att förse utbytesstudenter med ett sätt att bli
medveten om och utveckla sina professionella kompetenser. Dessa kompetenser in-
kluderar din förmåga att interagera med kollegor, problemlösningsförmåga och pla-
neringsförmåga. Dessa kompetenser är väldigt efterfrågade av arbetsgivare, och enligt
vissa saknar många kandidater de professionalla kompetenser som krävs för att de ska
vara effektiva på arbetsplatsen. Vi förser SkillMill-projektet med en mobilapplikation
där målgruppen, studenter, kan föra dagbok om utmärkande händelser. Den skapade
mobilapplikationen är en grund för SkillMill-projektet att bygga vidare på för att tillåta
användare att identifiera, förstå och verbalisera deras professionalla kompetenser. För
att testa mobilapplikationen gjordes användbarhetstester för att utvärdera applikationens
design, resultaten var positiva.
ii
Contents
1 Introduction 1
2 Background 3
2.1 Professional competencies . . . . . . . . . . . . . . . . . . . . . . . . 3
2.2 Journaling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.2.1 Emoji based journaling . . . . . . . . . . . . . . . . . . . . . . 5
2.3 Gamification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.4 Stakeholder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3 Purpose 7
3.1 Goals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.2 Sustainability aspects . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.2.1 Global Agenda Goal 4: Quality education . . . . . . . . . . . . 9
3.2.2 Global Agenda Goal 8: Decent work and economic growth . . . 10
3.3 Ethical aspects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.3.1 Collecting user data and the General Data Protection Regulation 11
3.4 Delimitations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
4 Related work 14
4.1 Skillsoft, a service for developing professional competencies . . . . . . 14
4.2 Journaling applications . . . . . . . . . . . . . . . . . . . . . . . . . . 14
4.3 Professional competencies and gamification . . . . . . . . . . . . . . . 15
5 Methods for development of application and gamification 16
5.1 User interface for journaling system . . . . . . . . . . . . . . . . . . . 17
iii
5.2 Communication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
6 System structure 18
7 Requirements and evaluation methods 20
7.1 Design evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
8 Implementation of system 21
8.1 The core features of the application . . . . . . . . . . . . . . . . . . . . 21
8.2 Users and authentication . . . . . . . . . . . . . . . . . . . . . . . . . 22
8.3 Emoji based journaling implementation . . . . . . . . . . . . . . . . . 22
8.3.1 Emoji keyboard and text tool . . . . . . . . . . . . . . . . . . . 22
8.3.2 Background color picker . . . . . . . . . . . . . . . . . . . . . 23
8.3.3 Converting emojis to movable items . . . . . . . . . . . . . . . 24
8.3.4 Creating an environment where several movable items can co-
exist, called Canvas . . . . . . . . . . . . . . . . . . . . . . . . 25
8.3.5 Giving each Emoji (Movable item) a unique key . . . . . . . . 25
9 Evaluation results 25
9.1 The test subjects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
9.2 The Tasks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
9.3 The Heuristics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
10 Results and discussion 26
11 Conclusions 28
12 Future work 29
12.1 Reflection system . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
iv
12.2 Extension of gamification features . . . . . . . . . . . . . . . . . . . . 30
12.3 Further user testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
A Appendix 35
A.1 Usability testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
A.1.1 Log in functionality . . . . . . . . . . . . . . . . . . . . . . . 35
A.1.2 Situation testing . . . . . . . . . . . . . . . . . . . . . . . . . 35
A.1.3 Heuristic experience . . . . . . . . . . . . . . . . . . . . . . . 36
v
1 Introduction
1 Introduction
To succeed in the workplace you need to have knowledge and skills that are specific
for your line of work. Skills like these can be your ability to use Excel, code, or drive
a car. These kinds of skills are measurable and are often explicitly sought after in job
descriptions. However, there exists other types of skills that employers value. Profes-
sional competencies refers to skills that reflect the ability to solve a specific activity
in a complex scenario, such as the working world [GKTK18]. Examples of profes-
sional competencies are your ability to communicate with coworkers, ability to handle
conflicts, or problem solving. Professional competencies are highly appreciated by em-
ployers but many university graduates lack the knowledge of the competencies or the
ability to express them [GKTK18].
According to a study made by LinkedIn [Lin19] employers deem these competencies
to matter “as much or more” than traditional technical skills when they hire. They also
attest to there being a problem for both candidates and employers when it comes to being
able to identify these competencies in a satisfactory way. Here the SkillMill project
can aid. Professional competencies are trained when challenged by new situations and
new environments. Students all over the world are put in situations where they are
challenged cognitively, interpersonally and intrapersonally every day. An impact study
made by Erasmus+ [Era19] found that studying abroad leads to students developing
their professional competencies. The problem is the students lack the ability to properly
identifying these competencies, resulting in wasted potential.
The SkillMill project is co-funded by the Erasmus+ programme through the European
Union. The Erasmus+ programme’s goal is to support education, training, youth and
sport in Europe [Era19]. The mission of the SkillMill project is to help students identify,
understand and verbalize professional competencies gained during studies abroad. We
developers contribute to the SkillMill project by creating a mobile application which
will be a foundation to allow them to achieve their goals. Part of the SkillMill project’s
task is to provide the necessary tools the student needs in order to develop and reflect on
their professional competencies. The tool is the mobile application, and development of
the tool is our project.
This report covers the development of the application. The application allows users
to journal transformative events in their lives and opportunities to reflect on how these
events affect their professional competencies. Reflection is done through reflection exer-
cises within the application. The main focus of the journal entries is to enable reflection.
Entries are done by placing emojis on a blank canvas in a manner which represents the
event that is being reflected upon. Each journal entry can then be coupled with one or
several professional competencies after doing reflection exercises.
1
1 Introduction
An example of how an entry could look like can be seen in Figure 1 where the experience
documented represents an event of rat invasion. The user has had an transformative
experience and therefore uses the application to journal it, in this example the user’s
house was invaded by rats. The user is provided with a blank canvas and the ability
to fill the canvas by selecting and placing emojis in ways the user feels represents the
experience or event. Emojis are small colorful pictures that represent people, objects,
emotions, flags, or other things that one might encountered in their daily life, as well as
facial expressions [SLLX19]. Figure 1 shows an example of how a user could use emojis
to describe a situation. The user chose the following emojis: a house, a mousetrap, a
handshake and a rat. Since being introduced into the Unicode Standard in 2010, emojis
have become widely used. Creating the entry with the emojis on the canvas is subjective
to the user, they pick and construct the entry in a way they feel represent the event and
experience. The user also has the ability to change the color of the canvas to further
express the impact of the event.
Figure 1 Design mock-up of an emoji canvas. Depicted is the transformative event of
having your house invaded by rats. Here the user has placed four different emojis that
they feel represent the situation.
The user’s experience may result in the development of their ability of problem-solving
or ability to cooperate, which are both professional competencies. When reflecting on
a situation in which a professional competency was required and trained, the emojis
are used as a tool to express and reflect upon the situation. When the user uses the
applications reflection exercises related to the just now created entry they can then iden-
tify and recognize professional competencies they have exhibited in the context of the
event. Methods of gamification are used to encourage the user to use the application
and develop their professional competencies. Gamification is the use of elements of
2
2 Background
game-playing to make an activity more interesting. In the application this takes form as
an achievement system, which is a system for rewarding the user for actively using the
app.
The mobile application created serves as a foundation for the SkillMill project, which
aims to allow users to identify, understand and verbalize their professional competen-
cies. Within the application is a functional journaling system and a start of an achieve-
ment system. In the journaling system users can place emojis on a blank canvas, to
express their experience during an event. They can also pick a background color and
write a short text. The design and usability is investigated by letting three people do
a usability test, which can be found in the appendix. All of the people performing the
tests were able to perform all of the tasks given in the test. However, they expressed that
the system should be more communicative. This was solved by adding more feedback
to the user, haptic feedback, and button animations.
2 Background
The SkillMill project aims to create an accessible way to reflect on transformative events
as a way for students to develop their professional competencies effectively. Reflecting
on daily events is typically done by keeping a journal, but instead of keeping a journal
the traditional way, the application creates a gamified alternative. The technical part of
the project is to create a mobile application featuring a journaling system and reflection
exercises with gamification elements for Android and iPhone.
2.1 Professional competencies
The term professional competencies refers to competencies such as communication,
leadership, and teamwork. Professional competencies are defined as character traits
or interpersonal skills that describe and represent a person’s relationship towards other
people, in contrast to purely technical skills such as programming. The importance and
impact of professional competencies has been debated thoroughly in the labour market
yet has been hard to measure compared to technical skills [GKTK18]. The need for a
more nuanced way of hiring employees based on not only technical skills has emerged.
Yet a solution to this problem is not widely used in hiring processes [GKTK18].
Everyone trains professional competencies all the time by merely living life [GKTK18].
The important steps are to realize and reflect on your professional competencies training
so that you can improve your weaknesses and become aware of your strengths. Profes-
3
2 Background
sional competencies are a big part of life.
Raising awareness of professional competencies is especially relevant for universities
active in internationalization efforts. The 2019 Erasmus+ higher education impact study
[Era19] found by analysing data from more than 50.000 returning exchange students,
that studying abroad contributed to development of professional competencies. This was
measured by survey responses from students taking part in the Erasmus+ programme.
The study also finds that students participating in the Erasmus+ programme gained
a significant improvement in technical, inter-personal and inter-cultural competencies
[Era19]. This identifies studying abroad as a highly relevant opportunity to practice
professional competencies. Sadly, employers also report that a majority of students are
not aware of their professional competency development to the point where they could
verbalize it [Tal18]. This could result in a loss of using these competencies advanta-
geously in a context of recruitment.
The 2019 World Economic Forum (WEF) white paper “Strategies for the New Econ-
omy” [Wor19] describe the upskilling and reskilling demands of the ongoing fourth
industrial revolution as requiring a significant increase of skill awareness from individ-
uals. In other words, being able to observe and utilize competencies gained through
experiences from different contexts. This describes the need for promoting yourself
in not only in technical ways but highlighting the professional competencies gained
throughout life.
According to an inquiry study made by Tina Talley [Tal18], a doctoral student at the
University of Phoenix, professional competencies are highly sought after skills in the
job market of 2021.“Employers express a growing concern that recent college graduates
are not adequately prepared for the workplace with the soft skills needed to perform to
requirements placed on organizations today.”, Talley claims that if a candidate is more
aware of, and has better trained professional competencies, they are better equipped to
take on the job market. Talley says, “Employers attest to the failure of educational sys-
tems to prepare students with the knowledge of emerging demand career opportunities,
and the lack of basic soft skills that prepare student for the agility of the marketplace”.
According to Talley’s study, well developed professional competencies are directly re-
lated to how interesting a candidate is on the job market.
LinkedIn’s 2019 and 2020 annual labor market reports [Lin19] echo this trend, stating
that to most employers, professional competencies matter “as much or more” than tradi-
tional technical skills when they hire. However, both employers and employees struggle
to identify these skills in a satisfactory way. The 2025 European Skills Agenda [Eur21]
matches this assessment, calling for more coordinated actions from universities in guid-
ing individuals to identify, recognize and communicate professional competencies.
42 Background
2.2 Journaling
The process of journaling is a technique which has been used in education for a long
time. Essentially it consists of recording your own personal experiences and thoughts
to reflect on your own position [Wei19]. A study made with students studying calculus
where journaling was a part of the course through reflection on what was learned each
day indicated a clear trend that journaling helped their learning [MF19]. The journaling
enforces self reflection which in turn will lead to an increased activity and encourage-
ment towards learning.
2.2.1 Emoji based journaling
Instead of journaling your thoughts and experiences traditionally through only writ-
ing text, the application uses emojis. Emojis are widely used accessible within users’
smartphones, and four main motivations for using emojis are: information transmission,
conversation strategies, entertainment and pursuit of efficiency [SLLX19]. The purpose
of using emojis is to encourage the user to focus mainly on what they experienced and
how they interpreted the situation during the described event rather than what happened
or what was said. In a study from 2020 [KRCM+ 21] it was found that emotive faces
and emojis were processed more quickly by the subjects than emotive words. This gives
emoji based journaling an advantage over only text based journaling, allowing users to
process their old journals faster when reflecting over these. The study did not, however,
show any benefits of using emojis in the context of accuracy of expression.
2.3 Gamification
Gamification is the use of elements of game-playing in another activity, usually in order
to make that activity more interesting [Bas17]. The positive results of using elements
typically associated with games in order to learn or engage in learning is considered a
result of gamification [Kap12]. Examples of what gamification elements are:
• Leaderboards - Where different users progress are displayed to users with the
hope of sparking competitiveness.
• Achievement systems - Where users are rewarded for using the gamified service.
• Skill tree - Commonly used in games to display progress in a tree-like structure.
A skill tree allows for a hierarchical visual representation of progress made. The
nodes of the tree often represent abilities in the context of the game.
52 Background
Even though there are clear benefits of creating enthusiasm through gamification, a
study by Hee Yoon Kwon [HYK20] shows that there are things to be wary of when im-
plementing gamification. In a context where gamification was used to promote learning,
the study found that enthusiasm towards the learning subject was achieved. However,
when testing the content knowledge of the students the test results were worse than
expected [HYK20]. The study found that when testing the students the results in con-
tent learning were significantly lower than expected comparing to traditional learning
methods. This suggests that gamification can simplify a subject to the extent that the
complexity and learning content knowledge is neglected [HYK20]. However, the use
of gamification in our project contributes to creating enthusiasm towards reflecting on
your professional competencies and does not deal with content learning the same way
as in the study. The study of Flores, Elvira, Guevara and Brenda [FEGB20] states that
gamification can be used successfully to allow students to develop professional compe-
tencies. The work of Flores, Elvira, Guevara and Brenda is further discussed in section
4.3 of the Related work section.
The application will use an achievement system, where users will be awarded achieve-
ment badges for using the application. The achievement badges are trophies that the
user can collect, which will serve as an incentive to use the application and are stored to
the user’s account. The journals will be connected to specific professional competencies
and the achievements will also be paired with these competencies.
2.4 Stakeholder
Our stakeholder, the SkillMill project, is co-funded by the Erasmus+ programme. The
project is a collaboration between Uppsala University, the University of Helsinki, the
University of Stavanger, and the University of Tartu, where Uppsala University is the
coordinator [Ski21]. The project started 2019 and is planned to be finished by 2022.
The purpose of their project is to create a method to aid students in understanding and
expressing personal development during their studies abroad. The project combines
career counselling, psychology and game design to develop an application that helps
students [Ski21]. As visualised in Figure 2 the stakeholders imagine Study Abroad,
Career Counseling & Psychology and Game Design to be three core parts that make up
the SkillMill project. The personal development the project specifically focuses on are
professional competencies that are highly requested by the job market [GKTK18].
63 Purpose
Figure 2 The core fields that merge in the SkillMill project [Ski21]
3 Purpose
The purpose of the SkillMill project, as presented to us developers, is constructed around
the intended users being students who study abroad. This stems from knowledge and
understanding that studying abroad is an excellent opportunity to develop professional
competencies [Ski21]. However we believe the application will benefit regular students
as well. Therefore throughout this report we will refer to students as a broad term,
except where we are explicitly talking about students who study abroad.
Our contribution to the SkillMill project is creating a mobile application enabling the
purpose mentioned earlier. Development is done in parallel with other developers of the
SkillMill project. The external members provide us with an API, database and server for
us to connect our application to. Our project aims to supply students with a convenient
way of keeping track of the development of their professional competencies and help
establish an awareness of their presence.
A student starts this process by creating a journal entry in the application that describes
a transformative event. The journal entry is created by customising a blank canvas by
placing emojis representing the event. Here the user may also change the background
color of the canvas. An example of how this can look can be seen in the mock-up in
73 Purpose
Figure 1. With the created journal entry the student is then able to use this entry as con-
text for reflection exercises. An example of such an exercise is the student selecting one
to three professional competencies relevant to the event from a list. The student will be
rewarded and therefore incentivised when using application by its gamification features.
In the context of the example it could be that the student is rewarded an achievement
badge for completing the reflection exercise. Figure 3 is a mock-up of how this could
look.
Figure 3 Design mock-up of how it could look for a user receiving an achievement
badge for completing a task within the application. The user has completed a task
which warrants a trophy. An example of such a task is when the user has completed
their first journal.
3.1 Goals
The stakeholder’s goal with the SkillMill project is to help students understand, identify
and express professional competencies gained during studies abroad. The SkillMill
project can be described in three points:
• Identify training opportunities all around them during their studies abroad.
83 Purpose
• Reflect upon these experiences, and pairing them with real-life skills that they
might have trained.
• Give them the narrative tools to verbalize and communicate this perceived devel-
opment.
Our part in this project is to create a mobile application which will be a foundation for
the SkillMill project to build upon further. The main functionality of the app will be a
journaling system. This journaling system ties to the third goal, Give them the narrative
tools to verbalize and communicate this perceived development.
Give them the narrative tools to verbalize and communicate this perceived development.
Through using the application the users will be able to track when their professional
competencies are being developed. To make these less abstract the users will be given
the ability to be able to see sub-skills and correlating prompts. In section 3.4 Delimita-
tions these sub-skills and prompts are further discussed. These can then be used by the
user to verbalize their development.
3.2 Sustainability aspects
The year of 2015 all members of the United Nations (UN) embraced Agenda 2030,
a universal agenda containing the 17 Global goals for a social, economic and envi-
ronmentally sustainable development [Nat20]. This is the most ambitious agenda for
sustainable development that the countries of the world have ever assumed, with the
following four ultimate goals: no poverty, zero hunger, good health and well-being, and
quality education. The goals were created with businesses in mind, providing a path –
what some people refer to as a “Pathway for Humanity” — for any business to harness
their power by directing their efforts toward specific global objectives. The SkillMill
project is linked to several of the global agenda goals in ways that are discussed in
corresponding subsections.
3.2.1 Global Agenda Goal 4: Quality education
Agenda 2030’s fourth goal is to “Ensure inclusive and equitable quality education and
promote lifelong learning opportunities for all”. This goal has a sub-goal that formulates
the exact purpose of the SkillMill project, sub-goal 4.4 is to “By 2030, substantially in-
crease the number of youth and adults who have relevant skills, including technical and
vocational skills, for employment, decent jobs and entrepreneurship”. The SkillMill
project’s purpose is to supply studying-abroad students with a tool to help develop their
93 Purpose
professional competencies, with the positive consequence of preparing them for the
work market. In this way, what the SkillMill project aspires to do lies in direct conjunc-
tion with what sub-goal 4.4 formulates.
3.2.2 Global Agenda Goal 8: Decent work and economic growth
The eighth goal of Agenda 2030 is to “Promote sustained, inclusive and sustainable
economic growth, full and productive employment and decent work for all” [Uni21].
Sub-goal 8.6 aims to substantially reduce the proportion of youth not in employment,
education or training. The doctoral student Tina Talley made an inquiry study in which
it was found that well developed professional competencies are related to a candidates
chances of landing a job [Tal18]. With this finding, sub-goal 8.6 which is formulated
as “reduce the youth not in employment”, can be satisfied by giving youths a tool for
developing their professional skills. The successful realization of the SkillMill project
helps students evolve their professional competencies, which in turn helps them land
their desired job, which will take the world one step closer to realizing the eight goal of
the Agenda 2030 global goals.
3.3 Ethical aspects
The target group for the application, students, whether studying abroad or not, will
through the use of the application further their ability to identify, understand and ver-
balize their professional competencies. To be able to use the application a user needs
access to a smartphone and an internet connection. Furthermore users need to be com-
fortable with the journaling. Within the application journaling is done by allowing users
to reflect by creating emoji based entries expressing their experiences and impact, as
previously shown in Figure 1. To give the emojis more context the users can also add
text, this makes it easier for users to remember the situation when looking back on
entries. The emoji based journaling system suffers from preventing visually impaired
users from accessing the same user experience as a non-disabled user. The application
does not offer any aid for these users, leading to this group being excluded.
Indirectly, one impactful change of our project is towards companies hiring new staff,
since professional competencies are highly requested as a parameter in the job mar-
ket. A positive aspect with the mobile application being used would be that a company
looking for new co-workers in the best scenario will be able to recruit people that are
better suited for a specific position of work. On the other hand, this could lead to a
new competitive situation where being able to use the application and promote profes-
sional competencies becomes necessary in a process of recruitment. It is possible that
103 Purpose
widespread usage of such an application will have other implications in the future. If
usage of the application in society becomes wide enough it will perhaps form a culture
in society where usage of the application is standard practice. This may lead to people
being forced to use the application as a way to demonstrate their professional compe-
tencies, and therefore get a job. It is not wished for that people will be forced to use
the application. The application was created to be a tool to help users recognize and
verbalize professional competencies but it cannot replace the need for the individual to
adequately display these to potential recruiters of companies. In addition to this the
application is only one way of working with developing professional competencies.
3.3.1 Collecting user data and the General Data Protection Regulation
To warrant a non-intrusive relationship between the application and its users the data
preserved by the application needs to be motivated and protected. The SkillMill ap-
plication therefore follows the General Data Protection Regulation (GDPR) guidelines
of The Swedish Authority for Privacy Protection (IMY) [Int21]. To use the application
users will need to sign up for an account where they will provide a username and a pass-
word. For the application to rightfully store this data the users must consent to this data
processing. The users also have the right to know why the application processes their
data. The data collected must therefore be well motivated. Every accounts’ journals will
also have to be saved, and will remain on the database until the user discards the journal.
This data will be stored as long as the user has an account connected to the application,
and this information will be made available to the user. A user’s journals and username
are sensitive information and must be kept encrypted and safely stored. To ensure that
sensitive data can not be snooped during transition from application to database, all
communication between client and server will be HTTPS-encrypted. HTTPS is further
discussed in section 5.2.
3.4 Delimitations
The topic of professional competencies is abstract. During the process of the SkillMill
project, before we developers got involved, a classification of what professional com-
petencies the project would revolve around was derived. The working material for this
was produced by a team within the SkillMill project consisting of counselors and psy-
chologists from the University of Tartu, the University of Helsinki, and the University
of Stavanger. This work is not yet published. We have been provided with some of
the findings and the competencies by our stakeholders. There are therefore nine com-
petencies in focus, the definitions for these are part of the working material previously
113 Purpose
Figure 4 The three domains and correlating professional competencies
mentioned. These nine fall within three possible domains, the cognitive, the interper-
sonal, and intrapersonal as seen in Figure 4. Our development is delimited to these nine.
Individually the nine professional competencies can be described as follows:
• Decision-making - The ability to evaluate a situation and its potential risks and
benefits, and choose the best course of action. This includes evaluating the results
of one’s actions, learning from them, and taking responsibility.
• Problem-solving - The ability to understand the causality behind a problem, and
applying the right actions to solve it. It includes both situational analysis, imagi-
nation and creativity, and the ability for active action.
• Critical thinking - The ability to actively question information and sensory input,
to consider perspectives and agendas of different information sources (including
oneself). Also to suspend judgement while gathering information.
• Communication skills - The ability to effectively communicate information to
others with the minimum difference between intended and received message.
123 Purpose
Also the ability to effectively integrate information: verbal, written, and body
language.
• Teamwork/Leadership - The ability to effectively collaborate with others to-
wards a common goal, as equals in a team or by leading others. This includes the
ability for joint action, sharing responsibilities, and building trust.
• Interpersonal relationships - The ability to relate positively to other people, e.g.
through emotional awareness and perceptiveness towards emotions, cultures and
rules. Ability to express your own needs and feelings, and to compromise.
• Self-management - The ability to respect your own needs and capacity, and un-
derstand your strengths and weaknesses. This includes discipline, prioritizing,
goal-setting and the ability to work hard, but also to rest and take care of yourself.
• Adaptability/Flexibility - The ability to adapt effectively to changing surround-
ings. This includes both openness to new experiences, but also to analyze situa-
tions and adapt your behavior accordingly.
• Creativity - Think outside the box, find unexpected courses of action and see
opportunities in adversity. Creativity is the willingness to seek knowledge in new
places, and apply resources unexpectedly.
Each of these professional competencies can then be broken down into less abstract
sub-skills and those further into less abstract prompts. What this then results in is a skill
tree where we start in one of the three domains and end up with a less abstract prompt
related to a professional competency. An example of what this could look like can be
seen in Figure 5.
Figure 5 How domain, professional competency, sub-skill, and prompt relate to each
other
134 Related work
4 Related work
The relation between our project and existing or previously conducted projects can be
summarized by three main elements. Firstly as a service to improve users’ professional
competencies. Secondly as a way for a user to self reflect through the application being
a journaling application with similarities to other journaling applications. Lastly the
application combines the tools for developing professional competencies with gamifi-
cation.
4.1 Skillsoft, a service for developing professional compe-
tencies
Skillsoft [Skib] is an American company in the educational technology industry. The
company creates and develops learning management system, LMS, software solutions
and relating content with a goal of increasing the potential of individuals and enter-
prises. Skillsoft’s resources and courses revolve around development of professional
competencies of its customers. However looking more broadly it can be seen that the
learning content is highly diversified, spanning more technical and organizational top-
ics. The mission of Skillsoft shares a common goals with the SkillMill project, and that
is to realize its users’ true potential.
To make their content and resources available to users Skillsoft has developed two mo-
bile applications that ports their service to iOS and Android. These are Skillsoft Learn-
ing App and Skillsoft Percipio [Skia], both of these provide ways for its users to access
the Skillsoft courses and their content. These applications provide ways for users to
learn about and understand their professional competencies with the help of their mo-
bile devices. There is however a clear difference in approach. Skillsoft’s solution for
developing their users’ professional competencies is providing access to their courses
and learning content. The way users develop professional competencies within our ap-
plication is through reflection from the journaling system and reflection exercises.
4.2 Journaling applications
There exists various journaling applications for both iOS and Android. Examples of
such are Day One, Penzu and Daylio. Day One [Daya] is the number one journaling
application on the App Store, finding success by being well designed and providing
solid journaling features. Penzu [Pen] differentiates itself by focusing on user privacy
and making sure that the user’s journal stays the user’s. Daylio [Dayb] fits users that do
144 Related work
not like writing but still want to enjoy the reflection part of journaling. In the market of
journaling applications Daylio and Penzu have clear ways that differentiate them from
their competition.
In our project journaling is a tool used for achieving the goal of developing the pro-
fessional competencies of the users. This is different from the other three journaling
applications previously mentioned. For them journaling is the main purpose. Our ap-
plication draws inspiration in the spirit of Daylio. Their application manages to capture
the essence of reflection from the journaling in a simple and straight forward way. An
example of how this is presented within Daylio can be seen in Figure 6. What Daylio
achieves by using such prompts is captured within the SkillMill application with the
emoji based journaling system. In addition to this, the system allows users to be more
creative and have more freedom of expression because of the canvas.
Figure 6 Examples of two ways Daylio encourages reflection by using prompts [Dayb].
The left one asks for the users mood. The right asks what the user has been up to.
4.3 Professional competencies and gamification
Gamification has previously been used as a method for developing professional com-
petencies in two studies published in the IEEE Global Engineering Education Confer-
ence [FEGB20] [GL19]. In these instances some elements of gamification were used
to further students development of professional competencies. Much like the goal of
155 Methods for development of application and gamification
our project these works combine gamification with ways to encourage development of
professional competencies.
The study of Guevara and López [GL19] implemented gamification in a professional
competencies development workshop aimed to prepare university students for their ca-
reers after their studies have finished. The gamification was implemented by rewarding
points for completing activities and a general gamification theme. Their work explains
the need of properly designing the gamification around the content of the workshops.
This study concludes that the implementation of gamification is required to be easy to
understand by the students. If the gamification aspects are too complicated and hinder
the user’s ability to engage with the material, gamification is to be avoided. Furthermore
to ensure gamification is satisfactory it needs to be carefully designed around the course
workshops, its content and its participants. Guevara and López ran into the problem of
not relating the gamification closely enough to course’s content and concluded that the
strategy of gamification needed to more explicitly emphasize the professional compe-
tencies. This is important to have in mind when implementing the gamification features
further which is discussed in section 12 Future work.
Much like the study of Guevara and López, the study conducted by Flores, Elvira, Gue-
vara and Brenda [FEGB20] targets a university course with the goal of enhancing stu-
dents professional competencies with an element of gamification. This was achieved
by applying a reward system where the students were awarded badges after completing
parts of the course. The badges were directly linked to the professional competencies
that the course criteria stated. To evaluate the students’ satisfaction with the gamifica-
tion the students answered a survey at the end of their course. The survey found that a
majority of the students were satisfied with the implementation of gamification within
the course. The application implements an achievement system for this reason. The
conclusion of the work by Flores, Elvira, Guevara and Brenda states that gamification
was a benefit in this situation, as well as a way of encouraging students to participate in
activities that develop the students’ professional competencies.
5 Methods for development of application and gam-
ification
To create a mobile application a user interface development tool is required. These
tools allow developers to build and design their applications. If the application is to
communicate with the outside world and save progress from users, a web-server and a
database is required. The application discussed in this report uses an API provided by
the SkillMill project to communicate with the server and database. This API allows the
165 Methods for development of application and gamification
application to authenticate users and to save progress made by users.
5.1 User interface for journaling system
Flutter [Flua] is an open-source UI software development kit, based on the program-
ming language Dart [Dar], a language developed by Google. Flutter allows the user to
create both Android and iOS applications with the same source code. There are a large
amount of predefined UI-elements, called widgets, that can be customized to the need
of developers. By combining these so called widgets, it is possible to build unique user
interfaces in whatever way the developers wish. This opens up for a vast amount of
possibilities to create the same interface in different ways. Thanks to the Flutter com-
munity, a lot of configurable widgets are uploaded by members of the community so
that other members can use or modify their pre-built widgets. Through the course of
the project, several widgets built by the community has been used. On Flutter’s website
[Flub], there is documentation for all of these predefined widgets. Many also have code
examples. Some well-known companies that uses Flutter are Google, Sonos and BMW
[Fluc].
Flutter has a very helpful feature called Hot Reloading. It allows developers to make
changes in their code and immediately seeing the result of these changes, without re-
building the virtual machine that is running their application. This saves time when
solving bugs or experimenting with different implementations.
There are of course other options for creating cross-platform applications. One alterna-
tive is React Native [Reab]. Facebook and Instagram are two big examples of applica-
tions developed with React Native. Just like Flutter, React Native has a Hot Reloading
feature. It is an older platform than Flutter and it has a big community, which can be
helpful when developing. The React Native framework is based on Javascript [Reaa].
Both Flutter and React Native are very viable options for cross-platform development.
For this project Flutter was preferable. The reason for this is that the source-code of the
application is to be handed over to the stakeholders at the end of the project, to be further
worked on. The stakeholders expressed that they have more experience with Flutter than
React Native, and to ensure a swift transition after the duration of this course is over,
Flutter was chosen.
176 System structure
5.2 Communication
In order for the application to communicate with the database, the SkillMill project
provided the API. The application uses HTTPS requests to send and receive relevant
data from the API. Depending on the request made by the application, the API fetches
or sends the data to a database. The data is used to validate login attempts, show old
journals or to save new journals. HTTPS, or Hypertext Transfer Protocol Secure, is a
protocol for secure transmission of data over the internet. The data sent over HTTPS is
encrypted and protected from third party snooping [Clo].
6 System structure
The system consists of a database, a server, a client, and an API. Our stakeholders, the
SkillMill project, created some parts of the system in parallel with our application.
The API that the application uses is created by our stakeholder. It’s an API developed
for our mobile application which is running on our stakeholder’s server. The API han-
dles all form of communication the app requires, see Figure 7. Whenever a user needs
to authenticate themselves, create a new account, and send or receive information to or
from the database, the API is always the mediator. All communication between applica-
tion and API is made through HTTPS-requests containing JSON-formatted data that the
API will store and load to and from the database. JSON is a human readable standard
text based format for representing structured data. The API has different endpoints, i.e
different URL-endings, for every possible function. The different endpoints is how the
API determines what function to call. The external communication schema provided
by our stakeholders can be seen in Figure 7. The bottom half of the sequence diagram
shows how the API chooses different functions depending on which endpoint the client
has used. The Send request(token, function data) will tell the API which function to
use depending on which endpoint the user has chosen, and the API will return data
according to the function call made.
The database and its structure is created by our stakeholder. It stores all the informa-
tion the application needs to have access to. The data stored in the database is mainly
information about journals. This includes the position, zoom and rotation of emojis,
background color as well as notes for the journal. The structure of the database can be
seen in Figure 11 in the Appendix.
We have created the application and all its functionality. The core functionality of the
application is the emoji based journaling system. For this to work, the application must
186 System structure
Figure 7 Sequence diagram of communication, from POST request to Database. Pro-
vided by Stakeholders, the SkillMill team
be able to save finished journal entries and be able to recreate old ones. This is achieved
by the application sending three HTTPS-requests to the API whenever a user saves a
new journal. These request contains everything that is needed to later recreate the jour-
nal entries. One call consists of a list of text and emojis and their positions on the canvas,
as well as an ID for the journal. The positions of the emojis and text are represented as
matrixes, which will be discussed further in 8.3.3. The second call consists of a color
represented as a hexadecimal value, as well as the ID. The third and final call consists
of the title of the journal entry and it’s ID. Since the entries are saved in this way, and
not as an image, old canvases can be recreated and further worked on. These calls also
contains way less data then an image would, making the system work faster. In addition
to saving and recreating journal entries, the application needs to make calls to the API
to authenticate users. This includes calls for logging in and for registering new users.
The top part of Figure 7 shows how this works.
197 Requirements and evaluation methods
7 Requirements and evaluation methods
The mobile application created during this project is going to be handed over to our
stakeholder, SkillMill. As mentioned in the Purpose section, the SkillMill project has
the goal of helping students identify, understand and verbalize professional competen-
cies gained during studies abroad. Our role in realizing the SkillMill project’s goal is to
create the foundation for the mobile application that the students who study abroad can
use. The goals and requirements for the mobile application that we create are not the
same as for the SkillMill project. The application is a foundation on which the goals of
helping students identify, understand and verbalize their professional competencies can
be achieved. We will evaluate the design of the application, not the SkillMill project’s
ultimate goals. The functional requirements of the application are explicitly binary and
are expressed as does feature X work? Yes/No. Binary requirements are seldom interest-
ing, therefore our focus is on the design requirements which can be evaluated through
user testing.
The overall purpose of the design of the mobile application is to be understandable and
intuitive to use. The requirements are that everyone who uses the application should
without further instructions be able to complete a task described by a user story given
to them. This indicates that the design is working to an extent that it is helping the user
towards reaching the goal of the functionality of the application.
7.1 Design evaluation
To evaluate the design, Jacob Nielsen’s ten usability heuristics [Nie94] will be used.
The two heuristics that we want to investigate are number one; Simple and Natural
Dialogue, and number five; Feedback. Simple and Natural Dialogue means that every
piece of information on the screen should be as simplified as possible, whether it be text
or symbols. Interfaces should match the user’s tasks in as natural a way as possible,
so that the navigation through the interfaces is understandable. Feedback means that
the system should inform the user about what it is doing and how it is interpreting the
user’s input. We believe that these two heuristics are the most crucial for the users of our
system to achieve what they are trying to do, without difficulty or frustration. Since the
application is very graphical and requires a lot of interaction from the user, we deem it
to be very important for the user to receive feedback, so they understand how the system
is responding to their actions. Keeping the dialogue simple is seen as important since
when using the emoji based journaling system, there will be a lot of icons and symbols
on the screen. The user could easily be overwhelmed by this if the information is not
communicated in a simple way.
208 Implementation of system
As Jacob Nielsen suggests, the evaluation will be done by letting three to five individ-
uals use the system and let them grade it with respect to each heuristic. Our choice of
individuals for the test and the implications of this choice is discussed further in section
9, Evaluation results. The grading will be done on a scale from zero to four, where
zero means that there is no problem and four means it is disastrous. The users will also
motivate why they gave the score that they did. To further investigate the design, the
testing users will also do a usability test. This test includes performing a few basic tasks
within the app. Users will be encouraged to explain their thought process while doing
these tasks. In the appendix a full outline of the usability test can be found.
8 Implementation of system
The first part of this section is a brief description of the features that the finished appli-
cation should support, followed by how each part of the system was implemented.
8.1 The core features of the application
What features the application should contain and how the features should be prioritized
was decided together with our stakeholders, the SkillMill project. The features of high-
est priority are that a user should be able to create an account and login, and that the
application should have a working journaling system. The journaling system should
allow the users to:
• Create a journal entry in the form of an empty canvas
• Give the canvas any color in unison with the experience of the event being jour-
naled
• Populate the canvas with emojis and text in unison with the transformative expe-
rience during the event being journaled
• Move, rotate and scale the emojis and text on the canvas
• Change the background color of the canvas
• Delete any emoji or text by dragging into a trash can
• Edit an emoji or text by long pressing
• Save a canvas
218 Implementation of system
• Edit an old canvas
Another feature is a reflection system, where the user can perform reflection exercises
on their past journal entries. The purpose of these exercises is to realize what skills you
have trained in the described situation.
The final desired feature for the application is an achievement system for advancements
made while developing professional competencies. For example, a badge or trophy for
when the user has successfully reflected upon all the different professional competen-
cies.
8.2 Users and authentication
When a user logs in to the application, a HTTPS post request is made to the API. This
request includes the necessary credentials to authenticate the user, namely username
and password. If the request is successful the server returns a token to the application.
The token is a unique key, represented as a string, that is to be included in all other
post request made by the application to the API. The API then uses the token to identify
which user is making the request, and can then return the correct data to the user. As
mentioned in section 5.2 Communication, the data sent over HTTPS is encrypted and
protected from third party snooping [Clo].
8.3 Emoji based journaling implementation
The requirement with highest priority for the project was the emoji based journaling
system. This system consists of several parts. Each relevant part is discussed in depth
in its corresponding section below.
8.3.1 Emoji keyboard and text tool
The first part of solving the bigger problem was to effectively implement a system where
the user can choose between all the supported Emojis for both Android and iOS. In
Flutter there are a multitude of different keyboard widgets to pick from. We chose the
package emoji picker [FD]. With the emoji picker package one has the benefit of only
showing emojis on the keyboard, and not letters as a classical mobile keyboard would.
The keyboard can easily be scaled to the desired size by specifying the number of rows
and columns, how this looks in the application can be seen in Figure 8b. The user can
228 Implementation of system
(a) Color slider (b) Emoji keyboard (c) Canvas
Figure 8 These three screenshots display the emoji canvas and its tools. In (a) is the
color slider. In (b) is the emoji keyboard. In (c) different emojis placed on the canvas is
displayed.
also use a text tool with which they can write a free text with the phones keyboard.
Since an emoji is interpreted as a text string, there is no difference between an emoji
and normal text.
8.3.2 Background color picker
A requirement from our stakeholders was that the user should be able to dynamically
change the background color of the canvas by sliding across a color slider, and then
choosing a shade of the chosen color by changing another color slider. Attempts at creat-
ing our own slider was somewhat successful, but some research unveiled a community-
made ColorPicker created by the developer Max Stoller [Sto]. By modifiyng the Color-
Picker widget the requirements from the stakeholder was met. The sliders can be seen
in Figure 8a and they allow the user to chose a background color of the canvas and its
intensity.
238 Implementation of system
(a) The parameters that represent the values
needed for manipulation (b) The matrix of an unmoved object
Figure 9 The matrices that relate an object to its surroundings.
8.3.3 Converting emojis to movable items
In order to make it possible to move, scale and rotate an object, the object itself needs
to know how it is related to its surroundings. When the user moves an object, the
object needs to update its coordinates that represent where the object is located on the
screen. When the user scales an object, the object needs to modify its height and width
parameters accordingly. And finally, when the user rotates the object, the object needs to
modify its angle parameter accordingly. We found that with a matrix one can represent
all of the properties needed to move, scale and rotate an object. Our solution was to give
each object a 4x4 matrix. With the arguments of a 4x4 matrix, all the properties needed
can be represented. In Figure 9a, the parameters in the matrix that is used for moving,
scaling and rotating the object can be seen. When the object is created and has not yet
been manipulated, its position is zero, its scale is 1 and its rotation is at a 0 degree angle,
as can be seen in Figure 9b. Since a matrix is a datatype in Flutter, there were predefined
matrix-operation methods that we could use. The predefined matrix-operations changes
the parameters of the matrix.
The user moves, scales and rotates an object through finger gestures. In order to make
the object manipulation feel as seamless and natural as possible, the correct matrix-
operations had to be chosen for the corresponding movement that was being made. For
example, if the user has one finger on the object and drags it across the screen, then a
matrix-operation that changes the positionX and positionY parameters of the matrix has
to be chosen. For every gesture, a matrix-operation is made that manipulates the object
correspondingly with the gesture made.
The object also holds a text string, which is what is displayed on the users screen. The
objects matrix determines where on the screen the text string is located, how it’s rotated,
and how it’s scaled. An emoji is interpreted as a text with one character. When the user
has picked an emoji with the emoji keyboard, or written a free text with the text tool,
the movable object is given the picked emoji or text as it’s text string.
24You can also read
