Codes for Creativity

A creative-processes-oriented inquiry into

designing interactive products powered by
generative systems

Caio Barrocal
Autorizo a reprodução e divulgação total ou parcial deste trabalho, por qualquer meio
convencional ou eletrônico, para fins de estudo e pesquisa, desde que citada a fonte.

Catalogação na Publicação
Serviço Técnico de Biblioteca
Faculdade de Arquitetura e Urbanismo da Universidade de São Paulo

Barrocal, Caio
Codes for creativity: a creative-processes-oriented
inquiry into designing interactive products powered by
generative systems / Caio Barrocal; orientadora Clice de
Toledo Sanjar Mazzilli. - São Paulo, 2021.
187p.

Dissertação (Mestrado) - Faculdade de Arquitetura e

Urbanismo da Universidade de São Paulo. Área de
concentração: Design.

1. Design. 2. Interface Multimídia. 3. Sistemas Autônomos.

4. Interação Homem-máquina. I. Mazzilli, Clice de Toledo
Sanjar, orient. II. Título.

Elaborada eletronicamente através do formulário disponível em: <http://www.fau.usp.br/fichacatalografica/>

Codes for creativity
A creative-processes-oriented inquiry into designing interactive
products powered by generative systems

códigos para criatividade

uma investigação orientada a processos criativos sobre o design de produtos
interativos suportados por sistemas generativos

Caio Barrocal,
BSc Computer Science (University of São Paulo, 2018)

Master’s thesis submitted to the Design Program of the School of Architecture

and Urbanism (FAU) in partial fulfillment of the requirements for the degree
of Master of Science in Design at the University of São Paulo.

Thesis Supervisor: Clice de Toledo Sanjar Mazzilli (Associate Professor at

FAU-USP)

This version was revised and adjusted in relation to the original one, under
the responsability of the author and consent of the supervisor. The original
version, in digital format, will be archived at the Faculty Library.
São Paulo, Brazil - February 18th, 2022.

São Paulo, Brazil

Dez, 2021
Candidate: Caio Barrocal
Title: Codes for creativity: A creative-processes-oriented inquiry into
designing interactive products powered by generative systems

Master’s thesis submitted to the Design Program of the School of Architecture

and Urbanism (FAU) in partial fulfillment of the requirements for the degree
of Master of Science in Design at the University of São Paulo.

This thesis has been reviewed and approved by the following committee
members:

Prof(a). Dr(a).:

Institution:

Evaluation:

Prof(a). Dr(a).:

Institution:

Evaluation:

Prof(a). Dr(a).:

Institution:

Evaluation:

Date: ___ / ___ / ______

Abstract

Barrocal, C. (2021) Codes for creativity: A creative-processes-oriented

inquiry into designing interactive products powered by generative
systems (Master’s Thesis). School of Architecture and Urbanism (FAU),
University of São Paulo, São Paulo.

Relying on a multidisciplinary theoretical foundation with

contributions from the disciplines of design and computing, this research
seeks to understand the creative processes employed by contemporary
professionals for designing interactive products powered by generative
systems. Such motivation comes from the idea that generative systems
pose significant changes for the design process when they are employed
to synthesize intended products entirely or partially, thus suggesting that
producing scientific literature on the subject provides design maturity for
practitioners and academics interested in their application. Therefore, to
grasp the aforementioned creative process and enable a qualitative multiple
case strategy, we began by building a comprehensive theoretical foundation on
the themes of creative processes in design; interaction design; and generative
creation and computational thinking in design. These foundations provided
us with relevant theoretical patterns, which were synthesized into a first
model to be confronted with the case studies for verification. To carry out this
process and achieve this research’s goal, we relied on in-depth interviews with
professionals and on the analysis of final and partial deliverables provided by
them to picture the processes undertaken and propose an accurate model
comprising the relevant aspects of the creative process studied.

Keywords: generative design, interaction design, generative creation in

design, computational thinking in design.
Resumo

Barrocal, C. (2021) Códigos para criatividade: Uma investigação

orientada a processos criativos sobre o design de produtos interativos
suportados por sistemas generativos (Dissertação de Mestrado). Faculdade
de Arquitetura e Urbanismo, Universidade de São Paulo, São Paulo.

Apoiando-se em uma fundamentação teórica multidisciplinar

com contribuições das disciplinas do design e computação, esta pesquisa
busca compreender os processos criativos empregados por profissionais
contemporâneos no design de produtos interativos suportados por sistemas
generativos. Tal motivação vem da ideia de que os sistemas generativos
instigam mudanças significativas no processo de design quando são
empregados para sintetizar total ou parcialmente os produtos pretendidos,
sugerindo que a produção de literatura científica sobre o assunto possa
enriquecer as referências para profissionais e acadêmicos interessados​​
em sua aplicação. Portanto, para apreender o referido processo criativo
e possibilitar uma estratégia qualitativa de estudos de casos múltiplos,
começamos por construir uma base teórica abrangente sobre os temas de
processos criativos em design; design de interação; e criação generativa e
pensamento computacional em design. Tal fundamentação nos forneceu
padrões teóricos relevantes, os quais foram sintetizados em um primeiro
modelo a ser confrontado com os estudos de caso para verificação. Para
realizar esse processo e atingir o objetivo desta pesquisa, contamos com
entrevistas em profundidade com profissionais e com a análise dos materiais
finais e parciais fornecidos por eles para retratar os processos empreendidos
e propor um modelo preciso abrangendo os aspectos relevantes do processo
criativo estudado.

Palavras-chave: design generativo, design de interação, criação generativa

em design, pensamento computacional no design.
Acknowledgments

This work represents so many things to me. After graduating in computer

science, I was hoping to continue studying and practicing the two themes I am
deeply passionate about: design and computing. Fortunately, I encountered
such places both professionally — working as a digital product designer
— and academically. During this journey, I was lucky to be surrounded by
amazing people who supported me and made this work possible through
many contributions. I would like to thank them with all my heart:

To my parents, Alvaro and Tania, for raising me as a curious man,

always believing in me and pushing me forward. I learned a lot with you, and
I hope you could learn a lot with me as well.
To Beatriz, my sister, for always caring for me and for making time to
contribute with amazing insights about this work.
To Clice Mazzilli, my supervisor, and Leandro Velloso for the
valuable contributions.
To Daniela Hanns, my first academic supervisor, for introducing me
to a field I realized is the one I wish to dedicate my career to.
To Alexandre Rangel, Bruno Aricó, Caio Velenosi, Camila Gonçalves,
Dimitre Lima, and Gabriela Castro, for accepting to participate in this research
and to share their works with me.
To Thássya Macedo, Duda Rodrigues and my former colleagues at
FJORD São Paulo, for guiding and inspiring me during my first steps as an
interaction designer.
To Adauto, Alice, Bel, Camilla, Cocito, Fernanda, Guilherme, Inaiá,
Jean, Jorge, Luisa, Murilo, Nina, and Tati, my friends, for being so kind to me
and making this journey definitely more manageable.
And to Danilo, for all the love, companionship, and for taking
me as I am.
 Introduction
14

1 Research Foundations
26

28
38
1.1 Creative processes in design
1.2 Interaction design
56 1.3 Generative creation and computional thinking in design
70 1.4 Main contributions and theoretical proposition

2 Method
76

78
79
2.1 Overview
2.2 Formulating the research question
79 2.3 Research foundations
80 2.4 Unity of analysis, selection of cases, and corpus construction
81 2.5 Pilot study and thesis committee meeting
84 2.6 Data Collection
86 2.7 Model and analysis

3 Case studies
88

91
104
3.1 Heartbits
3.2 Tocando Brasília
118 3.3 Futebol Arte
133 3.4 Atmosfera and Metaespaço

4 Results
148

150
151
4.1 First move
4.2 Second move
153 4.3 Third move
5 Final Considerations
172

174
175
5.1 General considerations
5.2 Limitations of this work
176 5.3 Insights for further research

References
178

List of Figures
184
Introduction

Relying on a multidisciplinary foundation with contributions from 1. The Ulm School of Design was founded in
1953 by Inge Aicher-Scholl, Otl Aicher and Max
the disciplines of design and computing, this study seeks to answer the Bill. The school gained international relevance
following question: What are the main aspects of the creative processes by emphasizing the holistic, multidisciplinary
context of design, beyond the Bauhaus
employed by contemporary professionals for designing interactive approach.
products powered by generative systems?
When facing this question, the reader might notice that our starting
point is that there are differences to be understood between design processes
in which generative creation is employed and conventional ones — those in
which such approaches are not used. Therefore, we rely on a multiple case
study strategy focused on contemporary practices to induce hypotheses and
insights that might allow us to understand them. In addition, this work is also
motivated by expanding the resources of academic production concerning
generative creation as a participant and a characterizing aspect of creative
processes in design, especially in interaction design.
Before delving deeper into the investigation, though, relevant
concepts must be introduced along with a historical panorama of the context
in which generative creation was enabled.
The use of the computer as means of creative production is a
relatively recent phenomenon. The first relevant experiments were executed
in the 1960s, mainly in Europe and the USA, when programmers and artists
began exploring algorithms and machines to generate shapes and sounds. At
this time, and in a pioneering spirit, people like Vera Molnar, Manfred Mohr,
and Lillian Schwartz saw the computer as a promising creative medium,
learned to program, and played a leading role in the computational art scene
by designing visual pieces and innovative interactive experiences.
One of the first formal opportunities for establishing the computer
as a creative setting amongst artists and designers happened when Max
Bense (1910-1990) — an influential German philosopher and academic of the
fields of aesthetics and semiotics — invited the mathematician Georg Nees
(1926-2016) to expose his computer-generated graphics in an experimental
concretist exhibition in 1964 (Figures 1 and 2). In the following year, Nees and
Bense published the booklet “rot 19. Computer-Grafik”, one of the primary
14
 — if not the first — publications that presented the computer as a means of
creative production. A few computer-generated works have been exposed in
the booklet, along with the algorithms behind their creation (Nake, 2018).
Both initiatives stem from Bense’s enthusiasm for using
computational thinking in design to formalize aesthetic processes and
Figure 1 (top): Georg Nees. Andreaskreuz. propose a new design methodology strongly influenced by scientific methods,
1968.
Figure 2 (middle): Georg Nees. 23-corner
something that marked his trajectory at the HfG-Ulm1. The appeal of seeing
graphic. 1965. design as the creation of systems and patterns capable of generating products,
15
rather than the direct creation of unique artifacts, was continued by Horst 2. Reas and Fry were graduate students at the
MIT Media Lab and members of the Aesthetics
Rittel (1930 - 1990) when he replaced Bense at the HfG-Ulm in 1958 (Neves, and Computing research group created and
2015). coordinated by John Maeda.
3. Java is an object-oriented programming
Another symbolic moment for the establishment of computing as a language. It was created in the early 1990s
creative medium and for disseminating its aesthetic qualities amongst a wider by James Gosling and his colleagues at Sun
Microsystems.
audience was the Cybernetic Serendipity exhibition. The event was curated
by Jasia Reichardt and took place at the London Institute of Contemporary
Art in 1968. On occasion, computer-generated images were exhibited along
with music, poetry, dance, and animation produced totally or partially in
the “new medium”. In addition, the initiative resulted in proposals for new
interfaces and visual pieces, such as the algorithmically-created pair made
by Kerry Strand on a Calcomp 770 computer connected to a plotter from the
same manufacturer (Figures 3 and 4) (Reichardt, 1968).
Simultaneously, in Brazil, intellectuals like artist and designer
Waldemar Cordeiro (1925-1973) and physicist Giorgio Moscati experimented
with generative algorithms and programming languages as they partnered
in using the computers of the University of São Paulo to produce visual art.
In 1969, this collaboration resulted in a series of pictures, “Derivatives of an
image” (Figures 5, 6 and 7), in which different results were obtained by the
same algorithm, only by varying the degree of a differential equation created
by them.
Alongside the efforts made by scientists, engineers, and companies
in pushing computer graphics technologies and designing aesthetically
instigating interfaces, the use of computers as creative material has evolved.

16
 This outgrowth allowed them to occupy a symbolic space in popular culture,
everyday life, and the working processes of several professionals.
However, accompanied by successive simplifications of use and
the creation of proprietary software tools, this adhesion also contributed to
the positioning of the computer as a “black box” — a concept proposed by
Flusser (2002) to illustrate the power relations and limitations inherent to
using pre-programmed tools. Omine (2014, 38) contributed to this discussion
by suggesting that if software allows regular people to use computers, on the
other hand, it limits the computer to a pre-programmed device. Essentially,
when using any type of software, users work within the limitations imposed by
it. Professional designers’ work processes, for example, have been commonly
mediated by proprietary tools such as Adobe Photoshop and Adobe Illustrator
for over three decades now.
Nevertheless, creative experimentation with the computer beyond
the “black box” has not stopped. The algorithmic works endorsed by Max
Bense and produced by the pioneers of computational art motivated several
other professionals to continue studying and developing computing as
a fruitful creative medium, extrapolating the uses delimited by available
proprietary software. The emergence of Processing — a programming
language created in 2001 by Casey Reas and Ben Fry2 —, for example, was a
milestone for these intentions.
As an extension of the programming language Java3, to which native
Figure 3 (previous page / bottom left): functions were added in order to facilitate the creation of aesthetic elements,
Kerry Strand. Hummingbird.1968.
Figure 4 (previous page / bottom right):
Processing emerged with the goal of becoming a sketching-software, an
Kerry Strand. Crest. 1968. educational tool focused on programming for a visual context. However,
Figures 5, 6 and 7 (top): Cordeiro and
Moscati. Derivadas de uma Imagem
as time went by and the number of users increased, the language received
(Derivatives of an Image). 1969. improvements and evolved to become one of the main references of generative
17
tools, even serving as a professional alternative to the aforementioned
proprietary software.
Formally, generative creation consists of the design of systems or
processes, such as a set of natural language instructions, a computer program,
or a machine, which are put into execution with a certain degree of autonomy
contributing to or resulting in a complete work (Groß et al., 2018; Grünberger,
2019; Galanter, 2003). Such autonomy can be guaranteed in several ways:
through the writing of instructions that respond to randomness; by designing
an interface that has an expected general behavior but delivers a different
experience depending on unpredictable inputs captured by the computer; or
even through complex mathematical models such as the capital market and
the weather.
The critical point is that computational intelligence will be used
as an active participant in the creative process and not only to support the
decisions made (Mountstephens & Teo, 2020) In design, the now added
computational complexity promotes a fundamental change in the creative
process as designers are no longer executors of tasks, but conductors. Role
that Groß et al. (2018, p.5) consider to be that of an “orchestrator of decision-
making processes”. Essentially, this type of creation gives up total control,
which is partially conducted by the computational intelligence of the chosen
system.
Whether due to the unpredictability of results, possibilities for
parameterization and optimization, or the ability to support artifacts that
respond in real time, several designers, programmers and artists such as Dimitre
Lima, Patrik Hübner, Casey Reas, Memo Akten, Ben Fry, Tim Rodenbröker,
Alexandre Rangel, Jarbas Jácome, Guto Requena, Stuart Batchelor, Manfred
Mohr, and Vera Molnar have been relying on generative creation to deliver
artifacts with instigating aesthetic and functional appealing. In design, more
specifically, generative systems can enable the production of flexible visual
identities, objects and packaging, fonts and infographics, and interactive
artifacts — the outline of this research — as illustrated by the following
examples.
German designer Patrik Hübner created in 2018 an example of how
generative systems can be employed in the design of interactive products.
Hübner was challenged to design a website that could emphasize the forces
of nature involved in the production of Brute’s wines and explore the harsh
climate of the German city of Hamburg, where grapes are grown, as a symbolic
and aesthetic differential. The designer then developed a website powered
by a generative system fed with data related to wind speed, temperature,
Figure 8 (next page/ top): Screenshots of the
sunlight, and rain, responding in real-time to weather stimuli (Figure 8). With interface designed by Patrik Hübner for Brute.
this input, the system manifests unpredictable behaviors and visuals that are 2018.
Figure 9 (next page/ bottom):
still consistent with the values proposed
​​ for the brand. In addition, the user Materializations of the brand’s visual identity
can interact with the page through movements of the mouse. Visual objects designed by Patrik Hübner for Brute. 2018.

18
19
20
 produced by the system developed by Patrik Hübner were also applied in
other materializations of the brand’s visual identity, such as packaging and
advertising posters (Figure 9). Notably, the Initiative was nominated for the
2018 Cannes design awards — in the brand identity category — and for the
2019 German design award (Hübner, 2018).
The Programming Posters series created by German designer Tim
Rodenbröker in 2018, is another example of generative creation in interaction
design. In this project, Rodenbröker sought to explore generative design
to experiment with visual languages and ​​ reimagine the poster for a digital
context (Figures 10 and 11). Therefore, the work reckoned on a system that
computationally generated graphical objects that composed the posters. To
do so, the system was connected to sensors and powered by real-time data
from the users’ interactions. At the same time, this data was used to modulate
the behavior of the compositions to synthesize interactive experiences (Figure
12).
Our last example is the project created by Daniela Hanns, Leandro
Velloso, and Mauricio Galdieri for the exhibition Arquinterface, held between
November 13th and December 13th, 2015, at the Avenida Paulista in São Paulo,
Brazil (Figure 13). For the so-called Fixos_fluxos project, a generative system
was developed, powered by environmental and traffic data from the avenue
— supplied by local governmental companies — (Figure 14), and employed
to synthesize interfaces capable of expressing the perception and experience
of the street. Furthermore, the project relied on the lights on the facade of the

Figures 10 and 11(previous page / top): Tim

Rodenbröker. Programming Posters. 2018.
Figure 12 (previous page / bottom): Tim
Rodenbröker. Programming Posters. 2018.
Figure 13 (current page / bottom):
Photography of the facade of the FIESP
building, in São Paulo, during the presentation
of the project. 2015.

21
FIESP building and on an Android app to transform the collected data into
visual and sound elements.
Motivated by a vibrant production we exemplified through the cases
above, this research intends to propose a model for the creative processes
in question to holistically understand how generative systems integrate and
influence them. As discussed at the beginning of this work, our starting point
is that there are differences to be understood between processes in which
generative creation is employed and conventional ones — in which such
approaches are not used. As an attempt to delimit and illustrate the scope
of this research, the following goal has been pursued: To propose a model
containing relevant aspects of the creative processes undertaken by
contemporary professionals when designing interactive products
powered by generative systems.
Concerning its relevance, generative systems can be used in the design
of interactive products because they can provide aesthetic and functional
differentiation, something potentialized by the greater availability and ease
of access to sensors and digital data — which can feed this type of system. In
addition, the emergence of technologies and programming languages f​​ ocused
on non-specialists fostered experimentation with computing as a creative
material, which placed generative creation as an accessible and productive
field even for designers who are unfamiliar with computer science. Through
the current research, we also intend to contribute to the field by making such
systems more approachable regarding how and when they are employed, thus
increasing the understanding of generative creation as a participant in the
creative processes involved in designing the artifacts in question.
Lastly, as a critical counterpoint, authors such as Couldry and Mejias
(2019), Zuboff (2018), and O’Neil (2016) discuss the harmful impacts of
pervasive technologies and business models based on autonomous systems
and data capture in our lives and social organizations. Recent documentaries
such as The Social Dilemma (2020), directed by Jeff Orlowski, and The Great
Hack (2019), directed by Amer and Noujaim, also address the subject and
bring it into a more popular language. Despite not being the focus of this
research, discussing these issues in the scope of design and delving deeper
into the functioning and logic of this type of artifact might promote a critical
perspective for future designers of digital products.

Introduction to method

The nature of this research is qualitative and based on a multiple

case study strategy. Such an approach was selected because of the exploratory
nature of our question, its contemporaneous scope, and the impossibility of
Figure 14 (previous page): Representation of
controlling the phenomenon being investigated. Stake (2000) refers to case the Avenida Paulista and the data sources used
study approaches as a good choice for generating understanding, experience, in the project. 2015

23
and conviction regarding a specific subject. Yin (2014), in turn, highlights the
practical nature of the strategy as he acknowledges its potential to investigate
contemporary phenomena in their context. Another critical motivator for
this choice was the complex relationships involved in understanding creative
processes — it might raise a myriad of aspects related to the process and
designers’ backgrounds and beliefs. An assortment of variables should be taken
into account at the same time that delimiting them might be complicated
and undesirably reductive. That said, a holistic approach was favored (Yin,
2014). Similarly, Gray (2012) states that case studies are precious and valuable
when the purpose is to explore questions in which relationships might be
ambiguous and uncertain. However, despite highlighting the exploratory
potential of case studies, the author acknowledges that the method relies on
a deductive approach which reflects on the need of previously elaborating a
theoretical foundation to guide the collection and analysis of data.
Therefore, our research began with the construction of a theoretical
foundation capable of sustaining our case studies. As Yin (2014) referred to,
the intention was to select and organize the “study propositions” to guide
them. Such a foundation is addressed in chapter 1. Nonetheless, the studies
mentioned above have been executed with projects of interactive products
created by professionals or studios, and in which generative creation has
been employed as a central element. Still, because we understood that
information concerning the creator and the creative process was necessary
to answer our research question, the pair professional-process, or team-
process, was considered our unity of analysis. Additional criteria for selecting
cases are documented in chapter 2 along with a complete discussion of the
methodology we followed.
Finally, to ensure reliability and make a more accessible contribution
to the field, an online database4 was set up with the cases studied —
professionals, their creative processes, and the interactive products they
developed using generative systems.

Structure

This thesis is composed of four chapters: Research Foundations, Method,

Case Studies, and Results. The first of them is divided into three subchapters
representing this work’s conceptual layers: creative processes in design,
interaction design, and generative creation and computational thinking
in design.
In subchapter 1.1 — creative processes in design, we build the
repertoire to describe and understand the creative processes investigated
adequately. Relying on authors such as Sawyer, Cross, Lawson, and Dorst, the
research is appropriately framed as an investigation of creative processes in
design. In addition, definitions and models regarding the creative activity and
24
4. https://caiobarrocal.format.com/ its specificities when in a design process are discussed.
codes-for-creativity
In the second subchapter — interaction design, we make our
research corpus more approachable. In other words, to enable interaction
design processes to be interpreted, we rely on the field’s literature to answer
central questions, such as: “What is interaction design?”, “What are the main
approaches ?”, “What is a conventional interaction design project like?” and
“Which models have been guiding the creation of interaction designers,
especially in the professional practice?
Finally, the subchapter on generative creation and computational
thinking in design draws a historical and conceptual parallel between
design, algorithmic creation, and generative creation. Therefore, authors,
references, and definitions are presented to allow the delimitation of this
study’s object along with important theoretical propositions about the
participation of generative creation in design processes. In this subchapter,
generative creation is defined, the motivations for its use are raised, and
its differences are introduced compared to other design approaches. We
also discuss the possible idiosyncrasies of creativity within an intersection
between computational thinking and design thinking.
In the second chapter — method, this research’s methodology is
fully presented along with partial results and improvements suggested by
the pilot study and the thesis committee. Then, after being improved, the
foundations were transformed into a model to be successively evaluated and
verified through the case studies discussed in chapter three.
Finally, in the fourth chapter, results are discussed, and our research
question is answered. To this end, this chapter summarizes the evolution
through which the model has gone throughout the research and presents its
final version, accompanied by the last discussions and inferences.

Figure 15 (previous page) : Illustration of the

method followed.

25
Chapter 1
Research Foundations
1.1 Creative processes in design

1.2 Interaction design

1.3 Generative creation and computional

thinking in design

1.4 Main contributions and theoretical proposition

Research foundations

1.1 Creative processes in design

Design is an activity associated with creativity and creative fantasy, 1. “Behaviourism is a highly influential
academic school of psychology that dominated
the spirits of invention and technical innovation. The design process is psychological theory between the two world
often seen as a sort of act of creation. It is certainly a creative process. wars. Classical behaviourism was concerned
exclusively with measurable and observable
However, design does not take place in a vacuum, with a completely free data and excluded ideas, emotions, and the
choice of colors, shapes, and materials. Each design object is the result consideration of inner mental experience and
activity in general.” (Britannica, 2019).
of a development process influenced by various — not only artistic —
conditions and decisions (Burdek, 2005, p. 225).

Studying creativity and the phenomena that support it gained popularity

and relevant funding during the XX century, as leaders began recognizing it
as an essential element for economic success and the solution of complex
social problems. More specifically, the first modern studies about creativity
were executed during the 1950s and 1960s. In the beginning, the focus was
on understanding creativity by researching so-called exceptional creative
personalities. Influenced by a predominant behaviorist1 tradition, many
researchers studied the lives and practices of artists, scientists, and designers
socially recognized as exceptional creators, in order to identify general
aspects and traits that could somehow explain the conditions and paths
through which a person should go in order to be creative (Sawyer, 2012, p. 63).
Many traits were indeed identified as related to a creative personality
but none that could determine it. It is true that certain types of personalities
are more inclined towards creativity, however this inclination seems to be the
result of a very complex mixture of different traits. The rise of the importance
of cognitive psychology changed the focus of creativity research from studying
personality traits to understanding mental processes shared by all individuals
in their act of creation. These “representational structures of the mind, their
interconnections, and the mental processes that transform them”, as referred
to by Sawyer (2012, p. 87), became the center of research in the field and also
the foundations of a definition for the creative process.
As stated by Lubart (2018, p. 3), “the creative process can be defined
as a sequence of thoughts and actions that comprise the production of
work that is original and valuable”. However, he also acknowledges that this
28
 definition needs to be accompanied by further explanation. Despite using the
word ‘sequence’, Lubart explains that it refers to the existence of a chain of
events, “which unrolls over time, with a beginning and, potentially, an end”.
Such sequences may be non-linear, and characterized by diverse steps, phases
and activities. ‘Thoughts and actions’, according to the author, refer to “both
internal and external operations that contribute to the emerging production”,
which is essentially an outcome that can be either tangible or intangible,
expressed in some permanent or more ephemeral form (visually, verbally,
mathematically and so on).
The chain of thoughts and actions would only be considered a
creative process if its outcome was something original and valuable though.
Such a novelty not only “must be present, at least, for the person, or people,
involved in the process” (Lubart, 2018, p. 4), but also correspond to goals and
needs within the context. The author also uses these last acknowledgments to
distinguish the terms ‘creative process’ — defined above — from ‘process of
creation’ — that can bring something into being but through a repetitive act
that creates more of an existing item.
One of the first models for the creative process was proposed by
psychologist Graham Wallas in 1926, as he aimed to explain creativity through
four sequential steps: preparation, incubation, insight, and verification (Figure
16). In preparation, the creator looks for the necessary knowledge so that the
problem can be tackled. Incubation represents when the idea recedes to the
subconscious mind, where it continues to be elaborated and influenced by
other experiences that might happen. The moment of insight is when creators
“have” their ideas, and lastly, in the moment of verification, these ideas are
judged and refined (Sawyer, 2012, p. 89).
As attention to intelligence and problem solving in the mid twentieth
century grew, researchers of the field seeked to go beyond the “popular four-
stage description of the creative process” (Lubart, 2018, p. 7). These initiatives
resulted in valuable contributions about the cognitive operations and
problem-solving abilities behind creative activity, divergent and convergent
thinking, and the role of evaluation during them.
Moreover, Graham’s model illustrates an individualist approach
to creativity — a tradition in creativity research that looks for answers by
studying a single person while this person is engaged in creative processes.
Sawyer (2012, p. 7) explains that this approach is associated with “first-wave
personality psychology — which studies the traits of creative people — and

Figure 16 : Visual representation of the Wallas

model.

29
second-wave experimental cognitive-psychology — the branch of psychology
that studies how people think, perceive, learn and remember”. When it comes
to defining creativity, the author still explains that researchers of the field
can be grouped into two major categories: the already discussed individualist
approach, and a sociocultural one — which studies creative people working
together in social and cultural systems.

Despite being complementary, Sawyer (2012, p. 8) points out that

these two approaches define creativity differently due to the also different
analytic focus. The individualist definition would be that “creativity is a new
mental combination that is expressed in the world”, while the sociocultural
one would be that “creativity is the generation of a product that is judged
to be novel and also to be appropriate, useful, or valuable by a suitably
knowledgeable social group”.
By examining many past contributions of theories and models to
creativity, Sawyer (2012, p. 88-89) created the following “integrated framework”
that describes the eight stages of the creative process. Like Lubart (2018, p.
9) — that suggests that “the creative process is an orchestrated symphony
of more specific processes that play together, or in sequence as part of the
whole” —, Sawyer (2012, p. 88-89) agrees that despite being represented
as a linear process with specific steps, there is a consensus in the field that
creativity is not resulted by a single, unitary mental process, but from many
different ones that could be associated with the stages below.

1. Find and formulate the problem. The first step is to identify a good
problem and formulate the problem so that it will be more likely to lead to a
creative solution.
2. Acquire knowledge relevant to the problem. Creativity is always based
on mastery, practice, and expertise.
3. Gather a broad range of potentially related information. Creativity
often results from mindful awareness of unexpected and apparently unrelated
information in the environment.
4. Take time off for incubation. Once relevant knowledge and apparently
unrelated information have been acquired, the unconscious mind will process
and associate that information in unpredictable and surprising ways.
5. Generate a large variety of ideas. Unconscious incubation supports the
generation of potential solutions to the problem, but conscious attention can
also result in possible solutions.
6. Combine ideas in unexpected ways. Many creative ideas result from a
combination of existing mental concepts or ideas.
7. Select the best ideas, applying relevant criteria. The creative process
typically results in a large number of potential solutions. Most of them will
turn out not to be effective solutions; successful creators must be good at
30
2. IDEO is a design company known for its
human-centered, interdisciplinary approach. It
was founded in 1991, in Palo Alto, Californi

selecting which ideas to pursue further.

8. Externalize ideas using materials and representations. Creativity is
not only about having an idea; creative ideas emerge, develop, and transform
while being expressed in the world.

Once it improves the understanding of the results and the nature

of the creative activity, Sawyer’s framework (2012, p. 88) is undoubtedly
beneficial. The author, however, recognizes that it focuses exclusively on
“what’s going on in the creator’s mind” — an individualist approach —,
which is not always sufficient to explain real-world creativity and its evident
collaborative and socio-cultural nature. For example, when working in
groups, individuals naturally have their creative processes influenced by
additional aspects inherent to collaboration. Elements that may empower or
diminish creativity, depending on how these groups are created and managed.
Nevertheless, groups outperform individuals in a series of relevant tasks,
such as spatial problems (problems that involve three-dimensional spatial
information and manipulation) and problem finding (when the nature of the
problem is not well understood and needs to be formulated).
Since there are different approaches, settings, and goals to creativity,
many models have been proposed throughout the past decades. Some of them
also intended to capture the more collaborative elements of it. A good example
is a model created by IDEO2, with five different stages: understand the market,
observe real people, visualize new concepts, evaluate and refine prototypes,
and implement the new concept. Besides being naturally collaborative, the
model also incentives practical experiments, and rapid decision making due
to the nature of the consulting services provided by the firm.
Since creativity is “at the heart of design, at all stages throughout
the design process” (Baxter, 1995, p.61), studies and models about it might
contribute to a much greater understanding of the processes undertaken
by those tackling design problems. Something that might promote a more
mature overall design practice and contribute to the discipline as a whole.
As suggested by Lubart (2018, p. 13), for example, “it may be possible to
Figure 17 (top): Visual representation of
Sawyer’s model. enhance creativity by training people to engage in certain process steps”,
31
which suggests that consciously reflecting and exercising creative activity
might indeed empower designers and other professionals approaching design
problems. But is problem-solving in design different from any other problem-
solving at all?
Designers are individuals, thus they will still be executing mental
processes described by Sawyer’s model. However, we can understand design
challenges as problems that “are both goal-oriented and constrained and
which depend upon a designer’s perception of the context of the problem”
(Kelly & Gero, 2021, p. 3). A statement that allows us to distinguish these
specific problems from other ones, say, those that may not be goal-oriented
and constrained — such as some artistic activities involving self-expression,
and those in which all variables are known beforehand, such as some math
puzzles “in which the designer’s perception of the context is irrelevant to
the solution”. Lawson and Dorst (2009, p.28), for example, refer to design
as “a mixture of creativity and analysis” because despite having to creatively
develop propositions, a designer’s creativity “is not unrestricted”. The project
must achieve a certain set of goals, create value for both prospective users and
the client, and so on.
Cross (2006, p.99) argues that design is also different from
conventional problem-solving approaches due to the specific ways in which
problems are framed and solutions are generated throughout a project. Such
idiosyncratic “knowledge that has been developed relating to how people
reason when engaging with design problems” as referred to by Kelly and Gero
(2021, p. 2) can be considered design thinking.
Being the core of design thinking, when framing a problem, a
designer cognitively, yet unconsciously, builds a complex aggregation of
interrelated knowledge (the frame) that becomes the lens through which the
design problem is understood and within which design actions are envisioned
(Kelly & Gero, 2021, p. 3). In other words, when faced with a design problem,
designers appear to constantly build and rebuild the frame as they are looking
for the best ways to organize relevant aspects of both the problem space
and the solution space. According to Cross (2006, p. 102), when framing,
“designers select features of the problem space to which they choose to attend
and identify areas of the solution space in which they chose to explore”.
Because this frame is constantly changing, and since “the problem cannot be
fully understood in isolation from consideration of the solution”, designers
tend to coevolve these two spaces by using solution conjectures as the means
to increase their understanding of the problem until a satisfactory result is
produced.

Framing as a characterizer of design thinking explains:

- Why wicked problems are good candidates for this type of thinking
32
 (variables are unknown and the knowledge needed to address the problem
is incomplete);
- Why designers benefit from appropriately researching users, the context, and
similar design solutions — strategies that will contribute to the elaboration of
the frame towards a proper design solution;
- And why design solutions tend to be very specific to the design problem
tackled (Kelly & Gero, 2021, p. 3).
To capture the idiosyncrasies mentioned above and other core
aspects of design, Lawson and Dorst (2009, p.50) proposed that a successful
design initiative is composed of the following five categories of abilities:
formulate, represent, move, evaluate and manage. Along with them, they
suggested the following visual representation to picture the components of a
generalist design process:

Formulating

In a design project, the problem is rarely well defined. Either because

it has not been sufficiently specified yet or because certain aspects need to be
more explored. Still, even when a project’s scope is extensively defined, it is
a quality of design thinking to experiment with other ways to frame it (Cross,
Figure 18 (above): Reproduction of the visual
model proposed by Lawson and Dorst (2009). 2006, p.100). Moreover, the execution of a design project is also strongly
33
solution-oriented instead of problem-oriented. Designers tend to spend more
time developing solutions and assessing their adequacy than scrutinizing
the given problem until every detail is apparent. There is a common belief
that the complete definition of a problem must precede execution, but such
conjectures of solutions are the means to the necessary understanding of the
problem and the refinement of what is being proposed (Cross, 2006, p.100).
Despite suggesting that formulating needs to happen at the
beginning of a project might be simplistic, designers certainly need to have a
keen eye for understanding and exploring the challenge that motivates their
creation. According to Lawson and Dorst (2006, p.52), “the quality of design
work produced depends as much on the ability of the designer to frame the
problem relevantly and productively, as on the ability to arrive at an interesting
solution from this standpoint”.
The authors still highlight two main steps within formulating:
identifying and framing the problem. When identifying, designers find and
organize the many relevant components of the problem. In other words,
they “name” the entities that characterize the problem and analyze their
aspects and impact on the overall strategy. Framing (which has already been
discussed), on the other hand, represents designers’ ability to build the lens
through which the problem will be understood and tackled (Lawson & Dorst,
2006, p. 51).

Representing

Designers tend to constantly represent and externalize ideas, thoughts,

and concepts related to the challenge they are supposed to solve. Besides
illustrating the direction towards the solution, tools and methods such as
sketches, models, low and hi-fi prototypes, mockups, and computational
representations also allow designers to evaluate and communicate what is
being proposed (Lawson & Dorst, 2006, p. 108).
Besides helping designers to envision solutions and to anticipate
challenges and mistakes, representation-related abilities enable developments
that could be either vertical — when improvements and refinements of an
idea that is currently being elaborated are proposed — or horizontal — when
alternatives to the current idea are generated (Cross, 2006, p. 108).
This dialog between designers and relevant representations
throughout the project is essential for mastering the context and the
tackled problem. Thus, more than some documentation, these activities are
considered at the core of design work to enhance communication, alignment
between parts, and overall understanding (Lawson & Dorst, 2006, p. 54).

Moving

34
As previously discussed, design work is notably solution-oriented. In other
words, once design problems may never be successfully converted to well-
defined ones — to which there are answers for every variable involved —
designers seek satisfactory solutions instead of the optimal ones. This
propositional nature of design work also leads designers to think in terms of
a considerable, yet balanced, amount of conceptual alternatives (Cross, 2006,
p. 103-107).
The generation of solutions is so central to design projects that
sometimes it is mistakenly believed to be the only one. However, whether
due to the insertion of a novelty to the design process, a refinement, or a
new feature for the product being created, it is through these constant moves
— design propositions — that a project is navigated from beginning to end
(Lawson & Dorst, 2006, p. 54).
Still, because moving is an essential and complex part of the design
process, Lawson and Dorst (2006, p. 54) also relied partially on the distinction
of forms of creativity (p and h) made by Margaret Boden (1990) to classify the
ideas generated during a process and infer its originality:

1 - An idea may be novel in all of history, which is considered rare in our

contemporary hyperconnected society (h);
2 - An idea might be novel for the designer or the team that is undertaking a
creative process (p);
3 - An idea might be utterly novel within a specific creative process, even if it
had already been explored for the proposal of other creations; and
4 - An idea might derive from another one that has already been proposed in
the process.

Evaluation

Designers must know which solutions to pursue and when they

are ready to stop, which requires analytic and evaluation abilities. On some
occasions, necessary criteria might be defined beforehand (e.g., a product
that needs to consume a specific amount of electric energy). These criteria
might even be numerical so that machines and algorithms can evaluate the
project. However, most common design projects will require designers to
judge multidisciplinary objective and subjective dimensions of the ideas and
solutions being discussed and know when to stop this judgment (Lawson &
Dorst, 2006, p. 56).
Notwithstanding, Lawson and Dorst (2oo6, p. 56) also add that
evaluation in design is much more than choosing one among a few project
alternatives according to objective or subjective criteria. The authors see
this process as a process of deliberation, once it is essentially susceptible to
differences in point of view regarding what should be considered a good or
35
bad design. Some designers and critics, for example, choose to follow a more
practical point of view — in which an artifact is considered good if there are
people interested in buying and using it — while others argue that quality
is inherent to everything we do, apart from how the audience receives it.
Lastly, others consider projects aligned with their core values (e.g., simplicity,
honesty, and originality) the good ones. In the end, evaluating designs often
involves measuring the importance of each one of these systems of values and
criteria so that they become the structure for decisions that need to be made
(Lawson & Dorst, 2006, p. 56).

Managing

Finally, when managing the process, designers are also reflecting on how
it is being executed. These are moments when they take a step back and
ask themselves if the undertaken creative process is good or bad. Through
management-related activities, designers can also analyze and identify the
many conceptual paths followed and decide which ones they should abandon
or keep pursuing. During these management moments, designers also judge
the overall adequacy of the creative process with the project brief, which
allows them to make necessary adjustments or plan partial deliverables
(Lawson & Dorst, 2006, p. 58-59).
After discussing the creative process and studying these thoughts
applied to a generalist design context, further knowledge regarding the
manifestations of the above-discussed concepts within an interaction design
practice is necessary. Such discussion is made in the following subchapter.
Before proceeding, though, we summarize the main contributions of
this subchapter through the sentence and the board below.

The creative process can be understood as a chain of thoughts and actions

that comprise the production of original and valuable work (Lubart, 2018;
Sawyer, 2012). Within a design context, due to the specific ways in which
designers frame problems and tend to coevolve problems and solutions
(Cross, 2006; Kelly & Gero, 2021; Lawson & Dorst, 2009), the mental processes
encompassed by generalist models of the creative process (Sawyer, 2012)
can be reorganized and reclassified into the set of activities formulate,
represent, move, evaluate and manage (Lawson & Dorst, 2009). Emerging
ideas in the process can also be classified in four different ways
regarding their originality (Lawson & Dorst, 2009).

36
37
1.2 Interaction design
Even if it is possible to build generative systems in the physical
world, it is through computers that their contemporary applications are
mainly conceived — especially after programming languages focused on
aesthetic creation such as Processing and openFrameworks became popular.
Moreover, since generative systems are not a specific technology or device
but a computational logic, their possibilities may evolve along with the overall
technological scenario. For example, if such systems were mainly used in the
creation of visual art, animated films, and interfaces with limited interactivity
during the XX century, today, they can be incorporated into websites and
support mobile apps, displays, and VR devices.
We start from the idea that a foray into interaction design can
point out essential theoretical contributions so that our research objects
(processes employed by professionals when designing interactive products
powered by generative systems) can be appropriately analyzed, described,
and understood. Apart from being focused on essential products of the digital
era, interaction design is technologically agnostic — the focus is on defining
how interactive products, systems, and services behave independently of the
platforms and devices that are supporting them (Saffer, 2009, p. 14). This is
also why we chose to study the discipline.
Interaction design can be understood as the discipline that seeks to
define the shape and behavior of interactive products, services and systems
(Goodwin, 2009, p. 5). Regardless of welcoming different purposes, during
interaction design projects, designers constantly answer questions such as:

1. What activities will the product or service support, and how?

2. What information do users need at each point in that process?
3. What information does the system need from users and the context?
4. How is functionality segmented and manifested?

According to Goodwin (2009, p. 4-5), those questions help

interaction designers shape products and services that are useful to human
needs and goals.
Another aspect highlighted by authors of the discipline is that
interaction design takes advantage of learnings from other “sister” fields, such
as human-computer interaction, visual design, product design, computing,
information architecture, and psychology. Saffer (2009, p.21) and Goodwin
(2009, p.5) attribute part of this multidisciplinarity to the fact that interaction
design has been treated as a formal discipline, or specific profession, for a
short time. “It is a young field, still defining itself and figuring out its place
among sister disciplines” (Saffer, 2009, p. 20). Furthermore, according to
Sharp, Rogers, and Preece (2019, p. 38), interaction design naturally draws
38
 from approaches of longer-established design disciplines, such as graphic
design, industrial design, and architecture. They illustrate what they call the
“components” of interaction design through the diagram below:

Essentially, interaction designers define what will be and what will cause the
interactions involved in a given product or service. However, the many above-
discussed intersections and the “generalist” aspect of the discipline foment
divergent points of view concerning the general objective of an interaction
design project. Saffer (2009, p. 4) categorizes them into the following three
statements:

1. A technology-centered view, through which the ultimate goal of designers

would be to turn “raw” inventions of engineers and scientists into artifacts
that people enjoy using;
2. A behaviorist view, according to which interaction design should aim to
define the behavior of artifacts, environments, and systems (e.g., products);
3. And a social interaction design view, according to which interaction
design would be inherently social, aimed at facilitating communication
between people through products and artifacts.

These different ways of perceiving the discipline become more

explicit, for example, when some authors define interaction design as the
design of “interactive products to support the way people communicate and
interact in their everyday and working lives” (Sharp et al., 2019, p. 9), while
others pose it as a discipline “focused on defining the form and behavior of
Figure 19 (top): Sharp, Rogers, and Preece.
interactive products, services, and systems” (Goodwin, 2009, p. 5).
Components of Interaction Design. (2019, p. 38). In addition to the three different ways of looking at the discipline,
39
Saffer (2009, p. 33) states that there are four distinct approaches to conducting
an interaction design project: a user-centered design approach; one
centered on the activity to be performed; a systems design approach; and
a last approach he named genius design, which is guided by the designer’s
expertise and intuition.
First, user-centered design is based on the simple assumption that
only users of the solution are capable of “knowing” how it should be. Because
of this, the primary and most important source of information throughout
the project is evidence obtained about or through potential users. In this
approach, a considerable time is spent understanding the worlds of the
people that might use the product: their preferences, background, emotions,
and expectations. Designers see themselves as the ones who will mediate and
facilitate this information towards the final artifact (Saffer, 2009, p. 33).
Sharp et al. (2019, p.39), for example, place interaction design as a
form of “making design” in which “the artifact’s use and target domain are
investigated by taking a user-centered approach to development. Users’
opinions and reactions to early designs are sought, and users are involved
appropriately in the development process itself. This means that users’
concerns direct the development rather than just technical concerns”.
A possible opposite to user-centered design is the genius design
approach, which is guided by the experience and intuition of designers (or
team), and in which design decisions are made according to their judgment
(Saffer, 2009, p. 43).
The activity-centered design approach, in turn, relies on the
understanding of the set of actions that compose the activity to be performed,
be it the preparation of a sandwich or the search for a job. This approach is
based on the “activity theory”, a model in vogue in the first half of the 20th
century, which considers tools an externalization of the mental processes
involved in acting or communication. In other words, the goal is to unravel
and understand the various actions, decisions, requirements, and limitations
that make up a given activity, as a means to propose tools that can, in a better
or more innovative way, get it done (Saffer, 2009, p. 37).
Finally, in systems design, professionals arrange specific components
and interrelated entities — systems — to develop final solutions. This design
approach is opportune when dealing with complex problems as it offers a
holistic perspective to the design process. Users and activities no longer
occupy the center of the design process. Instead, as illustrated by Figure 20,
they are seen as part of a context of use that can be described as a system,
along with its environment and main components. Designers’ job is to define
these relationships and components. Lastly, in spite of being commonly
referred to in the realm of digital systems, it is worth saying that systems can
also be composed of people, devices, machines, and objects, ranging from
a simple central heating system to entire governments or the stock market
40
 (Saffer, 2009, p. 38).
To illustrate systems design, Saffer (2009, p. 38) drew on the
discussion by Pangaro and Hubberly (2007) in defense of a rescue of
cybernetics as a valuable analogy for today’s designers. They relied on the
model of a generic system below as an auxiliary to professionals who must
address the design of artifacts for complex interaction contexts between
humans and the most varied types of machines.
Naturally, the approach also characterizes the process that
practitioners and academics believe an interaction design project must go
through. For instance, Sharp et al. (2019, p. 38) emphasize the similarities
between interaction design and other fields of design by choosing to explain
its specific activities and processes through the generalist double-diamond
model (Figure 21). They believe that interaction design follows the four
phases (discover, define, develop, and deliver) of the model but with a solid
user-centered foundation that determines the decisions and methods to be
considered during the process.
First, in the discovery stage, designers essentially seek to gain
insights to understand the problem space deeply. According to Sharp et al.
(2019, p. 41), “deciding what to design is key, and exploring the problem
space is one way in which to decide”. In the creation of a new version of
an existing interactive product, for example, investigating and analyzing
the problem space implies understanding what the current user experience
Figure 20 (top): Reproduction of the model of a
generic system: its goals, environment and main
is like; understand why a change is necessary; what requirements must be
components (Saffer, 2009). considered in the design of this new version; and understand in what terms
41
it is expected to improve the user experience. Since they advocate a user-
centered design approach, the authors naturally believe in an investigation
of problem space that primarily considers users’ realities, expectations, and
needs.
Furthermore, discovery activities end up collecting data that enables
the project definition. At this posterior stage, requirements, constraints, and
relevant aspects of the problem are transformed into a clear brief to orient the
execution of the project.
Sharp et al. (2019) also argue that the discovery and definition steps
of the double-diamond model can be grouped into a first (among four) basic
interaction design activities called requirements discovery. In such an
activity, the focus is on understanding target users and the value that a given
interactive product should deliver to them. Furthermore, this understanding
obtained through data collection and analysis becomes the basis of the
product requirements that will guide the project.
The remaining three basic activities of interaction design, according
to the authors, belong to the development stage of the double-diamond. The
first one — design of alternatives — comprises the production of simple
sketches, models, and also the detailed production that contemplates the
careful articulation of colors, sounds, images, and icons. In other words, it
Figure 21 (top): Reproduction of the interaction
encompasses both the proposition of nascent ideas and high-fidelity design design model proposed by Sharp et al. (2019, p.
deliveries. Prototyping — the second basic activity within the development 38).
Figure 22 (next page / top): Reproduction
stage — seeks to enable the test of solutions according to relevant criteria of the lifecycle model proposed by Sharp et al.
and user evaluation. Prototyping is also critical if we consider that interaction (2019, p. 51).

42
design involves the definition of not only visual aspects, but also product
behaviors, navigations, and responses. To this end, various prototyping
methods can be employed: from staging or creating wireframes on paper to
making sophisticated digital prototypes with very high fidelity (Sharp et al.,
2019).
Still in the development stage, the last basic activity of interaction
design is evaluation, which represents the processes employed by the
professionals to measure propositions in terms of a variety of criteria. In
this process, data about the experiences users have when interacting with a
specific product or prototype is used to judge the usability and acceptability
of the project (Sharp et al., 2019).
Finally, returning to double-diamond, the product is polished,
produced, and released at the delivery stage, possibly accompanied by
valuable specifications to guarantee its quality.
In addition to understanding the basic activities of interaction
design, it is also important to know how they relate to one another. An
organization that Sharp et al. (2019, p. 51) call the lifecycle model (Figure
22). Although many projects follow a conventional process of discovering
requirements, generating alternatives, prototyping, and evaluating, these
activities are expected to feedback and instigate changes in each other.
Also, as will be discussed further on, factors such as design style, teamwork
dynamics, deadline, and budget can dictate the emphasis given to each of the
activities in the model and thus how they are organized.
Saffer (2009, p. 48) also relies on the double-diamond model to
43
propose an interaction design process composed of the six following stages:
design strategy; design research; structured findings; ideation and design
principles; refinement; and prototyping, testing, and developing. According
to the author, such a process is necessary once “designing a product for
everyone, everywhere, for all time is not realistic”.
At the beginning, the product and project planning activities shape
the design strategy, which captures both the final vision and the tactics of the
project. Some of the main activities involved in the design strategy are: framing
the problem or opportunity to be addressed; determining the differentiating
aspects to be articulated by the product; envisioning and communicating the
design vision to other stakeholders; and creating roadmaps to make project
goals more tangible (Saffer, 2009, p. 49).
In the research stage, designers seek to investigate potential or
existing users of the artifact and the relevant contexts of use. To this end, in
addition to research planning activities, a myriad of methods can be selected
and executed, depending on the approach and on how the problem was
framed. Whether through interviews and observations or workshops and
group activities, the research stage also provides insights for better conduction
of the process to be followed (Saffer, 2009, p. 74).
Structuring findings comprises the organization, interpretation,
and synthesis of the data collected through research. In this stage, raw data
is transformed into visualizations that make sense for the team and relevant
stakeholders, such as models, charts, personas, or user stories (Saffer, 2009,
p. 94). Then, after gaining insights about the context and users, a stage of
ideation and definition of design principles begins. At this point, ideas and
concepts are proposed, judged, and selected to go forward. However, according
to Saffer, it is important to evaluate and select these ideas according to solid
design principles. Not only to objectively evaluate the available options but
also guide how they will be refined and developed in the rest of the process.
In the refinement step, these concepts are duly specified and
elaborated according to the project’s limitations, requirements, and intentions
as ideas move from initial propositions to more detailed artifacts such as
sketches, sitemaps, wireframes, task flows, and service journeys.
Lastly, in the prototyping, testing, and development stage,
professionals deliver a greater level of detail through the design of final
interfaces and prototyping of interactions and behaviors. At this moment,
aspects that might be difficult to express by other means, such as movements,
animations, interactions, and timing are clarified. In addition, prototypes can
be tested with users to detect errors and incorrect assumptions (Saffer, 2009,
p.170-184).
In addition to a deep understanding of users and potential users,
an essential part of the restrictions and requirements emerge with a holistic
investigation of “the full context of the design problem” (Moggridge, 2007, p.
44
 725). Based on these thoughts, Moggridge (2007, p. 730) proposed that the
interaction design process comprises the following ten essential elements:
constraints, synthesis, framing, ideation, envisioning, uncertainty,
selection, visualization, prototyping, and evaluation. The author also
advocates for a possibly disordered execution, in which steps can be (and
probably will be) repeated and alternated.
In this model, design starts with understanding the relevant
constraints, that is, user needs and expectations, mental models, functional
requirements, technical and budget regulations, timeframe, and competitor

Figure 23 (previous page / right):

Reproduction of Saffer’s model (2009, p. 48).
Figure 24 (current page / right): Reproduction
of Moggridge’s model (2007, p. 726).

45
analysis. Moggridge argues that a robust mapping of these constraints must
be done and absorbed by designers before further work. Moreover, the author
also argues that more complex projects benefit from numerous and diverse
teams precisely because of the ease with which a “shared mind” can deal with
the many inherent constraints.
The author also postulates a synthesis process that constantly takes
place in the subconscious “shared mind” of the design team. According to
him, it is during these moments that all relevant issues are processed and
used to propose ideas and other elements for the development. Framing
represents analyzing the problem and organizing its components to make
it more approachable. As stated by Moggridge (2007, p. 731): “One project
may be best framed by a journey through the experience, another by a four-
quadrant analysis of people’s attitudes, and another by a nested hierarchy of
attributes”. Furthermore, like Saffer, Moggridge acknowledges the importance
of a moment of ideation in the interaction design process. More than that,
he understands that a suitable framing of the problem can organize the
generation of ideas and that it does not happen as a temporally delimited
phenomenon, but rather spread all over the project.
When envisioning a particular solution for the problem, designers
begin considering concrete representations and how the specific solution
will take shape and relate to the elements of the context. In other words,
the solution is seen as the product, which consequently shifts thinking to
a convergent perspective. Accordingly, uncertainty is placed as a fuel that
urges designers to pursue better solutions. These are the considerations and
questions put on the propositions so that they continue to be elaborated. For
instance: “Is this simple enough? Is it consistent with what already exists? Can
we make it work faster?”. Moggridge also includes in his model the selection
of design ideas, in which most promising propositions are chosen according
to relevant criteria established by the designer (or team). As a complement,
the author argues that it is common for disagreements among team members
to happen at this moment of decision.
Visualization activities allow the solution to take shape as
communication artifacts, bridging the gap between envisioning and
prototyping. It represents and illustrates what is being proposed so that the
message is clearer. For example, in a digital product context, designers can
elaborate sketches of the interfaces that will be implemented to illustrate
technical requirements to a development team. Moreover, designers rely on
prototyping strategies to test the solution’s adaptability to specific criteria by
incorporating more complex aspects and behaviors into the aforementioned
representations and models. In an iterative design process, prototypes
facilitate the project’s path while evolving from basic hunches to getting
closer and closer to the envisioned design.
Lastly, Moggridge’s model comprises evaluation activities that
46
take place throughout the design process. The author establishes a design
approach with constant and anticipated moments of questioning, capable of
guiding designers from the beginning — when deciding the most promising
concepts and ideas to pursue —, until the examination of which adjustments
should be made before release.
By also reckoning on an observation towards practice, Kim Goodwin
(2009, p.7) proposed an interaction design process based on the method of
Goal-directed design, developed by the design consultancy Cooper (now
part of Wipro Digital). Following the activity-centered approach discussed by
Saffer, Goal-directed Design assumes that the best way to design a successful
product is by focusing on understanding the goals relevant to it. Such
investigation involves uncovering the many requirements and opportunities
behind users’ goals, business goals, and indirect objectives, say of those who
might want to buy the product but not necessarily interact with it. According
to Goodwin (2009, p. 7), the method was entirely developed by analyzing the
real world and consists of four main components: the principles, patterns,
process, and practices. Kim also states that a successful application of the
method depends on a team with qualified people and necessary skills.
As discussed in the previous models, the principles represent
general directions that will guide the elaboration. They are sentences or
concepts specifically developed for the project in question, which will help
propose and judge solutions. Patterns, in turn, represent an orientation
towards taking advantage of consolidated patterns of interaction and use.
These “building blocks” of the interaction designer’s vocabulary, according to
Goodwin, might be standardized layout choices for a given website that seeks
to be intuitive, the use of interactions that already exist in other applications
made for the same device, or even public component libraries, such as Google
Material Design, or the Apple Human-Interface Guidelines.
Despite introducing the elements, though, Goodwin’s discussion
about Goal-directed Design concentrates mainly on its design process
described through seven steps: project planning, research, modeling,
requirements definition, framework definition, detailed design, and
implementation support.
The model starts with a project planning step. The focus is
on identifying the project’s stakeholders, determining the main goals,
and outlining a plan for the activities to be carried out. Although the still-
undefined state of the problem makes it difficult to predict deadlines and
durations accurately, the author argues that an experienced designer should
be able to propose an initial schedule to measure time and costs.
Goodwin also emphasizes the importance of a research step. Her
premise is that a problem needs to be first comprehended to be solved. In
addition to understanding the design problem research also contributes to
building consensus between the team and the people involved. Furthermore,
47
by raising objective data, research activities also contribute to a faster and
more accurate design process development. In the modeling stage, raw
research data is analyzed and synthesized into models that are useful for the
project. A widespread modelling method, for example, is creating a set of
relevant personas. However, these models can also represent other important
aspects of the problem, such as work processes and usage environments.
Data analysis and subsequent modeling also contribute to an
appropriate definition of requirements. In this step, the intention is to
determine the implications of the data collected on the functionality and
design of the product (Goodwin, 2009). Naturally, this definition should also
take into account business objectives and strategic constraints.
The newly understood requirements feed into another stage
of framework definition. At this stage, first sketches of the shape and
behavior are explored and presented, still without much detail, so that
the parties involved can begin to visualize the project’s paths. Then, in the
detailed design step, designers specify what will be delivered at a ready-for-
development level of fidelity. According to Goodwin, to anticipate extreme
use cases and follow best practices, designers also rely on the collaboration
of developers, engineers, and other specialists, and on usability tests, at this
stage.
The final step of Goodwin’s design model is implementation
support. To exemplify it, the author makes an analogy with the routine of an
architect who says that her work only ends when constructions are complete.
At this stage, designers seek to assist the development teams with any doubts
and additional specifications about the delivered project. This step is critical
for the product’s quality for avoiding design decisions made without the
people responsible for them.
Goodwin also notes that a given design process does not determine
the quality of what will be delivered and the team’s efficiency by itself.
On the contrary, management practices related to team structure, speed,
communication with stakeholders, and collaboration deserve attention, as
they will certainly affect the results. Lastly, despite presenting a linear unfolding
initiated by robust planning, research, and modeling stages, the author admits
the eventual need of “taking shortcuts”, depending on the context and
expectations regarding the product’s release: “Some organizations (such as
start-ups in search of additional funding) may believe getting a best-guess
product out the door is more important than taking the time to understand
their users and customers in any depth, so there are ways to jump to design
with little or no time spent on research” (Goodwin, 2009, p.10).
Our foray into interaction design might also benefit from discussing
the discipline’s paths and models more recently proposed by academics
and professionals. Currently, interaction design is ubiquitous, especially
among technology companies that market digital products and services.
48
 However, according to Sharp et al. (2019, p. 13), it is not only these naturally
technological companies that have been interested in interaction design
services. Today, banks and financial institutions, government agencies,
retail companies, and various services see the value of the discipline and its
potential for differentiation in a context of extreme digital competitiveness.
Moreover, although “interaction design” is the commonly used umbrella term
to describe the field — encompassing its methods, theories, and approaches
— we can easily find a variety of nomenclatures with specific emphases.
Among them, UI Design (user interface design), web design, product design
(digital product design), and UX Design (user experience design) (Sharp et
al., 2019, p. 9).
With the consolidation of UX and the focus on designing for the
user experience, there has also been a clear shift in the discipline towards
an approach centered on the actual users of the product. Although designers
ordinarily think of their projects in functional and aesthetic terms, the search
for commercial differentiation and for constantly delivering a “better brand
experience” have reinforced the thesis that focusing on users and their
emotional needs and expectations guarantee a better return to business
(Garrett, 2010, p. 13).
In this sense, several authors have been producing content on the most useful
ways to direct creative processes towards better user experiences. For example,
Garrett (2010, p.6) defines user experience simply as the experience that a
given product promotes for people who use it in the real world. Accordingly,
the author understands the design process as the conscious and intentional
activity of defining the relevant aspects of a set of five complimentary
planes that make up what is being received and interpreted: the surface, the
skeleton, the structure, the scope, and the strategy.
On the surface, regardless of whether we are dealing with a product
with informational or functional appeal, we are interested in articulating the
sensory choices that manifest the intended experience. For example, at this
level, the user will see a series of pages on a website made up of different
images and texts. Some images will be illustrations, while others will be
photographs that may link to other specific pages.
Just below the surface, the skeleton of the product represents the
concrete placement of its various components, such as buttons, controls,
images, and blocks of text. In addition, the organization might reflect an
intended logic. For instance, the skeleton can be designed to optimize the
content or shed light on specific points. Moreover, according to Garrett
(2010, p. 20), the skeleton is nothing more than a concrete expression of the
structure of the interactive product, which represents the general navigation
and categorizations that determine the product’s final appearance, despite
Figure 25 (previous page): Reproduction of
not being necessarily visible.
Goodwin’s model (2009, p. 10). The scope represents the “list” of elements and functionalities
49
that should be considered in the product design and, thus, articulated by the
superior planes. For example, some e-commerce sites allow users to save
their favorite items to a list to refer to in the future. Whether or not to include
this functionality is a matter of scope.
Finally, the strategy plane covers business intentions, desires, and
requirements discovered through user research. As discussed in previous
models, we can think of these strategy elements as a series of sentences or
principles that the designed experience will attempt to communicate.
Garrett (2010, p. 24), at last, suggests a design process that navigates
through the five planes, from the bottom to the top — starting with the
strategic definitions until the creation of the surface. However, the author also
recognizes that it is impossible to delimit a specific order for the activities
to occur. “Dependencies run in both directions, with decisions made on
upper planes sometimes forcing a reevaluation of issues on lower planes.” he
exemplified. Furthermore, the author explains that decisions made about each
plane tend to respond not only to movements of the project itself but also
Picture 26 (top): Reproduction of Garrett’s
to market competition, good design practices, and the available knowledge model (2010, p. 6).

50
about users. All of these factors can change along the way.
With a more market-oriented perspective, Unger and Chandler (2012, p. 3)
define user experience design as “creating and synchronizing elements that
affect the user experience with a particular company, product or service,
to influence their perceptions and their behavior”. Related to our previous
discussions concerning the different ways to order the activities within an
interaction design project, the authors also acknowledge the influence of
factors such as structure and location of the team, technologies being used,
and the desired level of collaboration. However, regardless of emphasis and
ordering, Unger and Chandler (2012, p. 73) identify six essential steps common
to most projects: plan, define, design, develop, deploy and extend.
In their proposal, designers begin by planning the overall strategy,
the composition of the team, and the approach to be followed. Then, the
relevant requirements and restrictions are defined. In the design stage,
the visual and interactive aspects of the artifact are outlined, from simple
concepts and sketches to detailed specifications. At the development stage,
the designed artifact is tested and refined sufficiently to be deployed. At this
point, details about product release and delivery schedules might be planned.
Finally, the extension stage happens after execution and comprises the
research and documentation of recommendations for future improvements
and support.
Moreover, according to the authors, the steps proposed above can
be organized in line with different procedural approaches — being waterfall
approaches and agile approaches the two most common. In the first
approach, the steps are treated as separate and distinct phases mediated by
precise approval moments. “For example, the design phase does not begin
in earnest until requirements have been approved by business stakeholders,
who sign off on one or more requirements documents at the end of the define
phase.” (Unger & Chandler, 2012, p. 74). However, a fragility of the waterfall
approach is that it assumes that each phase can be completed without causing
modifications to the previous ones. That is, the activities of a specific design
phase, for example, could not raise questions about the initial schedule or the
requirements.
On the other hand, when they understand change as a constant in the
project, product development teams benefit from more flexible approaches.
In so-called agile approaches, the focus is on collaboration and quick
creation at the expense of detailed documentation and excessive formality.
By assuming great collaboration and closeness between team members, agile
approaches reduce the need for robust documentation throughout each step.
Naturally, though, such a shift from a linear and delimited approach — which
favors long and detailed project time — to a faster approach — in which
it is expected that quick decision-making and collaboration will provide
satisfactory deliveries in less time — poses the need for designers to adapt
51
their creative process (Unger & Chandler, 2012, p. 73).
Being one of the current challenges for professionals of the field,
the search for project agility and greater integration between the members
of product development teams continue to instigate the proposition of
new UX design models. Especially due to the growing absorption of these
professionals by technology companies. For instance, Gothelf and Seiden
(2016, p. 85) propose a four-step process model called Lean UX as a more
recent contribution.
According to the authors, Lean UX is an approach based essentially
on experimentation and learning. The work starts with hypotheses and
assumptions to be investigated, or pre-established intentions. Based on these,
the team ignites a quick design process intending to design an MVP3 as a
strategy of validation. At this point, experimentation takes place in various
52
3. A minimum viable product (MVP) is
a version of a product with just enough
features and details to be usable by early
customers and stakeholders who can then
provide feedback and suggest paths for further
development.

ways, from usability testing to real-world product performance evaluation.

Through these successive experiments, initial hypotheses are evaluated,
improved, or discarded, providing insights and learnings to be incorporated
into the project until a satisfactory version is produced (Gothelf & Seiden,
2016, p. 80-81).
Also according to the authors, in such an approach, discovery
initiatives happen continuously, instead of being limited to an initial moment
of the process. Accordingly, other design activities, such as the generation
of alternatives, creation of research models, prototyping and evaluation with
users, continue to be carried out but organized in a way to enable the intended
pace.
In a recent book aimed at multidisciplinary technology teams,
Cagan (2017, p. 26) also advocates a continuous and integrated interaction
design process in which research activities (discovery) and delivery occur
in parallel throughout the entire product development. As a characteristic of
agile design processes, the author also argues that contemporary interaction
designers should work side-by-side with developers and project managers,

Figure 27 (previous page / top): The waterfall

approach, based on the illustration created by
Unger and Chandler (2012, p. 74).
Figure 28 (previous page / middle): The
agile approach, based on the illustration
created by Unger and Chandler (2012, p. 74).
Figure 29 (current page / top): Reproduction
of the model created by Gothelf and Seiden
(2016, p. 85).
Figure 30 (current page / bottom): The
dual-track model as proposed by Cagan (2017,
p. 26).

53
incorporating the design perspective into the other goals and overall team
process.
For instance, throughout discovery, designers can take the lead and
apply a myriad of user and stakeholder research methods and continually
synthesize and present the insights discovered to the rest of the team. In
parallel, these investigations can improve a series of aspects of the product
being designed. Again, it is worth noting that the design activities discussed
throughout this chapter continue to be carried out but at a different pace and
organization.
After discussing a myriad of models for the creative process in
interaction design, a last conceptual layer focused on generative creation and
computational thinking will be added to support the holistic interpretation of
our cases. Such discussion happens in the following subchapter.

We summarize the main contributions of this subchapter through

the sentence and the board below.

When designing interactive products (Saffer, 2009; Goodwin,

2009; Sharp, Preece & Rogers, 2019), professionals or teams may
rely on creative processes that are either very structured,
sequential — waterfall approaches and design-centered
(Saffer, 2009; Goodwin, 2009); sequential but susceptible to
experimentation and intercalation of steps (Moggridge, 2007;
Garrett, 2010); or based on multidisciplinary collaboration, rapid
iteration and experimentation — agile approaches or multi-
track (Unger & Chandler, 2012; Gothelf & Seiden, 2016; Cagan, 2017).
However, regardless of specific constraints and the approach,
when designing an interactive product, designers undertake the
major stages: plan, define, design, develop, and deploy(Unger
& Chandler, 2012), and the activities: designing alternatives,
prototyping, evaluating, and discovering requirements (Sharp,
Preece & Rogers, 2019).

54
55
1.3 Generative Creation and Computational Thinking
in Design
In 1964, Karl Gerstner (1930-2017) released his book Designing
Programmes, one of the first texts dedicated to systematically approaching
design. At that time, the author argued that problems could be more
efficiently solved with a matrix of possible solutions — programs, instead of
unique propositions. Essentially, Gerstner (1964, p. 21) considered impossible
for designers to delimit, in an absolute way, all the relevant solutions of a
design problem since conditions and the context might change fast and often.
Still at the beginning of the computational era, Max Bense (1910-1990) also
relied on research about computing and systematization as he was looking
for ways to formalize aesthetic processes. Exploring a hypothetical concept
of calculability of all elements, he worked centrally on the role of quantitative
and objective analysis in the creations of shapes and on a design methodology
strongly influenced by algorithms (Neves, 2015, p.533).
As computers became more accessible and straightforward during
the XX century, computational tools and programming practices reached
many industries and society’s more popular layers. For designers, even
though the adoption of these tools caused differences in the design process,
it first represented a transposition of the usual media and routines to a digital
context. The focus was on gaining precision and efficiency and not exploring
new processual and aesthetic possibilities (Reas & McWilliams, 2010, p. 27).
Behind the scenes, though, algorithmic explorations continued to advance
due to scientists, designers, and artists who sought to extrapolate the most
famous software tools and take computing as a fruitful creative material.
These intentions motivated new artistic movements — such as the New
Media Art scene —, the invention of innovative interactive interfaces and
the creation of programming languages ​​and platforms oriented to aesthetic
purposes.
In this context, computational creation transcended a purely
automating algorithmic approach and reached another, in which systems
started to be employed in the creation of artifacts and experiences hardly
obtained by traditional means. In other words, with its unique characteristics,
attributes, and properties, the computer came to be seen as a creative medium
in its own right and used to explore novelties (Reas & McWilliams, 2010, p. 31;
Richardson, 2016, p. 16).
Furthermore, design has been relying on generative creation not only
to produce innovative and hitherto unattainable shapes but also to rethink the
traditional design process and explore other aesthetic possibilities. Since the
early 1970s, when generative design began to be studied by pioneers such as
architect John Frazer, alike approaches have attracted the attention of many
academic researchers interested in design theory and of the CAD industry
56
 (Computer-Aided Design), interested in selling parametric and optimization
solutions (Krish, 2010, p. 90). Even though it was born within architecture,
generative design can be, and is, explored in the creation of different types
of physical and digital artifacts (Mountstephens; Teo, 2020, p.2). In reality,
the reasons behind this adoption are based on the benefits of employing
the method compared to conventional design approaches and not on its
adequacy to a specific context.
Traditionally, a design project depends on the central role of
designers (or the team) to execute it, from its initial conceptual stages to
the finalization of the proposal. User needs and expectations along with
technical and aesthetic requirements are continually and directly articulated
to be contemplated by the designed product — a type of creative process that
relegates the computer to the role of executing human decisions. In generative
design, artifacts are produced by algorithms or autonomous systems, albeit
partially, which can be fully automated or refined according to interventions
made by human designers. The critical point is that computational intelligence
is used as an active participant in the creative process and not only to support
previous choices (Mountstephens & Teo, 2020, p.1). Nevertheless, due to
the added computational complexity, there is a fundamental change in the

Figure 31: Reproduction of the model created by

Groß et al. (2018, p. 504)

57
creative process: the designer is no longer an executor of tasks but a conductor.
A role that Groß et al. (2018) refer to as an “orchestrator of decision-making
processes”. According to the authors, this is what generative design is about:
“iteratively developing different processes and then selecting those
that produce the most visually compelling results”.
To illustrate this fundamental change, Groß et al. (2018) proposed
a model for the creative process in generative design characterized by an
emphasis on abstraction and on a different role for designers (Figure 31).
The main change is that traditional craft recedes to the background, and
abstraction and information become the protagonists. Thus, the relevant
question is no longer ‘How do I draw?’, but ‘How do I abstract?’ (Groß et al.,
2018, p. 504).
In opposition to the conventional process in which designers
implement an idea directly, intervening and refining the artifact, when
generative creation is employed, a process of abstraction is undertaken to
transform the idea into an algorithm which is later translated into a source
code, or program, to run and generate results. Being an “indirect” design
process, as referred to by Omine (2014, p. 85), designers might participate at
all steps through activities that encompass the creation of algorithms, writing
of code, the evaluation of results, and the consequent refinement of programs.
As this is an unpredictable way to create, Groß et al. (2018, p. 507)
also highlight the role of human designers in evaluating results and in the
refinement of algorithms as the basis for an incremental and necessary
improvement. Something particularly critical considering that replacing this
evaluation strategy would require satisfactory automation of highly subjective
and hardly quantifiable aspects, such as aesthetic preferences and choices
(Mountstephens & Teo, 2020, p.5).
In contrast to the conventional approach, we do not directly put
our hands on the image but instead change the underlying abstraction or
individual parameters in the program and continue to refine each iteration
until the desired result is achieved (Groß et al., 2018).
Besides being a central aspect of the above-discussed process,
abstraction is also vital to computational thinking (or CT), a concept we will
explore as a valuable additional theoretical layer to interpret this research’s
object. After all, as already explored, generative creation is closely linked to
computational processes.
Although there is no single definition for what this specific type of
thinking is (Shute et al., 2017), informally, computational thinking describes
the mental activities involved in formulating a problem in such a way that
it admits computational solutions. Solutions that then can be performed by
humans, machines, or both.
As an attempt to more formally define it, Kelly and Gero (2021, p.6)
point out the existence of two distinct trends. In the first, authors seek to
58
define computational thinking based on the type of reasoning involved in it.
For instance, in one of her first publications on the subject, Wing (2006, p.33)
defined computational thinking as solving problems, designing systems, and
understanding human behavior through computer science concepts. Furber
(2012) defines it as the method of recognizing computational aspects in the
world around us and applying computer science tools and techniques to
understand and argue about natural or artificial systems and processes. And
for Denning (2009), in turn, computational thinking can be understood as a
mental orientation to face problems as a process that converts an input into
an output, associated with the search for an algorithmic process to do it.
The second trend defines computational thinking through the
solutions it is capable of producing. For example, Yadav et al. (2014) describe
the concept simply as a mental activity used to abstract problems and
formulate solutions that can be automated. Wing (2011), in a second more
recent work, defines computational thinking as the “processes involved in
the formulation of problems and solutions so that these solutions can be
represented and, consequently, carried out by information processing agents”.
Moreover, focusing on the elements and abilities that compose it, Bocconi
et al. (2016, p. 18) define computational thinking as the “mental processes
involved in solving problems so that they admit a computational solution that
involves abstraction, algorithmic thinking, automation, decomposition,
debugging and generalization”, which they understand as the core skills
or abilities of computational thinking. Finally, going partially in line with
this proposition, Beecher (2017, p. 7) adds the concepts of logical thinking,
modeling, and evaluation to the list.
The most crucial cognitive skill in computational thinking
is abstraction (Kelly & Gero, 2021, p.6; Bocconi et al., 2016, p. 17-18).
According to Grover and Pea (2013, p. 39), its importance as a key concept of
computational thinking and as the element that differentiates it from other
types of thinking is undisputed.
In essence, by abstracting, people express an idea in a specific
context while suppressing details irrelevant to that context (Beecher, 2016,
p. 56). In this way, it is possible to say that the ability to abstract is related to
the act of choosing the correct details to be removed from a problem so that
it can be better understood or represented (Csizmadia et al., 2015, p. 7). By
placing ‘How do I abstract?’ as the central question of the creative process
in generative design, for example, Groß et al. (2018, p. 507) illustrate the
existence of an abstraction layer that thoroughly mediates it. For them, one of
the biggest challenges for designers in this approach is abstracting vague ideas
into formal computer-interpretable instructions.
In any case, when heading towards formalization, the abstracted idea
needs to be transformed into an algorithm that, in turn, can be understood as
“a set of steps to accomplish a task.” (Cormen, 2013, p. 1) or, more rigorously,
59
as “a finite, deterministic, and effective problem-solving method suitable for 4. Para Gerstner, até o grid tipográfico
pode ser considerado um programa [e,
implementation as a computer program” (Sedgewick, 2011, p. 4). In essence, consequentemente, um algoritmo], ao
this abstraction followed by organizing an idea into a set of well-defined steps funcionar como um sistema que permite
permutações no espaço.
can be understood as algorithmic thinking.
With possible direct implications for the design processes in which
they participate, Reas and McWilliams (2010, p. 13) state that algorithms have
four essential qualities:

1 - There are many different ways to write an algorithm, as there are

different ways to write and organize instructions that lead to the same result;
2 - An algorithm starts with assumptions such as the types of data to be
inputted that allow it to “focus” on a delimited aspect of the problem;
3 - Algorithms also comprise decisions, which are made throughout its
execution, influencing the procedure; and
4 - A complex algorithm should be broken down into smaller modules,
which allows the problem to be approached more carefully and correctly.

For design, although we are discussing algorithms in a specific

generative context, we have already seen at the beginning of this subchapter
that they are not a new concept. As put concisely by Omine (2014, p. 78-
83), Karl Gerstner — one of the “most coherent theorists” of graphic design,
promoted discussions on the subject since the middle of the 20th century,
when he published his book Designing Programs (1964): “For Gerstner, even
the typographic grid can be considered a program [and, consequently, an
algorithm], as it works as a system that allows permutations in space”4.
In contemporary works of many designers and artists, we can still
find algorithmic thinking as an essential and characterizing element.
In his book Analog Algorithm (2019), for example, the German
illustrator and graphic designer Christoph Grünberger experiments with
a series of grid-based procedures to define a clear rationale for each of his
works. For him, a rational and logical approach to design is not opposed to
creative freedom, but an accelerant for the creative process. Such a belief
motivated him to reflect on his career and present many examples of how
algorithmic creation enables the production of an universe of possibilities
after the establishment of a sufficient foundation — the grid (Figure 32)
(Grünberger, 2019).
Another example of algorithmic application into design can be found
in the visual identity the creative studio FIELD produced for the conference
IBM Think 2020 (Figures 33 and 34). The studio relied on generative
algorithms powered by data from many different musical instruments to
deliver “a new kind of sound visualisation”, as referred to by them in their
Figure 32 (nest page / top): Algorithmic visual
website. Therefore, graphic elements responded to instruments such as experiments created by Grünberger for his book
melody, vocals, machines, drum+bass, and space+details, becoming elements Analog Algorithm (2019).

60
to be applied as key visuals across all media for the event (Field, 2020).
Algorithms, though, are only part of solving the problems we are
interested in. Since computational environments manipulate data through
lines of code, algorithms must be translated into programs (review model by
Groß et al. (2018)) so that they can, in fact, work. At this point, computational
thinking reaches a very practical spectrum (Richardson, 2016 p. 20).
In addition to the computational-thinking skills already discussed,
we program by employing frequent debugging and generalization
processes as we seek to create efficient and correct programs to deliver the
desired quality of automation. When debugging, we systematically analyze
and evaluate programs or algorithms through testing, reviewing logs, and
61
62
 the intuitive application of logical thinking — that allows us to anticipate
and verify results. Through generalization, we identify and base ourselves
on patterns, similarities and connections that can help us write codes and
compose the general strategy of what needs to be programmed. Finally, by
decomposing a problem, or artifact, we can break it down into smaller
elements and organize it in a way it can be understood and solved. This makes
complex problems, whether related to writing a program or defining a design
project, easier (Csizmadia et al., 2015, p. 7).
Moreover, to effectively write the program’s source code, we can
select the most suitable programming language, among the thousands of
options that exist. To make this decision, we can rely on criteria such as the
operating system or device on which the program will run; the desired aesthetic
quality; and personal preference. Also, since there are several languages ​​with
different syntaxes, limitations, and modes of use, programmers reckon on
the fact that their choice will naturally influence the style and possibilities of
Figure 33 (previous page): Visuals created by execution to make a conscious decision (Reas & McWilliams, 2010, p. 17). If
FIELD for the IBM Think 2020.
Figure 34 (current page / top): A poster
in 1992, for example, to draw a line on the screen between the coordinates (10,
created by FIELD for the IBM Think 2020. 10) and (20, 20) using OpenGL it was necessary for the program to contain
63
the following commands:
glBegin(GL_LINES);
glVertex2f(10, 10);
glVertex2f(10, 10);
glEnd();

Today, through sophisticated languages oriented towards aesthetic

production, we can draw the same element using the commands:

line(10, 10, 20, 20), in Processing; and

ofDrawLine(10, 10, 20, 20), in openFrameworks.

With a notable focus on practice, programming and experimentation,

Zhang and Funk (2021) proposed a four-stage creative process model for
projects in which computing is the primary “material” (Figure 35). The stages
are idea to visuals; composition and structure; refinement and depth;
and completion and production.
The project begins with developing visual concepts that will
serve as a starting point for the project. To this end, instead of conventional
approaches such as creating mood boards and drafts, Zhang and Funk suggest
that this process takes place in a very exploratory way, with successive
programming experiments. By following this process of quickly alternating
“between code and canvas,” they claim that programmers will better
understand how their programs and algorithmic choices determine each of

the aspects being “drawn” on the screen. Then, once the initial visual concepts
are reasonably developed, the next step of the process is improving them by
organizing the graphic elements and defining their interrelationships. At this
point, it is possible to experiment with a series of compositional practices
and concepts, such as repetition, variation, and randomness, and incorporate
them into the generative algorithm. The intention is to start adding complexity
to visual explorations.
In the refinement and depth stage, the intended elements and
visual composition are properly programmed, as a structure for the code is
also determined. At these moments, the execution of each of the graphical
elements and compositional rules is defined along with the data necessary to
make that happen. Therefore, functions for moving and positioning elements,
Figure 35 (above): Illustration of the model
controlling sizes, coloring, and employing user input data to control certain proposed by Zhang and Funk (2021).

64
 aspects are written.
Finally, in the completion stage, the program is prepared to
produce the expected artifact. This means that if a movie or animation is
being produced, the team will worry about correctly setting the frame rate
per second and adjusting the program to synthesize the clips in the necessary
resolution. On the other hand, if the outcome is a poster, they will probably
be concerned about producing image files large enough to print with pixel-
perfect quality. Moreover, at this stage, it might also be interesting to run the
program on a mobile device, or over the internet, which will require specific
adjustments.
Furthermore, Zhang and Funk (2021) argue that creative processes
do not always start with an idea or concept to be elaborated. Counterpoint
they explain through the discussion of two different approaches to ideation.
In the first approach — concept-based ideation —, creative work begins
conceptually, probably before computational tools are used. Since the
main challenge in this approach is to turn an abstract idea, already in mind,
into a satisfying computational result, one implication is that designers or
programmers already have ideas and expectations about how the employed
concept will be materialized. In the second approach — material-based
ideation —, computing and programming are taken as the creative “material”
we will be experimenting with to encounter concepts to be elaborated. More
practically, this means that the creative work will gradually take a more

Figure 36: Illustration of the strategies of

ideation proposed by Zhang and Funk (2021).

65
concrete shape and direction only after a series of experiments with different
tools, processes, algorithms, and languages.
In short, while concept-based ideation sees computational material
as a means of communicating a concept, the other sees it as the very concept
that is going to be elevated and expressed. Zhang and Funk (2021, p.447) also
complete their discussion by saying that such a strict delimitation between
one approach and another does not happen in real life, but rather flexible
creative work that constantly alternates between them.
In a way, the above-discussed distinction in the two approaches for
ideation inherits elements from an earlier debate concerning the computer’s
role in creative activities such as design and art. As stated at the beginning
of this subchapter, for a long time, computing was employed to gain
precision and efficiency rather than exploring new procedural and aesthetic
possibilities. A use, according to Reas and McWilliams (2010, p. 25), centered
on the production of preconceived shapes and concepts. However, when
employed with a conception-oriented perspective, the computer actively
participates in developing the shape or concept in question.
For Agkathidis (2015, p. 14), for example, when used for conception,
one of the main strengths of generative creation is its ability to offer new
directions to design projects and break with predictable relationships between
form and representation. Something that occurs because computational
complexity is adopted as a co-drawer with whom designers “negotiate”
creation. The author, here, refers to a morphogenetic approach, a conception
model in which the computer, once fed with a specific set of design rules,
conceives a series of artifacts that contemplate them (Figure 37).
Although it does not have a specific order, the process comprises
three main steps. First, in a stage of analysis, data collection, and definition
of design rules, the focus is on obtaining information about the various
relevant aspects of the problem, such as context, program, structure, and
performance, and defining the design rules that the system must consider.
Figure 37 (top): Reproduction of the model
Then, in a stage of morphogenesis, the computer employs algorithmic proposed by Agkathidis (2015, p. 14).

66
processes to create the first versions of the expected results at a more
superficial level of detail. Finally, in the last stage of metamorphosis, the
proposed concepts are refined and adjusted on the computer to become the
final results.
Accordingly, Grünberger (2019, p. 13) understands generative design
as a practice in which control is relinquished in favor of results since the entire
design process becomes subordinate to an autonomous logic or random seed.
Because of this, the author states that designers start behaving not only as
creators but mainly as interpreters and curators who must spontaneously
evaluate and select shapes and patterns while ensuring that the process
employed is adequate and compatible with the strategy of the project.
Finally, for those interested in optimization, significant advances
in computational power have enabled design programs to make essential
contributions in solving complex problems — for which the space of design
solutions is vast and dynamic (Buonamici et al., 2021, p. 144). However, besides
being used to conceive optimal alternatives for a given problem, adopting
computing as a means can also point out new procedural and aesthetic paths
and potentialize human designers’ creativity (Buonamici et al., 2021, p. 144).
By relying on generative poetics, for example, several designers and
artists have been engaging in political and experimental projects intended
to motivate explorations of new languages and discussions concerning the
impacts of technological transformations in our societies (Brain & Levin,
2021, p. 5).

“In computational art and design, many responses to the questions of

what and why continue historical lines of creative inquiry centered on
procedure, connection, abstraction, authorship, the nature of time, and
the role of chance” (Brain & Levin, 2021, p. 4).

In the end, such a paradigm shift clarifies the relevance of studying generative
creation as an element capable of instigating novel practices and aesthetics to
the field of design (Brain & Levin, 2021, p. 4).

67
We summarize the main contributions of this last subchapter through the
sentence and the board below.

When comprising generative systems, designers’ creative

processes fundamentally change, as their role shifts from
directly manipulating the product to curating and evaluating
the computational processes that are supposed to produce it
(Groß et al., 2018; Grünberger, 2019). This creative process would
be: starting from an idea; abstracting it into an algorithm,
translating it into a program to be executed; and obtaining
and evaluating the output – what would possibly feedback
the cycle. Moreover, designers would participate throughout
the whole process (Groß et al., 2018). Due to the existence of a
characteristic layer of abstraction (Beecher, 2016; Csizmadia et
al., 2015) — as designers need to constantly think in terms of
algorithms to create desired artifacts — the relevant question
is no longer ‘How do I draw?’, but ‘How do I abstract?’ (Groß et
al., 2018), a statement that also illustrates a clear relationship
between generative design and computational thinking (Wing,
2011; Kelly & Gero (2021); Furber, 2012; Denning, 2009; Yadav et
al., 2014; Wing, 2011; Bocconi et al., 2016) — to which abstraction
is also a central ability (Kelly & Gero, 2021; Bocconi et al., 2016;
Grover & Pea, 2013). Nonetheless, the creative process does not
always have a concept as a starting point for ideation (concept-
based ideation). It can also rely on many explorations with the
material — programming and software tools — as a means to
encounter more concrete concepts to be pursued as selected
ideas (material-based ideation) (Zhang & Funk, 2021).

68
69
1.4 Main Contributions and Theoretical Proposition
This chapter went through the concepts, theories, and models that
compose the foundations of our case studies.
In the first subchapter — Creative Processes in Design, we have
defined creativity and the creative process and discussed a few models to
describe it. More specifically, we learned that “the creative process can
be defined as a sequence of thoughts and actions that comprise the
production of work that is original and valuable” (Lubart, 2021, p. 3)
and that such a sequence of thoughts and actions needs to be employed in
the production of a valuable novelty (at least for the people involved in the
process) to be considered a creative process. It would be a process of creation
otherwise.
We also understood that design thinking has relevant
idiosyncrasies compared to conventional problem-solving approaches,
primarily due to the specific ways in which problems are framed and how
problems and solutions coevolve throughout a project. Because of this, we
relied on Lawson & Dorst’s model (formulate, represent, move, evaluate
and manage as main design activities) to understand specific aspects of how
the creative process happens in design.
The following question arises as this first subchapter ends: “Now
that we know what the creative process is — thus having the lens/structure
through which cases will be analyzed — and how it can be adapted to a
generalist design context, what would be the specifics involved in discussing
it within an interaction design practice?”
As an answer to the question above, the second subchapter focused
on moving the theoretical discussion into a more practical layer by enriching
it with definitions and models of design processes proposed by interaction
design researchers and practitioners. Since this study aims to interpret creative
processes employed in the design of interactive products, discussing specific
models and activities of interaction design was considered the natural next
steps.
We learned that, despite encompassing different points of view and
traditions, interaction design can be defined as “the discipline that seeks
to define the shape and behavior of interactive products, services, and
systems” (Goodwin, 2009, p. 5). Moreover, regardless of having diverse
purposes, professionals answer questions such as the following ones when
designing interactive products:

1. What activities will the product or service support, and how?

2. What information do users need at each point in that process?
3. What information does the system need from users and the context?
4. How is functionality segmented and manifested?
70
 Furthermore, due to the somewhat generalist nature of interaction
design, there are different points of view concerning what the discipline
should be focusing on delivering, and what approaches should be used. For
instance, it’s not a consensus if interaction designers should be dedicating
their efforts to making engineers’ and scientists’ inventions approachable;
to crafting interactive products that behave in a useful way; or to coming
up with solutions that not only are useful but mainly enhancers of human
communication (Saffer, 2009, p. 4).
Concerning execution, the subchapter went through models of
creative process that rely on more sequential approaches to design, such
as the ones proposed by Sharp et al. (discover, define, develop, deliver)
(2006), Saffer (design strategy; design research; structured findings;
ideation and design principles; refinement and prototyping, testing and
developing) (2009) and Goodwin (project planning, research, modeling,
requirements definition, framework definition, detailed design, and
implementation support) (2009), and others that comprise the sometimes
random and interrelated nature of each one of the stages in the process, such
as Moggridge’s (constraints, synthesis, framing, ideation, envisioning,
uncertainty, selection, visualization, prototyping, and evaluation)
(2007).
Moreover, with the consolidation of interaction design in the
previous decade and the rise of UX (user experience) as the primary term to
describe the practice and professionals in the field, many additional models
have been proposed to guide designers’ works within contemporary scenarios.
Agile approaches (based on frequent collaboration and rapid development)
began to be prioritized over conventional waterfall approaches, and this shift
naturally influenced how designers were supposed to deliver their creations.
To fit in this highly collaborative and practical contexts, designers have been
relying on many recent models of creative process such as the ones proposed
by Unger and Chandler (plan, define, design, develop, and deploy) (2012),
Gothelf and Seiden (hypothesis and assumptions; design it; create an
MVP and research and learning) (2016) and Cagan (two continuous
tracks of discovery and delivery) (2017).
During Generative Creation and Computational Thinking in Design,
we have established historical and conceptual parallels between generative
creation, computational thinking, and design. Since generative design is
recognized as a natural way to refer to generative systems being incorporated
into a design practice, we began by investigating the possible ways to define it.
After discussing the fundamental differences between a generative
design process and a conventional one (the role of designers changes from
performing tasks to orchestrating the decision-making process of the
computer), the definition proposed by Groß et al. (2018, p.5) was introduced:
generative design can be understood as “iteratively developing different
71
processes and then selecting those that produce the most visually
compelling results”. Along with the definition, the authors also proposed
a model of creative process composed by the stages: idea; abstraction into
rule/algorithm; formalization through source code; and computational
generation of the output through the interpretation of the source code.
In this proposal, designers are still supposed to participate by refining and
changing the rules behind the process being executed by the computer until
something satisfactory is obtained — a process in which abstraction is one
of the essential activities, as referred to by the authors.
After being understood as one of the most important elements
within the creative process in generative design, further research on the
abstraction-based nature of it became necessary. This gap was filled by
research on computational thinking, to which abstraction is also a central
element (Kelly & Gero, 2021; Bocconi et al., 2016). As stated by Shute et al.
(2007), this form of thinking describes the mental activities involved
in the formulation of a problem in ways through which it admits
computational solutions to be carried out by humans, machines, or
both.
Through further research, Bocconi et al. (2016, p. 18) identified the
primary abilities involved in computational thinking and proposed a new
definition encompassing them: “computational thinking describes the
thought processes entailed in formulating a problem so as to admit a
computational solution involving abstraction, algorithmic thinking,
automation, decomposition, debugging and generalization”.
When implying that ‘How do I abstract?’ is the most relevant
question in the generative design process, instead of “How do I draw?”,
Groß et al. (2018, p. 507) are not only illustrating the existence of a layer of
abstraction that intermediates the whole creative process but also establishing
a clear intersection between design and computing in which generative
design is positioned — something that suggests the need of concepts of both
areas for a sufficient understanding of the creative process investigated. We
also learned that, by abstracting, creators can design algorithms, “a set
of steps to accomplish a task” (Cormen, 2013, p. 1), or more formally “a
finite, deterministic, and effective problem-solving method suitable for
implementation as a computer program” (Sedgewick, 2011, p. 17), which
can be posteriorly translated into programs to be executed by computers
in the generation of desired outcomes through a myriad of programming
languages available.
Furthermore, despite being the only two forms of thinking to gain
prominence since the beginning of the XXI century, studies about how
design thinking and computational thinking relate to each other are
scarce — perhaps due to the lack of consensus when it comes to defining
them, or to the assumed differences between the problems each one of them
72
is more suitable for (Kelly & Gero, 2021, p. 1). Nevertheless, as Kelly and Gero
(2021, p. 7) suggest, some tasks involve both computational and design
thinking, such as a web designer addressing the design of a website for a
client or an engineer during a design activity of setting up parametric models.
Imagine our web designer begins addressing a client’s brief by
following a conventional design thinking approach (e.g., the double-
diamond), thus spending some time researching stakeholders’ expectations
and final users’ needs. Of course, this would expand the frame through which
the problem will be understood by arising additional knowledge related to
these contexts. However, suppose that, at some point in the process, the web
designer needs to develop reusable components for the current set of pages
of the website being created and the possible future ones. This designer would
be abstracting this problem into a set of variables capable of determining
which design aspects of the website should be componentized — and thus
successfully applied to future sections of the website without further effort —
and which not. Similarly, when engineers need to establish parametric design
systems, computational thinking is necessary, as these parameters need to be
abstracted from the problem and the context to synthesize maybe hundreds
of alternative solutions. However, for these solutions to be abstracted into
a set of parameters capable of modulating them, relevant knowledge about
the context — such as users’ needs and environmental restrictions — must
be obtained so that the team can understand which variables will feed these
parameters’ creation.
It appears that in generative design, designers are constantly dealing
with these two forms of thinking, as well.
Besides Groß et al. (2018, p. 504) a couple of other researchers
have proposed models to describe the creative process in generative design,
such as the ones created by Zhang and Funk (idea to visuals, composition
and structure, refinement and depth and completion and production)
(2021), and Agkathidis (analysis, data collection, and definition of design
rules; morphogenesis and metamorphosis) (2015). Models also illustrate
two different approaches to how the creative process happens in generative
design: a concept-based ideation approach — in which the creative work
starts conceptually, before execution, which means that designers might
intuitively know how the idea will look, sound, or feel. — and a material-
based ideation approach — in which programming is considered the
creative material designers will be experimenting with to find the concepts
they will pursue, which means that more concrete creative directions only are
followed after several experiments with programming languages, tools, and
software have been executed.
Finally, as last discussion about the third subchapter, it is worth
noticing that a few different points of view exist when it comes to defining
generative design and describing how generative designers work — perhaps
73
due to the complex conceptual network involved in defining and describing an 5. (Goodwin, 2009; Saffer, 2009; Sharpe,
Preece & Rogers, 2019; Unger & Chandler,
approach that is both recent (as a more popular practice) and multidisciplinary. 2012; Gothelf & Seiden, 2016; Cagan, 2017)
As suggested by Brain & Levin (2021, p. 4), “in computational art and design, 6. (Groß et al., 2018; Grünberger, 2019)
7. (Groß et al., 2018)
many responses to the questions of what and why continue historical lines of 8. (Groß et al., 2018)
creative inquiry centered on procedure, connection, abstraction, authorship, 9. (Wing, 2011; Kelly & Gero (2021); Furber,
2012; Denning, 2009; Yadav et al., 2014; Wing,
the nature of time, and the role of chance”.
2011; Bocconi et al., 2016)
10. (Kelly & Gero, 2021; Bocconi et al., 2016;
As a preparation for our case studies, the following theoretical Grover & Pea, 2013)
11. (Zhang & Funk, 2021)
proposition (TP) has been elaborated through the synthesis of the 12. (Saffer, 2009; Goodwin, 2009)
contributions (TC.1, TC.2, TC.3) presented during this chapter: 13. (Unger & Chandler, 2012; Gothelf & Seiden,
2016; Cagan, 2017)
14. (Unger & Chandler, 2012)
When designing interactive products5 powered by generative 15. (Sharp, Preece & Rogers, 2019)

systems, designers have their creative process fundamentally

altered, as their role shifts from directly manipulating artifacts
to curating and evaluating the computational processes that are
supposed to produce them.6 Such a creative process involves
reaching an idea; abstracting it into an algorithm, translating
it into a program to be executed; and obtaining and evaluating
the output — what would possibly feedback the cycle.7 Due
to the existence of a characteristic layer of abstraction8 — as
designers need to constantly think in terms of algorithms to
create desired artifacts, there’s a relationship between this
specific creative process and computational thinking9 — to
which abstraction is a characterizing aspect, which implies
that designers are required to rely on abilities related to
design thinking and computational thinking10. Concerning its
execution, the creative process in question does not always
have a concept as a starting point for ideation (concept-based
ideation).11 It can also rely on many explorations with the
material — programming and software tools — to encounter
more concrete concepts to be pursued as selected ideas
(material-based ideation). It can also be conducted in ways
that are either more structured, sequential, and unidisciplinary
— waterfall approaches12; or based on multidisciplinary
collaboration, rapid iteration, and experimentation — agile
methods or multi-track13. Regardless of specific constraints and
the approach, when designing an interactive product, designers
undertake the major stages plan, define, design, develop, and
deploy14, and the activities designing alternatives, prototyping,
evaluating, and discovering requirements15.

74
75
Chapter 2
Method
2.1 Overview

2.2 Formulating the research question

2.3 Research foundations

2.4 Unity of analysis, selection of cases, and corpus
construction

2.5 Pilot study and thesis committee meeting

2.6 Data Collection
2.7 Model and analysis
2.1 Overview
As briefly presented in the introduction, the nature of this research
is qualitative and based on a multiple cases study strategy. Such an approach
was selected because of the exploratory nature of the question we are seeking
to answer, its contemporaneous scope, and the impossibility of controlling
the phenomenon being investigated. Stake (2000) refers to case study
approaches as a good choice when the goal is generating understanding,
experience, and conviction regarding a specific subject. Yin (2014), in turn,
highlights the empirical nature of the strategy as he acknowledges its potential
to investigate contemporary phenomena in their context.
Another significant motivator for this choice was the complex
relationships involved in a study that aims to understand creative processes
— it might raise a myriad of aspects related to the process, and to designers,
their backgrounds, and beliefs. A multiplicity of variables should be taken into
account at the same time that delimiting them might be complicated and
undesirably reductive. That said, a holistic approach is favored (Yin, 2014).
Accordingly, Gray (2012) states that case studies are precious and
valuable when the purpose is to explore questions in which relationships
might be ambiguous and uncertain. However, the author acknowledges
that the method relies on a deductive approach, which posed the need to
previously elaborate a theoretical foundation to guide the collection and
analysis of data. Such elaboration was also aligned with the flexibility inherent
to this research style, allowing previously executed steps to be revisited and
improved as case studies were conducted (Gray, 2012). For example, during
the elaboration of the model, resorting to further literature has been necessary
to obtain more relevant and recent contributions. Similarly, once case studies
have been finished and their analysis has started, additional adjustments on
the theoretical proposition and the model were necessary. Regardless, for
explanatory purposes, the diagram on the right illustrates the method and
execution of the research.
The research began with the construction of a theoretical foundation
capable of sustaining the case studies. As referred to by Yin (2014), the intention
was to select and organize the “study propositions” so that they could guide
them. This process was undertaken through an exploratory literature review
concerning the following topics: the creative process in design, interaction
design, and generative creation and computational thinking in design. These
topics were discussed throughout chapter 1 — research foundations — and
synthesized into a theoretical proposition and model whose purposes were to
support the confrontation of patterns during the case studies.
The studies mentioned above were executed with projects in which
professionals or studios have designed interactive products powered by

78
1. https://caiobarrocal.format.com/ generative systems. Therefore, the pair designer-process, or team-process,
codes-for-creativity
was considered our unity of analysis. We decided so because we understood
that information concerning these two main elements (creator and creative
process) was necessary to answer the research question. A few additional
selection criteria for cases were also established, as exposed in item 2.4.
To picture the creative processes undertaken during the projects
studied, we relied on in-depth interviews with professionals and teams and
on the analysis of final and partial deliverables created during the work.
Moreover, to properly answer the research question, the following general
goal has been defined:
To propose a model comprising relevant aspects of the creative
processes undertaken by contemporary professionals when designing
interactive products powered by generative systems.
Furthermore, to test the adequacy of our research tools and anticipate
the quality of the analysis proposed, a pilot model has been created, applied
into a pilot study, and results were discussed in a formal thesis committee
meeting. Developments proposed by the committee are discussed in item 2.5.
Lastly, to guarantee reliability and easier access to the contributions
made by this research, a digital database1 containing the cases studied has
been created.

2.2 Formulating the research question

A The very first activity of this work was to elaborate a research
question (Yin, 2014) to delimit our focus and guide accurate data collection
and analysis. Such a question is exposed right at the Introduction of this work.

2.3 Research foundations

An even better delimitation of scope and guidance was provided
as the research foundations were created and used as the basis of our
investigation. This foundation has been conceived as a three-layer conceptual
network, encompassing references and models from the following subjects:
creative processes in design, interaction design, and generative creation
and computational thinking in design.
By approaching creative processes in design, we built the
framework to describe and understand the investigated creative processes
appropriately. Relying on authors such as Sawyer, Cross, Lawson, and Dorst,
this research was framed as an investigation of creative processes in design,
as models and theories concerning the creative activity and its specificities
when in a design context were discussed. Then, we made our research corpus
Figure 38(previous page): Representation of
the method followed during this research. more approachable and enabled the interpretation of interaction design
79
processes by relying on the field’s literature to answer central questions,
such as: “What is interaction design?”, “What are the main approaches ?”,
“What is a conventional interaction design project like?” and “Which models
have been guiding the creative activity of interaction designers, especially
in the professional practice?”. Lastly, by studying generative creation and
computational thinking in design, we delimited the object of this study
and discussed important theoretical propositions about the participation of
generative creation in the design process.
Moreover, each of the subchapters of the research foundations was
finished with a board and a sentence comprising its main contributions.
These contributions were used as the basis of the theoretical proposition and
the model transported to the case studies.

2.4 Unity of analysis, selection of cases, and corpus

construction
After better delimiting our scope, we defined the criteria for selecting
cases and constructing the corpus. Once this study seeks to understand
and model the creative process involved in designing interactive products
powered by generative systems, the unity of analysis (Yin, 2014) was
considered the pair designer-process, or team-process. Research methods
were then selected to elucidate them. Moreover, since this research’s
contributions rely on the theoretical generalization (Yin, 2014; Gray, 2012)
of the phenomena investigated rather than on statistical inferences, cases
were selected considering their quality as relevant data sources. Resorting to
concepts such as relevance, homogeneity, and synchronicity to assess the
quality of potential cases, we defined the following selection criteria (Bauer &
Gaskell, 2000).

- Cases must be contemporary: attempting to capture how professionals

are working right now and make an up-to-date contribution for the field;
- The professionals or teams researched must have previous experience
in the field and national or international relevance: to assure relevance
and wealth of detail by investigating creators with maturity and established
practices;
- The professionals or teams must be involved in the development
and technical aspects of the algorithm systems: attempting to uncover
processes more probably influenced and characterized by generative creation;
- Interaction between the product and users is taken as fundamental
by the professionals researched: so we can interpret processes in which
interaction is an aspect designed.
Figure 39 (next page / bottom): the pilot
model we used to measure the quality of our
case studies strategy.

80
2.5 Pilot study and thesis committee meeting
Relying on definitions provided by the first research foundations,
a pilot model was created and put into practice through a pilot case study,
which allowed us to assess the adequacy of our research instruments for the
problem and experiment with a few different analysis frameworks. The results
of this pilot study have been discussed with the thesis committee in a regular
meeting and their suggestions were incorporated into the process, resulting in
the definitive versions of the research foundations, model, and research tools.
Despite acknowledging the fundamental differences between
creative processes in which generative systems are used and conventional
ones (Groß et al., 2018), we relied on a generalist design model to obtain
insights and start shaping our conceptual framework and our research
methods through practice. Therefore, to provide structure for a first mapping,
we relied on the model proposed by Lawson and Dorst (2009, p.50) — in
which the most relevant skills and activities of a successful design project are
categorized into formulate, represent, move, evaluate and manage — to
elaborate the following pilot instruments:

Pilot Model (PM)

The same generalist design model was used as the basis for the induction
of hypotheses during the analysis of the pilot case. The following figure
illustrates it.

81
Pilot Interview Script (PIS)

1: Formulate
_
1.1 - What were the intentions and provocations that motivated the
project?
1.2 - What discussions came into play once the intentions were clear?
What did you seek to define beforehand?
1.3 - Were there already limitations placed?

2: Represent
_
2.1 - Did the process also have manual steps, or was it all done on the
computer?
2.2 - Have you built prototypes?
2.3 - How was the communication between you and those responsible
for the development?

3: Move
_
3.1 - Before getting to the final idea, have you considered alternatives?
3.2 - And visually, how did you reach final results?
3.3 - I would like to understand the logic of the algorithm as well. Once
it receives signals, how does it synthesize shapes?
3.4 - Any reference, author, artist or project was an important inspiration?

4: Evaluate
_
4.1 - Why did you choose to pursue this idea? What were the criteria?
4.2 - Why did you choose to employ generative approaches?
4.3 - When did you get satisfied and decide it was time to stop?
4.4 - If there was not a deadline, what would you have improved?

5: Manage
_
5.1 - How was the project executed? Main steps and challenges?

Our pilot case was the Brazilian application Heartbits, developed by

Estúdio Guto Requena in collaboration with the production studio Midiadub.
The results of this investigation (thoroughly discussed in subchapter 3.1) were
presented to the thesis committee, and a few improvements were suggested
based on the key findings below:
82
- The investigated process tends to be highly collaborative as designers,
developers, and managers work together;
- The process is based on experimentation and rapid iteration. As referred to
by interviewees, “agile approaches” were employed;
- MVPs and partial deliverables are constantly developed, discussed, and
evaluated by the team as they evolve into the final versions;
- As a first important conclusion, the pilot model and first theoretical
foundation were based on an approach to interaction design that was design-
centered and delimited (waterfall approaches). Therefore, not so adequate
to the study of a process that is notably contemporary and multidisciplinary.
There was also a lack of conceptual references concerning the relationships
between design thinking and algorithmic approaches (computational
thinking), which diminished the interpretation of some aspects of the case;
- To provide greater maturity to the analysis and confrontation of patterns,
more contemporary contributions from authors of generative design,
generative creation, and computational design needed to be incorporated
into this work.

Furthermore, the committee’s feedback motivated the revision of the

research foundations, model, and research instruments. Such improvements
are summarized by the initiatives below.

- Further research on contemporary interaction design models was made to

provide additional references and more clarity concerning how recent trends
and organizations influence the investigated processes. Accordingly, different
models were included in the subchapter about interaction design, and recent
changes in the discipline have been discussed;
- Additional research has also been done to enrich the foundations
with discussions about the relationships between design thinking and
computational thinking and the idiosyncrasies of design processes carried out
with computational approaches. Therefore, recent contributions of models
and theories have been incorporated into the subchapter about generative
creation and computational thinking in design;
- Because the model used as the basis of the pilot model was not exactly
oriented towards a collaborative and experimental creative process, the in-
depth interview script has been re-elaborated and transformed into a more
open inquiry guide. The intention was to rely on interviewees to describe
their perception of the process and the significant steps and activities, leaving
discussion and confrontation of patterns for posterior analysis. Moreover, the
pilot model was also abandoned as an analysis tool.

Lastly, we decided to reanalyze Heartbits and maintain it as one of

our cases by reckoning on the generalist data it provided.

83
2.6 Data Collection
To picture the creative processes undertaken, our revised data
collection strategy relied on two main data sources: professionals (or teams)
and the artifacts created by them. In-depth interviewing was the primary
method selected for making sense of the studied processes. At the same time,
the analyses of both final and partial deliverables were considered additional
sources for a visual comprehension of essential changes, decisions, and
influences.
Being one of the main data collection methods in qualitative research,
in-depth interviews provide a detailed understanding of participants’ beliefs,
actions, motivations, and processes in their specific social contexts (Bauer
& Gaskell, 2000). In addition, they give interviewers several techniques and
opportunities to reach depth concerning the reasons, feelings, opinions,
and values that permeate interviewees’ choices, something important to the
present study (Legard et al., 2003).
Acknowledging that researchers have an active role in developing
data and meaning when conducting in-depth interviews, the following script
has been elaborated to provide structure for thoughts and considerations
while also leaving room for divagation and flexibility. It also aimed to
emphasize depth, nuance and make interviewees comfortable enough to
express thoughts in their own ways (Legard et al., 2003). Moreover, for better
conduction, the script was elaborated after the foundations of this research
and according to the framework of interview stages proposed by Legard et al.
(2003).

Interviews were carried out in Brazilian Portuguese. However, the

English version of the script is available below:

Interview Script (IS)

1: Arrival
_

- Welcoming and icebreaker

- Acknowledgment
- Introducing the researcher

2: Introducing the research

_

- Overview of the research

- Researcher’s background and motivations
84
- Introduction to the goals of our study
- Assure exclusivity regarding data usage.
- Ask permission to record audio and video

3: Beginning the interview

_
- Ask participants to briefly introduce themselves and comment on their
relationship with generative creation
- Ask them to comment on the studio or production company they work for,
if applicable
- Ask for an introduction about the project studied: How and when did
it start, and what motivated it?
- What did you try to decide beforehand? Were there requirements
established?

4: During the interview

_
- How was the project team composed?
- In your understanding, how was the process of creating the project?
- What was the path towards this final idea? Both visually and
technologically?
- Have alternatives been considered on this path? If so, why were they
abandoned?
- (I would like to understand more about the technological apparatus of
the project/installation) How does the system draw shapes? What were
the languages ​​or platforms used?
- What are the possibilities of interaction with the artifact? If applicable,
how were the sensors articulated?
- Why did you choose to use generative creation?
- When did you decide that the project was satisfactory and that it was
time to stop? What were the criteria?
- If there was a more extended deadline, what would have been
improved?

5: Ending the interview

_
- (Finishing) How was the interaction between team members and
clients during the project?
- Finally, what were the leading design and technological challenges
faced? How were they overcome?

- Is there something you feel is important to share before we finish?

85
 6: After the interview
_
- Further acknowledgments
- Explain the expected contribution of the interview to the research
- Talk about the consent form to be sent and the collection of additional
materials about the project.
- Next steps and farewell

2.7 Model and analysis

The pattern-matching strategy was adopted for data analysis. In
this way, a synthesis of predicted patterns — the model — was elaborated,
representing what we expected to find during the field research, and posteriorly
compared with patterns found through empiricism — case studies. Such a
strategy relies on similarities in patterns to reinforce the model and on their
divergences to pose questions and the consequent revision. This process
is iterated until the model reflects the observed reality more accurately —
favoring analytical generalization (Yin, 2014; Gray, 2004).
As discussed at the beginning of this chapter, the foundations of this
research were used as the basis for the elaboration of a theoretical proposition
(TP), which in turn resulted in the following model (M1) (Board 4) to be
transported to the case studies. During them, each of the subpropositions
was verified — being endorsed, partially endorsed, or refused — through
empiricism to compose the final model (FM).
We discuss the final version of the model, improved through case
studies, in chapter 4 — Results.

86
87
Chapter 3
Case Studies
3.1 Heartbits

3.2 Tocando Brasília

3.3 Futebol Arte

3.4 Atmosfera and Metaespaço
 Four case studies have been executed during this research: a pilot
study to test the adequacy of our data collection and analysis strategy and
three subsequent ones.
The pilot study was carried out with Heartbits, a Brazilian application
developed by Estúdio Guto Requena in collaboration with the production
studio Midiadub. The app was created during the covid-19 pandemics in the
first semester of 2020, and sought to mitigate the negative impacts of social
distancing by promoting an affective experience between people, even if
virtually. Therefore, the team relied on a generative system to deliver a mobile
application for iOS and Android devices, capable of detecting the frequency
of users’ heartbeats and using it to create a unique video to be shared with
friends and family. Founded in 2008 by Guto Requena, the Estúdio has been
notably developing hybrid projects that range from the design of objects,
spaces, and cities. The team has already won several awards for such efforts
and lectured and exhibited works in more than 20 countries.
Then, we analyzed the project Tocando Brasília (playing Brasília), an
interactive installation created by Alexandre Rangel for the exhibition “Brasília
Mapping Festival 2019: #smartcities”. Rangel is an experienced multimedia
artist, software developer, and Ph.D. in Visual Arts, and, for the exhibition, he
aimed to instigate moments of political awareness about the power relations
inherent to “smart cities” by inviting the public to interact with an installation
composed of city maps and musical outcomes.
The third study was executed with Samsung Futebol Arte (Samsung
Art Soccer), a project created by Caio Velenosi. The project commissioned by
Samsung sought to merge the technology of their to-be-released smartphone
(Galaxy S4) with soccer movements. Therefore, generative visual pieces
were produced by capturing and processing signals emitted by a Samsung
smartphone incorporated into a ball. Velenosi is a developer who works
with creative technology for more than ten years and is currently a technical
director at MediaMonks, an international digital creative studio with more
than 20 offices worldwide.
For the fourth case study, we investigated the installations
Metaespaço and Atmosfera (Metaspace and Atmosphere), created by Dimitre
Lima and Gabriela Castro for the Inventum 2019 — a science, technology,
and innovation fair promoted by the Brazilian city of Pato Branco. The
installations were generative technological interventions proposed by the
duo to enrich the experience of the event, which lasted five days and had
an estimated audience of 250,000 people. Both Dimitre and Gabriela have
consistent experience working with art, design and technology, reflecting on
a portfolio composed of projects commissioned by brands such as MTV, Red
Bull, and Nike, and projects for museums and the public sector.

90
1. Based on an interview with Bruno Aricó and 3.1 Heartbits
Camila Gonçalves on November 17, 2020, and
on a follow-up interview with Bruno Aricó on
February 15, 2021.
Heartbits 1 is a Brazilian mobile app developed by the Estúdio Guto
Requena in collaboration with the production studio Midiadub. Released in
the first semester of 2020 during the covid-19 pandemics, the app sought to
mitigate the negative impacts of social distancing by promoting an affective
experience between people, even if through the internet. The ​​ team relied
on a generative system to deliver a mobile application for iOS and Android
devices, capable of detecting the frequency of users’ heartbeats and using it
to create a unique video to be shared with friends and family. On the official
website, the purpose of the application is expressed as:

Heartbits is an app that transforms your heartbeat into digital art.

To share with those you miss.

In addition to Midiadub, which took over the application’s

implementation, the project was carried out by a multidisciplinary team of
the Estúdio. They were represented by Camila Gonçalves, the coordinator
of the project, and Bruno Aricó, the technology specialist and creator of the
generative algorithms used.
According to Camila, the initial idea for the app came from the
team’s motivation to engage in conceptual projects not necessarily associated
with client brands. Furthermore, as the Estúdio already has a culture focused
on the intersections of art, design, and technology and on projects based
on biofeedback, another incentive was to look for additional applications
for these generative systems they have been working with. These intentions
gained more structure when the studio decided to participate in a Vogue
call for action on Instagram, which invited designers to submit projects that
could contribute to the situation of people during the covid-19 pandemic. At
that time, Camila said that the problem took shape as discovering “if, with
a generative, purely abstract art, we could send our heart to other people
through a free app that everyone could download”.
Once it was decided that the generative system would run on a
mobile app for Android and iOS, other requirements were determined.
According to Camila and Bruno, the team picked early on that they wanted to
develop a free and accessible application that would not only appeal to visual
but also sound and haptic sensibilities.
After the first definitions, moments of externalization and alignment
were carried out through a series of recurrent virtual meetings — “very
interactive moments”, for which a frequency of one or two meetings per week
was determined and in which primary references, drafts, and visual proposals
of the interface and the generative shape to be designed were discussed.
91
 This choice was also motivated by social distancing rules during the
covid-19 pandemics.
In general, once the initial problem was framed and defined, the
application’s technological/algorithmic and visual aspects started being
elaborated. According to Camila, although the intention of designing a system
capable of presenting audio and haptic vibration was already posed, visual
directions were still undefined. In this sense, the creative process consisted
of parallel evolutions of a technical effort to develop the system to capture the
heartbeat and a design effort to create the visual elements to be modulated
by the produced system. Still, according to the project coordinator, the team
began by collecting references from other creators and studios they liked.
In “baby steps”, as referred to by her, this process helped establish colors,
typography, and the overall aesthetic directions of the application. For
instance, because the project dealt with concepts of empathy, emotion, and
feelings, Camila said it “made sense” to begin by searching for an “organic”
and abstract shape to be modulated by the generative algorithm instead of
Figure 40 (top): Digital sketches and mockups
something sharp. that were submitted to the Vogue magazine’s
calling.

92
 According to Bruno, the collection of references mentioned above
fed an interactive creative process. In his words, the process resembled
“agile development”, as it relied on constant research, collaboration,
experimentation, and evaluation. Once the initial concept was defined,
the process evolved around the main generative shape, as illustrated by
the primary references and propositions presented on the board below. In
general, the successive design propositions sought to define this main shape
to assume the generative character of the algorithm and to illustrate the
project’s intentions.
In line with what Camila said about choosing a rounded and
“organic” shape, the references above illustrate that such an investigation was
indeed executed.
In general, the visual evolution followed a process of:
- searching for references centered on movement-related and geometric
visual elements;
- beginning experimenting with potential shapes, textures, colors, and
possible responses to the generative algorithm;
- defining the aspect of the principal shape and color palette;
- experimenting now with a more defined aesthetic direction, including
Figure 41 (top): Examples of references
collected by the team of the Estúdio to start textures and high-fidelity aspects; and
developing the generative shape.

93
- iterating and refining until the end of the project.

Such a process is exemplified by the boards above (of references)

and below (of designs proposed by the team in the middle of the process).

94
 Technologically, according to Bruno, the evolution of the project
consisted of figuring out a satisfactory sensor to capture the heart rate in a
simple, practical, and cheap way and of elaborating an algorithm to accurately
process the heart signals collected. Still, a substantial part of the technological
developments consisted of continuous refinement of the programs involved
in implementing the application, along with Midiadub.
Heartbits’ visual interface is based on Unity, a framework used for

95
creating digital games and developing multi-device visual and interactive
experiences. Users’ navigation begins on a screen with brief instructions.
Then, users are directed to another screen that indicates how they should
interact with the device’s camera — the sensor. Once the system senses the
positioning of the finger and starts to read the heart rate, it changes the screen
state to one in which the detected rate is displayed in real-time (in BPMs),
accompanied by a primitive shape that also reacts to the beats. After capturing
and analyzing the heart rate, the system builds and presents a preview of the
generative video. At this moment, users can choose whether to synthesize
and record the video along with a text and whether to vary the composition’s
color palette, among other previously stipulated options. Finally, users have
their video rendered and are invited to share it with friends and loved ones
through their social networks or download it.
Once users ignite it, the generative system waits for the finger to be
positioned on the device’s camera. According to Bruno, the team decided to
employ the camera as the sensor after researching and discovering a technique
called photoplethysmography, through which optical devices (the camera)
can be used to detect changes in blood volume of body tissues, allowing
the system to measure the variation in heart rate and determine the user’s
frequency, in real-time. Moreover, choosing the camera was also advantageous
because it is a cheap sensor, built-in into most of the smartphones.
Through photoplethysmography, pictures of the finger were

96
continuously captured, meaning that successive arrays of pixels represented
by their chromatic values were received by the computer. The system
inferred the variation in blood flow by monitoring the intensity of red in a
particular region of the image over time, as illustrated by the boards 7.1
and 7.2. Moreover, during analysis, signals were processed by a Fast Fourier
Transform, an algorithmic technique in which input signals are normalized
into a data range relevant to the phenomenon in question. For example, in the
case of Heartbits, the Fourier algorithm transformed the red-related values
received into “equivalent” values in a heart rate scale.
Lastly, after preparing the data, the generative system creates videos

97
by articulating the main visual aspects that compose them.
The circular shape was created in Unity, which includes a library of
native functions to synthesize elementary shapes. In Heartbits, the ellipsoid
was synthesized by one of these native drawing functions. The volume and
toroidal aspect were also created by Unity, which allows the distortion of
shapes through the manipulation of the vertices that make up their polygonal
mesh (which describe three-dimensional objects). In this case, central
vertices of the ellipsoid were expanded, which gave the shape the appearance
of a “red blood cell”. Colors and gradients were also aspects supported
by Unity’s native libraries. As stated earlier, there was no generative logic
behind chromatic choices. When the analysis was finished and the video was
presented, the system randomly colored it with one of the available palettes.
Finally, according to the detected heart rate, the algorithm animated the shape
by successively increasing and decreasing it. Although not precisely a sphere,
it would be as if the shape had its radius increased and decreased, in the same
detected frequency.
When asked when the app was considered satisfactory, both
interviewees agreed that it happened when the app was visually appealing
and accurate in terms of the heart rate detected. Such a process suggests
that quality assessment was essentially defined by the deadline. Moreover,
Camila added that the self-imposed one-month deadline was motivated by
the uncertain duration of the social isolation at that time: “as we were in a
context of not knowing how long the quarantine would last and if there would
be lockdown or not, we thought it made sense to release an app that sought to
bring people in social isolation together while they were in social isolation.”
However, the coordinator acknowledged that a greater personalization
of the experience through the insertion of photos, for example, and further
testing with alternative shapes and color palettes, were aspects among the
team’s intentions for a possible second version. In addition, for Bruno Aricó,
technical improvements in the accuracy of the sensor and in the algorithmic
process that determined the heart rate would be relevant points for future
versions. These aspects were considered satisfactory at the time though.
In general, from the initial concept, Heartbits’ design process
was conducted through three fronts: graphic and user-experience-related
propositions; development of the generative system; and implementation for
Android and iOS.
Tiago Toledo, the graphic designer of the project, conducted the
first initiatives. Next, the project of the generative algorithm was carried out
by Bruno Aricó. Lastly, the implementation of the application was carried
out by Midiadub. It is worth noting that the choice of having a partner for
development was due to the lack of internal expertise.
According to Camila and Bruno, the tight deadline and social
isolation also motivated an interactive process in which visual, algorithmic,

98
and technological efforts were constantly presented and discussed. A
frequency of meetings was defined, occasions in which each of the fronts
presented their progress, exchanged information, asked questions, and posed
other possibilities for the entire team. For a relevant level of collaboration
and constant cycles of conceptualization, development, prototyping, and
validation, Bruno stated that the process resembled “agile development
methods” — a standard project management methodology for tech-related
projects based on rapid iteration and collaboration.

Analysis and Discussion:

When confronted with the subpropositions (SPs) of our model, the case
suggested the following implications:

1- Designers have their creative process fundamentally altered, as

their role shifts from directly manipulating artifacts to curating
and evaluating the computational processes that are supposed to
produce them (Partially Endorsed)

Bruno was responsible for designing the generative algorithms and

transforming them into programs. The developer relied on computational
processes to collect and process inputted data and transform it into the
video. Such a statement suggests that direct manipulation receded to
the background as the computer was literally producing final results.
However, it was still used throughout the project to create reference
boards, aesthetic guidelines, and design propositions.
As discussed previously, the creative process consisted of parallel
evolutions of a technical effort to develop the algorithm to capture
the heartbeat and a design effort to elaborate the visual elements to be
modulated by the designed algorithm.
We considered SP1 partially endorsed by this case because instead of
being abandoned for the exclusive curation of computational processes,
direct manipulation still happened and contributed to the creative
process, even if not being employed to produce the final artifact. More
specifically, in Heartbits, such manipulation was used to constantly
elaborate graphic guidelines to be achieved by the system.

2 - Such a creative process involves reaching an idea; abstracting

it into an algorithm, translating it into a program to be executed;
and obtaining and evaluating the output — what would possibly

99
 feedback the cycle. (Endorsed)

The steps mentioned above could be identified throughout the

process, but not in a delimited way. After the first sessions in which
the team settled aesthetic concepts to be pursued by the app, they
carried out constant cycles of experimentation in which they co-created
visual ideas through direct manipulation; experimented with synthesis
through different algorithms and programs; and evaluated outcomes
to figure out the adjustments to be incorporated in the next iteration.
In short, all elements contained by the subproposition were executed
through many explorations and evaluation by the team.
Therefore, SP2 was endorsed, but it is necessary to point out that
stages of ideation, abstraction, formalization, evaluation, and refinement
happened disorderly during the project.

3 - Due to the existence of a characteristic layer of abstraction —

as designers need to think in terms of algorithms to create desired
artifacts, there is a relationship between this specific creative
process and computational thinking — to which abstraction is a
characterizing aspect, which implies that designers are required
to rely on abilities related to design thinking and computational
thinking. (Endorsed)

As discussed previously, Heartbits essentially relied on two parallel

efforts: one technical effort to figure out the sensor and data processing
algorithms to be used, and a design effort to define the look and feel
of the interface and of the shape that was going to be modulated by
the generative system. Bruno was the actual programmer of the system
behind the synthesis of the video, which implies that computational
thinking was required. Still, through many explorations of visual and
audiovisual references and co-design sessions, the team could frame
the problem as an inquiry into the best ways to synthesize a given visual
concept computationally. Such a mixed process suggests that abilities
related to both computational thinking and design thinking were
employed. Because of that, SP3 was endorsed.

4 - Concerning its execution, the creative process in question

does not always have a concept as a starting point for ideation
(concept-based ideation). It can also rely on many explorations
with the material — programming and software tools — to
encounter more concrete concepts to be pursued as selected
ideas (material-based ideation). (Endorsed)

100
 The problem tackled was framed by the team in terms of the
experience they intended to deliver — its functional and aesthetic
purposes. In this formulation, generative creation came as the chosen
means to materialize a preconceived concept instead of being the
material experimented with for ideation.
More specifically, visual concepts were elaborated to define a shape
and behavior to be modulated by the generative algorithm. At the
same time, programming and technological efforts aimed to enable the
proposed experience in the best way. By exemplifying concept-based
ideation, this case endorsed SP4.

5 - It can also be conducted in ways that are either more structured,

sequential, and unidisciplinary — waterfall approaches; or
based on multidisciplinary collaboration, rapid iteration, and
experimentation — agile methods or multi-track. (Endorsed)

In general, the creative team iterated over a cycle of:

- proposing visual concepts;

- discussing the visual quality of these propositions;
- judging the feasibility of ideas according to the skills of the group;
- developing an MVP of the selected concepts;
- discussing results in relation to the guiding visual concept;
- adjusting the guiding vision, if necessary;
- and repeating this cycle, until satisfaction was achieved.

Collaboration was also a remarkable aspect, as the

multidisciplinary team constantly got together to ideate, select ideas to
pursue, and evaluate both visual and software propositions.
Since an approach based on multidisciplinary collaboration, rapid
iteration, and experimentation was employed, SP5 was endorsed.

6 - Regardless of specific constraints and the approach, when

designing an interactive product, designers undertake the major
stages plan, define, design, develop, and deploy, and the activities
designing alternatives, prototyping, evaluating, and discovering
requirements. (Endorsed).

The framing of the problem and definition of first intentions were

accompanied by establishing functional, aesthetic, and technological
requirements. In other words, specific choices concerning the
devices, input data, platforms, and programming languages were
put on the agenda beforehand. Such planning also established the

101
 intention to develop free applications to run in Android and iOs.
Moreover, through a series of the development cycles already discussed,
the team constantly defined their next steps and experimented with a
set of design, development, and deployment alternatives. These cycles
were also based on prototypes and MVPs that supported evaluation, as
illustrated by the questions below:

a) Are the sensors accurately capturing real-world and user signals?

b) Is the system satisfactorily processing the input data so that it can
be used?
c) Is the system synthesizing a visual message that we like and that is in
line with our intentions?
d) Is the system synthesizing the artifact so that it runs satisfactorily on
the chosen devices?

Because of the aspects discussed, SP6 was endorsed.

The implications discussed previously are summarized and illustrated

through the filled model on the next page:

102
103
3.2 Tocando Brasília 2. Based on the interview with Alexandre
Rangel on May 11, 2021.
Tocando Brasília2 (Playing Brasília) was an installation created by
Alexandre Rangel for the Brasília Mapping Festival #smartcities. The event
happened on July 6th and 7th, 2019, in the National Museum of the Republic,
in Brasília, and aimed to instigate reflections about the so-called smart cities
and the perception of urban spaces through technological interventions.
According to Camila Handam, one of the directors of the event, the primary
purpose was to promote a dialogue between landscape architecture and the
public space of cities through creative situations constituted by a lucid state
of interactive content.
To Rangel, the project has been a materialization of a myriad of
aspects inherent to his work. The artist has been familiar with computing
and digital media since very young. When he was about ten years old, he had
the opportunity to take a few programming courses. Since then, he has been
dedicating his career to the intersections of art and the production of digital
and audiovisual content (e.g., interactive CD-ROMs, interactive installations,
mapped projections, and web programming). After obtaining his Bachelor’s
Degree in Visual Arts, Rangel started to combine his artistic and technological
affinities more intensely. Notably, his interest in audiovisual production led
him to elaborate a software tool focused on video editing in real-time. Called
‘Quase-Cinema’ (almost cinema), the tool dedicated to enabling live video
performances was first proposed as an undergraduate thesis and received
important updates as time went by.
During his Master’s degree, Alexandre dedicated himself to
researching artistic-based educational initiatives, intending to empower
people to express themselves through audiovisual content. Therefore, the
artist resumed his work with the ‘Quase-Cinema’, and relied on it as the basis

Figure 42: A picture of the interface of

‘Quase-Cinema’.

104
of these educational and creative initiatives.
The project ‘Tocando Brasília’ was born from experimentation.
At first, Rangel sought to go beyond the domains of projects he had been
developing in his master’s degree as a way to oxygenate his creative practices.
“To expand horizons”, as referred to by him. From this process of looking for
new creative paths, two exceptionally motivating milestones for the origin
of Tocando Brasília have been highlighted by the artist: to have discovered
the live coding practice through programming languages such as Ixi Lang and
Orca.
Live coding is a practice in which performers modify and adapt
software tools they have developed for multimedia presentations as
they unfold. In this sense, the very act of programming becomes a critical
component of the program’s execution. Created to run in a live coding context,
Ixi Lang consists of an environment oriented to producing generative music,
allowing performers to execute commands capable of modifying the source
code: reordering, shuffling it, and, consequently, resulting in new musical
compositions.
According to Rangel, his “discoveries” revealed a possible non-
linear route for computer programs, another way of programming that
instigated him to perceive computing as a means and an end. Interested in
this “metaprogramming”, the artist learned the programming language Orca,
which Rek and Devine created to be a flexible live coding environment.
Defined as an “esoteric” language by its creators, Orca enables the creation
of procedural sequencers by displaying to users a two-dimensional matrix
in which letters of the alphabet can be arranged to represent computational
operations. In addition, the environment easily integrates with other visual and
sound software tools (e.g., Ableton, Renoise, VCV Rack, and SuperCollider),
which allows Orca-produced signals to be transformed into different outputs.
With Orca, Rangel could represent programs as visual compositions, having
these “two-dimensional sculptures” as novel interfaces in which commands
are not necessarily interpreted from left to right and top to bottom but more
flexibly.
Still challenged by concepts of rigidity, programming, grid, and
deconstruction, Rangel brought to the creative process his fascination
with the architectural plan of Brasília. According to him, such an initiative
characterized by a rigid system of rules, blocks, regular demarcations, and
attributions to urban life has been fascinating and intriguing him for a long
time. Tocando Brasília was born from this mixture.
Intending to tension the normalization of life in the city and the
decisions that culminated in its organization, Alexandre sought to recover a
sentiment of “something different [...] this questioning”. Therefore, the artist
developed a structure whose interface merged the map of Brasília with the
coordinates of blocks — extracted and interpreted as musical notes via Orca

105
 commands — and user’s participation through a video game controller. In
addition, the system recurrently projected texts about the original project
of Brasília, written by the architect and urban planner Lúcio Costa, into the
screen. “Another layer of meaning”, according to Rangel.
Figure 43 (previous page / top): Orca’s
interface. The dynamics of the installation refer to a mix between Space
Figure 44 (previous page / bottom): Example Invaders and Tetris. Through the gamepad, users command a cursor that
of an Orca program and its visual outcome.
Figure 45 (current page / top): Examples of the emits “pulses” as it moves. These pulses, emitted by the cursor, touch the
interface of Tocando Brasília and the devices that coordinates of the blocks, interpreted as Orca commands, and “destroy”
supported the installation (gamepad and TV).

107
them, causing sounds to be cast. “What is it I am experiencing?”, “Do I have a
goal?”, “Do I have to destroy the blocks, or do I have to avoid destroying?” and
“What is this sound I am making?” were some of the questions Rangel sought
to provoke.
The experience was complemented by a timer that switched the
maps in the background and additional commands that users could execute
through the gamepad, such as changing the displayed sector and the music
style. According to Rangel, the experience was designed as “a computer
program, on top of a map of a city that was also programmed and planned”,
which allowed users to feel like an architect, building and destroying.
Still according to Rangel, his work’s experimental nature reflects the
constant search for subversive ways of using software tools, in other words,
finding creative uses beyond those originally proposed. Experiments such as
spreadsheets to control musical software, among other attempts, characterize
the artist’s style. In the case of Tocando Brasília, Rangel started with “an
idea of putting the programming software to control maps and sound”. An
initiative that became more concrete as the artist decided to carry out tests
with a webcam as an input sensor to power an Orca program (Figure 46):

I created this blank Orca programming window, and I made another

software that interpreted the input of the webcam’s data and transformed
the shadow and light of what the webcam was seeing into random letters,
[...] I put this inside Orca’s programming, without having any idea
what was going to happen, either visually or sonically. I thought: ‘look
how interesting, the webcam [...] can send me two hundred and fifty-five
letters, but let me just restrict on the letters that are equivalent to musical
notes, from A to G’.

With this test, Rangel figured out that a vast amount of commands does
not cause an overload or interruption of Orca programs since only the
interpretable part is executed. Furthermore, through successive tests, he
managed to establish a spectrum of predictability for the interactivity of his
program: on one extreme of total predictability, users could, for example,
“press the keyboard, do 1 + 1, and get 2”; on the other, “the craziest thing
could happen, like a dance in front of the webcam being transformed into a
thousand programming commands”.
This negotiation between predictability and unpredictability, as
referred to by Rangel, also illustrates a difference between art and design
that he brings as a dialectical element to his projects. “Design is the most
predictable, the most objective, in the sense of having a goal [...]”, while art
points to the “unpredictable, uncontrollable”, capable of evoking “a different
perspective”. After building this spectrum, Rangel said that the question was
finding a middle ground between total predictability and chaos. Something
108
 that, in Tocando Brasília, resulted in the gamepad being chosen as the primary
interface. “The person immediately thinks: ‘Oh, I am controlling this cursor
that is destroying the buildings. I do not know what is happening [...], but this
relationship, at least — left, right, up and down — I have’”. Rangel often resorts
to balancing control and non-control to promote involvement, mystery, and
interest.
Although some requirements and motivations have remained
constant since the beginning of the project, the interface took on very different
“looks”. The artist saw the city’s blocks, neighborhoods, and buildings as
easily abstractable into music because of their very regular project. Therefore,
starting from the idea of assigning sounds to the city of Brasília, Rangel
attempted to turn the city’s geography into a kind of score users could play by
hovering over the elements.
The interface’s appearance in these early explorations resembled
the interface of Google Earth, but without the maps underneath it. “Just
the 3D models”, as referred to by Rangel (Figures 47, 48 and 49). Moreover,
despite having changed towards the final version, it maintained the logic of
hybridizing general geographic coordinates with coordinates of buildings,
getting the letter that represented each one of them — commonly between
Figure 46 (top): One of Rangel’s tests with a A and G—, and, finally, interpreting these letters as corresponding musical
webcam as a sensor to feed an Orca program. notes.
109
 What led the artist to keep elaborating the look and feel of the
interface was precisely the level of predictability and control he hoped to
convey. Linking sonification to mouse movements entirely controlled by the Figure 47 and 48 (current page / top): Rangel’s
user would not result in a sufficiently exciting and surprising experience since first experiments for the interface of Tocando
Brasília.
this interaction is highly intuitive for users of digital devices. Moreover, while
Figure 49 (current page / middle): First
working on the visual interface, Alexandre abandoned the three-dimensional experiments having the map of the city as the
aesthetic in favor of a “vintage” aspect. He said such an association was main interface (on the right) and a playable
musical score.
natural after proceeding with the gamepad and the Orca interface. Figure 50 (next page / top): Example of the
interactive dynamics of Tocando Brasília, based
on a gamepad.

110
 In the end, Tocando Brasília took shape as an interactive installation,
mediated mainly by a gamepad. The structure consisted of a vertically-placed
TV connected to a Mac Mini computer which, in turn, was connected to
the video game controller. Moreover, three software tools were used: on
a first level, a program written in Processing was responsible for receiving
the gamepad commands, selecting Lúcio Costa’s maps and text excerpts,
and sending all this information to Orca. Then, Orca was responsible for
synthesizing the visual and interactive experience by displaying the maps,
coordinate letters and the text excerpts that would be turned into music.
Finally, Orca sent musical notes — in MIDI — to a music production software
(e.g., Ableton Live or Helm) running in the background.
In short, the music production software was responsible for
synthesizing the sound of the installation, Orca was responsible for
synthesizing the interface and supporting intended interactions, and
Processing was the engine that commanded the scene changes, placed Lúcio
Costa’s texts on the screen, and received, interpreted and executed gamepad
commands.
While the reasons behind using Orca have been explored, Rangel
chose Processing because of the simplicity it allows interactivity-related
operations and commands to be created. Accordingly, that is the reason why
it is “one of the first tools”, as referred to by him, when dealing with similar

111
 projects: “It is a software that I can more easily put pieces together with. It
has a lot of these libraries to make one software talk to another”. Generative
creation, in turn, was employed by Rangel, as it commonly is in many of his
works, because of the originality and unpredictability it provides. According
to him, the possibility of making and running software capable of producing
unexpected results to visitors on different occasions is an aesthetic quality he
esteems. “Almost as if fate was working there”, in his words.
Rangel considered the project satisfactory when it caused
“enthusiasm” in him. When asked how and when he decided to stop, he
pointed out that he usually finishes his more artistic works when delighted
with the results achieved. In his words: “It is this fascination, right? When we
see and actually say: ‘Wow, it is fun [...], it is cool’. And I see myself recording
movies, publishing [...]”. Nonetheless, despite getting satisfied at that time,
the artist admitted that he would continue developing Tocando Brasília if he
had more time and resources: “I would like to have a version of it that could
run online, for example”.
Finally, according to him, the project’s biggest challenge was
establishing connections between the many software tools involved in the
work. Something he figured out after spending “half of the time studying and
researching” the UDP protocol, “a way to make software tools talk to each
other”.

Analysis and Discussion:

When confronted with the subpropositions (SPs) of our model, the case
suggested the following implications:

1 - Designers have their creative process fundamentally altered, as

their role shifts from directly manipulating artifacts to curating
and evaluating the computational processes that are supposed to
produce them (Endorsed)

Rangel puts programming and his software experiments in the

center of the creative process as they intermediate and influence
aesthetic choices and support ideation, elaboration, and execution. As
he referred, the process relied on “openness” to the possibilities offered
by the software tools and programming languages he could get to know.
Visual references were not manually elaborated by the artist, who
Figure 51 (previous page): Photos of the
let experimentations point out aesthetic paths. Since the analysis
interface of Tocando Brasília and its layers: the suggested that direct manipulation was indeed abandoned as results
map, orca letters, cursor and Lúcio Costa’s texts.

113
 obtained through programming and software were constantly evaluated
and refined in the same medium, SP1 was endorsed.

2 - Such a creative process involves reaching an idea; abstracting

it into an algorithm, translating it into a program to be executed;
and obtaining and evaluating the output — what would possibly
feedback the cycle. (Endorsed)

We could identify moments related to each of the steps mentioned

above throughout the process.
The idea was shaped after cycles in which Rangel elaborated concepts
through programming or playing with software; he had a “click”, in his
words, as he saw connections between his experimentations and the
structure of the city Brasília. Then, still through cycles of experimentation,
he programmed and connected all the interfaces to properly develop
the concept, which implies that ideas were necessarily abstracted into
algorithms, formalized via source code, and run. Output evaluation
was also essential as partial results and intermediate versions were
often abandoned or pursued as a means for taking the project to the
end.
SP2 was endorsed, but it is necessary to point out that stages did
not happen linearly. On the contrary, moments of ideation, abstraction,
formalization, evaluation, and refinement happened disorderly during
the project.

3 - Due to the existence of a characteristic layer of abstraction —

as designers need to think in terms of algorithms to create desired
artifacts, there is a relationship between this specific creative
process and computational thinking — to which abstraction is a
characterizing aspect, which implies that designers are required
to rely on abilities related to design thinking and computational
thinking. (Endorsed)

The creator employed abilities related to computational thinking

as he programmed the software tools needed for the execution of the
installation. Fundamentally, to create an executable and satisfactory
program, one needs to articulate abilities such as debugging,
algorithmic thinking, generalization, and automation. However, more
than that, Rangel relied on the very nature of computing and software
to experiment with and express his ideas, which suggests a creative
process in which computational thinking is deeply embedded.
On the other hand, to propose the whole experience of Tocando
Brasília, Rangel had to frame the problem as some sort of equation in

114
which he had to balance aesthetic intentions, possibilities of execution,
and involvement of users. This consideration reflected on the constant
experimentations with interactive inputs and refinement until a desired
experience of use was achieved. Because of the experimental nature of
the process, as referred to by the artist, another design-related aspect
is that problem and solution did coevolve, something illustrated by the
different interfaces and inputs presented by the first versions of the
work.
The above-discussed mixture of abilities endorsed SP3.

4 - Concerning its execution, the creative process in question

does not always have a concept as a starting point for ideation
(concept-based ideation). It can also rely on many explorations
with the material — programming and software tools — to
encounter more concrete concepts to be pursued as selected
ideas (material-based ideation). (Endorsed)

Rangel relies on a creative praxis that seeks to go beyond common

uses of software and programming. He is “always focusing on exploring
computing itself as the means”. Such a premise motivates the author to
“go beyond aesthetics”, and sometimes even to let it aside completely
to evoke curiosity and mystery.
Material-based ideation was favored in Tocando Brasília, as
illustrated by the software-based network of concepts that resulted in
the final work. By highlighting the discovery of live coding and, more
specifically, of Orca as the aesthetic foundations of the installation,
Rangel demonstrated how software experimentations guided his
creative process instead of being employed as a means to achieving a
preconceived concept.
We considered SP4 endorsed, as well.

5- It can also be conducted in ways that are either more structured,

sequential, and unidisciplinary — waterfall approaches; or
based on multidisciplinary collaboration, rapid iteration, and
experimentation — agile methods or multi-track. (Endorsed)

Being stated as “open” and “experimental” from the beginning,

Rangel’s creative process relied on unordered and interspersed
experimentations to elaborate the idea, figure out the input format and
dynamics of interaction, and define the look and feel of the installation.
Such a process was repeated until a satisfactory interface was built.
Therefore, the case not only endorsed SP5 but also endorsed that an
experimental approach was preferred.

115
 6 - Regardless of specific constraints and the approach, when
designing an interactive product, designers undertake the major
stages plan, define, design, develop, and deploy, and the activities
designing alternatives, prototyping, evaluating, and discovering
requirements. (Partially endorsed)

It is worth noting that the experimental nature of the project and the
lack of client requirements made stages related to planning and defining
less emphasized, which does not imply that they did not happen. As
discussed in our foundations, throughout any design process, moves
and next steps are intuitively planned and defined as the project is
carried out, even if not during delimited stages dedicated to it.
Regardless, Tocando Brasília was indeed carried out through the
exploration of alternatives and a relevant process of prototyping that fed
technical and aesthetic evaluations. However, instead of belonging to a
delimited stage of testing, in which validation was executed according to
pre-established criteria, prototypes were constantly built as partial
versions of the interface. Attempts.
Moreover, as stated by Rangel, both the level of predictability
and the intended familiarity with the interactive dynamics were
evaluation criteria. When designing the structure and defining how
users would use it, the artist experimented with different inputs and
algorithms to enable interactions that were not chaotic but also not
predictable. Because of that, SP6 was endorsed. However, again it is
necessary to point out that the flexible brief of the exhibition made
abilities related to planning, defining, and discovering requirements less
prominent as delimited stages.

116
3.3 Futebol Arte 3. Based on the interview with Caio Velenosi
on May 19, 2021.
4. A type of software ​​focused on enterprise
Futebol Arte 3 (Art Soccer) was developed by the production studio resource planning.
Cricket Brasil — currently a part of the international company MediaMonks
— as a publicity campaign for the release of Samsung’s Galaxy S4 smartphone.
The project explored the movements of a soccer ball during kick-ups to
synthesize generative art pieces. Caio Velenosi, responsible for developing
the software tools employed in the project, was an interactivity developer at
Cricket Brasil at that time.
Velenosi has been working with software development for more
than ten years and has started to explore the field when he was a teenager. The
discovery of generative creation came as Velenosi got involved with projects
related to web interactivity. One thing led to another, as the interviewee
said: “in this process of working with Flash, web, [...] I ended up discovering
creative coding and this part that involves generative design, visual
computing, even physical computing, integration with sensors, with external
systems and everything else”. Since then, Velenosi has been working at the
intersection of technology and design, developing experimental installations
and interactive experiences that often employ generative creation. “I had the
opportunity to work on different projects, from urinals that did guitar solos
to kinetic installations”, he added. Moreover, before getting involved with the
elaboration of interactive and experiential installations, he also worked with
developing more business-oriented tools, such as ERPs4.
After some years of existence, Cricket Brasil became the Brazilian
unit of the international producer MediaMonks. With the transition, Caio
continued to progress in the area as he joined the new unit’s team as a
senior developer. Today, he holds the position of technical director at the
company. According to him, “​​MediaMonks is probably the largest digital
producer in the world today, in terms of offices and number of people.” The
multinational company operates in several segments, “from platform systems
and more business-oriented long-term projects to movies, animation, and
games [...]. Practically all segments...” , explained Velenosi. In addition to
these, MediaMonks also produces projects the company calls experiential,
a category that embraces physical computing projects, new technologies,
extended reality, virtual and augmented realities, and physical installations.
Before being incorporated into the MediaMonks structure, “Cricket
was one of the main production studios working with experimental projects”
within the national market, according to Velenosi. Since 2012, the agency has
carried out projects for large clients, such as Billboard, C&A, Samsung, and
Globo. According to him, this relevance led the agency to be incorporated into
MediaMonks as one of the main units dedicated to experimental projects. “In
the Netherlands, MediaMonks was already starting to work with experimental
projects. And then, when we joined, we were able to expand it a lot”.
118
 Futebol Arte was commissioned by Leo Burnett — an advertising
agency that provided services for Samsung at that time. “They came to us with
the intention of doing something different for the release of the smartphone
and to try to do something that was more creative,” Velenosi said. Along with
the brief, according to him, came the idea of incorporating soccer-related
concepts into the project’s creative equation: “The idea of ​​the soccer ball
came to us, like: [...] ‘How can we make a soccer ball with a smartphone turn
into art, into something tangible?’. From there, the challenge became figuring
out “the physical feasibility — how to put a cell phone inside a ball —, and
software requirements — how to turn it into something relevant, visually
attractive and all that” concluded the developer.
Since the team started with the intention of capturing and processing
data of the soccer ball’s movements, a first challenge was to enable the
integration of the smartphone with the ball. Humorously, Caio noted that the
ball ended up being “very difficult to play”, since a large foam coating for
protection was necessary: “We could not use a common ball. So we had to
find a supplier who made them by hand, learn how to sew the ball to be able
to put the cell phone inside it, and everything else”.
Alongside this integration effort, another challenge for the team was
connecting and sending data collected by the phone to the computer. Briefly,
Velenosi said that the idea was to “read phone sensors [...] inside the ball,
Figure 52 (top): Frame of the official video communicate data via Wi-Fi with a desktop computer, and use accelerometer
of the project illustrating the integration of the
phone into the ball.
and gyroscope data to do a visual translation to generative art pieces”.

119
 To tackle the challenges mentioned above, the team was composed
of four members. Besides Caio Velenosi — developing the software to
synthesize the generative pieces — other members were dedicated to project
management, graphic design, and electronics. “A management person,
supervising; a creative person, to help validate the artistic part, especially the
color palette; and an electronics person, who was responsible for [...] building
the electronic part, [...] adapting the entire cell phone inside the ball”, said the
developer. It is worth noting that the openness and familiarity among them
were identified as essential factors for the project. According to Velenosi,
working with the same team for over a year on previous initiatives made it
easier for a “common ground, where everyone was satisfied”, to be found.
In general, the project was characterized by successive experiments
concerning data collecting and processing. In Velenosi’s words, a process of
understanding the problem and “understanding what you have in hand to
work with it”. It was these various attempts and questions, according to him,
that took the project from beginning to end: “Okay, [let us] put the cell phone
inside a ball. How do you put it in there? How do you hold it? How do you
guarantee it will not break on the first kick? [...] What information can we
get from the cell phone? How is this information affected by being inside a
ball?”...
These various questions and considerations characterize what
Velenosi calls an iterative process. In short, the team executed one step after
the other, constantly evaluating and refining what was being produced. A
dynamic the developer believes is irreplaceable when dealing with interactive
and experimental works: “Since the beginning, I had the phone in my hand,
analyzing the numbers and how the computer was translating it”.
However, despite the exploratory nature of figuring out how to turn
kick-ups into generative pieces, the spectrum of possibilities was somehow
reduced due to the need to adopt the Galaxy S4 as a sensor. According to
Velenosi, his motto of “understanding what you have at hand” to deal with
problems led the team first to investigate which data they could satisfactorily
collect through the phone. Basically, because the device was going to be inside
the ball, the first sensor eliminated was the camera. Then, the remaining
options were the accelerometer, gyroscope, barometer, GPS, Bluetooth, and
Wi-Fi. According to Caio, Bluetooth and Wi-Fi are good options. However,
they commonly require “a whole environment to be set” with routers or other
receptive devices to infer the position through triangulation, which made
the team abandon them. Moreover, since the campaign could be presented
indoors, the GPS was not considered accurate for mapping the movements.
Lastly, because of a similar lack of accuracy in mapping short movements,
without “expressive rises and falls” and differences in atmospheric pressure,
the barometer was, too, eliminated.
In the end, the team decided to use the accelerometer and the

120
Figure 53: Frames of the official video showing
the process of incorporating the cell phone into
the ball.

121
gyroscope to obtain data about gravity, acceleration, speed, and rotation.
According to Velenosi, after defining which information they would
collect, the project became a matter of looking at data and trying to figure out
how to “translate it into the final product of the project, which was visual”.
A process of “understanding the information you have, and based on it, go
prototyping and refining [...]”.
Concerning the creative process and ideation, another important
aspect, according to Velenosi, was that the brief of the project and the graphic
designer of the team were essential for the quality delivered by suggesting
aesthetic guidelines for the program to pursue in its execution: “​​the look we
wanted to have [...], color palette, line style, texture, those things”. Still, the
program’s writing and subsequent creation of generative art pieces followed
an iterative and collaborative process.
From the first drafts to the final versions, there were subsequent
negotiations between the visual expectation of the team and what would be
possible to synthesize computationally, considering the expertise of members
and the resources at the time. The creative direction suggested an aesthetic
outcome for the software to reach, and the tech team provided clarity
regarding what was possible to execute and what needed to be adjusted in the
creative vision.
Despite these mentioned adjustments, Velenosi stated that the
process undertaken could deliver a product close to what was expected,
given, of course, necessary adaptations. Initially, the brief encompassed an
oil painting texture to be synthesized by the program, which needed to be
adapted due to the development deadline. “We ended up abandoning this
look because of the deadline, development time, and everything else. It was
not possible to reach that result in a way that would be good, but the client
got satisfied with what we presented”, explained him. Another vital part of
the creative equation was the frequent feedback provided by Samsung, which
was possible because the team established a relationship where they reached
out to feedback from the client when they had an interesting version to share.
Then, expectations and impressions were collected and used as a basis for
further refinement.
The inspiration for the visuals came when Velenosi was studying
animation at college. “At the time, I was researching a lot about non-
photorealistic rendering. [...] I found the work of an artist who was [...]
simulating digital watercolor, and I spent a long time trying to unravel how
the guy did it [...] It was one of my main references at the time”, according to
him.
In his words, the project relied on three main computing elements in
a “mixed process” to produce the generative works. At first, the data collected
by the phone was processed and transmitted to the computer through Figure 54 (next page): Examples of final
generative posters produced by the system of
a Processing application running on the mobile device. Then, another Futebol Arte.

122
application coded in Processing was responsible for receiving commands
and executing instructions on the cell phone, such as starting and stopping
data recording. Finally, visual synthesis was done through commands in Flash
executed within Adobe Air. “At that moment, it was what I was most familiar
with”, explained Caio.
Once data was collected and sent to the computer, the generative
algorithm drew shapes by mapping the ball’s movement during kick-ups
and translating it into visual aspects. We can understand this process as
describing the position of a particle through the axes of the three-dimensional
space and its variation over time. First, as illustrated in the board below, the
movement tracked was projected into each of the three planes (p1, p2, p3).
Then, the team evaluated results, and the most visually appealing projection
was selected as the definitive piece.

124
 Besides the affinity with the method, Velenosi chose generative
creation as the main pillar of the project due to the lack of predictability in the
data to be collected. In his words, “you do not have many alternatives because
you are working with information you have zero control over.” Here, the
developer refers to the difficulty of determining pre-programmed commands
triggered when specific values were detected caused by the unpredictability
of the coordinates captured. As a complement to his reasoning, Velenosi also
brought a counterexample:

We created an installation about two years ago for a film festival in

Toronto, which was a tunnel, a metal structure that, when people crossed
through, generated lights and had directional speakers. They played music
according to your position [...] This project had nothing you could call
generative. [...] The entire light scene was pre-programmed, the sounds
were already pre-composed, I had already determined what it was like. So,
the only thing you had was: trigger when the person is in position.

In short, if the Toronto project discussed above could be solved by dividing

the space into “slices” associated with certain lights and speakers, Futebol
Arte was based on an object that could move in any direction. This is why it
required a system capable of dealing with a lack of control and certainty.

I think this is one of the great things about generative art in general. To
move between what is more art and what is more data visualization. And
between these two extremes [...] there is a gigantic spectrum to explore,
and that is the most interesting thing about it. In a project like this, in
which we are working with random data, anything can happen, but we
want to have a final result that is visual, that is aesthetically pleasing [...]
So, let us control what we can: control the color palette, the stroke style,
more or less how we want it to be [...] Within that [...] whatever comes
will generate something. Some will look better, others will look less good,
but it is part of the game.

It is worth noting that the team also chose to capture kick-ups to establish a
smaller scope for data processing. “We even thought about the possibility of
a [soccer] match [...]. But, [...] since the ball had a whole internal structure to
hold the cell phone, it was very heavy. Doing kick-ups was difficult. Imagine
playing with it,” explained Velenosi. In addition, he said that kick-ups evoked
an individualist appeal and personalization that were desirable for the
campaign: “I get the ball, I do the kick-ups, I have my art [...] The translation
of the movements I made.”
As part of the Galaxy S4 campaign, Samsung also presented Futebol
Arte in a concept store at a shopping center in São Paulo. The intention was

125
to have this physical place where people could go, do kick-ups with the ball
and visualize the arts generated. “Some people in the audience were able to
play and see their arts, which were displayed on the screens”. On that subject,
Velenosi said that there is always a satisfying reward in projects of this kind,
which is the public’s reaction: “There is a kind of magical characteristic
of seeing something physical being translated into something digital and
vice versa. [...] So it is always interesting to follow along, see the audience
interacting and see the reactions, they are always very fun”.
Since it was a part of an advertising campaign, the pace of the project
was strongly dictated by the deadline and by client expectations. When asked
when they decided to end the development of the project, Velenosi answered
that it happened when the deadline was close and when the client agreed on
the quality of what was presented. Thus, as he referred, it was a combination
of “deadline, budget, result, and beauty”.
However, despite the pragmatism concerning this moment of
delivery, Velenosi said that “he would not have stopped it until today” if he had
the opportunity to do so. “Mainly because of the look [...] I think it could get
better,” he explained. For him, the project could have taken other interesting
paths if it had happened a few years later. “With tools, with techniques, and
even visual background” to allow him to produce the desired results with the
appropriate quality.

I think I would be able to produce a much more interesting final result

in terms of visuals, algorithms, and data processing. [...] My mind was
where I wanted to go, but the technical repertoire was not catching up yet.

Regardless, Velenosi believes that they delivered the best results possible
given the deadline and circumstances. According to the developer, the first
big challenge was satisfactorily incorporating the phone into the soccer ball,
which was solved after experimenting with different materials and sewing
techniques. Another challenge was to “handle the information” coming from
the phone, given the “very hostile environment”. Here he refers to the data
collecting complexities discussed previously.

When you talk about accelerometer and gyroscope data, it is very hostile.
[...] The day I was the happiest was the day we executed a test: the guy
[...] held the ball in his hand, I started recording, he walked 10 feet and
stopped, and I stopped recording. [...] And when it generated [the image],
it generated a straight line. [...] It generated something that made sense.

Lastly, according to Caio, the great challenge was translating the captured
movements into coherent visuals. They wanted to make it clear that visuals Figure 55 (next page): Frames of the official
video illustrating the translation of movements
were determined by the movements captured by the phone. In his words, into the visual pieces.

126
127
“the idea [..] was to precisely show that [...] it was not random; that we were
effectively using phone data”. Therefore, the tests performed went in the
same direction.

In short, the “inevitably iterative” process mentioned by Caio started from a

brief the developer captured through the question: “How can we make a soccer
ball with a phone become art?”. For the campaign, the brief also outlined
some important aspects that guided part of the creative process followed
by the team. Finally, even though the definition of electronic apparatus and
construction of the soccer ball involved research, the request to work with
the Galaxy S4 as the primary sensor and integrate it into the ball resulted in
a smaller scope of possibilities. Thus, the project started with a somewhat
strict data capture scope and assumed investigative directions concerning the
concept’s technical feasibility and production of visual outcomes.

Analysis and Discussion:

When confronted with the subpropositions (SPs) of our model, the case
suggested the following implications:

1 - Designers have their creative process fundamentally altered, as

their role shifts from directly manipulating artifacts to curating
and evaluating the computational processes that are supposed to
produce them (Endorsed)

Velenosi was the programmer of the project, who designed the

algorithms and wrote the codes for final works to be produced.
Computational processes were employed to collect and process data and
to transform input into visual art. Because of that, direct manipulation
was less emphasized as final results were essentially produced by the
computer. However, we considered SP1 partially endorsed by this case
because direct manipulation was still employed to create mood boards,
visual inspirations, and aesthetic guidelines throughout the project. It
still happened and contributed to the creative process, even if it did not
produce the final artifact.

2 - Such a creative process involves reaching an idea; abstracting

it into an algorithm, translating it into a program to be executed;
and obtaining and evaluating the output — what would possibly
feedback the cycle. (Endorsed)

128
 Again, moments related to the postulated steps could be identified
throughout the process. Since it was a publicity campaign, the client’s
expectations contributed to a reduced scope of ideation. In other
words, the team has received beforehand a moderately elaborated idea
as a brief of the project. Nevertheless, initiatives related to abstraction
and formalization happened through iterations, since ideas were
recurrently elaborated, presented, and implemented. Interestingly, a
work dynamic between a graphic designer and a developer illustrated a
creative process in which aesthetic goals were recurrently communicated
to be abstracted into algorithms and programs by someone else. Finally,
evaluation was habitual since the team and the client constantly
discussed promising versions, which inspired improvements and
further coding.
SP2 was endorsed, but again it is necessary to point out that stages did
not happen linearly. On the contrary, moments of ideation, abstraction,
formalization, evaluation, and refinement happened disorderly and
collaboratively during the project.

3 - Due to the existence of a characteristic layer of abstraction —

as designers need to think in terms of algorithms to create desired
artifacts, there is a relationship between this specific creative
process and computational thinking — to which abstraction is a
characterizing aspect, which implies that designers are required
to rely on abilities related to design thinking and computational
thinking. (Endorsed)

The very nature of a tech project being carried out by a

multidisciplinary team suggests the presence of abilities related to both
design thinking and computational thinking. Programming, per se,
requires computational thinking. In addition, we could identify a layer
of design-related abilities because it was constantly executed in parallel
with technical feasibility research and visual experimentation. As stated
by Velenosi, the creative direction suggested aesthetic outcomes for the
software to reach, and the tech team provided clarity regarding what
was possible to execute and what needed to be adapted in the creative
vision. Such a negotiation relied on design thinking and computational
thinking to enable the discussion and incorporation of concepts into a
single solution. From the early moments in which visual and software
concepts started to be elaborated to the use of product design approach
to produce a ball capable of smoothing impact and protecting a phone,
this mixed approach supported the coevolution of problem and
solution. Because of that, SP3 was endorsed.

129
 4 - Concerning its execution, the creative process in question
does not always have a concept as a starting point for ideation
(concept-based ideation). It can also rely on many explorations
with the material — programming and software tools — to
encounter more concrete concepts to be pursued as selected
ideas (concept-based ideation). (Endorsed)

Velenosi’s team started from a concept illustrated by the project

brief. The client wanted to release a campaign for the Galaxy S4 in which
soccer was an inspiration. Explicit concept-based ideation was followed,
as the central theme influenced aesthetic and technological explorations
with the purpose of materializing preconceived motivations. Of course,
material-based ideation approaches were used in specific parts of the
project, especially in defining the final visual language synthesized via
software. Regardless, we considered SP4 endorsed, as well.

5 - It can also be conducted in ways that are either more structured,

sequential, and unidisciplinary — waterfall approaches; or
based on multidisciplinary collaboration, rapid iteration, and
experimentation — agile methods or multi-track. (Endorsed)

As referred to by Velenosi, he does not “see how a project of this

kind could follow a process” that is not based on iteration and constant
refinement. In this sense, the project was carried out through cycles of
ideation, exploration of technical means, development, and refinement
with the client. Because of an approach based on collaboration and
multidisciplinarity, SP5 was endorsed.

6 - Regardless of specific constraints and the approach, when

designing an interactive product, designers undertake the major
stages plan, define, design, develop, and deploy, and the activities
designing alternatives, prototyping, evaluating, and discovering
requirements. (Endorsed)

Despite assuming an experimental approach many times, especially

concerning data collecting, algorithmic synthesis, and electronic
structure, the Futebol Arte project was commissioned by a publicity
agency, which implies that requirements and constraints existed. For
instance, the relevance of requirements was illustrated by the presence
of a management person in the team. Moreover, the necessity to rely
on the sensors of the Galaxy S4 established additional constraints and

130
 requirements that needed to be considered when planning the project.
After research and exploration, the team managed to better define
the project as a system capable of collecting and processing kick-ups
data from a phone incorporated into a ball to draw generative art.
Furthermore, visual ideation and software experimentation supported
the team’s work, implying that design, development, and deployment
stages were executed. Alternatives were considered and abandoned
due to constraints, as prototypes were discussed with the client,
and evaluation was mainly concerned with the visual quality of the
pieces and the accuracy and coherence of the data being collected and
processed.

All these considerations endorsed SP6.

The implications discussed previously are summarized and illustrated

through the filled model on the next page.

131
5. Based on an interview with Dimitre Lima 3.4 Atmosfera and Metaespaço 5
and Gabriela Castro on June 06th, 2021.
Dimitre Lima and Gabriela Castro met in Rio de Janeiro in an artistic
residency. At that time, Gabriela maintained with Marlus Araújo the studio
Mirabilis — a studio that employed design, architecture, and technology to
design objects, installations, and digital experiences. Gabriela has a Bachelor’s
degree in architecture. However, since college, she wanted to get involved
with projects that go beyond the traditional look and feel, something not
always possible in conventional architectural works, according to her. Such
motivation led her to work with scenography within a technological context
at the Brazilian studio SuperUber. The studio values multidisciplinary
​​
production and incorporates technology into big clients’ design, art, and
architecture projects. For instance, when she was part of SuperUber, Gabriela
designed scenographic projects for the Museum of Tomorrow in Rio de
Janeiro and the creative conference Rio2C.
Dimitre Lima’s relationship with such projects is also long. Lima
has a degree in graphic design, but he always liked computer programming.
Finding possible intersections, the designer and artist began to increasingly
integrate his technological affinities to his projects to experiment with other
means of expression and creative paths. With an extensive art, design, and
technology portfolio, Dimitre has designed interactive and contemplative
artifacts for relevant national and international clients such as MTV, Oi, Red
Bull, Nike. Nubank, and also for the public sector.
After the period within SuperUber, Gabriela started to focus on her
authorial work, which led her to create the Estúdio Mirabilis with Marlus
Araújo — an initiative that made possible for her to deliver projects for
museums and cultural institutions. The projects Atmosfera and Metaespaço
were initially Mirabilis’. However, Dimitre joined the project’s team due to a
partnership with Gabriela and Marlus in the artistic residency.
The Brazilian city of Pato Branco commissioned Atmosfera and
Metaespaço for the Inventum 2019, a science, technology, and innovation fair
promoted by the city. The event took place between November 8th and 13th,
2019, receiving around 180,000 visitors.
According to the event’s theme, Gabriela and Dimitre were
challenged to create exclusive technological interventions for the fair space.
The duo then considered the other installations and sessions promoted by
universities, museums, and companies at the event and chose to differentiate
themselves through the design of passage spaces.
In part, considering these transitory spaces, rather than rooms,
sections, or demarcated places, came from the desire to propose an experience
to be organically incorporated into the path of all visitors. Something that
would help build the “climate” of the event. Dimitre said that part of this
climate-building inspiration came from an event he attended to in the past:
133
 I remember a music event [...] that took place in 2004, in which you
entered, and you could not see anything. There was an installation with
many hoses, you could not see anything for a while and when you reached
the other end, it changed... all the corners of the space were round, velvety,
with different colors, with different smells, so you had an exact impression
of transition. You are in one place, you arrive in another place, and the
temperature is different. Everything is different.

Furthermore, the size of the site was also a factor to take into account since
the fair took place at an open convention space, with kilometers in length.
For Dimitre, elaborating spaces of passage was a way to mix architecture
with technology, and capture people’s attention without requiring them to
enter a room. For Gabriela, choosing spaces of passage was also a strategy to
capture the disputed attention of visitors, who would still have a multitude
of other “super interesting places” to see. Therefore, the duo chose to design
an entrance. “A starting point,” as referred to by Lima, to provoke a feeling of
change in people who were crossing by.
The first sketches submitted for the fair organization described an
installation corridor, a structure of approximately 40mX8m that would be
inserted right at the entrance to the space. “We were surprised because we
designed a huge structure, and we never thought it would be approved. [...]
But in the end, their question was: ‘can we do 45 meters?’”, explained Dimitre.
Despite some bureaucracy, Gabriela highlighted the receptivity, interest, and
artistic freedom promoted by the fair’s organization as positive factors: “It
is cool that they embarked on ideas they had never done before.” To which
Dimitre added: “Another surprising thing is that we [said]: ‘We can do this
installation, this one or this one,’ and in the end, they said: ‘okay, but we
want the three of them’”. Metaespaço and Atmosfera were two of these three
installations produced for the Inventum 2019.
Intending to design interventions related to the event’s theme, the
duo started by searching for a “face” to technology. In other words, they were
looking for visual concepts that would allow the installations to be perceived
as technological artifacts, illustrating the event’s purpose. One of the first
obstacles faced by the duo, according to Dimitre, was precisely to define what
technology aesthetically is: “we wanted it to have to do with technology, but
at the same time, technology does not have a face. [...] The more advanced
technology is, the more transparent. So we decided to appeal to what people
see as technological.”
In the archetypes shown in classic movies such as 2001: A Space
Odyssey, Gabriela and Dimitre found inspiration and ways to make their
intentions tangible: “We started researching the archetypes of cinema Figure 56 and 57 (next page): Models of
Metaespaço’s physical structure. View from the
because there is a whole simulacrum of the face of technology. [...] In some inside.

134
135
movies, even today, you have green screens with cursors and codes”. Despite
acknowledging that technology “can be anything”, Gabriela added that
resorting to this early-technology aesthetic worked as a “good reference to”
define the look and feel of the installations.
Associated with the concept of passage spaces, the aesthetic
explorations of Dimitre and Gabriela led them to design a spatial corridor,
those corridors that have lights, a half-hex perspective, and a typical spaceship
appearance, as defined by the duo. “It is not that there is a spaceship like
that, but I think 2001 (A Space Odyssey) proposed this, and until today the
cinema has not been able to detach from it”, they acknowledged. According
to Gabriela, to evidence a “high tech” look, they also decided to incorporate
a “spatial window” into the corridor to put “the person in a completely
different place”. Such a window required not only a wide viewport but also
appropriate content to be displayed. Thus, the entrance assumed the form of
a spatial corridor, with two horizontal windows from end to end, in which the
vivacious generative content was displayed.
Because they started working in São Paulo, Gabriela said an essential
part of the creative process was sketching schemes and exploratory drawings
for the installations: “since we were not in place, [...] we had to expand
the imagination, testing, imagining scenarios”. Naturally, though, many Figure 58 (top): A model of Metaespaço’s
physical structure. View from above.

136
 adjustments became necessary when the team actually began building the
structures. For Dimitre, for example, a significant element of the creative
process was the adaptations that had to be made due to the various constraints
that appeared during the setup.
Moreover, according to the duo, the involvement with the setup
was something worthy of note. In Pato Branco, the team got into a daily
routine of going to and from the fair to make sure everything was accordingly.
Humorously, Dimitre said that they had rented a car to transport all the
material. “About the setup, it is always intense [...] it is always impossible to
predict how it is going to be. Sometimes we even stayed at dawn [...] to better
tune the lights and everything else”, added Gabriela.
Interestingly, the designer also said that he worked on the elaboration
Figure 59 (top): A picture of the pre-assembling.
of the generative virtual content in parallel with the setup of the structures.
Figure 60 (middle): A picture of the setup of According to him, “when the project is put together, you notice other things”.
Metaespaço and the car the team rented.

137
Therefore, he usually sets a worktable inside the installation to create the
programs while being surrounded by the physical structure that is going to
support them.
During the fair, the duo also stayed close to their installations to pay Figure 61 (top): A picture of Metaespaço at
attention to how visitors interacted with them. Commonly, these observations night.
Figures 62 (bottom), 63 (next page / top) and
ended up motivating minor adjustments and improvements for the following 64 (next page / bottom): Photos from visitors
day. interacting with Metaespaço.

138
 At approximately 300 meters from Metaspaço, the creative and 6. C++ is a programming language created by
Bjarne Stroustrup as an extension of the C
aesthetic paths taken by Gabriela and Dimitre also resulted in the design of a programming language. Stroustrup’s general
second corridor installation, the Atmosfera. Still working with the concept of intention was to incorporate object-oriented
programming into the C language.
passage spaces, this second project was a much smaller corridor than the first
one, connecting two other spaces at the fair.
According to Dimitre, the intention of Atmosfera was still “to hijack
people’s attention almost without meaning to”, but through the creation
of “a space of reflections where the virtual content would blend with real
content”. Therefore, relying on LED panels and a mirrored curtain attached to
the corridor’s structure, the team materialized thoughts about how reflected
elements can be exciting compositions when more attention is paid to them.
According to Dimitre, although not everything turned out as
planned, many adjustments were successfully incorporated into the project’s
creative equation, “becoming a language”. The bluish aspect, for example,
was accidentally caused by the too-blue mirrored film they bought to create

140
 the installation. As he referred, when the reflection got amplified, this blue
tone multiplied and became bluer. According to the designer, though, the
installation was successfully built despite the adjustments that needed to be
made and relying on “simple” content.
The virtual content of the two installations was generative and
synthesized in real-time by programs written in openFrameworks — a
programming framework for aesthetic purposes based on C++6.
For Metaespaço, Dimitre drew on some of his previous explorations
with simulations of sinuous particles, which moved and behaved like “a
shoal of abstract objects”. “Tadpoles”, as referred to by him, However, an
important insight came when he realized that the same sets of particles left
trails resembling electronic circuits if programmed adequately. In his words,
it was on the frontier between biology and technology that he found central
inspirations for the installation:

I started to experiment with these shoals, creating tracks. And when I

narrowed their angle, they automatically looked like electronic circuits, so
it was super fun for me to work on the edge.

By working with this organic-electronic aspect, the duo also saw how to
incorporate the fair theme into the visual language of their installations. “The
city surprised me because they invested a lot in their technological hub [...]
Thus we also had this idea of using shapes that resembled pulses, electronic
signals, and electronic boards within this digital content”, said Gabriela.
Concerning interactivity, Dimitre and Gabriela decided not to
connect sensors to the synthesis of generative content. Instead, they chose to
tackle the interactivity through the careful design of the structures involved
and the anticipation of how people could connect with their physical and
virtual elements. According to Gabriela, they established “a conversation
Figure 65 (previous page / bottom): Models
of Atmosfera’s physical structure with the LED
between the space [...] and what was being generated”. For example, the main
panels. Texts in the figure are in Portuguese. challenge in creating the generative content for Metaespaço, according to
Figure 66 (current page / top): Model of
Dimitre, was working with such a wide window, which required the designer
Atmosfera’s physical structure with the LED
panels. Different view. Texts in the figure are in to program a set of repeatable scenes to be replicated and articulated
Portuguese.

141
throughout the viewport. To properly create the repeatable scenes, he built
several three-dimensional models of the structure to try to predict the
appropriate relationships of size between the content and the visitors.
For the generative content of Atmosfera, in turn, the duo resorted
to wireframe representations and vector graphics of older displays, still
exploring computer simulacra and their evolution. “Deformed spheres with
polygons” were spread over the screens to resemble “bacterium, amoeba
flying”, which Dimitre exemplified through the aesthetics of the old covers
of Kraftwerk. Along with the generative content, the physical effect caused by
the arrangement of the mirrors inserted visitors into a “repeating cloud” in
which the above-mentioned abstract shapes blend with visitors’ silhouettes.
According to Dimitre, generative creation was also the best choice
for the problem as it allowed him to create “software of 10, or 15, megabytes”,
capable of producing original content in real-time, without ever repeating
itself: “It is fun this possibility for you to create the seed of how something
happens, but not exactly knowing all the possibilities”. Moreover, for dealing
with programmatically produced content, Dimitre and Gabriela could easily
adjust and improve the generative content to match the physical structure
Figure 67 (top): Photo of Dimitre and Gabriela
and the environment: “there was not a day that we did not have adjustments”. inside Atmosfera. It is worth noting the blue tone
discussed by them in the interview.

142
 As Gabriela referred, such a process based on a series of refinements
is associated with a perception that “these works [...] never end”. In fact,
according to the duo, the main criteria for the end of the project were the
deadline, access to materials, and the availability of other teams involved in
the setup.
Finally, complicated by bureaucratic procedures required by the
city hall, the logistical processes of hiring a team, importing electronic parts,
and financing the project were placed as the duo’s main challenges. Gabriela
and Dimitre said that they spent quite some time without having a contract
signed, which became an obstacle for the investments that needed to be
made. “We are a small studio. We do not have working capital [...] to hire
people at risk for an installation that we do not have the contract signed for
yet”, Gabriela explained. For instance, bureaucracy also forced the pair to give
up another project, which Atmosfera replaced. The initial idea for the second
corridor installation was to make a fiber-optic structure, for which the team
manufactured a component, in China. However, the complications involved
in importing the technology made them give up this first idea for the project.

Analysis and Discussion:

When confronted with the subpropositions (SPs) of our model, the case
suggested the following implications:

1 - Designers have their creative process fundamentally altered, as

their role shifts from directly manipulating artifacts to curating
and evaluating the computational processes that are supposed to
produce them (Endorsed)

The production of the generative content of the installations was

indeed carried out through experimentation with programming and
software tools. As stated by Dimitre, final versions were influenced by
early investigations with generative particle simulations, which were
refined and adapted to blend with the physical structures of the project.
Moreover, when he ran some programs and realized that the same set
of particles could be employed to create virtual “electronic circuits”,
he achieved a more concrete idea to pursue. These considerations
imply that the role of “curator of computational processes’’ was indeed
assumed.
However, we considered SP1 partially endorsed because direct
manipulation was used throughout the project. In this case, it was

143
 employed in the production of models and of the physical structures
into which generative content was incorporated to compose the final
experience.

2 - Such a creative process involves reaching an idea; abstracting

it into an algorithm, translating it into a program to be executed;
and obtaining and evaluating the output — what would possibly
feedback the cycle. (Endorsed)

Dimitre and Gabriela constantly relied on a conceptual network that

inspired both their physical and software efforts. From the moment
the challenge was accepted, the duo envisioned the experiences they
intended to evoke in visitors and had them as the basis for ideation.
Hence, concepts such as technology, electronics, cybernetics, space,
and the universe ignited their experimentation with physical structures
and abstraction into algorithms and programs.
The conclusion above implies that their work involved the abstraction
of ideas, formalization into source code, and production of final results.
Lastly, evaluation was also constant, as exemplified by the moments
in which Dimitre said that he kept programming and adjusting software
during and after setup until they were satisfied with the results.
We considered SP2 endorsed but also acknowledge that stages
(ideation, abstraction, formalization, evaluation, and refinement) did
not happen linearly.

3 - Due to the existence of a characteristic layer of abstraction —

as designers need to think in terms of algorithms to create desired
artifacts, there is a relationship between this specific creative
process and computational thinking — to which abstraction is a
characterizing aspect, which implies that designers are required
to rely on abilities related to design thinking and computational
thinking. (Endorsed)

Metaespaço and Atmosfera were materializations of a project that

relied essentially on architectural design and programming. As referred
to by Gabriela, they managed to establish “a conversation between the
space [...] and what was being generated”.
Abstraction was central to the process as aesthetic intentions were
constantly incorporated into the displays of the installations through
software-based efforts. Dimitre was the actual programmer of the
projects, which implies that abilities related to computational thinking
were employed. In its architectural design initiatives, the project
went through many explorations of look and feel as structures were

144
envisioned as part of the fair. A myriad of sketches and models assisted
the team in their framing efforts, and solution and problem coevolved
as constraints related to technological and material capabilities were
figured out. Naturally, these design-related initiatives inspired and
influenced the production of generative content.
Because of that, SP3 was endorsed.

4 - Concerning its execution, the creative process in question

does not always have a concept as a starting point for ideation
(concept-based ideation). It can also rely on many explorations
with the material — programming and software tools — to
encounter more concrete concepts to be pursued as selected ideas
(concept-based ideation). (Endorsed)

Atmosfera and Metaespaço were born from a brief that was flexible:
the duo was challenged to propose novel technological interventions
to blend with the other attractions of the fair. The concepts related
to crossing, technology, sci-fi, and electronics were figured out as
experimentation took place. Such a process suggested the employment
of material-based ideation.
However, if we analyze direct manipulation separately of the
computational synthesis of generative content, we might see that
programming took place when more concrete concepts were defined.
When Dimitre started experimenting with generative algorithms to
create the virtual content of the installations, there were already some
guiding concepts of look and feel put as goals for the programs to reach.
In other words, from the beginning, his programming experiments
aimed to produce technology-themed visuals for a “space window” and
a room with mirrors.
Therefore, we considered SP4 endorsed as the process relied on
both approaches for ideation. More specifically, generative creation was
employed following a concept-based strategy.

5 - It can also be conducted in ways that are either more structured,

sequential, and unidisciplinary — waterfall approaches; or
based on multidisciplinary collaboration, rapid iteration, and
experimentation — agile methods or multi-track. (Endorsed)

When referring to it as a work “that never ends”, Gabriela

illustrated a creative process that relied on constant experimentation
and refinement. The duo maintained a routine in which sketching,
prototyping, evaluation, and adjustments were the basis of creation for
both manual elaboration and development of computational processes.

145
 When mentioning the many adequacies they had to do in the physical
structures during setup, and that generative content was produced as the
installations were built, a design approach based on rapid iteration,
experimentation, and collaboration was favored. Because of that,
SP5 was endorsed.

6 - Regardless of specific constraints and the approach, when

designing an interactive product, designers undertake the major
stages plan, define, design, develop, and deploy, and the activities
designing alternatives, prototyping, evaluating, and discovering
requirements. (Endorsed)

Despite acknowledging that an experimental approach sustained

the development of the installations, Gabriela and Dimitre undertook a
process in which planning and definition-related activities seemed to
lead design and development.
Design, development, and deployment happened through the
already discussed experimentation cycles. Accordingly, alternatives
and prototypes were generated throughout the project, as the duo
explored the more promising ways to build Atmosfera and Metaespaço.
Lastly, as already discussed, such explorations were mediated by
constant evaluation concerning the quality of the content synthesized
and the overall ambiance inspired by the installations.
All these considerations endorsed SP6.

The implications discussed previously are summarized and illustrated

through the filled model on the next page.

146
147
Chapter 4
Results
4.1 First move: framing initiatives, creation of foun
dations, and the pilot model.
4.2 Second move: pilot study, feedback from thesis
committee, and adaptations.
4.3 Third move: case studies
 Results were organized into three research moves for better
exposure. The first one represents the opening initiatives of this work — our
primary assumptions, attempts of problem framing, and the rationale behind
the pilot model. Then, as a second move, we reviewed and discussed the
improvements made in the model and in our foundations motivated by the
pilot study and suggestions of the thesis committee. Lastly, as a final move,
we cross-analyzed our cases and confronted them with the first model to
deliver the intended contributions of this work.

4.1 First Move

We began by making attempts on how to frame this research’s
problem. After a few explorations, we could define the criteria for building
the corpus and the foundations to provide the necessary answers. To delimit
the conceptual network of the study and start outlining a model, we created
a foundation comprising the themes of creative processes in design,
interaction design, and generative creation and computational thinking
in design. As extensively discussed, each of these thematic subchapters went
through concepts and models proposed by authors of the respective field.
As first results, the initiatives mentioned above provided us
with concepts and general knowledge concerning creative processes and
interaction design. Furthermore, they offered formal propositions regarding
the analysis and understanding of generative systems’ roles in interaction
design. In essence, the first initiatives provided learnings such as:

- Concepts about creativity and a couple of generalist models for describing

and analyzing creative processes;
- The main components of the creative activity in a design context;
- Resources to begin describing and interpreting the creative processes
investigated through the above-mentioned generic models and contributions
related to interaction and generative design.

According to what was exposed in the second chapter — method, these

contributions were synthesized into the pilot model and pilot interview
script, ultimately representing how they were taken as initial attempts for
interpreting our corpus.

Figures 68 (current page / above): Illustration

of the first research move.
Figures 69 (next page / bottom): Illustration
of the second research move.

150
1. (Goodwin, 2009; Saffer, 2009; Sharpe, 4.2 Second Move
Preece & Rogers, 2019; Unger & Chandler,
2012; Gothelf & Seiden, 2016; Cagan, 2017)
2. (Groß et al., 2018; Grünberger, 2019)
The pilot model and interview script were put to verification through
3. (Groß et al., 2018) our pilot study. As exposed in chapter two — method, this validation-
4. (Groß et al., 2018)
5. (Wing, 2011; Kelly & Gero (2021); Furber,
oriented study pointed out improvements that needed to be made. These
2012; Denning, 2009; Yadav et al., 2014; Wing, changes were still discussed within a regular thesis committee meeting, which
2011; Bocconi et al., 2016)
resulted in the definition of further practical initiatives to enrich the research
6. (Kelly & Gero, 2021; Bocconi et al., 2016;
Grover & Pea, 2013) foundations and build more appropriate data collection instruments. Such a
7. (Zhang & Funk, 2021) shift was also documented in the second chapter.
8. (Saffer, 2009; Goodwin, 2009)
9. (Unger & Chandler, 2012; Gothelf & Seiden, By delving deeper again into the relevant themes of, new contributions
2016; Cagan, 2017) were brought to the conceptual framework of this work. More specifically, we
aimed to increase relevance through the addition of up-to-date propositions.
As discussed in the second chapter, the revised foundations granted us many
theoretical contributions (TC1, TC2, TC3), which in turn supported the
elaboration of the following guiding theoretical proposition (TP):

When designing interactive products1 powered by generative

systems, designers have their creative process fundamentally
altered, as their role shifts from directly manipulating artifacts
to curating and evaluating the computational processes that are
supposed to produce them.2 Such a creative process involves
reaching an idea; abstracting it into an algorithm, translating
it into a program to be executed; and obtaining and evaluating
the output — what would possibly feedback the cycle.3 Due
to the existence of a characteristic layer of abstraction4 — as
designers need to constantly think in terms of algorithms to
create desired artifacts, there’s a relationship between this
specific creative process and computational thinking5 — to
which abstraction is a characterizing aspect, which implies
that designers are required to rely on abilities related to
design thinking and computational thinking6. Concerning its
execution, the creative process in question does not always
have a concept as a starting point for ideation (concept-based
ideation).7 It can also rely on many explorations with the
material — programming and software tools — to encounter
more concrete concepts to be pursued as selected ideas
(material-based ideation). It can also be conducted in ways
that are either more structured, sequential, and unidisciplinary
— waterfall approaches8; or based on multidisciplinary
collaboration, rapid iteration, and experimentation — agile
methods or multi-track9. Regardless of specific constraints and
the approach, when designing an interactive product, designers
undertake the major stages plan, define, design, develop, and
151
 deploy10, and the activities designing alternatives, prototyping, 10. (Unger & Chandler, 2012)
11. (Sharp, Preece & Rogers, 2019)
evaluating, and discovering requirements11.

Finally, as another round of synthesis, the theoretical proposition was

employed in the elaboration of the model, illustrating the results of what we
considered being the second research move.

152
 4.3 Third Move
The third move consisted of our case studies and their implications
for the components of the model. Ultimately, by cross-analyzing cases, we
could obtain insights about what was practiced in real-life and confront the
theoretical patterns expressed by the model to establish a more accurate
version of it.
In this sense, the revised model and the hypotheses inducted
through it are the final contributions of this work.

The first subproposition — Designers have their creative process

fundamentally altered, as their role shifts from directly manipulating
artifacts to curating and evaluating the computational processes
that are supposed to produce them — dealt with a significant difference
between conventional processes in design and those that involve the use of
generative systems.
When stating that such a difference exists due to a shift in the
role of designers — from executors to curators of processes —, Groß et al.
(2018) and Grünberger (2019) also suggest that direct manipulation recedes
to the background, as the design process becomes principally intermediated
by generative systems. However, when taken to our cases, SP1 was partially
endorsed because the professionals and teams investigated notably relied on
direct manipulation throughout the process despite letting the production of
final artifacts be carried out by generative systems. The table on the bottom
(Board 14) recaps how SP1 was perceived in each of the cases.
The observations suggested that direct manipulation was still critical
to the creative process, despite eventually giving room for generative systems.
Furthermore, direct manipulation was notably employed in projects
Figures 70 (top): Illustration of the third
research move. that needed to match a particular brand or aesthetic direction.

153
 More specifically, the cross-analysis suggested the following possible
involvements of the abovementioned approach in the design of interactive
products powered by generative algorithms:

- Direct manipulation to elaborate aesthetic guides for algorithmic efforts

(e.g. Heartbits and Futebol Arte);
- Direct manipulation to communicate intentions and the state of the project
(e.g. Heartbits, Futebol Arte, and Atmosfera and Metaespaço);
- Direct manipulation to elaborate additional non-generative physical and
digital elements of the interface/structure (e.g. Heartbits, Tocando Brasília,
Futebol Arte, Atmosfera and Metaespaço).

When taken as an aesthetic guide for algorithmic efforts, direct

manipulation was regularly employed in producing visual references, mood
boards, sketches, and models to guide the development of the generative
system. Such practices tend to be related to concept-based ideation for
the presence of preconceived thoughts that are translated into visual
representations prior to implementation.
Regardless, it is worth noting that direct manipulation did not
necessarily precede programming and software-based experimentation even
when employed as aesthetic guides for technical efforts. Just the opposite, the
analysis of cases revealed that it was incorporated into the processes according
to what was proposed by the experimental and collaborative approaches we
also investigated (SP5), being carried out along with development efforts in
cycles of experimentation. We illustrated this dynamic through board 15.
Direct manipulation also supported report and communication
initiatives when alignments were necessary and the state of the project
needed to be demonstrated, whether due to client requirements or team
dynamics. Manifestations of this category could be found in the development
of mockups and models to communicate the intended structures of the
interfaces and the overall look and feel of the generative content, as we
illustrated through board 16.
Lastly, direct manipulation was also employed in designing non-
generative sections or parts of the product, which naturally influenced
the making of generative content (Board 17). For the design of Atmosfera
and Metaespaço, for example, direct manipulation was used to conceive the
physical structure of the installations, which, in turn, motivated the team to
make specific decisions concerning what was going to be produced by the
algorithms.
Whether supported by direct manipulation or not, the need to
abstract concepts into algorithms or to facilitate this process still emphasizes
the fundamental change postulated by Groß et al. (2018) and Grünberger
(2019) — from ‘How do I draw?’ to ‘How do I abstract?’. However, to better

154
155
reflect what was practiced and consider direct manipulation as a possibly
vital participant of the creative process, SP1 can be rewritten as the following:
Designers have their creative process fundamentally altered, as they
are no longer supposed to produce artifacts exclusively through
direct manipulation, but primarily through mediating the elaboration,
curation, and evaluation of the computational processes that are
supposed to produce them.

156
 With the second subproposition — Such a creative process
involves reaching an idea; abstracting it into an algorithm, translating
it into a program to be executed; and obtaining and evaluating the
output — what would possibly feedback the cycle —, we essentially
attempted to understand how the elements proposed were manifested in the
creative process investigated.
When taken to our cases, the second subproposition was endorsed
by moments and initiatives related to each of the steps. However, despite
being illustrated as a somewhat sequential process by Groß et al. (2018), it is
worth emphasizing that such initiatives happened disorderly.
Moreover, the aspects we learned when investigating professionals’
practice suggested a collaborative and multidisciplinary nature of real-world
projects, which could be integrated into the model to reflect reality better.
Tocando Brasília was the only project conducted individually. The others were
conducted in collaborative and multidisciplinary ways, varying in how each of
the disciplines of the team related to each other. For example, in Futebol Arte,
Velenosi was responsible for programming the generative algorithms while
being influenced by the creative direction in terms of what they wanted the
system to deliver. As discussed in the case in question, constant negotiations
between the fronts characterized the creative process. Similarly, in Heartbits,
the team was organized into three different fronts: one focused on graphic
design, another focused on building the generative algorithms to deliver the
intended aesthetic experience, and the last front focused on implementing
the applications for Android and iOs. As expected, in these scenarios, the
postulated initiatives of ideating, abstracting into algorithms, coding,
evaluating outputs, and refining were shared and influenced by the people
involved.

The table below (Board 18) recaps how SP2 was perceived in the cases.

157
 More specifically, the cross-analysis suggested that concepts are
defined, abstracted, formalized, turned into results, evaluated, and refined
through a series of possibly disordered iterations, as illustrated by the board
above (Board 19). Naturally, the results obtained could also motivate changes
in the idea itself.
In order to capture the flexible, disordered, and possibly collaborative
nature of the creative process investigated — thus better reflecting the practice
—, without excluding those projects carried out individually, we can rewrite
SP2 as follows: Such a creative process relies on activities that can be
interspersed and shared collaboratively, related to ideating, abstracting
ideas into algorithms, translating algorithms into programs, obtaining
and evaluating computationally-generated results, and refining the
computational process to deliver the expected quality.

158
 We brought the third subproposition — Due to the existence of
a characteristic layer of abstraction — as designers need to think in
terms of algorithms to create desired artifacts, there is a relationship
between this specific creative process and computational thinking —
to which abstraction is a characterizing aspect, which implies that
designers are required to rely on abilities related to design thinking
and computational thinking — to the studies to understand the validity
of the connections between computational thinking and design thinking as
foundational elements of the processes studied. To this end, we resorted to
the field’s literature to learn about the essential activities and aspects related
to the two forms of thinking. Subsequently, they were investigated in terms of
how they were manifested and related to each other.
When confronted with practice, the subproposition was endorsed
due to the presence of practical abilities and concerns related to design
thinking and computational thinking in the processes investigated, and
because there was a clear connection between them. The table on the bottom
recaps how SP3 was perceived.
More specifically, the analysis suggested the following major
activities for how each form of thinking was manifested:

- Design Thinking was used for framing the problem; elaborating sketches,
representations, and models of the structures (digital or physical); conducting
research-related abilities focused on technical feasibility and aesthetic
possibilities; creating aesthetic references for the algorithmic synthesis; and
envisioning context of interaction and environment to induce the indented
experiences.
- Computational Thinking for describing the problem’s context in terms
of input, output, and necessary data; describing aesthetic production in
algorithmic terms; decomposing instructions into aesthetic elements; adapting
existing programs to be reused; handling data collection and processing,
and debugging programs to process signals accurately and produce results
satisfactorily.

159
 Furthermore, because our cases relied on a mixed approach for
creation in which exploratory research and propositions determined the
goals of computational processes and vice versa, it seems valuable to
suggest that designing successful interactive products powered by generative
systems requires professionals or teams capable of mastering abilities related
to computational thinking and design thinking. The board on the next
page (Board 21) illustrates a few initiatives related to design thinking and
computational thinking and the possible connections between them.
Therefore, we can rewrite the third subproposition to strengthen
the relevance of computational thinking and design thinking as foundational
elements of the creative process as follows: Due to the existence of a
characteristic layer of abstraction — as professionals need to think in
terms of algorithms to enable the design of desired artifacts —, the
creation of successful interactive products powered by generative
systems depends on professionals or teams capable of mastering
abilities related to both computational thinking and design thinking.

160
161
 With the fourth subproposition — Concerning its execution, the
creative process in question does not always have a concept as a starting
point for ideation (concept-based ideation). It can also rely on many
explorations with the material — programming and software tools —
to encounter more concrete concepts to be pursued as selected ideas
(material-based ideation) —, we intended to investigate the prominence of
an experimental approach to generative-design-related projects, as proposed
by many authors of the field.
When taken to the cases, though, experimental approaches to
ideation were not always favored, especially in projects associated with
brands or explicit constraints. The table on the bottom of the page recaps the
main insights about how SP4 was perceived.
SP4 was endorsed because it could satisfactorily classify the
dynamics of ideation followed. More specifically, categorizing these strategies
into concept-based and material-based ideation offered a simple way to
infer what contributed the most to the idea resulting in the final product.
For instance, this thought allowed us to learn that concept-based ideation
was favored when projects were supposed to attain a particular aesthetic
guideline or produce a specific aesthetic quality. This conclusion suggests
that somewhat beforehand-defined projects will likely rely on concept-based
ideation, while experimental and artistic initiatives with fewer restrictions
concerning delivery might be better suited for material-based ideation.
When proposing the thoughts of concept-based and material-based
ideation, Zhang and Funk (2021) acknowledged that despite helping let us
reason about the motivations behind a project, such a delimitation does
not exist in real-life. Instead, projects comprise a mixed process in which
professionals employ the two strategies on different occasions to deliver
outcomes. Accordingly, we could observe this tendency in the cases studied.
For example, in Futebol Arte, a central concept (soccer, movements, data from
Galaxy S4) ignited the process and guided the team’s work. However, other
aesthetic concepts were obtained and pursued after technical and algorithmic
explorations. For explanatory purposes, the two boards on the next page
(Boards 23 and 24) illustrate the strategies mentioned above, separately:

162
163
 Lastly, despite being endorsed, we can rewrite SP4 to contemplate
the abovementioned aspects and reflect reality better: Two complementary
ideation strategies might also enable and compose the creative process.
First, professionals follow concept-based ideation when they choose
to elaborate aesthetic concepts as guides for what will be synthesized
by the system. Thus, directing algorithmic and programming efforts.
In addition, they can work the other way around when constraints
are more flexible and rely on material-based ideation to let many
explorations with programming and software (the material) point out
concrete concepts to be pursued.

164
 Through SP5 — It can also be conducted in ways that are
either more structured, sequential, and unidisciplinary — waterfall
approaches; or based on multidisciplinary collaboration, rapid
iteration, and experimentation — agile methods or multi-track —,
we aimed to obtain insights about which project management approaches
are consciously or unconsciously chosen by professionals and teams of the
field. Accordingly, we intended to enrich the model with insights related to
how real-life projects are managed and how the activities and initiatives are
organized.
We considered SP5 endorsed and emphasized experimental and
agile approaches after observing that all of our cases were carried out through
initiatives that happened disorderly. Moreover, when it was not carried
out individually, projects were executed collaboratively either through
multidisciplinary efforts or dedicated fronts. Lastly, the aforementioned
approaches were also reinforced because interviewees referred to them as the
natural choice when developing similar projects. The following table (Board
25) recaps how SP5 was perceived in each of the cases.

165
 In addition to being suggested by the analysis of our cases,
collaborative and experimental approaches are also favored by contemporary
authors and practitioners of interaction design, as discussed in subchapter
1.2. Therefore, to comprise the questions discussed above and picture a
creative process more oriented towards practice (as illustrated by the board
below), we can rewrite SP5 as follows: Concerning the conduction of
projects, contemporary professionals and teams prefer to carry them
out through approaches that are multidisciplinary, collaborative,
experimental, and based on non-delimited cycles of propositioning,
evaluating, and refining. Examples of the aforesaid approaches are
agile methods and multi-track development.

166
 Finally, the sixth subproposition — Regardless of specific
constraints and the approach, when designing an interactive product,
designers undertake the major stages plan, define, design, develop,
and deploy, and the activities designing alternatives, prototyping,
evaluating, and discovering requirements —, was endorsed due to the
identification of activities and concerns related to the categories above
throughout our cases. However, it is worth noting that delimited moments
of planning and defining were less emphasized when happening in a less
constrained context. We stated this because, in Tocando Brasília, Rangel’s
experimental approach to developing the installation and the exhibition’s
flexible brief allowed him to work freely. Imposing an organization in stages
could be, then, misleading. ​​

The table on the end of the page (Board 27) recaps how SP6 was
perceived in our cases.

Furthermore, due to a context in which design-related and computing-

related abilities are extremely connected to each other, the analysis of cases
suggested that the proposed stages of design and development could be
integrated into a single category of design and develop, comprising not only
the respective initiatives of each one of them but also the mixed activities and
decisions that are simultaneously and collaboratively made.
More specifically, the practical initiatives on the next pages (Board
28) have been identified and were grouped to be taken as examples of
relevant tasks and activities. To enhance comprehension, they were classified
according to the categories postulated by the subproposition. However, it is
worth noting that, despite being represented as a table, the following
elements can be reordered, skipped, postponed, or advanced, and
that they do not necessarily represent only the categories they are
associated with.

167
168
 To consider the improvements discussed, we can rewrite SP6 as
follows: Regardless of specific constraints and the approach, when
designing an interactive product powered by generative systems,
professionals rely on initiatives related to planning, defining, designing
& developing, and deploying to carry out their projects. Moreover, they
execute practical activities adapted to the context such as designing
alternatives, prototyping, evaluating, and discovering requirements.

Finally, through the confirmations and revisions driven by our case

studies, we could elaborate the final version of the model, incorporating the
key takeaways provided by the investigation. This model is available on the
next page (Board 29).

By transporting the model to our case studies and confronting

it with the data uncovered, we learned aspects that motivated its revision
and enabled the interpretation of the creative processes studied. Concisely,
this research pointed out the following aspects about the creative processes
employed by contemporary professionals in the design of interactive products
powered by generative systems (the process):

- The process still relies on direct manipulation as an important

contributor for delivering the intended design and facilitating the
abstraction of aesthetic aspects into algorithms. This insight suggests
that direct manipulation enables the proposition of designs and helps

169
professionals navigate the fundamental differences stated by Groß et al.
(2018) and Grünberger (2019);
- Direct manipulation is especially useful when the project needs
to attain specific aesthetic guidelines — contexts in which it can be
used to create aesthetic guides for algorithmic efforts. In other words,
to preconceive concepts to be produced through the development and
execution of generative systems;
- The process comprises activities related to ideating, abstracting ideas
into algorithms, translating algorithms into programs, obtaining and
evaluating computationally-generated results, and refining, as stated
by Groß et al. (2018), that happen interspersedly throughout the
process, instead of being executed in a specific order or in specific moments.
Moreover, when carried out by a team, these activities might be shared
collaboratively or organized in fronts;
- The process is carried out through cycles of experimentation,
evaluation, and refinement, similarly to contemporary models proposed by
authors of the fields of interaction design and digital product development.
- The process might be carried out collaboratively by a multidisciplinary
team, so activities and abilities are shared among the people involved and
organized according to specific intentions or constraints.
- The process might be powered by two complementary strategies of
ideation — concept-based and material-based—, which can be selected
according to the constraints of the project and the style of the team.
- The process involves activities such as the ones grouped into the table
Examples of Relevant Initiatives (Boards 28.1 and 28.2), which can be
reordered, skipped, postponed, or advanced, and represent categories beyond
the ones they are associated with in the same table.
- The process notably relies on activities, abilities, and initiatives
associated with both design thinking and computational thinking,
which suggests that mastering these two forms of thinking might contribute
to more mature projects
- The process relies on a significant practical connection between
design and development initiatives, which suggests that separate “stages”
or “fronts” to organize initiatives might be misleading. Instead, it is more
accurate to think in terms of a unified category of activities we can call design
& develop.

171
Chapter 5
Final Considerations
5.1 General considerations
5.2 Limitations of this work
5.3 Insights for further research
 This work sought to answer the following question: What are the
main aspects of the creative processes employed by contemporary
professionals for designing interactive products powered by generative
systems?
The question reckoned on the idea that differences between design
processes in which generative creation is employed and conventional ones are
relevant and valuable to be understood as contributions for the design field.
Therefore, to answer it, we relied on the investigation executed to encounter
insights capable of enabling the characterization of the process investigated.

5.1 General considerations

Our final model provided answers to the research question by
presenting aspects of the process verified through case studies. In addition, it
illustrated how contemporary professionals are executing the practice we are
interested in, contributing with insights about the aspects mentioned by the
question.
To answer the question more concisely, we rely on the following
conclusion composed by the revised subpropositions of our model:

Designers have their creative process fundamentally altered,

as they are no longer supposed to produce artifacts exclusively
through direct manipulation but primarily through mediating
the elaboration, curation, and evaluation of the computational
processes that are supposed to produce them. Such a creative
process relies on activities that can be interspersed and shared
collaboratively, related to ideating, abstracting ideas into
algorithms, translating algorithms into programs, obtaining and
evaluating computationally-generated results, and refining the
computational processes to deliver the expected quality.
Accordingly, due to the existence of a characteristic layer
of abstraction — as professionals need to think in terms of
algorithms to create or enable the design of desired artifacts —,
designing successful interactive products powered by generative
systems requires professionals or teams capable of mastering
abilities related to both computational thinking and design
thinking. Moreover, two complementary ideation strategies might
also enable and compose the creative process. First, professionals
follow concept-based ideation when they choose to elaborate
aesthetic concepts as guides for what will be synthesized by the
system. Thus, directing algorithmic and programming efforts. In
addition, they can work the other way around when constraints
are more flexible and rely on material-based ideation to let many
174
 explorations with programming and software (the material) point
out concrete concepts to be pursued. Concerning the conduction
of projects, contemporary professionals and teams prefer to
carry them out through approaches that are multidisciplinary,
collaborative, experimental, and based on non-delimited cycles of
propositioning, evaluating, and refining. Examples of the aforesaid
approaches are agile methods and multi-track development.
Finally, regardless of specific constraints and the approach,
when designing an interactive product powered by generative
systems, professionals rely on initiatives related to planning,
defining, designing & developing, and deploying to carry out their
projects. Moreover, they execute practical activities adapted to the
context such as designing alternatives, prototyping, evaluating,
and discovering requirements.

The following objective for this research was also defined: To propose
a model comprising relevant aspects of the creative processes
undertaken by contemporary professionals when designing interactive
products powered by generative systems. We considered it achieved as
the final model was elaborated and presented, containing the aspects and
insights summarized in the board 29.
Finally, we understand that the contributions of this work find
support in academic literature and in the reality of the investigated professional
practice, therefore, they have validity and expand the scientific literature
of the relevant fields.

5.2 Limitations of this work

This research executed some initiatives in order to deliver scientific
rigor and make meaningful contributions (Yin, 2014; Gray, 2012; Bauer
& Gaskell, 2000; Legard et al. 2003), as detailed in chapter 2 - method.
Regardless, it is necessary to critically evaluate its quality concerning its
validity and reliability (Yin, 2014).
First, we understand that no major threats to reliability, internal
validity, and external validity were identified.
We attempted to provide reliability, thus facilitating that our
study can be re-executed with the same cases producing equivalent results,
by making this research’s process very clear. To this end, the procedure we
followed was made explicit concerning how we dealt with the method and
elaborated the data collection instruments, the changes motivated by the
pilot study and thesis committee, and how data was analyzed and turned into
conclusions. We also were careful in clarifying how each of the theoretical
contributions we relied on became relevant elements such as questions,
175
components of the model, the theoretical proposition, and conclusions.
Second, internal validity is not considered a relevant test for
this work because we did not intend to infer causal relationships between
variables, but rather relied on an exploratory strategy to induce insights and
hypotheses about our object. Regardless, in order to assure greater coherence
between the data collected during the investigations and how it was analyzed,
this work would benefit from involving participants in the interpretation of
data to judge the accuracy of the patterns found.
We also attempted to provide external validity, thus producing
results that can be generalized “beyond the immediate study” (Yin, 2014), by
dedicating considerable time to declare a scope through framing initiatives
that resulted in the research question and in the first propositions we
followed. By making explicit through our question that the scope investigated
is composed of projects that are contemporary and executed by professionals
of the field, we narrowed our focus and produced results more probably
generalizable. It is also worth noting that, due to the qualitative nature of this
work, when we mention generalization, we mean analytic generalization.
Finally, we understand that construct validity might be “threatened”
due to unforeseen questions concerning the selection of cases. When testing
construct validity, researchers want to make sure “a sufficiently operational set
of measures” (Yin, 2014) is declared for planning and conducting the study.
However, despite attempting to provide uniformity to the study and diminish
“subjective” interpretations of central concepts (e.g. creative process, design
process, and generative creation) by defining selection criteria (as declared
in chapter 2 — method) and building a comprehensive foundation, we
acknowledge that further delimitations might be considered relevant by other
researchers, thus posing the need for improvement.

5.3 Insights for further research

Certainly, further research on many concepts related to this work
would be beneficial for the fields of interaction design, computational and
generative design, and even computer science. However, we will attain to
point out aspects we believe are crucial for expanding the relevance of this
work, thus grasping the creative process investigated. Those will be:

- Computing techniques professionals use to synthesize foundational

aesthetic elements such as shapes, textures, and movements;
- Specific autonomous logics commonly employed for powering generative
systems and their influence on the creative processes;
- The differences between processes carried out by single individuals and
teams when designing interactive products powered by generative systems;
- How production happens in specific devices and with specific technologies
176
and programming languages;
- How generative creation is being perceived by and has been applied in the
market.

177
References

Agkathidis, A. (2015). Generative Design. Laurence King Publishing.

Barczik, G., & Kurth, W. (2007). From Designing Objects to Designing

Processes: Algorithms as Creativity Enhancers. Proceedings of the
eCAADe Conference, Germany. 25 (1), 887-894.

Baxter, M. (1995). Product design: A practical guide to systematic

methods of new product development. CRC Press.

Bauer, M. W., & Gaskell, G. (2000). Qualitative researching with text,

image and sound: A practical handbook. Sage.

Beecher, K. (2017). Computational Thinking - A beginner’s guide to

problem-solving and programming. BCS Learning & Development Limited.

Brain, T., & Levin, G. (2021). Code as Creative Medium: A Handbook for
Computational Art and Design. MIT Press.

Britannica, T. Editors of Encyclopaedia (2019, March 7). behaviourism.

Encyclopedia Britannica. https://www.britannica.com/science/behaviourism-
psychology

Burdek, B. (2005). History, Theory and Practice of Product Design.

Birkhäuser – Publishers for Architecture.

Bocconi, S., Chioccariello, A., Dettori, G., Ferrari, A., & Engelhardt, K.
(2016). Developing computational thinking in compulsory education
– Implications for policy and practice; EUR 28295 EN; doi:10.2791/792158

Buonamici, F., Carfagni, M., Furferi, R., Volpe, Y., & Governi, L. (2021).
Generative Design: An Explorative Study. Computer-Aided Design &
Applications; 18 (1): 144-155.
178
Cagan, M. (2017). Inspired: How to Create Tech Products Customers
Love (2nd ed.). Wiley.

Cormen, T., Leiserson, C., Rivest, R., & Stein, C. (2009). Introduction to
Algorithms (3rd ed.). MIT Press.

Cormen, T. (2013). Algorithms Unlocked. MIT Press.

Creswell, J. (2014). Investigação Qualitativa e Projeto de Pesquisa:

Escolhendo entre Cinco Abordagens (3rd ed.). Penso.

Cross, N. (2006). Designerly Ways of Knowing. Springer.

Csizmadia, A., Curzon, P., Dorling, M., Humphreys, S., Ng, T., Selby, C.,
& Woollard, J. (2015). Computational thinking A guide for teachers.
Computing at School.

Denning, P. (2009). Beyond computation thinking. Communications of

the ACM, 52 (6). 28.

Dubberly, H., & Pangaro, P. (2007). Cybernetics and Service-Craft:

Language for Behavior-Focused Design,. Kybernetes, 36(9/10):1301-1317.

Field.IO x IBM — Think 2020 (n.d.). Field.

https://www.field.io/project/ibm-think-2020/

Flusser, V. (2013). Filosofia da caixa preta: : Ensaios Para uma Filosofia

da Fotografia (2nd ed.). Annablume.

Furber, S. (2012). Shut down or restart? The way forward for computing
in UK schools. London, UK: The Royal Society.

Galanter, P. (2003). What Is Generative Art?: Complexity Theory as a

Context for Art Theory.

Garrett, J. (2010). The Elements of User Experience: User-Centered

Design for the Web and Beyond (Voices That Matter) (2nd ed.). New
Riders.

Gerstner, K. (2007). Designing Programmes: Programme as Typeface,

Typography, Picture, Method. Lars Müller Publishers.

179
Goodwin, K. (2009). Designing For the Digital Age: How to Create
Human-Centered Products and Services. Wiley.
Gothelf, J., & Seiden, J. (2016). Lean UX (2nd ed.). O’Reilly Media, Inc.
Gray, D. (2012). Pesquisa no Mundo Real (2nd ed.). Penso.

Groß, B., Bohnacker, H., Laub, J., & Lazzeroni, C. (2018). Generative Design:
Visualize, Program, and Create with JavaScript in p5.js. Princeton
Architectural Press.

Grünberger, C. (2019). Analog Algorithm: Source-Related Grid Systems.

Lars Müller Publishers.

Hanns, D., Velloso, L., & Galdieri, M. (2018) fixos_fluxos na Paulista:

composições generativas a partir de dados abertos da cidade. #17.ART:
17º Encontro Internacional de Arte e Tecnologia.

Hübner, P. (2018). Brute. Patrik Hübner - Generative Design and Creative

Coding. https://www.patrik-huebner.com/portfolio-item/brute-data-driven-
wine-brand/.

Krish, S. (2011). A practical generative design method. In: Computer-Aided

Design, 1 (43). 88-100.

Kelly, N., & Gero, J. (2021). Design thinking and computational thinking:
A dual process model for addressing design problems. Design Science, 7,
E8. doi:10.1017/dsj.2021.7

Lawson, B., & Dorst, K. (2009). Design Expertise. Architectural Press.

Legard, R., Keegan, J., & W, K. (2003). In-depth Interviews. In Ritchie, J., &
Lewis, J. (ed.), Qualitative Research Practice (138-169). Sage.

Lubart, T. (2018). The Creative Process: Perspectives from Multiple

Domains. Palgrave Macmillan UK.

Moggridge, B. (2007). Designing Interactions. The MIT Press.

Mountstephens, J., & Teo, J. (2020). Progress and Challenges in Generative

Product Design: A Review of Systems. Universiti Malaysia Sabah.

Nake, F. (2018). The Pioneer of Generative Art: Georg Nees. Leonardo 51

(03), 277–279. https://doi.org/10.1162/leon_a_01325

180
Neves, I. (2015). Abordagem científica ao Projecto no início da Era
Computacional: Hochschule fur Gestaltung of Ulm e a sua diáspora.
Lisboa: Faculdade de Arquitetura da Universidade de Lisboa.
Omine, E. (2014). Design gráfico computacional: computação aplicada
no projeto e na produção de imagens dinâmicas e interativas (Master’s
Thesis). Faculdade de Arquitetura e Urbanismo, Universidade de São Paulo,
São Paulo.

Pearson, M. (2011). Generative Art. Manning.

Reas, C., & McWilliams, C. (2010). Form+Code in Design, Art, and

Architecture. Princeton Architectural Press.

Reichardt, J. (1968). Cybernetic Serendipity : The Computer and the Arts

: A Studio International Special Issue. ICA.

Richardson, A. (2016). Data-driven graphic design: Creative coding for

visual communication. London: Fairchild Books, an imprint of Bloomsbury
Publishing Plc.

Rodenbröker, T. (2018). Programming Posters. Tim Rodenbröker Creative

Coding, https://timrodenbroeker.de/projects/programming-posters/.

Saffer, D. (2009). Designing for Interaction: Creating Innovative

Applications and Devices. New Riders Publishing.

Sawyer, K. (2012). Explaining Creativity: The Science Behind Human

Innovation (2nd ed.). OUP US.

Sedgewick, R., & Wayne, K. (2011). Algorithms (4th ed.). Addison-Wesley

Professional.

Sharp, H., Rogers, Y., & Preece, J. (2005). Design de Interação: Além da
interação humano-computador. Bookman.

Sharp, H., Rogers, Y., & Preece, J. (2019). Interaction Design: Beyond
Human-Computer Interaction (5th ed.). John Wiley & Sons, Inc.

Shute, V.J., Sun, C., & Asbell-Clarke, J. (2017). Demystifying computational

thinking. Educational Research Review, 22, 142-158.
Soddu, C. (1994). The design of morphogenesis. An experimental
research about the logical procedures in design processes. Demetra
Magazine, 1 (1). 56-64.
181
Stake, R. (1995). The Art of Case Study Research. Sage Publications.

Unger, R. Chandler, C. (2012). A Project Guide to UX Design: For User

Experience Designers in the Field or in the Making. (2nd ed.). New
Riders Publishing.

Waldemar Cordeiro (2019). Enciclopédia Itaú Cultural de Arte e Cultura

Brasileiras. http://enciclopedia.itaucultural.org.br/pessoa297/waldemar-
cordeiro.

Wing, J. (2011) Research notebook: computational thinking -- what

and why? The Link. Available from: https://www.cs.cmu.edu/link/research-
notebook-computational-think- ing-what-and-why.

Yadav, A., Mayfield, C., Zhou, N., Hambrusch, S., & Korb, J, T. (2014)
Computational thinking in elementary and secondary teacher
education. ACM Transactions on Computing Education, 14 (1). 1–16.

Yin, R. (2014). Case Study Research: Design and Methods (5th ed.).
Thousand Oaks, CA: Sage Publications, Inc.

Zhang, Y., & Funk, M. (2021). Coding Art: The Four Steps to Creative
Programming with the Processing Language. (Design Thinking). Apress,

182
183
List of figures

1, 2, 3 and 4: Reichardt, J. (1968). Cybernetic Serendipity : The Computer

and the Arts : A Studio International Special Issue. ICA.

5, 6 and 7: Universidade de São Paulo (2012). Giorgio Moscati e Waldemar

Cordeiro: quando o computador encontrou a Arte. https://www6.usp.br/
wp-content/uploads/portal20121023_6.jpg.

8 and 9: Hübner, P. (2018) Brute. Patrik Hübner - Generative Design and

Creative Coding. https://www.patrik-huebner.com/portfolio-item/brute-data-
driven-wine-brand/.

10, 11 and 12: Rodenbröker, T. (2018). Programming Posters. Tim

Rodenbröker Creative Coding, https://timrodenbroeker.de/projects/
programming-posters/.

13 and 14: Hanns, D., Velloso, L., & Galdieri, M. (2018) fixos_fluxos na
Paulista: composições generativas a partir de dados abertos da cidade.
#17.ART: 17º Encontro Internacional de Arte e Tecnologia.

15, 16, 17, and 18: Created by the author.

19: Sharp, H., Rogers, Y., & Preece, J. (2019). Interaction Design: Beyond
Human-Computer Interaction. (5th ed.). John Wiley & Sons, Inc.

20: Saffer, D. (2009). Designing for Interaction: Creating Innovative

Applications and Devices. New Riders Publishing.

21 and 22: Sharp, H., Rogers, Y., & Preece, J. (2019). Interaction Design:
Beyond Human-Computer Interaction (5th ed.). John Wiley & Sons, Inc.

23: Saffer, D. (2009). Designing for Interaction: Creating Innovative

Applications and Devices. New Riders Publishing.
184
24: Moggridge, B. (2007). Designing Interactions. The MIT Press.

25: Goodwin, K. (2009). Designing For the Digital Age: How to Create
Human-Centered Products and Services. Wiley.

26: Garrett, J. (2010). The Elements of User Experience: User-Centered

Design for the Web and Beyond (2nd Edition) (Voices That Matter) (2nd
ed.). New Riders.

27 and 28: Unger, R. Chandler, C. (2012). A Project Guide to UX Design:

For User Experience Designers in the Field or in the Making. (2nd ed.).
New Riders Publishing.

29: Gothelf, J., & Seiden, J. (2016). Lean UX (2nd ed.). O’Reilly Media, Inc.

30: Cagan, M. (2017). Inspired: How to Create Tech Products Customers

Love (2nd ed.). Wiley.

31: Groß, B., Bohnacker, H., Laub, J., & Lazzeroni, C. (2018). Generative
Design: Visualize, Program, and Create with JavaScript in p5.js.
Princeton Architectural Press.

32: Grünberger, C. (2019). Analog Algorithm: Source-Related Grid

Systems. Lars Müller Publishers.

33 and 34: Field.IO x IBM — Think 2020 (n.d.). Field.

https://www.field.io/project/ibm-think-2020/

35 and 36: Created by the author.

37: Agkathidis, A. (2015). Generative Design. Laurence King Publishing.

38 and 39: Created by the author.

40 and 41: Provided by Estúdio Guto Requena.

42: Provided by Alexandre Rangel.

43 and 44: 100 — orca. https://100r.co/site/orca.html

45, 46, 47, 48, 49, 50 and 51: Provided by Alexandre Rangel.

185
52, 53, 54 and 55: Provided by Caio Velenosi.

56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66 and 67: Provided by Dimitre Lima
and Gabriela Castro.

68, 69, 70: Created by the author.

Boards 1 to 29: Created by the author.

186