Detailbild einer Streckenansicht in der App

Wie Digitalisierungsprojekte heutzutage ablaufen sollten

Digitale Mobilität

Projekte

UX-/UI-Design

Diese Case Study zeigt anhand des Beispielprojekts d-E-mand unser Vorgehen in der digitalen Produktentwicklung.

In dem Forschungsprojekt d-E-mand haben wir mehr als 3 Jahre lang zusammen mit verschiedenen Fachexpert:innen aus der Mobilitätsbranche an einem zukunftsweisenden Forschungsprojekt gearbeitet. Entstanden ist daraus ein umfassendes Repertoire an Ideen, Konzepten und ganz konkret eine B2C App für E-mobilisten und eine B2B Plattform für Unternehmen. Diese Anwendungen sind ein Beitrag für die Mobilität von Morgen und sollen die Elektromobilität in Deutschland voran treiben.

Phase 1: Eintauchen

In dieser Phase tauchen wir in die Thematik ein, verschaffen uns einen Überblick und lernen die Zielgruppe und deren Bedürfnisse kennen.

Umfragen & Interviews

Geschäftsmodelle

Umfragen & Interviews

Was beschäftigt E-Mobilisten?

Zu unserer B2C Zielgruppe gehören alle Personen, die regelmäßig ein Elektroauto fahren, die sogenannten E-Mobilisten.

Um diese Menschen und deren Verhalten besser kennenzulernen, haben wir eine Umfrage in dem Tool Tally erstellt und diese an möglichst viele Menschen ausgespielt. Personen die gut in unsere Zielgruppe passten, haben wir zusätzlich zu einzelnen Interviews eingeladen.

Montage von Screens als Visualisierung von vielen Interviews mit Nutzenden

E-Mobilisten legen besonderen Wert auf:

Transparente Preise

Optimale Route

Echtzeitdaten und Belegungsprognose

übersichtliche, schlanke Karte

Störungsmeldungen

verlässlicher Live Status der Säulen (frei/defekt /belegt)

Ladesäulen- Karte europaweit ( nicht nur EU )

plattformunabhängige App

Routenplanung unter Berücksichtigung des realen Verbrauchs

44%

der Befragten haben eine

Wallbox zu Hause.

83%

wünschen sich allgemein

mehr Ladestationen.

70%

nennen

die Entfernung als entscheidendes 
Kriterium

bei der Suche nach einer Ladestation.

44%

der Befragten haben eine

Wallbox zu Hause.

83%

wünschen sich allgemein

mehr Ladestationen.

70%

nennen

die Entfernung als entscheidendes 
Kriterium

bei der Suche nach einer Ladestation.

Geschäftsmodelle

Wie können wir mit einem digitalen Produkt Gewinn erzielen?

Mit Hilfe eines Canvas Modells haben wir Ideen zusammengetragen, wie wir mit unseren Services und Daten ein gewinnbringendes Geschäftsmodell aufstellen können.

Im digitalen Raum bieten wir unserer Zielgruppe keine physischen Güter, wie Waren, Bekleidung etc. an. Vielmehr sind es digitale Services, die wir ihnen zur Verfügung stellen. Wir bereiten Daten auf und passen sie an die Bedürfnisse der Nutzer:innen an. Wir haben in einer Umfrage herausgefunden, dass die Nutzer:innen durchaus bereit sind, für digitale Services zu bezahlen insofern sie ihnen einen Mehrwert bieten.

Foto von Händen bei der Bedienung einer AppEine Linie mit Entwicklung nach oben

Phase 2: Beschreiben

Nachdem wir uns in das Thema eingearbeitet haben fangen wir an die Aufgaben und Problemstellungen genauer zu beschreiben.

Umfragen & Interviews

MVP

Techstack

Technische Konzepte

Potrait einer FrauFoto eines Elektro-FahrzeugsFoto von wandernden Menschen
Ronja
42 Jahre alt, Weinfachhändlerin

Ronja ist von einem Auto mit Verbrenner-Motor auf ein Elektroauto umgestiegen. Privat nutzt sie viel das Rad und für weite Reisen fährt sie gerne Zug, da sie nachhaltig reisen möchte. Sie geht gerne wandern. Mit dem Elektroauto hat sie Angst davor, nicht rechtzeitig eine Ladesäule zu finden und zu erreichen.

Icon eines Autos

Elektroauto: 

Tesla Model 3

Ronja braucht eine intelligente Navigation zu ihrem gewünschten Zielpunkt, damit sie ihre Reisen effektiv und frustfrei planen kann.

Potrait eines HandwerkersFoto von Fleischspiessen auf einem GrillFoto eines Elektro-FahrzeugsFoto eines Vaters der seiner Tochter vorliest
Dimitri
45 Jahre alt, Handwerker

Er ist 45 Jahre alt, Familienvater und arbeitet als Handwerker für eine Baugenossenschaft. Dimitri fährt mit einem elektrischen Dienstauto jeden Tag zu Kund:innen. Er ist genervt von zu wenigen Ladestationen und der Wartezeit während der Akkuladung. Privat verbringt er am liebsten Zeit mit seiner Familie und lädt Freunde zum Grillen im Garten ein.

Icon eines Autos

Elektroauto: 

Fiat Ducato

Dimitri möchte sich während seiner Arbeitszeit keine Gedanken machen müssen über die Restreichweite seines Fahrzeugs. Er will kurzfristig eine freie Ladestation finden können,  die am besten in der Nähe seines nächsten Kundentermins liegt.

Portrait zweier Frauen auf einem FestivalFoto eines Elektro-FahrzeugsFoto einer Party
Franchesca
20 Jahre alt, Abiturientin

Franchesca hat gerade die Schule abgeschlossen und bereitet sich auf das anstehende Studium vor. Sie macht gerade den Führerschein und wünscht sich als erstes Auto ein E-Auto. Franchesca geht gerne auf Festivals. Am liebsten würde sie ganz ohne Auto auskommen, da sie aber auf dem Land lebt und das ÖPNV Netz in Ihrer Region nicht gut ausgebaut ist, sieht sie keine andere Wahl, als sich ein Elektroauto anzuschaffen.

Icon eines Autos

Wunsch-Elektroauto: 

Renault Zoe

Franchesca möchte gerne als Einsteiger-Auto ein kostengünstiges E-Auto haben, damit verreisen und Veranstaltungen besuchen. Sie ist auch offen für Carsharing Alternativen. Ihr ist es wichtig, möglichst wenig CO2 zu verursachen.eine freie Ladestation finden können,  die am besten in der Nähe seines nächsten Kundentermins liegt.

Foto eines CafesPortrait einer männlichen Person mit SonnenbrilleFoto eines Elektro-Fahrzeugs
Norbert
68 Jahre alt, Rentner

Norbert ist pensionierter Lehrer. Er hat sich zur Rente ein E-Auto gegönnt, mit dem er mit seiner Frau durch Europa reisen möchte. Er kennt sich mit digitalen Geräten nicht so gut aus und hört auf dem rechten Ohr schlecht. Er findet neue Technik faszinierend und findet es toll, was heutzutage alles möglich ist. Auf der Fahrt macht er gerne häufig Pausen an schönen Orten.

Icon eines Autos

Elektroauto: 

ID.3

Norbert will in seiner Rente mit seinem E-Auto Europa erkunden. Er hat keinen Zeitruck, möchte aber möglichst wenig planen und von einer App bequem geleitet werden.

Einen MVP Definieren

Was muss die App auf jeden Fall können?

Im Scrum Team haben wir festgelegt, welche Userstories wir uns für einen MVP einer App vornehmen. Die Themen wurden vor allem danach priorisiert, welche Dinge für die Zielgruppe den größten Nutzen haben und deren Probleme lösen.

Detailausschnitt einer MVP-Definition
Tech Stack

Mit interdisziplinären Tools arbeiten

Es ist uns vor allem wichtig mit zeitgemäßen Programmen zu arbeiten, die cloudbasiert sind und unsere interdisziplinäre Zusammenarbeit im Team unterstützen. Auf folgende Technologien haben wir uns im Projekt geeinigt.
Backend
Logo von CapacitorLogo von AngularLogo von TypescriptLogo von RxJS
Frontend
Logo von ReduxLogo von MapboxLogo von AWS
UX / UI
Logo von FigmaLogo von WhimsicalLogo von MazeLogo von condens
Frontend
Backend
UX / UI
Logo von Capacitor
Logo von Angular
Logo von Typescript
Logo von RxJS
Logo von Redux
Logo von Mapbox
Logo von AWS
Logo von Figma
Logo von Whimsical
Logo von Maze
Logo von condens
Diagramm des Aufbaus des technischen Proofs of Concept (PoC)
Proof of concept

Prüfen der technischen Machbarkeit

Ein "Proof of Concept" ist, auch im Rahmen dieses Projektes, für uns der Garant für die frühe Erkennung der Gewährleistung der technischen Machbarkeit der verschiedenen Konzepte.

Durch die verschiedenen Akteure im Forschungsprojekt d-E-mand sind, hinsichtlich der technischen Basis, verschiedene Informationsquellen entstanden. Unsere Aufgabe war es, diese innerhalb einer Plattform nutzbar und so für die definierten Nutzendengruppen erlebbar zu machen. Deshalb haben wir zu einem frühen Zeitpunkt im Projekt einen Proof Of Concept erstellt. So konnten wir Risikofaktoren konkret benennen und gemeinsam eine Lösung finden, um sie zu vermeiden.

Phase 3: Entwerfen

Es nimmt langsam Form an und wird konkreter. Wir erstellen Scribbles, Entwürfe und stimmen die Ideen im Team ab.

Illustrationen

Wireframing

Design System

Digitale Barrierefreiheit

Illustrationen

Komplexe Zusammenhänge einfach erklären

Durch Bilder sprechen Emotionen und das ganze Produkt wird erst richtig zum Leben erweckt. Daher haben wir uns dem Thema Illustrationen besonders intensiv gewidmet und uns auf eine zeitgemäße isometrische Darstellung mit peppigen Farbverläufen geeinigt.

Die Illustrationen werden in den d-E-mand Produkten verwendet, um ein einheitliches Produktbild zu kreieren und um abstrakte Themen greifbarer zu machen.

Illustration der schematischen Darstellung des gesamten Systems von demand
Illustration eines Autos während des elektrischen Ladens
Illustration eines am Haus parkenden Fahrzeugs
Illustration der Verbindung von Daten zwischen App und Desktop Anwendung
Illustration zweier fliegender Ballons
Illustration einer Person bei der Recherche am Computerbildschirm
Illustration eines leckeren Stücks Pizza
Illustration einer Person, die unsere App zur Suche von Lademöglichkeiten für das Elektro-Auto sucht
Illustration einer Autopanne
Illustration eines städtischen Bereichs mit Point of Interest Markern
Illustration eines Autos während des elektrischen LadensIllustration eines am Haus parkenden FahrzeugsIllustration der Verbindung von Daten zwischen App und Desktop AnwendungIllustration zweier fliegender BallonsIllustration einer Person bei der Recherche am ComputerbildschirmIllustration eines leckeren Stücks PizzaIllustration einer Person, die unsere App zur Suche von Lademöglichkeiten für das Elektro-Auto suchtIllustration einer AutopanneIllustration eines städtischen Bereichs mit Point of Interest Markern
Wireframing

Überlegungen visualisieren

Anhand von Wireframes haben wir unsere Ideen skizziert, um eine grobe Vorstellung über den Aufbau und die Struktur der App zu erhalten. Grundsätzlich wurde in Nutzerflows gedacht, also eine Abfolge von Screens, die eine Handlung von Nutzer:innen nachempfindet z. B. „Wie bewegt sich ein User durch die App, wenn er/sie eine Ladestation sucht“.

Außerdem konnten diese Wireframes dazu genutzt werden, um die Machbarkeit und das Konzept mit den Konsortialpartner:innen und den Entwickler:innen zu besprechen.

Beispielhafter Flow von Wireframe-Darstellungen der App
Tabellarische Darstellung einer Wettbewerbsanalyse
Konkurrenzanalyse

Was macht die Konkurrenz?

In diesem Arbeitsschritt analysierten wir die Wettbewerbslandschaft von Anwendungen für Elektromobilität und speziell von Apps für die Ladestationssuche.
Unser Fokus dabei lag auf den aktuellen Trends in der Branche und welche guten Ideen schon vorhanden sind, die wir aufgreifen sollten.
Durch den Vergleich mit bestehenden Anwendungen können wir unsere Position im Markt besser einschätzen und vermeiden, dass es “noch eine weitere App in blau auf dem Markt gibt, die die gleichen Dinge kann wie eine andere App”. Genauer gesagt, ist es sehr wichtig ein Alleinstellungsmerkmal herauszuarbeiten, mit dem wir unser Produkt von der Konkurrenz abheben können.

Figma Library

Aufbau eines Designsystems

Das neue Branding haben wir mit Figma in ein Designsystem übertragen, welches allen Produkten von d-E-mand als Grundlage dient. Die Komponenten sind wiederverwendbar und automatisch mit den erstellen Screendesigns verbunden. Wenn das Designsystem aktualisiert wird, aktualisieren sich automatisch alle Screendesigns mit. Dieses Vorgehen reduziert den Anpassungsaufwand und macht auch große Projekte handhabbar.
Überblick über eine große Anzahl von Design-Dateien, die im Lauf des Projekts einer digitalen Produktentwicklung entstehen

Digitale BarriereFreiheit

Ein Produkt für Alle

Damit Nutzer:innen die App möglichst leicht bedienen können und die allgemeine Verkehrssicherheit gewährleistet ist, spielt die Digitale Barrierefreiheit eine wichtige Rolle.

Gerade bei Mobilitätsapps sind die Nutzer:innen meist unterwegs oder sitzen im Fahrzeug. Deswegen sollten Entwickler:innen und Designer:innen unter anderem darauf achten, dass die Elemente der App gut sichtbar sind, eine große Klickfläche besitzen und die Kontraste stark genug sind.

Deswegen haben wir den Status quo der App auf Schwachstellen analysiert und unter Berücksichtigung der Web Content Accessibility Guidelines (WCAG) 2 Standards verbessert.
2 Screens als Beispiel für digitale Barrierefreiheit2 Screens als Beispiel für digitale Barrierefreiheit
Inputfelder brauchen Labels, die stehen bleiben, auch wenn das Feld gefüllt ist.
Die farbigen Zahlen sind im linken Beispiel schwierig zu lesen (zu wenig Kontrast).
2 Screens als Beispiel für digitale Barrierefreiheit2 Screens als Beispiel für digitale Barrierefreiheit
Die Bottom Navigation sollte Labels haben.
Die Emojis sind nicht optimal sichtbar auf dem farbigen Hintergrund.
Detailfoto einer Person, die die demand-App im inneren eines Autos benutzt

Phase 4: Realisieren

Im agilen Entwicklungsprozess werden die Komponenten und Screendesigns in gemeinsamer Absprache mit den Designer:innen von den Entwickler:innen entwickelt.

Komponentenbibliothek

Agiles Arbeiten

Screendesigns

Komponenten BIBLIOTHEK

Per Design Library zur Softwarelandschaft

Durch die Verwendung der Javascript-basierten Technologie Angular konnten wir das entstandene Design-System auch technisch 1 zu 1 zu realisieren. Dies brachte uns nicht nur den Vorteil der Entwicklung wiederverwendbarer Komponenten, sondern auch einen hohen Einfluss auf die Qualitätssicherung.

Die Integration der Tools Chromatic und Storybook ermöglichte es uns, laufend Updates der technischen Umsetzung des Design-Systems zur Verfügung zustellen. Das Design-Team war somit in der Lage, die Umsetzung der Design Library ständig zu prüfen und schnell Feedback zu geben, falls es Abweichungen gab.

Beispiel-Screen für Komponenten in Storybook
Agiles Arbeiten

Teamarbeit ist gefragt!

Wir haben in d-E-mand in einem agilen interdisziplinären Team zusammengearbeitet. Das heißt, wir haben Beteiligte aus den verschiedenen Gewerken wie Product Owner, UX-Design, UI-Design, Frontend und Backend Entwicklung, die sich in regelmäßigen Abständen zu Scrum Events zusammenfinden und in einem engen Austausch miteinander arbeiten. Grundlage der Aufgaben sind Tickets, die wir in Jira erstellen und pflegen. In den Tickets werden die Anforderungen gesammelt und festgelegt, ab wann ein Ticket als abgeschlossen gilt. Der Product Owner übernimmt dabei die Priorisierung des Backlogs und entscheidet, immer mit Blick auf die Bedürfnisse der Nutzer:innen, was priorisiert bearbeitet werden soll.

Montage von Screens verschiedener Tools unserer Teamarbeit
B2C App ScreenDesigns

Et voilà! Fertig ist der MVP der App!

Startseite der App zum Finden optimaler Ladestationen für ElektromobilitätNavigationsansicht in der AppDanke-Modal für das Anmelden eines Ladebedarfes innerhalb der App
Bewertungsmöglichkeit einer Ladestation in der AppDetailansicht einer Ladestation in der AppApp Screen des Einstellungsbereichs von d-E-mand
Startseite der App zum Finden optimaler Ladestationen für Elektromobilität
Navigationsansicht in der App
Danke-Modal für das Anmelden eines Ladebedarfes innerhalb der App
Bewertungsmöglichkeit einer Ladestation in der App
Detailansicht einer Ladestation in der App
App Screen des Einstellungsbereichs von d-E-mand

Phase 5: Erproben

Der fertige MVP wird nun gründlich getestet und überprüft: Funktioniert alles? Gibt es noch Bugs die behoben werden müssen und vor allem: Wie kommt der MVP bei den Nutzern und Nutzerinnen an?

Usertesting

Ausblick

USERTESTING

Hilft die App der Zielgruppe dabei Ihre Aufgaben zu erledigen?

Damit ein sinnvolles Produkt entstehen kann, müssen regelmäßige Feedbackschleifen mit den Nutzenden der Anwendung stattfinden. Deswegen haben wir mit 5 Tester:innen ein remote Usertesting durchgeführt. Die Nutzer:innen haben mehrere Szenarien anhand von Clickdummies durchgespielt und mussten diverse Testaufgaben bewältigen. Dabei sollten sie „laut denken“ und ihre Gedanken mit uns teilen. Diese Befragung hat uns einen tollen Einblick in die Köpfe unserer User geboten und hilft uns, unser Produkt weiter zu iterieren.

Roadmap erstellt
Testaufgaben definiert und in dem Tool Maze angelegt
Clickdummy erstellt
Interviews wurden mit Hilfe des Tools Condens ausgewertet
Montage von mehreren Screens, um eine User Testing Situation zu verdeutlichen
AUSBLICK

Und was dann?

Aus den Erkenntnissen der Nutzendentests leiten wir konkrete Handlungsempfehlungen ab. Ein Beispiel: “Das Colorcoding der Ladestationen ist etwas verwirrend für die Nutzer und könnte verbessert oder genauer erklärt werden.” Die Handlungsempfehlungen übertragen wir gemeinsam im Scrum Team in Jira Tickets. Anschließend kann entschieden werden, welche Themen eine hohe Priorität besitzen und welche weniger wichtig sind. Bei der Bearbeitung der Tickets spielt es ausserdem auch eine Rolle, wie hoch der Aufwand einer Aufgabe ist. Wenn dies alles erfolgt ist, können die Designer:innen und Entwickler:innen weiter an den Tickets arbeiten und somit das Produkt kontinuierlich, mit Fokus auf die Nutzendenbedürfnisse, verbessern.

d-E-mand Business

Zusätzlich zur App ist im Forschungsprojekt auch eine Anwendung für professionelle Endnutzer:innen entstanden.

Um in kurzer Zeit zu einer sinnvollen Produktidee zu gelangen, haben wir uns entschieden einen Design Sprint durchzuführen. Dabei haben wir uns auf die Zielgruppen der Veranstalter:innen und Betreiber mobiler Ladestationen fokussiert.

Schön war's

Gruppenfoto des gesamten d-E-Mand-Teams
3 Personen aus dem PROJEKTIONISTEN-Team
Eine Person präsentiert an verschiedenen Bildschirmen das Projekt
Präsentationssituation in einem Arbeitsraum

Mit einer großen Präsentation hat das Forschungsprojekt d-E-mand seinen Abschluss gefunden.

Alle Konsortialpartner:innen darunter: VWN Volkswagen Nutzfahrzeuge, Leibniz Universität Hannover Forschungszentrum L3S, Institut für Kartographie und Geoinformatik IKG, IVI Fraunhofer-Gesellschaft und natürlich wir PROJEKTIONISTEN® haben die Ergebnisse aus dreieinhalb Jahren Forschung vorgestellt. Die Fülle an Erkenntnissen, gesammelten Daten und Algorithmen, die in dieser Zeit entstanden sind, ist beeindruckend und zeigt nunmal mehr wieviel Potenzial in diesem Projekt steckt.

Es fühlt sich nicht wie ein Ende an, sondern eher wie der Anfang von etwas Großem, denn das Thema Elektromobilität ist heutzutage relevanter denn je und wird in unserer Arbeit weiterhin eine große Rolle einnehmen. Vielen Dank an alle Beteiligten!

Interessiert?
Wir freuen uns auf euch!
Bild vom Geschäftsführenden Gesellschafter Henrik Johannsen
Deine Ansprechperson
Henrik Johannsen
Kontakt

Links und Quellen

Bilder Personas

Pexels

Unsplash

Bilder Fahrzeuge

Tesla

Fiat Ducato

Renault Zoe

ID.3