DEAO: an innovative framework to improve online learning experiences using UX Design applied in the education domain

Abstract

For a few years now, UX design has been contributing to the production of websites in order to improve users' experience during their interaction with and in the online environment. From this perspective, user becomes the centre of the design process. In the context of online education, it is understood that an experience should be learning-oriented, since the users are also learners. In this sense, the online university (UNA-SUS), imagined how UX design and learning design could converge to improve the learning experiences of Brazilian healthcare professionals. Being so, this paper presents the results as a dialogue between two fields, design and education, around the concept of experience and from the contributions of Dewey (2007) and Mattar (2014). We highlight, as an element of theoretical convergence, the quality of experience. In practical terms, DEAO framework was built and adapted from conceptual framework of Garrett (2011) in order to ensure the quality of online learning experiences in all contexts. As first results, positive effects was on interdisciplinary collaboration were highlighted in our courses production team.

Full text

DEAO: an innovative framework to improve online learning experiences
using UX Design applied in the education domain
Abstract
For a few years now, UX design has been contributing to the production of websites in order to
improve users’ experience during their interaction with and in the online environment. From this
perspective, user becomes the centre of the design process. In the context of online education, it
is understood that an experience should be learning-oriented, since the users are also learners.
In this sense, the online university (UNA-SUS), imagined how UX design and learning design
could converge to improve the learning experiences of Brazilian healthcare professionals. Being
so, this paper presents the results as a dialogue between two fields, design and education, around
the concept of experience and from the contributions of Dewey (2007) and Mattar (2014). We
highlight, as an element of theoretical convergence, the quality of experience. In practical terms,
DEAO framework was built and adapted from conceptual framework of Garrett (2011) in order to
ensure the quality of online learning experiences in all contexts. As first results, positive effects
was on interdisciplinary collaboration were highlighted in our courses production team.
Key Words: UX Design, learning design, online education, DEAO
Introduction
Our experiences with digital technologies have been intensified with the rise of Internet access. The way
society connects with and through cyberspace had become easier and more intuitive as computers,
smartphones, tablets and wearable devices became popular. In the 1970’s, only experts were able to
use personal computers, newly invented. Furthermore, we can barely remember, or imagine, that before
the 1980’s there were no icons on computer interfaces.
A new culture, called cyberculture by Lévy (1999), emerged with the advent of social web, smartphones,
applications and others devices. It represents new ways of connecting with each other in online
environments, around information. Therefore, the experiences we have in those environments are part
of our daily life and complete other experiences that previously only happened in the offline world.
With this brief contextualisation, our aim is to show that it has become crucial to optimise experiences
involving the use of hardware, software and virtual environments. In this endeavour, user experience
design (or UX design) has stood out, from some years now, as a central area.
From this perspective, at UNA-SUS Brasilia, online university for healthcare professionals, our
production team gives special attention to user experience. Thus, for designing our MOOCs, in 2018 we
decided to use Garrett’s conceptual framework (2011) as a reference, insofar as its five planes –
strategy, scope, structure, skeleton and surface – guide the design process. In the context of online
education, nevertheless, experiences provided by a course are learning-oriented, since users are also
learners.
This article, therefore, presents the DEAO framework, an adaptation of Garrett’s framework in which we
linked two kinds of design process: user experience design and learning experience design. Thus, we
have relied on experiential learning concept theorized by Dewey (2007), and on Mattar’s (2014)
contributions in the learning design area. With this study, our aim is to offer practical guidelines that
could ensure or improve the quality of online learning experiences and improve the design process of
production teams.
Autors: MOTA, L.G., PETIT, T., FONTINELE, D., DANTAS, L.
Full Paper - 28º ICDE - World Conference on Online Learning - 3-7 November 2019, Dublin, Ireland
1

User experience and learning experience: focus on humans and quality
In the 1990’s, according to Pine and Gilmore (1998), the experience economy began to replace the
service economy, which was preceded by the industrial and the agrarian economy. These authors
suggest that experience’s economic value is based on enjoyment and memorability. For this reason,
according to them, experience is a bigger concept than service.
In other words, no more services are delivered but rathe experiences. That is the reason why user
experience became central in the design area. While in the industrial era design focused on form and
function, in post-industrial times design focuses on users, their experiences and the subjective factors
involved in it (Oliveira, Limeira, & Santa-Rosa, 2014)
User experience is not about the inner workings of a product or service. User experience
is about how it works on the outside, where a person comes into contact with it. When someone
asks you what it´s like to use a product or service, they´re asking about the user experience
(Garrett, 2011, p. 6).
It is interesting to observe that a similar movement has taken shape in the educational field. In fact,
McLellan (2000) emphasised the need of staging educational experiences instead of delivering
instruction. In the same perspective, Mattar (2014) suggested a distinction in Brazilian Portuguese
between “instructional design” – commonly used in Brazil – and “educational design”. According to this
author, “instructional” refers to unidirectional, passive and behaviourist conceptions of learning. Instead,
“educational design” implies interactive and learner-centred approaches. In that respect, McLellan
(2000, p. 62) reminds that “the educational aspect of an experience (...) is essentially active. Learning,
as it is now largely understood, requires the full participation of the learner”.
In that way, the human-centred approach is a convergent point between UX and learning design. In the
design process was given special attention to users or learners who will live the experience. Besides
this convergence between both fields, there is another one: the focus given on the quality of experience.
For Alben (1996), ensuring quality in and with the design process is a key point for providing people with
successful and satisfying experiences with their product.
By “experience” we mean all the aspects of how people use a product: the way it feels in
their hands, how well they understand how it works, how they feel about it while they’re using it,
how well it serves their purposes, and how well it fits into the entire context in which they are
using it. If these experiences are engaging and productive, then people value them. We call this
“quality of experience.” (Alben, 1996, p. 13)
To t he c once p t of quality of experience, some criteria used in the UX design literature can be associated
to describe a satisfactory experience: aesthetic (Alben, 1996), enjoyment, memorability, autotelic,
engaging (McLellan, 2000), efficient, positive, pleasurable (Garrett, 2011), satisfying, unique, fun,
effective (Unger & Chandler, 2012).
In education, before considering the quality of an experience, we may define what an educative
experience is. According to Dewey (2007, p. 39), which defended an “education of, by and for
experience”, there are two variables that ensure the educative nature of an experience: interaction and
Autors: MOTA, L.G., PETIT, T., FONTINELE, D., DANTAS, L. -
Full Paper - 28º ICDE - World Conference on Online Learning - 3-7 November 2019, Dublin, Ireland
2

continuity. By interaction he meant that “An experience is always what it is because of a transaction
taking place between an individual and what, at the time, constitutes his environment” (p. 43) In other
words, an experience is always personal and unique insofar as it belongs to each human being and
his/her context.
Continuity, in addition to defining an experience as educative, is also a criterion of its quality. This means
that “every experience enacted and undergone modifies the one who acts and undergoes, while this
modification affects, whether we wish it or not, the quality of subsequent experiences” (Dewey, 2007, p.
34). To t ha t e xtent, “the educator [has] a long look ahead, and views every present experience as a
moving force in influencing what future experiences will be” (p. 87).
The experiential continuum suggested by Dewey (2007) in the context of the learning experience, to a
certain extent, is also involved in the user experience. As a matter of fact, in UX design user’s previous
experiences are considered and integrated to the current provided experience. However, future
experiences are not always a key point, unlike Dewey’s experiential continuum.
Another criterion of quality for an educative experience, according to Dewey, is agreeableness. This
interacts with the dimension of pleasure expressed in UX Design, which is linked to our senses. In that
way, Garrett mentioned that:
Every experience we have - not just with products and services, but with the world and
with each other - fundamentally comes to us through our senses. In the design process, this is
the last stop on the way to delivering an experience to our users: determining how everything
about our design will manifest to people´s senses. (2011, p. 135)
After these first general considerations, it will be presented in the next part of this article how to establish
a practical dialogue in our design process between the UX project and learning design, given the quality
of the experiences provided by our MOOCs.
DEAO: online learning experience design framework
In order to create online learning experiences, it is necessary to understand the environment in which it
will occur. In our context, a self-service website provides this environment to our students, where “there
is only the user, facing the site alone with only her wits and personal experience to guide her”. (Garrett,
2011, p. 10).
Our understanding of how to build a website was based on Garrett's conceptual framework (Figure 1)
because it allowed us to "address the problems of the user experience and the tools we use to solve
them" in the design process (2011, 21).
Autors: MOTA, L.G., PETIT, T., FONTINELE, D., DANTAS, L. -
Full Paper - 28º ICDE - World Conference on Online Learning - 3-7 November 2019, Dublin, Ireland
3

Figure 1 – Garret’s framework (Garrett, 2011, p. 161)
Each plane of Garrett’s framework (2011) depends on the decisions made in the lower plane, from the
most abstract to the more concrete. The elements of the first and the last plane, strategy and surface
respectively, are transversal. In the intermediate planes - scope, structure and skeleton - Garrett (2011)
suggested a division into two visions: functionality and information. The main characteristics of his
framework are summarised in Table 1:
Planes
Elements
Characteristics
Strategy
User needs
Consideration of the objectives and needs that lead users to
access the site (it can be a complex task because user profiles
can vary for the same site)
Product objectives
It can be business-oriented (for sales sites) and/or involve
company identity issues, success metrics, etc.
Scope
Functional specifications
Detailed definition of the functions that the site will integrate
Content requirements
Identification of the type of content, required resources,
characteristics (file size, image pixels, etc.) that the functions
will need to take into account
Structure
Interaction Design
Description of the actions and expected behaviours of users and
how to contemplate them, including prevention and resolution
of errors
Information architecture
Structuring content elements to improve future information
processing
Skeleton
Interface Design
Organisation of interface elements in such a way that users
understand and easily use the functionalities of the site. The
focus is on user’s interaction.
Navigation Design
Allows users to move within the proposed information
architecture.
Autors: MOTA, L.G., PETIT, T., FONTINELE, D., DANTAS, L. -
Full Paper - 28º ICDE - World Conference on Online Learning - 3-7 November 2019, Dublin, Ireland
4

Information Design
Presentation of information so that it is easily understood and
utilized by users. The focus is the communication of information
to users
Surface
Sensory Design
Determine how the information and functionalities of a given
product will or should mobilise the users’ senses (touch,
hearing, vision in a web environment)
Ta bl e 1- elements of the five planes of the Garret framework (elaborated by the authors)
Garrett's framework (2011) introduces a dynamic that organises decision making at appropriate times
of web design: decisions made on one plane immediately affect the next one. Although it has a linear
structure, it is possible that a decision on a higher plane, such as the skeleton, causes the updating of
the lower planes (strategy, scope or structure). In that way, it is also agile.
Another feature that shows the flexibility of Garrett's framework (2011) is the transition from one plane
to another. This border is neither fixed nor clearly defined. However, the best way to ensure the process
is to keep the work concomitant in at most two planes, which means that the planes can at some point
occur in parallel. “A better approach is to have work on each plane finish before work on the next can
finish” (p. 23). That is, it is possible to work on Structure and Skeleton at the same time, but in order to
start working on Surface, Structure must be finished.
When our team explored Garret's framework (2011) for designing online learning experiences, the first
issue was the difficulty in contemplating the educative dimension of the future experience. Specific
questions were not just about function or information, but about education. On the other hand, both
functionality and information needed to be considered in the design process.
For this reason, we decided to integrate a new column into Garrett’s framework (2011), in order to meet
the educational objective of online learning experiences. This third column consider, this time, product
as knowledge (Figure 2). This adaptation, called DEAO (for Design de Experiências de Aprendizagem
On-line – online learning experiences design in Brazilian Portuguese), is indeed a way of integrating
conditions that will allow learners to transform information (column 2) into knowledge (column 3).
Autors: MOTA, L.G., PETIT, T., FONTINELE, D., DANTAS, L. -
Full Paper - 28º ICDE - World Conference on Online Learning - 3-7 November 2019, Dublin, Ireland
5

Figure 2 – DEAO framework Online Learning Experiences Design (elaborated by the authors)
Autors: MOTA, L.G., PETIT, T., FONTINELE, D., DANTAS, L. -
Full Paper - 28º ICDE - World Conference on Online Learning - 3-7 November 2019, Dublin, Ireland
6

In the first plane - Strategy -, we integrate three bases: students’ analysis, context and educational
objectives. Both UX design and learning design, with their respective focuses, seeks to know and
understand the target audience. A further step, with the educational dimension, is to consider students'
previous knowledge, as well as their expectations and previous experiences, following the concept of
experiential continuum suggested by Dewey.
Analysing who our students are and what they do need or expect is one of the first steps of a learning
design process according to Mattar (2014). In that way, user's needs indicated as the basis of UX design
are different – and complementary – from learner’s needs.
[Educator] must survey the capacities and needs of the particular set of individuals with
whom he is dealing and must at the same time arrange the conditions which provide the subject-
matter or content for experiences that satisfy these needs and develop these capacities. (Dewey,
2007, p. 57)
Context analysis is the second element integrated into Strategy. It considers the online learning
environment itself and the environment of performance, that is the environment in which new knowledge
and skills will be mobilised (Mattar, 2014). Again, this allows us to value, at the beginning of the process,
the experiential continuum concept – which is indicated at the top of the framework as a perspective –
as a fundamental principle of the quality of experience and its educative value.
In our context, considering our students’ performing environment to a certain extent symbolised, for
example, a way of contemplating possible gaps between theory and practice. In some Brazilian realities,
professionals can have to deal with some limits for practicing the course theory. It represented also an
opportunity to consider elderly people needs, which will benefit directly from new knowledge and skills
of healthcare professional.
The third element of the new column of the Strategy plane, educational objectives, answer the question
"why is this learning experience being planned?". It records the purposes of the educational resource
as a whole. In our context, it is also a way to reflect and formalise in pedagogical terms the demand of
our stakeholder, the Brazilian Ministry of Health.
Scope is the densest plane of the framework. In it, learning outcomes are defined. It is time to think
"what students will be able to do after the course” (Mattar, 2014, p. 81). Learning outcomes are
complementary to another element of this plane: the educational requirements, which involve choices
relating to learning theories, pedagogical activities, media, language, and assessments tools and
methods, among main elements that will be defined and used. For example, enabling and promoting
peer’s interaction (learner perspective) is a kind of educational requirement that would need to interact
with content requirements and functional specifications (user perspective).
It is also in the Scope plane that we define content (main theoretical topics) that will lead to learning
outcomes as an intersection of content and educational requirements. In our context, both learning
outcomes and associated contents are defined by members of our team (usually learning designer and
team coordinator) together with specialists of elderly people healthcare. Stakeholder’s role is validating
the Scope plane.
In the Structure plane, the learner’s journey and her/his interactions with the environment are defined
through information architecture and interaction design. Interactivity, in educational terms, concerns all
interactions that students will have with content, teachers, or with each other.
The design of pedagogical activities meets with web interactions (Mattar, 2014). Thus, learning design
Autors: MOTA, L.G., PETIT, T., FONTINELE, D., DANTAS, L. -
Full Paper - 28º ICDE - World Conference on Online Learning - 3-7 November 2019, Dublin, Ireland
7

plays a relevant role at this time of the whole design process. "By planning activities rich in interactions,
the educational designer will be exercising one of his/her highest arts", according to Mattar (2014, p.
131). Transdisciplinary work is fundamental and indispensable in terms of feasibility and involves at
least learning designers, developers and graphic designers.
In the third column of DEAO framework, Structure and Skeleton merge in order to match the educational
environment design evoked by Mattar (2014). In this "double plane”, the design of activities and
interactions is done without pre-established order, one being able to precede the other.
In our team, at this stage we define pedagogical approach (case studies, reflection...), forms of
evaluation, and media production’s needs with our learner specificities in mind. This means, for example,
that the course structure will be different for caregivers and doctors. For caregivers-oriented courses,
concretely, we create the script of a fictional (but realistic) narrative which will structure the course and
guide theoretical content writing. Afterwards, once this content written and approved by specialists,
design can move forward.
The Skeleton plane, from a UX perspective, allows the visual translation of components decided in the
previous plane. Conceptual design models for the web can be used, such as content distribution grids,
button sizes, scrolling direction, among others. It concretises the learning experience in a simplified
visual model.
In our design process, in this plane, we use wireframes. With this prototype, navigation is made available
in order to experiment interactivity from both UX and learning perspectives. Moreover, we have noticed
that it was easier, in our validation process with our stakeholders, to focus on content and pedagogical
elements. Without this step, stakeholders used to focus on visual elements that were not important at
this stage of the design process and sometimes implied changes that affected our production workflow.
Finally, the Surface plane, with sensory design, transcends all three columns (functionality, information
and knowledge). It is the first factor that guarantees the pleasant and memorable aspect of the web
experience. In this plane, the visual part in the prototype previously validated in the Skeleton plane is
concretely applied. From an educational point of view, we pay attention, for example, to colours, icons
or other elements that have specific and shared meaning.
Conclusion
With this study, notes how it is necessary and possible to establish a connection between UX design
and learning design, around the concept of experience. This connection aims to ensure the quality of
online learning experiences. The next step of this study will be performing usability tests and applying
post-course surveys in order to verify if the quality of the provided experience is perceived by real
learners.
Abstract concepts, such as enjoyment, memorability, pleasurable, are indeed a challenge to be
measured, especially in a context where learning is not yet associated with the aesthetic or the
pleasurable. Research support may be one way to overcome this barrier.
Since the DEAO framework was applied in the design process of six courses it was added more than
73 thousand enrolments, so it´s possible to share three main results that, at least, allowed us to improve
the design process in our production team.
First, it was noticed a growing awareness among our team members of the need to focus on the quality
of our learners/users’ experience. This can be a first step towards the effective quality. The second result
refers to a better collaboration in our team. Thus, the DEAO framework offers practical guidelines for
Autors: MOTA, L.G., PETIT, T., FONTINELE, D., DANTAS, L. -
Full Paper - 28º ICDE - World Conference on Online Learning - 3-7 November 2019, Dublin, Ireland
8

transdisciplinary dialogues and indicates when it can be established during the design process.
Then, the understanding that a multidisciplinary process involves several skills, which means each
person is responsible for the stage that she dominates technically. In a transdisciplinary process,
however, the various skills work together, and responsibilities and knowledge are shared in view of a
common objective.
Finally, a better communication with our stakeholder was noticed. The DEAO framework helped us to
formalise and to guide our validation process. This allows us – stakeholder and team – to focus on
appropriate elements in appropriate moments.
From these first results, we can say that UX design brings contemporary contributions for online learning
design or, in other words, for the creation of what Dewey (Dewey, 2007, p. 41) called "environmental
circumstances that lead to experiences that lead to growth".
Acknowledgements
We would like to thank Jesse James Garrett, who authorized us to use his framework as a reference
for our work, the Open University of SUS (UNA-SUS) and the Fiocruz Virtual Campus for supporting
the courses creation process of Elderly People's Health and Yellow Fever using the DEAO framework.
References
Alben, L. (1996). Quality of experience: Defining the criteria for effective interaction design. interactions,
3(3), 11–15.
Dewey, J. (2007). Experience And Education. Riverside: Free Press.
Garrett, J. J. (2011). The Elements of User Experience: User-Centered Design for the Web and Beyond
(2 nd). New Riders Voices that Matter.
Lévy, P. (1999). Cibercultura (1.; C. I. da Costa, Trad.). Editora 34 Ltda.
Mattar, J. (2014). Design Educacional: educação a distância na prática (1o ed). São Paulo: Artesanato
Educacional.
McLellan, H. (2000). Experience Design. CyberPsychology & Behavior, 3(1), 59–69.
Oliveira, R. D. N., Limeira, C. D., & Santa-Rosa, J. G. (2014). A EXPERIÊNCIA DO USUÁRIO NO
PROCESSO EVOLUTIVO DO DESIGN. Anais do 11o Congresso Brasileiro de Pesquisa e
Desenvolvimento em Design, 3451–3460. https://doi.org/10.5151/designpro-ped-01353
Pine, B. J., & Gilmore, J. H. (1998, julho 1). Welcome to the Experience Economy. Harvard Business
Review, (July–August 1998). Recuperado de https://hbr.org/1998/07/welcome-to-the-experience-
economy
Unger, R., & Chandler, C. (2012). A project guide to UX Design for user experience designers in the
field or in the making (2o ed). New Riders.
Autors: MOTA, L.G., PETIT, T., FONTINELE, D., DANTAS, L. -
Full Paper - 28º ICDE - World Conference on Online Learning - 3-7 November 2019, Dublin, Ireland
9