Five days in a Berlin School: Participatory workshop for the development of a Progressive Web Application

„We, the ninth and tenth graders of a Berlin school, have been working on the development of an app in collaboration with researchers from the TU-Berlin. […] During the four-day workshop at our school, we drew maps of our everyday life on paper and digitally, built models, designed icons, and thought of a name for the app.“

— Quotes from a participant in a 5-day workshop conducted at a school in Berlin in November 2022. Translated from German.

Subproject A02, “The spatial knowledge of young people: The constitution of online, offline and hybrid spaces”, includes case studies in Berlin and Lima to study the refiguration of young people’s spatial knowledge, especially types of online, offline and hybrid spatial constitutions. To this end, we are closely collaborating with highschoolers from both Berlin and Lima with the aim of conducting research both on and with them.

Our project’s main source of data are mental maps, a research method and tool that we use in a participatory and collaborative process with young people, asking them to map their daily routines, trajectories, and experiences in (their) spaces. More specifically, and based on previous analog experiences with this method, we are developing a Progressive Web Application (PWA) to allow schoolers in Berlin and Lima to map their everyday lives in a way that is more attuned to their preferences and needs; after all, we are dealing with so-called “digital natives”. For this purpose, with the aid of Visual Intelligence, a visual communication and programming services company based in Berlin, we prepared and conducted a participatory workshop with 24 young people aged 13-15 at a secondary school in Berlin in November 2022. The main goal of this workshop was to involve these young Berliners in the co-design of the PWA with which they will later produce their maps.

In this blog entry, we share some initial thoughts on the methods and activities we carried out in the workshop to stimulate reflection and promote constructive discussion, in particular with a view to repeating the workshop in Lima in September 2023. The workshop goals were:

Main goal:

• Co-designing the PWA in dialogue and close collaboration with the young participants.

Subgoals:

• Determining together with the participants the key elements that the PWA should have to collect relevant data about their daily (spatial) practices.
• Defining together with participants the details (graphics, interface, elements, interactivity) of the PWA to make it more engaging and fun.
• Gaining first insights into the spatial constitutions.

We conceptualized a 5-day workshop (07–11.11.2022). It was offered to the students as an elective within the so-called “MINT-Woche”, a week of intensive work on scientific topics for students. The week culminated in a public exhibition, which was prepared, curated, and presented by the workshop participants and held on the campus of the Technische Universität Berlin (TU Berlin).

The research team that facilitated the workshop was a multidisciplinary team. Together with the members of CRC subproject A02 (one professor and three postdocs in urban planning and design), we were supported by two student assistants from the same faculty and five rotating facilitators from our partner Visual Intelligence, who were interactive designers, sociologists, and programmers.

As Table 1 shows, the first day (Monday) was used to introduce the students to the aim of the research and the idea of the Progressive Web Application (PWA) (see Figure 1). On the second day (Tuesday), we dealt more directly with the PWA and tackled the subjects of icons and their design (see Figure 2). The third day (Wednesday) was about layout and styling, names, and favicons. On the fourth day (Thursday), we introduced the students to the basic concepts of programming and designed the public exhibition with them, which was shown the following day (Friday) at TU Berlin (see Figure 3).

In order to keep the diverse activities moving at an appropriate pace, and to maintain the attention, enthusiasm, and engagement span of the participants, we introduced some key aspects into the dynamic of the workshop:

• Speed and dynamics: Our aim was to engage the young adults with short exercises to spark and keep their attention. The rhythm was very fast, so each exercise was completed in 10 to 20 minutes.
• Haptics and materiality: A key factor in the design of the exercises was that they were rich in (sometimes uncommon) materials used for writing, sketching and model building. We tried to engage them with different objects, consistency, and dynamics to make the exercises accessible on multiple levels.
• Peer-like interactions: We not only acted as instructors, but also participated in many tasks. The aim was to build a strong relationship with the students and support their role as co-researchers, creating an equal relationship that allowed for a better exchange of ideas. This type of interaction also fostered the building of a trusting relationship that allowed the students to show personal and vulnerable aspects of their daily lives. 
• Attention to decision-making: We sought to create small groups, individual work, and larger group work. In addition, we added democratic principles to settle matters of discussion.
• Variability: We constantly changed the format and dynamics of the exercises: from face-to-face teaching to group work, from digital to analog tasks, to keep the pace of interest going.
• Don’t forget the food!: We tried to make the process playful, providing moments of fun and rewards to celebrate engagement. For example, some tasks ended with a winner receiving a sweet dessert, or a day’s work ended with pizzas delivered to the school.

While Table 1, gives a short overview of all the exercises, we will explain two tasks in detail to illustrate how these principles work in concrete examples.

Two exercises in detail

“Containers”: Coding a system of “tridimensional” representation

In the construction of the app, it is very important to understand how students organize their thoughts about space. In other words, while navigating the app, they need to know where to find the home, or family icon. In our team, we settled on the term “containers” to describe the categories or clusters that group the different icons.

This exercise took place on Monday, right after the “analog mapping”, where students were asked to first draw a map depicting their everyday lives individually and then present it to the others in their groups. After that, we started the “containers” exercise. We sat down in groups and discussed all the elements that could be seen in the maps that were produced. After listing them, the students were asked to use cut-out polystyrene cubes to represent each of the elements in a “tridimensional” way. While some of the cubes were made readily available, we also provided two polystyrene cutters for participants to produce more cubes if required – thereby extending the haptic and hands-on character of the exercise. Once all the elements had been turned into cubes, they were placed at the center of each group’s table and subsequently sorted and clustered into boxes according to identified similarities of overlapping categories. Finally, after the “containers” were filled, they were named and the cubes were connected with wooden sticks, so the “containers” could be presented to the others as “standing three-dimensional systems”. In a subsequent second round, we asked the students to use the same cubes, this time grouping them in predefined boxes that we had categorized according to our research interests: “people”, “places”, “activities” and “atmospheres” (see Figure 4).

The results were very exciting. The “containers” task allowed students to engage at different levels and intensities: while some were more interested in the clustering and categorizing, others were keener on the materiality (that is, the texture) of the polystyrene cubes and on cutting them. At the same time, some others were enthralled by the creation of the clustering “sculptures” with the sticks. By and large, everyone showed interest, and actively participated in the process. What is more, they also came up with new and certainly unexpected categories that we would never have considered prior to the exercise. One of the most striking of these “unanticipated” categories was the “role of objects”, as opposed to places, in the representation of their everyday lives – these young Berliners associate many activities with things, rather than primarily with specific places. In other words, “things” are what give them access to an activity; be it watching a video on YouTube to play sports, chatting on mobile devices to meet friends or using the PC to watch movies or series.

“Layout and styling”: Because “looks” do matter.

The look of the app was at the core of the next exercises. With a series of tasks, we tried to work out the organization of the app’s interface as well as two to three different stylings with respect to fonts and colors. For this exercise, students were introduced, in broad terms, to the basic principles of layout and styling. These two aspects, as it happens, are quite flexible when it comes to customizing a PWA, which allowed the students to feel “reflected” by the app’s interface.

During the first phase of the exercise, a digital mood board tool was employed to determine the preferred style for the PWA. Participants had to pick a background, some icons, fonts, and colors to suggest the styling of the app, using predefined platforms (e.g. Google fonts and Adobe colors) on their tablets. The results were then sent to a central projector and commented on together.

The second phase of the exercise was analog: we had the students use scissors and glue to design an outline for the PWA and add possible features, like buttons, interactive elements, etc. They also had to color the layout they proposed. Afterwards, all the proposals were hung on a wall and a winner was chosen, whose author received a prize (see Figure 5).

As described above, both aspects – layout and styling – were addressed through two formats: one analog and one digital. When asked about it, the schoolers favored the analog format for the layout – a preference that was largely reflected in the outputs produced. All in all, the analog layout exercise was very enlightening and many of the proposed solutions will eventually be implemented verbatim in the final version of the PWA.

“Hits and misses”: Overall reflection

In this final section, we summarize the main takeaways from the workshop, recognizing both what worked and what didn’t.

The balance between the degree of predetermination and open-endedness. We were faced with a conundrum: the purpose of the app was to develop a research tool. At the same time, the app should be designed as much as possible by the young people. We tried to create a pragmatic framework: students were only involved in those key factors that were both relevant to them and susceptible to modifications.

Analog vis-à-vis digitalized activities. The students responded better to the analog format exercises and seemed to enjoy them a bit more. They also appreciated the haptic and hands-on character of the tasks with unusual and new (to them) materials.

Exhibition as a moment of reflection. Thursday was reserved for putting together the final exhibition on the TU Berlin campus. This process was curated by the students themselves and fostered a moment of reflection on the past days. The students, who were initially somewhat overwhelmed by the variety of new topics, were eventually able to encapsulate the experience and integrate it into their own personal narrative. We concluded that this final day of presentation and reflection is rather crucial to the completeness of the participatory process.

As mentioned before, we will hold a similar workshop with students at a school in Lima next September. We are sticking to a similar structure – focusing on speed and haptics – to deliver the workshops. Drawing on what we learned from the German students, we will devote more time to analog work. By the same token, we will replicate the experience of the exhibition and have the Peruvian schoolers co-curate it as a culminating moment of (self-)reflection on the workshops; at the same time, we will adapt certain aspects to the new contextual socio-cultural circumstances.

Acknowledgements: We would like thank all involved pupils, programmers, designers, teacher who facilitated and made this workshop possible.

Workshop organization und supervision: Ignacio Castillo Ulloa, Robin Coenen, Sarah Friedel, Anna Juliane Heinrich, Kéan Koschany, Max Kreis, Lukas Mehling, Angela Million, Gilberto Prüßing Mascarenhas, Danielle Rosales, Ludovica Tomarchio

Author Biographies:

Ludovica Tomarchio, PhD, researcher, Chair of Urban Design and Development and Digital Communication Manager at Aedes, Berlin. Dr. Tomarchio’s research focuses on the creation of hybrid spaces. As a member of the Collaborative Research Center 1265 „Re-figuration of Spaces“, she is working on young people’s spatial knowledge and its intersections with the issues of hybridization.

Angela Million, PhD, Professor for Urban Design and Urban Development at TU Berlin. She is the director of the “Global Center of Spatial Methods for Urban Sustainability” (SMUS). Since 2018, she is a principal investigator within the Collaborative Research Center 1265 “Re-Figuration of Spaces”. She is a member of UIA Built Environment Education network.

Anna Juliane Heinrich, PhD, Researcher and Lecturer, Chair for Urban Design and Urban Development at TU Berlin. Dr. Heinrich’s research and teaching focuses on spaces of childhood and youth. As member of the Collaborative Research Center 1265 “Re-Figuration of Spaces”, she currently works on the reconstruction of changes in young people’s spatial knowledge.

Ignacio Castillo Ulloa, PhD, Researcher and Lecturer, Chair for Urban Design and Urban Development and Coordinator of the “Global Center of Spatial Methods for Urban Sustainability” (SMUS) at TU Berlin. As member of the Collaborative Research Center 1265 “Re-Figuration of Spaces”, he currently works on the reconstruction of changes in young people’s spatial knowledge.