Teamwork

The first decision that we hat to make as a team concerned the platforms for cooperation. This point is not as trivial as it seems since the platforms had to span different operating systems and should give us the opportunity to work on the project simultaneously.

We decided on Telegram Messenger for overall communication, Figma for design, DropboxPaper for organisation as well as any written or research work and finally GitHub and GitHub Desktop for shared workflow on the markup language.

Topic & Approach

As algorithms and increasingly A.I. permeate our everyday lives, it is important to think about how exactly these are executed. In the case of navigation, it is important to remember that ethics should be a compelling category alongside duration. We have dedicated our project to the question of how to integrate ethical categories into navigation apps. 

We then began to research the topic in depth by looking at relevant online publications and focused on urban mobility and navigation as the overarching problem area.

Some methods and tools deserve special mention because they have been very useful in the working process. Post its along with the storytelling canvas – to which we were introduced in a method input held by fellow students – helped a great deal in structuring our ideas and get the project going. DropboxPaper proved to be particularly useful as a digital storage location, since texts, links and visuals could be conveniently stored at the same place. From the human factor perspective it was especially productive to be able to sit and work together in person for longer periods of time.

Visual Style

In order to decide on a visual style that would support our objective we created a moodboard in Figma with visuals researched on the internet. The style is oriented towards pixel art. The intention behind this choice was to present a serious topic in an entertaining way in order to reach the target groups millenials and generation z. unfortunately, the gamification approach we had set at the beginning could not be kept up.

Data

For our project we needed routing and geo data. We started out by looking into Google Maps and if we could get any open access data from there. Unfortunately this was not possible and the data remained unobtainable for us. We could only have accessed the data from Google Maps by using a paid API and therefore decided against it.

With support from Prof. Dörk we got into contact with Civity Management Consultants who kindly provided us with routing data that was extrapolated from so-called OD-pairs (origin-destination-pairs). This dataset was again based on data from Google, Bing and Here. We limited ourselves to the Google dataset to keep the workload manageable. Specifically, we looked at the frequency of road use by private cars in Berlin in the period 8-10 am on a Tuesday in February 2019.

From platforms like Fisbroker, Geofabrik and OpenStreetMap we got geo data about what we called „sensitive locations“, meaning kindergartens, playgrounds, hospitals and alike. The noise data was also obtained from those platforms.

Text & Inspiration

With the progression of the semester we opted for division of labour into three parts: text production (Anna), work on the datasets (Anne) and web design & implementation (Nadya). The further development of the concept we pursued all together.

The article was drafted in DropboxPaper and has been subjected to several edits - both by individuals and a joint group edit in class. The text is based on the theory texts from the course. In style it is reminiscent of the article „Poor Millenials“ by Michael Hobbes. In the end it became a data journalism piece. Another major inspiration was the article „Your Navigation App Is Making Traffic Unmanageable“ by Jane Mcfarelane.

The text gave our concept its first form with its structure and inner logic. It was from this text that we derived our visualisation and implementation wishes and ideas from.

Webdesign

The visual style of the website was meant to convey the scope of the text and the seriousness of the topic. It should be slightly playful and thus encourage reading. For this reason we decided to use a minimalist and clear colour palette as well as pixel art illustrations, which we created ourselves in Adobe Illustrator.

The development of the final website layout and design system took several iterations, some of which were quite extensive and some minimal in detail. The tool we used for layout and prototyping was Figma.

Considering that the web is a flexible medium and does not allow for an absolutely static layout, it is worth mentioning that we have mainly focused on the desktop version of the site. This decision is based on the fact that we assume that such extensive text reading would rather not be done on a smart phone.

Lack of time at the end of the project also played a role in this decision.

Typography

Through the fortunate fact of having an aspiring type designer on the team, we paid extra attention to the typography we used. Again, several iterations were necessary. In the end, we decided on „Bruna Trial“ by Anna Bitzer as the font for the headlines and „Output Sans“ by David Jonathan Ross for the set text.

Mapbox

Working with the online mapping tool Mapbox – along with the final web implementation – were the most challenging parts of the project. Here we had to see exactly how much of our vision could be realized.

Working with Mapbox meant creating the actual data visualization. We uploaded the routing data and the geo data sets, which we collected and optimized, into Mapbox to get adequate, web suitable data visualizations placed over a base map, that focused on the area around the Tempelhofer Feld in Berlin.

In order to communicate the maps and the information they contained we created personas for better storytelling as well as legends, that explain the layers. Unfortunately, in this important part of the project we were not able to fully meet our ambitions. Mapbox is a tool that allows certain data visualizations, but not others. We could not ideally combine cartography with our narrative and the scrollytelling aspect.

One of the main reasons for this was the fact that we only acquired the tools in the course of the project and did not have much previous knowledge.

Case Study

From the point of view of data visualization, the case study has been the core of our project. because here we not only show the problem, but offer a first possible solution.

We wanted to use the scrollytelling approach so that the Mapbox maps change with every scroll and information is presented bit by bit. Especially the interconnected infrastructures that make up a city were suitable for this type of visualization or the case study part.

Unfortunately this idea could not be well accomplished, because information about the map in connection with our specific data sets could not be displayed directly above the map in Mapbox with our limited knowledge of this tool. And so our designs, in which we have applied our interface knowledge, must unfortunately remain Figma prototypes.

Implementation

In this final step the Figma prototype (layout, colors, typography, etc.) and the Mapbox visualizations had to be converted and linked in HTML, CSS and JavaScript.

We developed the site by ourselves with our frontend developement skills. We used the editor Visual Studio Code as well as the developer platform GitHub and the desktop application GitHub Desktop. Again, many iterations had to be made and in some places aesthetically beautiful bugs had to be removed. In this part of the process, the workflow in GitHub was essential and it was a wonderful opportunity to get to know the platform better.

You can see the final result here – Ethical Routing

Evaluation

We found out that a responsible developer (e.g. Google) can write into the navigation algorithm that the duration of a route does not have to be the top priority when navigating through urban space. Urban space is inhabited by many people with many different needs at the same time and navigation through this space should be ethically negotiated and not subject to the dictates of time alone.

From the data point of view geodata like kindergartens or hospitals alone can be evaluated as a „sensitive category“ and hence it can be written into the algorithm that these locations must be treated differently in navigation guidance than, for example, city highways.

Reflection

Anna: I consider the chosen topic to be socially relevant and am glad to have engaged with it. Furthermore, I am glad to have been involved in the creation of a web project from start to finish. Knowledge, which was previously only available in theory, I could now apply in practice and experience the difference between theory and practice in my own work.

Two important insights were on the one hand that I understood why it is necessary and good to work in teams, considering the amount of individual aspects that have to be considered and worked on in such a web project. On the other hand I was able to experience what it means to develop a flexible design ecosystem for the web instead of a static layout. To do this, I initially had to switch from Sketch to Figma and learn how to work with GitHub, and I'm very happy I did.

Other insights that have gone into my experience is that role models are extremely important in style and visual language. That idea sketches really don't have to look chic in the early stages and often don't :). That a project cannot start without a meaningful reduction, but at the same time it is important to allow for changes later in the process. Kill your darlings if better ideas emerge over time - so to speak.

It was a slight pity that during the course the focus shifted from data visualisation to data journalism. In retrospect, I find that the work on concept and text took up too much time in relation to the work on data visualisation in the course. Against this background there was unfortunately no time for user testing, which is important for a web project.

In summary, I can honestly say that I personally learned a lot in the course and I am very content to have participated.

For that valuable experience I am grateful and say many thanks to my wonderful team and to Prof. Dörk.

---

Nadya: …