Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

System:Relevanz | Redesign Potsdam's Municipal Open Data Platfom

System:Relevanz | Redesign Potsdam's Municipal Open Data Platfom

The redesign of Potsdam's Municipal Open Data Platform was developed as part of the “System:Relevanz” course by Sebastian Kaim. The result of the solo work is a website redesign with a particular focus on data literacy. This emphasis is based on the observation that data, and with it data literacy, are becoming essential in the 21st century. Big Data is a new approach to understanding our world that is becoming more complex.

Potsdam's Municipal Open Data Platform

The purpose

On the Open Data Platform, Potsdam makes data sets openly and free of charge accessible to citizens as well as to the research and business communities. The city publishes Open Data to increase the transparency of it's administration and to enable further processing of data to better track and understand different issues and formulate decisions based on data.

The initiative

The city of Potsdam is only at the beginning of the Open Data process. The first step was the development of a concept, in which the requirements for open data were collected. It was adopted in 2016. In the sense of a holistic approach, the content covers all relevant perspectives on the topic. The goal is a gradual opening and the objective is to create a digital  foundation for collaboration with the various target groups, like administration, citizens, civil society, designers and developers. On this basis the data catalog will be expanded.

Status Quo

status_quo_1.pngstatus_quo_1.png
status_quo_4.pngstatus_quo_4.png
status_quo_2.pngstatus_quo_2.png
status_quo_3.pngstatus_quo_3.png
status_quo_5.pngstatus_quo_5.png

The analysis of the status quo was an integral part of the redesign process. Jakob Nielsen Norman's ten usability heuristics served as a supporting tool in the UX audit.

In summary, the analysis showed that the Open Data Platform is conceptually designed as an independent website, with its own domain (opendata.potsdam.de) and its own purpose. Structurally (UX) and visually (UI), however, this claim is not adequately reflected everywhere.

The web presence looks outdated. It lacks both a stringent, contemporary design system and clear user guidance in the user flow. The information architecture also shows shortcomings. An excess of equivalent information alternates with socalled text deserts and uncommented table views. In other words, an already complex topic – working with data – is conveyed in an exhausting manner.

user_flows.pnguser_flows.png

Opportunity Areas

The opportunity areas identified are: 1. redesign the landing page 2. optimize the dataset search 3. optimize the dataset exploration and 4. revise the overall design system of the platform.

This selection by no means represents the entirety of the improvement needs, but it is an appropriate limitation for a successful semester project.

opportunity_areas_3.pngopportunity_areas_3.png
opportunity_areas_2.pngopportunity_areas_2.png
opportunity_areas_1.pngopportunity_areas_1.png
opportunity_areas_4.pngopportunity_areas_4.png
opportunity_areas_5.pngopportunity_areas_5.png

Redesign

As part of the redesign, a persona was used as a means of establishing a clear use case. Along this user flow, a total of five screens were redesigned and combined in a click prototype.

persona_use_case.pngpersona_use_case.png


Landing page & data search

First, the landing page was fundamentally revised. The visual reference in the hero element was changed from the city of Potsdam to the data platform itself. The color scheme was systematically expanded and applied based on the city's brand color. The icons, as access points to individual dataset collections, were supplemented with mini-data visualization cards that visually communicate at a glance how many datasets are available per collection.

The information architecture was also consolidated. A clear hierarchy has been developed that first offers specific and detailed dataset search and then allows free exploration.

landing_page_final_search_open.pnglanding_page_final_search_open.png


Dataset exploration

An essential part of the redesign is to separate the exploration of the dataset from the final and desired action of exporting the data. The layout is based on a 12 column grid and split in 9:3. The action options such as export, sharing and contact are positioned on the right, regardless of whether the dataset is explored tabularly or geographically.

data_tabelle_page_final.pngdata_tabelle_page_final.png

data_karte_page_final.pngdata_karte_page_final.png


The power of the question mark

From a UX point of view, it was very important that emerging questions - for such a complex topic as working with data - can be clarified by the user themself. Therefore, question mark and information icons were provided along all relevant information units. In addition, the action options for sharing and asking a question are always located near the respective data set.

power_of_question_mark.pngpower_of_question_mark.png

Prototype

prototype.pngprototype.png

Design System

A basic design system was developed as part of the semester project. Systemattically building a design system from single design tokens to multiple nested components built with autolayout was a challenge. I am glad to have faced it again and again and to have mastered a valuable hard skill.

The main principles of a design system are in place: Creation of a harmonized color system based on tints and shades including a brand color and the implementation of a typographic scale that is broad enough for the use case.

In addition, a solid foundation was laid for building a component library: Some of the components were implemented with variants, and some were made interactive via the interactive components feature. The principle of creating variants based on a base component was also successfully integrated.

The click prototype builds on several components as well as design tokens. I am looking forward to the next level of digital elegance in upcoming projects.

design_system_colors.pngdesign_system_colors.png
design_system_typography.pngdesign_system_typography.png
design_system_components.pngdesign_system_components.png
design_system_master_component.pngdesign_system_master_component.png

Outlook

The intensive analysis of the open data platform has clearly shown, beyond the structural and visual areas, that no data platform can successfully fulfill its mission if the data sets fed into it have already been created incorrectly.

Since the platform is intended to be participatory, with more time and resources, an extension to include a data school would be imaginable. A section that explains, e.g. in video format, step by step, how to create a clean dataset, what distinguishes a dataset from a data point, and how a few technical terms (true / flase) can already make data work much easier.

I am looking foreward to challenges of this kind in my future working life!

Conclusion

Einer der besten Kurse, die ich jemals belegt habe! Besonders die zeitgemäße Arbeitsweise in Figma und Figjam, die Möglichkeit zur Fragestellung per Comments, die stets schnellen und immer kompetenten und hilfreichen Antworten haben das Lernen enorm erleichtert und mich persönlich immer motiviert, wie hoch der Arbeitsaufwand auch sein mochte (und der war hoch ;). Ein absoluter Must-Have-Kurs an der FHP. Danke Sebastian für Deine Zeit, Deine Energie und Dein Vorbild.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Sebastian Kaim

Entstehungszeitraum

Wintersemester 2021 / 2022

Keywords