See discussions, stats, and author profiles for this publication at: https://www.researchgate.

net/publication/355571876

A User Experience Design Process in Mobile Applications Prototypes: A Case

Study

Chapter · January 2022

DOI: 10.1007/978-3-030-89735-2_22

CITATIONS READS

7 2,573

4 authors, including:

Ana Filomena Curralo

Polytechnic Institute of Viana do Castelo
41 PUBLICATIONS 68 CITATIONS

SEE PROFILE

All content following this page was uploaded by Ana Filomena Curralo on 14 February 2022.

The user has requested enhancement of the downloaded file.

 A User Experience Design Process in Mobile
Applications Prototypes: A Case Study

Afonso Carvalhido1 , Rita Novo1 , Pedro Miguel Faria1 , and Ana Curralo1,2(B)
1 Polytechnic Institute of Viana do Castelo, Viana do Castelo, Portugal
{afonsocarvalhido,ritanovo}@ipvc.pt, {pfaria,
anacurralo}@estg.ipvc.pt
2 ID+ – Instituto de Investigação em Design, Media e Cultura, Aveiro, Portugal

Abstract. More and more importance is being given to the best usability and user
experience that a user should have when using digital products. In this context, it
is essential to recognize its importance in the design and prototyping process of
user applications. As such, a Workshop was structured and developed, supported
by a UX Design process, to create high-fidelity prototypes of applications for
mobile devices. As a result of this Workshop, six prototypes were obtained and
for each one of them the generic functionalities prototyped are indicated. One of
these prototypes was selected and presented in this article as a case study. It is
possible to demonstrate the use of a UX Design method for its creation, based on
5 plans: Strategy, Scope, Structure, Skeleton and Surface. Thus, it is verified that
the adoption of a UX Design method can enhance the best user experience of a
mobile App.

Keywords: UX design · User experience · Mobile app prototype · Workshop

1 Introduction
UX Design is an area of design that has as its object of study and project, essentially, the
user experience of digital products and services. Such experience involves users’ per-
ception of value, as well as how they interact with digital products and services, through
their appearance and how they feel and remember such interactions. User experience has
existed since humans interacted with the first object. The interaction produced learning,
and this became an experience. However, since the emergence of digital technologies,
there has been a need to study the continuous improvement of user experience, in which
the user is the focus. However, this scope goes beyond usability [1] to the emotional
side of the user, thus provoking an emotional response to what he has just done, with the
mission of transforming ordinary experiences into exceptional ones. A product that is
not easy to use, efficient and effective is a product doomed to non-use. In this context, a
Workshop about the User Experience process was held in a higher education academic
environment. One of the advantages of this Workshop comprised the concentration of
groups of participants, stimulated to develop a comprehensive vision, in a respective
project area, in order to contribute and develop solutions to problems presented, as well

© The Author(s), under exclusive license to Springer Nature Switzerland AG 2022

N. Martins and D. Brandão (Eds.): DIGICOM 2021, SSDI 19, pp. 262–273, 2022.
https://doi.org/10.1007/978-3-030-89735-2_22
 A User Experience Design Process in Mobile Applications Prototypes 263

as seeking to deepen possibilities/opportunities for exploring a method, technology and

generation of new solutions, and the expansion of design culture as a differential. This
paper is organized into five sections. The current section introduces the scope of the
article, followed by a section framing the fundamental concepts of usability and user
experience design. In the following sections the methodology used is indicated and the
development of the workshop is described, ending with the conclusions section.

2 Usability and User Experience Design

When referring to the term usability, authors such as Jacob Nielsen [2], Ben Shneider-
man [3] and Patrick Jordan [4] are fundamental references to understand this concept.
Generally, the word “usability” refers to the use of methods to improve the ease of use
of a product [5]. It focuses on three fundamental concepts: effectiveness, efficiency and
satisfaction [6] as represented in Table 1.

Table 1. Usability fundamental concepts.

Effectiveness Efficiency Satisfaction

Analysis of objectives and Relationship of Effectiveness It is established by the users’
how they can be achieved with the amount of resources comfort and acceptability of
used the product

Effectiveness is related to the analysis of objectives and how precisely they can be
achieved. Efficiency refers to the relationship of effectiveness to the amount of resources
used. And satisfaction is established by the users’ comfort and acceptability of the prod-
uct and can be calculated by objective and/or subjective methods. Interaction is appre-
hended by use or experience with other products, and those that people use intuitively
are those that have similar characteristics to those developed/experienced previously.
The past is relevant in experience, thus transferring between products and probably also
between contexts, so that performance is affected by the degree of familiarity one may
have with technologies.
Currently, the term UX (User Experience) has gained prominence in its field as a
fundamental part in the design of a digital product, with the purpose of creating user
loyalty through a positive experience, providing satisfaction. The UX is determined
by the various stages and participants involved in its process. For the realization of a
feasible experience, it is essential to exist a combination of properties and aspects able
to trigger this particularity, from actions taken by the user, as well as the surrounding
space embedded in it and the product, service or system in question.
According to the study prepared by Roto et al [7], in order the UX process may
occur, there are several properties and characteristics to be respected, namely in its con-
text of use, there are physical aspects (environment, external noises, climate), the tasks
to be developed (its purpose, its time, the importance of use) and socio-cultural factors
(social norms, beliefs, fashions, languages). There is also a process/relationship between
264 A. Carvalhido et al.

the user and the system, which we can consider that the user suffers from momentary
aspects (feelings, emotions, moods, will), predispositions and characteristics (personal-
ity, experiences, principles) and its limitations and capabilities (communication, skills,
sensory sense) while the system embraces differentiating characteristics, highlighting
its efficiency, its simplicity, its adaptability and purpose, all this is determined by the
user, through its usefulness, originality, complexity and reputation [7].
A well-known methodology for promoting a good user experience was proposed by
Jesse James Garrett [8]. This is composed of 5 layers, from abstract to concrete, called:
Strategy, Scope, Structure, Skeleton and Surface (Fig. 1).

Fig. 1. The 5 planes of UX from Jesse James Garret [12].

Each layer/plan is dependent on each other and is analyzed in an increasing manner

from the most abstract to the most concrete [8]. The Strategy is the first layer of this
process, which aims to obtain a general perception of the issues involved in the initial
situation of the problem, that is a collection of the main information related to the project
and, mainly, of the user’s needs. This layer is fundamental to any decision in the UX
process, and it is here that the personas of the application are created. The next layer is
called Scope and establishes the functional aspects to be developed in the application,
establishing the user’s role. The third layer is called Structure and its objective is to
define how the product will work. It is here that the more abstract questions of strategy
and scope become more concrete and will determine the user experience. The next layer
is called Skeleton and it defines the navigation systems, corrections and adjustments
to interface elements and the development of all screen wireframes. Wireframes are
represented in a schematic document, often detailed, used to represent the behavior of
the visual elements of the various screens. Wireframes emerge as a way to unify the
interface and the navigation design. The last layer is called Surface and focuses on
the visual treatment of the app and the elements of visual communication. The visual
elements can be manipulated and emphasized through visual communication techniques,
which corresponds to the objective of a message [9]. These elements should interfere
 A User Experience Design Process in Mobile Applications Prototypes 265

with the aesthetics and functions of the app. The visual elements, colors and typography
are defined with respect to usability issues and this layer will act as a fusion of content,
functionality and aesthetics of the final product.
Following, the adopted methodology is presented, and the development of a Work-
shop subordinated to the UX process in the development of an App for mobile devices
is described.

3 Workshop Methodology
Nowadays, Apps for mobile devices have become indispensable allies in everyday life.
Problems that used to require time are now solved with a few taps on the screen of a
smartphone or tablet. In this sense, the idea of developing a Workshop directed to the
UX process arose, in which several participants were invited to design a high-fidelity
non-functional prototype of an App, under the theme of social intervention, with the
goal of disseminating useful information, satisfying the needs of potential users. It was
also indicated the need to obtain a practical and objective App, with a simple, attractive
and efficient visual interface, for the best satisfaction of the user.
Thus, a Workshop was prepared and developed with a duration of about 40h, spread
over 5 weeks. This activity aimed to develop a hi-fi prototype, for the creation of a
mobile application (App), through the implementation of a user-centered methodology,
to discuss the designer’s role in digital processes and also to stimulate research and
investigation. It was also intended to validate critical and project skills, at the level of
visual conception, design and usability of an application for a mobile device, as well as
the selection of the most appropriate tools and methods for each phase of the project,
and the acquisition of knowledge about technological media for the production of visual
communication in digital media. The group of participants was made up of 21 students,
11 females and 10 males, aged between 20 and 25. All participants had a degree in
design and attended a master’s degree, at the Polytechnic Institute of Viana do Castelo
(IPVC). The participants were challenged to develop a high-fidelity mockup, applying
methodological steps of the user experience (UX) process. During the workshop, authors
like Donald Norman [10], Marc Hassenzahl [11] and Arrow Walter [12] were referred to.
These authors were essential in the understanding of concepts like emotion, aesthetics
and simultaneously the understanding of how the user perceives the product.

4 Workshop Development
As Nielsen [13] argues, interfaces should not contain additional or irrelevant information
that competes with the main information. In this sense, in the first stage of the Workshop,
the participants proceeded, in pairs, to explore a theme of their choice. In total, six projects
of an application were developed, as shown in Table 2, using Adobe Illustrator and Adobe
XD software [14]. Most of the participating groups opted for the Social/Community
Platforms theme. Within this theme, the App entitled “Poder do Voto” was developed,
that allows voters to carry out their right to vote, in a simplified way, offering to all
citizens the power to vote, whether they are nationals, emigrants, people with travel
difficulties or others. The “Espólio de Design” proposal enables the creation of a digital
266 A. Carvalhido et al.

collection of projects developed, over the years, in the various IPVC Design degrees,
with the aim of providing a quicker and greater knowledge of the projects and activities
developed, enhancing the possible recruitment of designers graduated by the IPVC. The
“O’Clock – Plataforma Comunitária” proposal consisted in the prototype of a free App
that provides information in real time, about the status of a given train and/or bus. It is
possible to obtain diverse information, such as possible delays, line changes and other
eventual unforeseen events, according to the user’s needs. The content is shared among
users who are registered in the App, being a sharing community and not a professional
public transport service. The App’s main goal is to help users before, during and after
the arrival of the desired public transport, thus facilitating the planning of their own day,
being aware of any delays or cancelled transports. Thus, it promotes mutual help between
a community of users, with the goal of improving the population’s daily commute.

Table 2. Themes and names of the apps prototypes developed by the workshop participants.

Social/Community
Children’s Healthcare Health Monitoring
Platforms
Poder do Voto
Espólio de Design
Bem-me-quer Hema
O’Clock – Plataforma Comunitária
Onde Vamos

Within the Children’s Healthcare theme, the prototype “Bem-me-quer” was devel-
oped. It consisted of an application for children with Autistic Spectrum Disorder (ASD)
in school age between 8 and 15 years. This App’s main objective is to complement and
help the development of social and affective skills by encouraging, in various ways, phys-
ical and verbal contact, in a caring way, in children with autistic spectrum in their family
environment and small social groups. Within the Health Monitoring theme, the “Hema”
App was developed, with the objective of helping in the decision-making process, about
the state of health of a user, through notifications. In the case of a user demonstrating
risk symptoms, it would be advised to adopt healthier habits related to its diet.

4.1 UX Design of the “Onde Vamos” App

It was decided, in this article, to analyze in detail the UX Design process of the “Onde
Vamos” App, since of all the proposals developed during the workshop, this was the
one that came closest to the established objectives, concerning the application of the
methodological steps of the user experience (UX) studied process. This App, in addition
to reducing the unnecessary use of paper, facilitates the dissemination of information
about the cultural agenda of a municipality, town or village, with some level of detail.
It also provides a network of spaces and events that allow the user to choose their
destination, through graphic and informative demonstration, that allows guiding and
 A User Experience Design Process in Mobile Applications Prototypes 267

helping people in relation to a space or event, using biographies, photos and feedback
from other users.

Strategy
Thus, the methodology applied in the UX process will described. Therefore, the project
was started by establishing the Strategy. In this first step, a future scenario was envisaged
through the definition of the problem that was intended to be solved. Initially, several
similar Apps were analyzed, and no platforms were found that met the objectives defined
by the Workshop participants. Other types of platforms were also analyzed, such as Tatoo,
Airbnb and Google Maps, since, within the theme, these were some of those that had
similarities with the intended solution. In addition to the functionality requirements, the
usability and aesthetics of the respective platforms were also analyzed. The next step was
to develop Personas, with the goal of creating a stereotype of a user to help to decide about
the product’s characteristics, navigation, interactions and the aesthetics that the App
should have. The Personas, illustratively, represent the variation of needs of a real user, for
taking decisions about the development of the App, with the goal of better enhancing the
UX [8]. These Personas are idealized in order to make them consistent, creating identities
around these characters, defining names, physical characteristics, details and specific
information, based on the results of previous research. Questions are asked around the
personas to help to keep the users in the designer’s mind, during the development of
the project. The definition of the Personas was important in this first stage of the App
development, since it allowed the development of a narrative focused on providing the
best user satisfaction when using it.

Scope
Then, the Scope layer was implemented, where the problem to be solved was material-
ized. The Scope can be divided into functional specifications and content requirements.
The functional specifications consist of the functionalities that the App should sup-
port. Content requirements, on the other hand, refer to the information that needs to be
provided to the user. For the App “Onde Vamos” those are presented in Table 3.

Table 3. List of functional specifications and content requirements of “Onde Vamos” App.

Functional specifications Content requirements

User account creation Login with personal data, email or Facebook
Set the route to the desired destination Access to GPS and user location to set trajectory
Interests and highlights feeds List of likes, comments and clicks
Categories of the 6 types of destinations Icons and category identification
Description on possible destinations Textual and visual data
(continued)
268 A. Carvalhido et al.

Table 3. (continued)

Functional specifications Content requirements

Feedback from the public Calendar with all events created in the app with start
and end date
Agenda Database of places and tags categorized by the user
Search engine

Usually, when speaking about Scope, it happens in the begin, middle and end of the
project. However, in an agile methodology as adopted here, it is possible to modify the
Scope when it is necessary.

Structure
Following, comes the Structure layer, which can be proposed in the form of a navigation
flowchart, with the goal of structuring the user’s interaction with the App. It is divided
in two parts: the Interaction Design and the Information Architecture. This latter term
is referred by the Richard Saul Wurma designer [15], who states that the information
architect is the individual who organizes patterns inherent in data, transforming what is
complex into something clear and who creates the structure or map of a given piece of
information, in order to enable others to create their own personal path towards knowl-
edge [15]. In the App project under development, the information architecture gathers
the present concepts and segments in a logical way, that the information will originate
the functionalities to be developed. This step enables the development of functionalities
more objective and understandable.

Skeleton
After the detail regarding the organization of the application content, a first sketch was
made to visualize the graphic layout. These understandable drawings, usually without
colors, called wireframes (Fig. 2) help the designer to perceive the set of interactive
elements present in each of the App screens.
The definition of wireframe is derived from the concept of waterfall, which is defined
as a model where the structural process is schematic and sequential, being designed from
top to bottom. With the evolution of digital editing software, such as Adobe Photoshop
[14], more flexible versions of waterfall image schemes emerged, which later gave rise
to wireframes [16].
In the “Onde Vamos” App the wireframes were developed through sketch drawings,
in order to show the content of each screen. Thus, the first versions of the App screens
were designed in a simple way, without the use of colors or images (Fig. 2) allowing for
greater flexibility in adding and removing features to be developed, without concern for
the final aesthetics of the App, since they are first schematic sketches.

Surface
The Workshop was followed by the Surface layer, where the visual elements that out-
weigh their meaning and the emotions, they may eventually generate are relevant, since
 A User Experience Design Process in Mobile Applications Prototypes 269

Fig. 2. First wireframes of the App “Onde Vamos”.

this is a project used by different age groups, so its accessibility and readability are cru-
cial. In this sense, screen colors influence the communication of a product/application
and help integration into the users’ imagination. In addition, colors affect people’s emo-
tions and provoke various sensations. Currently, there are several websites that check the
overlay of text on colors and help to identify the best compositions, in order to ensure a
better readability. For the present project, the “contrast checker” of WebAIM [17] was
used. Fig. 3 is an of the text color over the background color.

Fig. 3. Logo for the “Onde Vamos” App Fig. 4. “Onde Vamos” App categories
270 A. Carvalhido et al.

Fig. 5. List of icons available for use in the “Onde Vamos” App.

The hexagonal shape of the App’s logo (Fig. 3) consists of a six-sided polygon, each
one representing the categories: events, exhibitions, gardens, monuments, libraries, and
agenda, as shown in Fig. 4.
Iconography
As for iconography, an icon is considered a small graphic illustration, that is, a visual
sign, which is part of the composition of an interface, as well as other visual elements,
and has become essential for all people who use some digital device.
The appearance of icons in digital interfaces has transformed the computational
language into a common language for anyone, even if they don’t have any technological
knowledge. Digital icons, also called physical or virtual buttons, are holders of functions.
Therefore, these are thought and developed to create interaction with services and/or
products, with the intention of presenting answers to the user, simplifying the way they
work. The adequate development of a product or service is understood as intelligent,
since it responds to the user, and exposes a joyful tendency to look, as mentioned by
[10], attractive products work better, since when the design arouses pleasure in the
use of a product, mistakes are not so valued. In this sense, it was essential to create
an iconographic system that would suit the service in question. Therefore, a line easy
to understand and intuitive was developed, so it be perceptible by various users. The
construction of the iconography of the “Onde Vamos” App is based on the silhouette
of the various informative icons, in order to integrate with the rest of the application
design. These icons are easy to understand, can be used in small format, such as on the
screen of a smartphone, without losing their readbility (Fig. 5).
Screen Layouts
A screen layout can be created for various platforms, printed or virtual, and represents
the organization of the elements of a design in relation to the space it occupies. An overall
design layout is an important aspect of the interface because it facilitates navigation by
the user, allowing the user to interact with pictures, layouts and sounds, alluding to a real
experience. The layout of the graphical interfaces of electronic devices has a dynamic
nature, that is, it can be changed even while it is being manipulated. Those changes
depend on user needs and technological innovations.
Several high-fidelity screens were developed for the “Onde Vamos” App, seeking to
meet the functional specifications and content requirements previously established, such
as the disclosure of cultural, children’s and sports activities, concerts and exhibitions, the
location of these events, sharing opinions and suggestions of other users, among other
functionalities. Some of these screens were implemented using Adobe XD [14] and are
shown in Fig. 6.
 A User Experience Design Process in Mobile Applications Prototypes 271

Fig. 6. Several screens of the “Onde Vamos” App.

Thus, the App prototype previously described was developed according to the
methodology proposed by [8] and it presents an easy and intuitive navigation between
the various screens, enhancing a good user experience and allowing the highlighting
of three adjectives that characterize the overall concept of the application: disclosure,
sharing and approach between users, promoting a good user experience.

5 Conclusions

It is important to mention that UX Design is a multidisciplinary area that grows at

a fast pace and includes several competencies mentioned throughout this article. In
this sense, the workshop developed with the students allowed them to obtain a deep
272 A. Carvalhido et al.

knowledge about this area. It instilled in the participants the UX methodology, focused
on user experience, proposed by Jesse Garrett [8]. This five-step methodology allowed
the young design students to develop practical skills and understand the dynamism of the
digital content and tools used in mobile application development. Besides the theoretical
contents, the students had the opportunity to develop practical activities that culminated
in a final high-fidelity prototype. Some of the advantages in the development of this type
of prototypes are the ease of creation, modification and iteration; the quick identification
and correction of usability problems; portability and ease of use for the team involved
in the project, as well as it can be used to define the system requirements.
From the results obtained, which can be seen in the prototypes of the Apps developed,
it can be seen that the participants understood that UX Design is not only limited to the
development of the product itself, but the experience goes far beyond the functionalities,
or the way users use these digital products.
We can thus refer that the participants acquired theoretical and practical knowl-
edge, and in the future, they will be able to integrate teams capable of producing digital
projects that can more than communicate, but rather provide their contribution to soci-
ety, developing accessible projects and pleasant interactions, promoting the best user
experience.

References
1. Bass, L.J., Gornostaev, J., Unger, C. (eds.): EWHCI 1993. LNCS, vol. 753. Springer,
Heidelberg (1993). https://doi.org/10.1007/3-540-57433-6
2. Nielsen Norman Group. http://www.nngroup.com/articles/usability-101-introduction-to-usa
bility. Accessed 3 June 2021
3. Shneiderman, B.: Designing the user interface: Strategies for effective human computer
interaction. Addison-Wesley, Reading (1987)
4. Jordan, P.: An Introduction to Usability. CRC Press, London (1998)
5. ISO.ORG: International organization for standardization, Guidance on usability, ISO 9241-
11 Part 11. Accessed 3 June 2021
6. Nielsen, J.: Usability Engineering, Morgan Kaufmann, San Francisco (USA). ISBN 0-12-
518406-9 (1993)
7. Roto, V., et al.: User Experience White Paper: Bringing Clarity to the Concept of User
Experience. http://www.allaboutux.org/uxwh (2011). Accessed 7 June 2021
8. Garrett, J.: The Elements of User Experience: User-Centered Design for the Web and Beyond.
New Riders, Berkeley (2011)
9. Dondis, D.: La sintaxis de la imagem. Introducción al alfabeto visual. Gustavo Gilli, Barcelona
(2003)
10. Norman, D.: Emotional Design: Why We Love (or Hate) Everyday Things. Basic Books,
New York (2004)
11. Has, M.; Tractinsky, N.: User experience - a research agenda, Behav. Inf. Technol. 25(2),
91–97. https://doi.org/10.1080/01449290500330331. Accessed 3 June 2021
12. Walter, A.: Designing for Emotion. A Book Apart, Nova Iorque (2011)
13. Nielsen Norman Group. https://www.nngroup.com/articles/definition-user-experience/.
Accessed 5 June 2021
 A User Experience Design Process in Mobile Applications Prototypes 273

14. Adobe Software: https://www.adobe.com/pt/. Accessed 4 June 2021

15. Wurman, R.: Information Architects. Graphis, New York (1998)
16. Timetoast: History of Wireframing timeline. https://www.timetoast.com/timelines/23833.
Accessed 8 June 2021
17. WebAIM: https://webaim.org. Accessed 3 June 2021

View publication stats