1 Introduction

For more than a decade, the vision of smart cities proclaimed supporting not only government, agencies, and other large urban stakeholders but also the citizens directly in their daily lives. Visualizations are a major approach to support better understanding of different urban data and to gain insights into the urban now. Urban data dashboards, visual analytics software and other complex visualization systems are typically intended for experts and policymakers. While these can be used by laypeople as well, other approaches aim to close this gap and can be applied in urban data scenarios as well. Casual visualizations (Pousman et al. 2007) can provide access to data related to people’s daily life; situated visualizations can show data directly where the person is located or where the insight is needed (Bressa et al. 2022). First, cities are beginning to explore single-use visualizations tailored for one specific task to reduce complexity and increase citizens’ uptake. These range from a visual search for suitable kindergartens,Footnote 1 to interactive maps of urban green spacesFootnote 2 matching various criteria, such as the integration into the everyday usage (Hecht et al. 2021).

Our work builds on this development and aims to provide an appealing, easy-to-use mobile-first visualization for one specific task which citizens can explore from where they currently are in the city. This work is within the context of sMArt roots, the smart city initiative of the city of Mannheim. One of the main objectives of this initiative is to have citizens involved in all aspects and include them as first-class stakeholders by inviting them to a diverse set of participatory activities as well as offering an array of public-facing visualization artifacts.

Our contributions lie in introducing the concept of data experience points, the case study of a visualization of air quality, and a discussion on our lessons learned from the design process and from a formative evaluation at a public outreach event.

2 Related Work

“Urban informatics is the study, design, and practice of urban experiences [...] that are created by [...] the augmentation that mediates the physical and digital layers of people networks and urban infrastructure” (Foth et al. 2011). A major component to achieve this is the analysis and communication of data to help understand urban systems and services. Dashboards and data visualizations play a key role in this field by making complex urban data more accessible to different stakeholders, including city officials, policymakers, and residents.

One tool commonly used in the domain of smart cities is urban dashboards. Dashboards in general aggregate multiple data sets into a single view (Sadowski 2021). To monitor urban systems, and to provide an overview of the municipality at a glance, urban dashboards incorporate a variety of urban indicators (Few 2013; Farmanbar and Rong 2020) to address the interests of diverse stakeholders (Kitchin et al. 2015). Due to the diverse sets of data and visualization techniques, dashboards tend to become visually rather complex (Sadowski 2021). This might impact comprehensibility and understandability, especially when targeting a broad audience.

Vande Moere and Hill introduce the term urban data visualizations as the presentation of local data based on urban phenomena to the local population (Vande Moere and Hill 2012). A major characteristic of such visualizations is that they are situated in their contextual, local, and social environment. They further argue that urban data visualizations should be informative and support gaining insights into different urban phenomena, as well as addressing local changes in the physical environment in a traceable and transparent manner. Since the audience of such public visualizations are often passers-by and other laypeople, one of the challenges is to highlight complex phenomenons in the data while allowing the audience to use and understand it with appropriate ease (Vande Moere and Hill 2012).

Effective urban data visualizations should not only inform the public, but also encourage participation and engagement. Critical to this is trust in the information and its presentation. It is also important to ensure that the way in which the visualizations are shown fits the topic at hand. For example, using a screen with high-energy consumption to convey information about saving energy would contradict its message.

While urban data visualizations often use digital solutions such as showing data on public displays or multitouch surfaces mounted in the urban environment, urban visualizations have also been offered in ways that use non-electronic displays, ranging from graffiti to chalkboards to physical objects (e.g., Koeman et al. 2014; Claes and Vande Moere 2013). To not being perceived as intrusive, such visualizations should be discreetly integrated into its environment, and fit the surrounding style and esthetics.

Closely related, but not limited to urban data, are situated visualizations, which aim to provide insights into data where they are needed, or where the data are collected (Bressa et al. 2022). One purpose of situated visualizations is to help citizens better understand environmental data and to increase general awareness about ecological challenges (Jansen et al. 2022).

We furthermore draw from the idea of casual data visualizations, which aim to facilitate understanding data outside a more analytical work environment (Pousman et al. 2007). It shares characteristics such as persuasiveness, personalization, or esthetics with urban data visualization and aims to attract a broad audience as well.

There are several challenges when designing visualizations aiming to support residents explore urban data. These include motivating citizens to engage with the issues being presented (Clarinval and Dumas 2021), increasing participation (Prandi et al. 2021), and providing relevant and local information to citizens (Acer et al. 2022).

3 Data Experience Point

We call the offerings of visualization artifacts on location data experience points. A data experience point (DXP) offers people at a specific location to experience data which is related to, but not necessarily collected at, that location in an attractive visual way to better understand an urban phenomenon.

A DXP acts as a starting point, inviting citizens to not only see the immediate vicinity and time, but to explore and compare additional data, and to—possibly—understand the bigger picture. A data experience point always starts with the here and now, and enables the easy exploration of the past and other places as well (Fig. 1).

Fig. 1
figure 1

Schematic view of a data experience point, showing a person standing at a location in front of an urban system (here: an air quality measurement station). That system stores its recorded data in a database which feeds the urban data platform (UDP). The person scans a QR code opening a website, which visualizes the data queried from the platform

Full size image

Together with colleagues from different disciplines, ranging from experts in civic participation, to data engineers from a public utility company, to liaison persons to the city government, we collected ideas and requirements for such data experience points.

Our design goals were informed by challenges and opportunities in human-centric design of urban data visualizations, using the design consideration C1–C10 (Goodwin et al. 2021). Mainly, we aimed to incorporate finding ways to bridge the physical location and the user’s sense of a place, and to bring visualizations into the public space (C2, C9), to design more accessible visualizations used in different contexts (C4), and to get the public interested, and to keep their attention for longer periods (C9).

Based on these discussions and informed by literature, we formulated a set of design goals (DG):

  • DG-SITU: Easily accessible at the location of the collected data. With this design goal, we intend to support citizens to explore the data in-situ. Interested people notice a sensor (e.g., a camera, or an air quality measure station), or scan a QR code as an entry point, and can access the visualization directly at their location anywhere in the city.

  • DG-MOBI: A mobile-first application designed for smartphone users. Closely related to DG-SITU, this design goal aims to provide adequate visualizations for mobile devices. Aspects such as legibility on smaller screens, and interaction modalities specific for touch need to be considered.

  • DG-INVI: A representation that is inviting to use. This design goal aims to pique interest, and to invite people to further engage with the visualization after the first glance through an attractive design and an overall compelling esthetic. By looking at the visualization, it should engage users to keep the app open and gather insights. Later tasks might include selecting specific events, comparing different times, and showing the data of other places.

  • DG-INSI: The visualizations should present the data and provide interactions in such a way to support people to gain insights. This design goal should help users to understand urban phenomena related to the location.

  • DG-EASY: Easy-to-use visualizations. With this design goal, we aim to provide interactive data representations which are easy to read and simple to use.

These design goals build upon the characteristics of urban data visualization (Vande Moere and Hill 2012). One difference with our approach is that the actual location is used as an entry point to the visualizations, instead of having a fixed installation. As it is a mobile application, it can be accessed at later times while still maintaining a link to the location of its data.

To demonstrate the feasibility of the concept, we are planning a series of design studies in the context of smart cities. Each should implement a visualization prototype for a different topic, aiming to increasingly meet and refine the design goals.

4 Case Study

Fig. 2
figure 2

Location of the Federal Environment Agency’s air monitoring station near the city center in Mannheim, which serves as data source and location for this data experience point

Full size image

As a first probe of the concept of data experience points, we rapidly developed a functional prototype. We designed and deployed a data-driven prototype to publicize the smart city initiative, demonstrate the concept, and get early formative feedback from citizens as quickly as possible.

In the face of the climate crisis, a major issue is to make cities more environmentally sustainable (cf. UN Sustainable Development Goal 11). Many city governments have understood the importance for their respective cities, and integrated this into their urban development or smart city programs (Bertelsmann Stiftung et al. 2022). In the case of Mannheim, one of the three pillars of the smart city initiative is “climate resilience” which aims to support sustainability goals through data-driven decision-making and communication.

Thus, for our first case study, we chose the topic of air quality.

In the following, we describe the design of a mobile app visualizing air quality as our pilot outreach prototype implementing the design goals. We further specified design goal DG-INSI to support insights for this use case, including the aim to enable people to understand the local air quality, as well as to make it possible to compare the real-time air quality with recent days to get a better understanding of small-scale temporal patterns.

4.1 Air Quality Data

Data for the prototype are collected from a local air monitoring station operated by the German Federal Environmental Agency. Out of two monitoring stations in Mannheim, we chose the one near the city center (Fig. 2), as we assume more citizens are passing by, in contrast to the location in the outer suburbs. The following measurements are being provided:

  • Nitrogen (NO\(_{2}\)) in micrograms per cubic meter

  • Fine dust particles smaller than 10 \(\upmu\)m (PM\(_{10}\)) in micrograms per cubic meter

  • Fine dust particles smaller than 2.5 \(\upmu\)m (PM\(_{2.5}\)) in micrograms per cubic meter.

Close to the air measuring station, there are several sensors from the local climate network, that provide the following three measurements:

  • Precipitation in millimeter

  • Wind direction in degrees

  • Temperature in degrees Celsius.

The datasets from these (and other) sources are brought together in an urban data platform within our smart city project, where they are heterogenized into a common schema. The air quality data has been resampled to a resolution of one hour, and is structured as time series. All data is provided via a common API.

For the computation of the air quality index, three air quality measures are used: NO\(_{2}\), PM\(_{10}\) and ozone (O\(_{3}\)) (Umweltbundesamt 2021). However, ozone is not available at all measuring stations, including the station used here. Thus, the ozone is not included in the air quality index of our prototype. Instead, we display PM\(_{2.5}\), yet do not incorporate it into the index.

4.2 Design Approach

The prototype in the case study was developed in an iterative process to be able to react to feedback from citizens and experts throughout. Based on initial ideas and sketches from the expert workshop, the prototype was continuously refined (see Fig. 3). While we kept the general idea, we adapted and extended various aspects of the user interface (UI), interaction capabilities, visualization details, as well as the displayed data. We considered different visualization techniques and UI designs. We briefly describe the alternatives and justify our choices in the next section below.

In the prototype used for evaluation, the overall daily air quality was displayed as colored circles, following a practical example of Kekeritz’ Weather Radials.Footnote 3 Based on users’ feedback that, we changed the display of the overall air quality per day to arcs spanning each day. In the final prototype (Fig. 3 on the right), the circles were picked up again to encode precipitation as circle size. Furthermore, a label has been added to clarify where the current week begins, and ends.

Fig. 3
figure 3

A sketch of the exploring radial view (left), the prototype presented at the public event (center), and an improved version based on feedback from the citizens (right)

Full size image

4.3 The Visualization Prototype

The visualization (see Fig. 4) consists of two parts: A key performance indicator (KPI) bar at the top and a radial chart below. The KPI bar shows the air quality of three measurements for the selected time, while the radial chart shows a selected measure for the last seven days, and displays additional weather information.

Fig. 4
figure 4

Air quality prototype with a KPI bar at the top showing the most recent measured values color coded by severity, the air quality over one week as a radial chart, and at the bottom a legend as well as precise values for the currently selected time

Full size image

4.3.1 KPI Bar

The KPI bar displays the values of three air quality measures (NO2, PM10, and PM2.5) at a selected time. For each measure, its qualitative level is calculated based on criteria set by the authorities developed by the German Federal Environment Agency and mapped to the background color of its box (see Fig. 5). Its 5-point scale ranges from very good to very poor.

Fig. 5
figure 5

The KPI bar with major air quality measurements for the currently selected location and time (here: Friedrichsring at 6 a.m. on a workday). Each value box is color coded by its severity, with the surrounding box indicating the overall air quality index

Full size image

The background color of the surrounding larger rectangle represents the overall air quality index and reflects the quality of the measure with the poorest value. The color scheme is the same as the one used in the radial bar chart (see Fig. 6), but uses lighter variants. If no value is present, the box is colored gray. Since the displayed PM2.5 measure is not used for calculating the air quality, it is permanently shown in gray. The KPI bar is synchronized with the interactions in the radial chart: The values and colors shown are always from the currently selected time. For future extension, when we add more air quality measurement stations, the location is also displayed at the top left.

4.3.2 Radial Chart

The radial chart (see Fig. 6) visualizes the change of one selected air quality measure over time (NO2). On the outer ring, bars visualize the hourly values of this measure, with the color encoding its qualitative level. Together, the KPI bar and the radial chart encode the same data in two ways, thus supporting DG-EASY.

Fig. 6
figure 6

The radial bar chart shows the progression of air quality for the selected measurement over one week. Time runs clock-wise, starting at seven days ago and ending at the most recent time with the labels showing the weekdays. The colored arcs display the overall air quality for each day, with the bars representing the value of that measure. In addition, the temperature is shown as a radial line chart, mean wind direction as an arrow glyph, and the amount of rain as circles. Below the chart, the detailed values as well as a legend are shown. The labels of the bottom mean “wind direction”, “temperature”, and “precipitation”, and the quality scale goes from “very bad” to “very good” (with gray showing “no data”)

Full size image

In the background, the colored arcs (or: donut segments) indicate the poorest quality level for each day. In the inner area, the hourly air temperature is displayed as a line chart, and the mean wind direction for every 8 h is displayed as a small arrow icon, with its angle directly encoding the direction. The amount of precipitation is displayed as bubbles on the outer ring to show possible effects on the air quality.

While techniques ranging from line charts to calendar heatmaps are commonly used to visualize temporal data, using a cyclic time axis helps to identify periodical patterns in the data (Aigner et al. 2007). As our visualization is intended to show air quality ranging from displaying recent measurements to enabling viewing recurring phenomena (DG-INSI), we employed a radial layout to show air quality measures on the outer circle, and weather data in the inner circles. This is intended to assist in the identification of correlations between the weather and the air quality (Eickelpasch and Eickelpasch 2004).

We chose to show the most recent seven days to focus on a time range that people could relate to personally. Additionally, this enables users to observe the effects of weekly traffic patterns and other man-made phenomena. An alternative would have been to use a more granular cyclic axis, either to show 12 or 24 h (Waldner et al. 2019), or minutes (Schwabish 2021). We opted against this as it would need a spiral layout to show more than one day, thus heavily reducing the space to display secondary weather data in the inner circle.

Radial charts have been used widely for weather and climate data (Brehmer et al. 2019). We collected an informal set of examples from practice, e.g., Lima (2017), which informed our design. Mapping time to polar coordinates has been described as intuitive (Burch and Weiskopf 2014), and esthetic (Brehmer et al. 2019), as well as engaging for communicating information to a broad audience of non-experts (Lankow et al. 2012). In the end, esthetics tipped the scales in favor of its use over drawbacks to help ordinary citizens discover a more unfamiliar way of visualizing data (Brehmer et al. 2019). With this, we aim to pique interest as well as increase further engagement, suiting our design goal DG-INVI.

4.3.3 Walk-Through

At the start, the prototype shows the most recent state of air quality, visualizing the collected data in near real-time. The KPI bar displays the date and time as labels, while the radial chart indicates this by the gray circular sector. Now, users can tap and slide everywhere on the circle to select different points in time. Both views are coordinated, and every selection will update not only the detail labels below the circle, but the value labels in the KPI bar as well. Tapping outside the circle allows scrolling the screen to read the legend, even on smaller mobile screens (DG-MOBI). The chart itself has just this one main interaction to make it easy to use (DG-EASY). The sequence of a possible use is shown in Fig. 7, where the complete week is discovered by moving the finger around the radial bars.

If the user taps a box in the KPI bar, the values of the selected measurement are shown in the radial bars (see Fig. 8). By default, NO2 is shown. This interaction was added, after we learned users had difficulties understanding the relation between the overall air quality, and the single measures, and to highlight which parameter has the greatest impact on the overall air quality.

Fig. 7
figure 7

Slideshow displaying the user’s touch interaction with the radial bars. A circular touch gesture scrolls through the values for a week

Full size image
Fig. 8
figure 8

Touch interaction with the KPI-Bar at the top of the application. By tapping the box, the selected indicator is displayed in the radial chart

Full size image

4.3.4 Exemplary Insight

The application provides different insights about air quality.

Overall, the air quality index alternates between very good, good, and moderate, and barely reaches poorer levels. Typically, it spikes around 9am/10am, which might point to the impact the morning rush hour has on air quality.

Regarding the relation between rain and air quality, we can observe that higher or longer precipitation seems to lower the values of NO2, occasionally resulting in an increase in the air quality level. While this is an interesting visual observation, we could not establish a strong correlation in a separate analysis, as these phenomena are more complex in reality (Umweltbundesamt 2022).

Fig. 9
figure 9

Elevated nitrogen levels and resulting deterioration in air quality following a chemical spill and road closure in the Mannheim port area (right). State of DXP visualization during rainy weather conditions. The blue circles represent the amount of rain at the respective time (left)

Full size image

During a chemical spill in Mannheim’s city harbor, an air quality alert was issued for Mannheim. This led to the closure of several roads around the city harbor, which, in return, elevated the nitrogen levels temporarily, as shown in Fig. 9. In contrast, the particulate matter values were not affected and did not influence the overall air quality.

Generally, we observed the PM10 value having a small impact on the air quality index, with the nitrogen values having the highest impact. This was also the reason why we chose NO2 to select as the default value.

4.4 On Location

To make the application accessible on site (DG-SITU), a poster is used, as shown in Fig. 10. While we did not yet deploy the poster, on the location of the air quality station (see Fig. 2) we already used the poster as part of the evaluation. This explains the subject of the data experience point as well as the measurements collected. Access to the application is via a barcode that must be scanned by the mobile device on site. Via the URL stored in the barcode, the citizen then accesses the web application in the browser; no installation is required. Access via the barcode was chosen because, as a result of the corona pandemic, this technology was used by millions of people in Germany for contact tracing and for vaccination certificates. In addition, this is not very complex to implement and can thus be placed at multiple locations in the urban area. To avoid distraction, the flyer did not contain any other links than the one from the barcode.

Fig. 10
figure 10

Sticker explaining the topic of the data experience point, the data items and providing access via a QR code. The headline, logo, and subheading explain what the theme of the DXP is about, in this case, air quality. On the left of the barcode, the air quality parameters from Sect. 4.1 are listed

Full size image

5 Formative Feedback

To obtain first quick feedback from the target audience, the prototype was presented to citizens of Mannheim at the official spring reception, an event open to the general public. The prototype was exhibited as part of the sMArt roots exhibition booth. While the visualization was shown on a mobile phone as intended, its display was mirrored to a large screen to suit the exhibition setting and to be visible to larger groups.

Visitors were invited to participate in a survey. Participants were asked to explore the visualization and respond to a couple of prompts. A questionnaire gathered socio-demographic data, the respondents’ general attitudes toward digital technologies, as well as their impression and satisfaction with the visualization. For each statement, participants could scale their response on a Likert scale, ranging from fully agree to fully disagree. After a brief introduction to the visualization, participants were encouraged to access it on their personal phones via a QR code (Fig. 11).

Fig. 11
figure 11

Set-up and implementation of the evaluation at the citizens’ festival. The presentation of the application was done on a larger screen, which was connected to a smartphone via cable

Full size image

The survey lasted around 15 min. A total of eight people (aged 24–79) with varying levels of education participated. The overall feedback was positive (see Fig. 12). All participants found graphical displays helpful in understanding air quality. However, half of the respondents found it difficult to assess the air quality from the graph.

We are aware that the number of participants is not representative, but wanted to gather feedback rather quickly. The results from this formative survey, as well as additional qualitative comments, we received at the exhibition, are used to further improve the prototype.

Fig. 12
figure 12

Above the visual evaluation of the answers scale, below the corresponding questions, translated from German into English

Full size image

6 Conclusion

6.1 Summary

In this paper, we introduced the concept of data experience points based on situated and urban data visualizations, presented a set of design goals, and introduced a first prototype demonstrating this concept. The prototype provided a display of the current air quality to citizens, and enabled a simple visual comparison to the weather condition. The demonstration at a public exhibition and first feedback gathered showed that generally the prototype was nicely received, with lots of helpful critique and ideas on how to improve the visualization. One of the limitations is that we conducted a formative evaluation only.

6.2 Outlook

We see this work as a first demonstration of our concept of data experience points, and plan to develop further ones for a wider set of topics.

We plan to exhibit the air quality prototype also in other contexts, i.e., at the National Garden Show in Mannheim. One potential extension of this prototype is to integrate air quality data from other regional locations by leveraging an already existing sensor network.

We plan to further refine the concept and design an extended prototype shifting from the immediate surroundings to other places, and the present and recent past to longer time ranges. Both are aimed to better support understanding outliers and anomalies in the data.

In the future, the themes of other data experience points must be tailored to the respective location and the respective data. This includes testing the poster in public space to understand the engagement of passers-by, and potentially adapt the DG-MOBI design goal to extend DXPs to large on-location screens, physical data objects, or immersive analytic approaches.

Further case studies could provide insights into different urban phenomena to aid citizens understand the state of their city and explore relations between various urban indicators such as parking lot utilization, energy consumption or soil moisture. These could employ, but are not limited to, existing data sets within the smart city initiative. Since we plan to design them in a citizen-centered manner, we conducted a series of public co-creation based on existing frameworks (Cay et al. 2020). These are used to help us understand what questions and themes are relevant to citizens, and to gather problems and challenges people are facing in their day-to-day lives. The question should not only be, what data do we have available to build something, but what data and visualizations do we need to implement the topics of the citizens.

Finally, we plan to synthesize the results of our case studies and the feedback gathered to provide a set of design guidelines for developers aiming to aid citizens understanding the state of their city through contextual and approachable data visualizations.