xParking-App - Teil 1

Dorian Bauer Principal UX Software Engineer • Team Lead & Technology Lead Flutter

Martin Roos Principal UX Designer • Principal UX Designer

25.09.2019 • 5 minutes reading time

Eine App zur Organisation des Parkplatz-Sharings

Zur Evaluation von Flutter kam ein kleines Team unserer Software Engineers auf die Idee, das Framework an einem realen Projekt zu testen: einer App zur Organisation des Parkplatz-Sharings an unserem Saarbrücker Standort.

„Wie gut ist eigentlich Flutter? Eignet es sich auch für unsere Kundenprojekte?“ Mit dieser Frage tat sich ein kleines Team von Ergosign Software Engineers während der Focus Time zusammen. Und um beurteilen zu können, ob sich das vielversprechende Framework auch für Kundenprojekte eignet, muss es erstmal getestet werden.

Flutter Logo und Sprechblasen mit Icons.

Durch Abspielen des Videos werden personenbezogene Daten an die Betreiber des Videoportals (Youtube oder Vimeo) übertragen. Weitere Infos dazu gibt es in unserer Datenschutzerklärung.

Flutter ist ein Framework von Google, das es Entwicklern erlaubt, Apps für mobile Geräte (iOs und Android), Web und Desktop basierend auf nur einer Codebasis zu entwickeln.

Dabei reichte dem Team die reine Theorie nicht. Ein realer Use Case sollte her, für dessen Lösung eine App genau das Richtige wäre.

Das Projekt

Eine passende Projektidee war schnell gefunden: das Parkplatz-Sharing an unserem Standort in Saarbrücken.
Denn unsere Mitarbeitende können ihren Arbeitsweg flexibel gestalten: mit einem Jobticket, einem Jobrad, zu Fuss oder per Auto. Im letzten Fall erhalten sie einen zugewiesenen Parkplatz. An manchen Tagen kann es für Mitarbeiter, die normalerweise mit dem Rad, zu Fuss oder per Bahn kommen, jedoch sehr praktisch sein, einen Parkplatz nutzen zu können. Um transparent zu zeigen, ob dies möglich ist, weil beispielsweise ein zugewiesener Parkplatz eines anderen Mitarbeiters leer stünde, sollte mithilfe von Flutter eine App entwickelt werden. Über diese sollten beispielsweise „leerstehende“ Parkplätze gebucht oder zugewiesene Parkplätze für andere Mitarbeitenden freigegeben werden können.

Begrenzte Ressource, begrenzte Zeit? „Lean“ und „collaborative“ sind die Lösung!

Neben unseren Software Engineers Dorian, Steffen und Lisa war UX Designer Martin begeistert von der Idee, eine App zum Parkplatz-Sharing zu entwickeln. Da das Team die App in der Focus Time entwickelte, die einmal im Monat stattfindet, schlug er vor, das Projekt lean durchzuführen und die Methoden aus dem Buch „Collaborative UX Design“ von Dieter Wallach und Toni Steimle zu nutzen.

Im Buch „Collaborative UX Design“ vermitteln Dieter Wallach und Toni Steimle kompakt und leicht verständlich ein fundiertes Grundwissen zu kollaborativen Methoden des UX Designs.

Collaborative UX Design

Vorgehen und Milestones

Hypothesen und Theorie

Klassisch startete das Team mit Projekthypothesen. Unter Beachtung der How-Might-We-Fragen entstand Folgendes:

Problem Statement

„Wir denken, dass Ergosign-Mitarbeitende am Standort Saarbrücken ohne eigenen Parkplatz (zu Fuss, mit Fahrrad oder ÖPNV) ein Problem haben an Tagen, an denen es für sie nützlich wäre (schlechtes Wetter, Einkäufe, etc.), einen freien Parkplatz (Puffer-Parkplätze oder abwesende Mitarbeiter) garantiert zu bekommen.“

Lösungsansatz

„Wir können ihnen mit der Bereitstellung einer einfach und schnell zugänglichen App helfen, über freie Parkplätze informiert zu werden und diese darüber verbindlich zu reservieren.“

Metrik

„Wir wissen, dass wir richtig liegen, wenn sie bei real freien Parkplätzen über diese informiert werden und diese dann auch verbindlich reservieren können.“

In diesen Hypothesen steckt, neben den HMW-Fragen und ihren Antworten, ein weiterer wichtiger Aspekt: die Proto-Personas. Von diesen entwickelte das Team drei:

  • Mitarbeitende ohne festen Parkplatz

  • Mitarbeitende mit festem Parkplatz

  • Mitarbeitende, die bereits einen Parkplatz teilen

Alle Personas wurden mit ihren Merkmalen, Problemen und Aufgaben skizziert; das Team fokussierte sich im ersten Schritt dann auf die primäre Persona „Mitarbeitende ohne festen Parkplatz“.

MVP, Visual Design und Pixel Warriors

Um die Zeit bestmöglich zu nutzen, sollte ein MVP (Minimum Viable Product) entstehen, der im ersten Schritt den Mitarbeitenden ohne Parkplatz den wichtigsten Funktionsumfang bietet:

  1. einen Parkplatz buchen zu können

  2. einen gebuchten Parkplatz freigeben zu können

Entwickelt wurde das MVP von unserem Praktikant Sven im Rahmen seiner Bachelorarbeit. Er setzte es nicht nur in Flutter um, sondern auch den Server sowie die Datenbank der App auf – alles mit der Unterstützung von Software Engineer Lisa.

Für das MVP musste natürlich auch ein Visual Design her. Also tat sich das Team mit den Visual Design Field Leads Nina und Sascha zusammen und kreierte eine Pixel Warriors Challenge.

Screenshots aus der Pixel-Warriors-Challenge der Xparking-App mit Screens der App.
Pixel-Warriors-Challenge der Xparking-App

Testing & Feedback

Zur Validierung des MVP wählte das Team zehn Mitarbeitende aus Saarbrücken nach bestimmten Kriterien aus. Diese durften das erste MVP bereits testen. Ihr wertvolles Feedback zu den ersten umgesetzten Features fliesst nun in die Weiterentwicklung der App ein.

Um welche Features die App nach diesem ersten Test erweitert wurde, wie sie umgesetzt sind und welche Ideen das Team noch in petto hat, erfahren Sie bald im zweiten Teil des Artikels.

Bleiben Sie dran!