Sichere Kita App

Product-Design

Sichere Kita App Unfallkasse NRW

Die Unfallkasse NRW hat eine App für Informationen zur Sicherheit in der Kita in Auftrag gegeben. Als Grundlage sollte die aktuelle Informations-Plattform der sicheren Kita dienen.

Die App soll für die Sicherheit in der Kita verantwortlichen Nutzer alle Informationen zur Verfügung stellen und neuste gesetzliche Vorschriften als Benachrichtigungen anzeigen.

Methoden & Leistungen
Analyse | Beratung | User Research | UX-Design | UI-Design | Design-Guide

Herausforderungen

r

Die alte Informations-Plattform sollte in eine nutzerfreundliche App adaptiert werden.

r

Designs und Farben sollten wieder verwendet werden, um den Wiedererkennungswert zur alten Informations-Plattform sicherzustellen.

r

Eine komplexe unübersichtliche Menü-Struktur sollte in eine einfachere Menü-Führung umgewandelt werden.

Ziele



Eine intuitive Nutzer-Führung.



Maximaler Mehrwert durch neu, nutzerfreundliche Funktionen.



Ãœbersichtliches und nutzerfreundliches User Interface.

Projekt Phasen

Projekt Kick-Off

In einem Kick-Off wurden die Anforderungen und Vorgaben an die neue App besprochen und offene Fragen geklärt. Anschließend wurden die Abgabe-Termine und der Ablauf vereinbart.

Nutzer-Analyse

Nutzer der App sind verantwortliche Kita-Leiter(innen) und Mitarbeiter(innen), die einen Überblick der gesetzlichen Anforderungen in der Kita behalten müssen. Ihnen ist es wichtig, schnell und einfach auf die Informationen zuzugreifen und sie speichern zu können. Sie möchten über die neusten Änderungen sofort informiert werden, um schnelle Maßnahmen treffen und die Anforderungen prüfen zu können.

Primäre Ansicht bei der Nutzung:
Als mobile App können die Nutzer über ihr Smartphone schnell und von überall auf alle wichtigen Informationen zugreifen.

App-Analyse

Da die App eine Adaption der bestehenden Informations-Plattform sein sollte, wurden alle Informationen aus der alten Plattform gezogen. Wichtige Daten, wie die am häufigsten gesuchten und aufgerufenen Artikel, konnten so bereits zum Aufbau der App genutzt werden. Auch die Suche und die wichtigsten Seiten konnten auf Basis der Klick-Analysen priorisiert und optimiert werden.

UX-Design

Auf Basis der Analysen nach Rücksprache mit den Entwicklern habe ich die Menü-Führung, den Aufbau und die Suchfunktion überarbeitet und optimiert.

In erster Linie sollte die App die drei wichtigsten Funktionen enthalten:

$

Benachrichtigungen über die neusten Artikel

$

die Suche nach Informationen und Artikeln

$

die Speicherfunktion für die spätere Verwendung

UI-Design

Farben

Schriften

Icons

Menü-Führung

Home-screen

Alte Startseite

Artikel-Seite

Alte Artikel-Seite

Fazit

Die neue App ist viel ansprechender und einfacher in der Handhabung und Nutzung. Sie bietet wichtige Funktionen, die auf der alten Informations-Plattform bisher gefehlt haben und gibt dem Nutzer die Möglichkeit schnell, einfach und mobil auf Informationen zuzugreifen.

rend E-Learning Plattform

ux-/ ui-Design-relaunch

rend E-Learning für Arbeitssicherheit

Die rend E-Learning-Plattform bietet Unternehmen verschiedene Kurse rund um das Thema Arbeitssicherheit an. Die vorgefertigten Kurse können individuell und in 5 verschiedenen Sprachen ausgewählt werden. Außerdem können auf die Nutzer zugeschnittene Blog-Artikel, Anweisungen und Dokumente hinzugefügt werden.

Für ein Redesign habe ich in Abstimmung mit den Programmierern eine neue Menü-Führung, eine bessere User Experience und ein neues UI-Design entwickelt.

Methoden & Leistungen
Analyse | Beratung | User Research | UX-Design | UI-Design | Design-Guide

Herausforderungen

r

Viele verschiedene Seiten und Unter-Seiten sollten zusammengeführt werden.

r

Alle Ãœbersichten sollten als Tabellen- und Kachel-Ansicht mit vielen verschiedenen Elementen und Informationen dargestellt werden.

r

Die Design-Farben und Logos sollten individuell von den Unternehmen geändert werden können.

r

Eingeschränkte Möglichkeiten im Aufbau der Seiten und Funktionen.

Ziele



Einfachere Menü-Führung.



Bessere Ãœbersicht der aktuellen Trainings-Kurse.



Nutzerfreundlichere Funktionen und Handlungsabläufe.



Ansprechendes und nutzerfreundliches UI-Design.

 

Projekt Phasen

Projekt Kick-Off

In einem Kick-Off wurden die Anforderungen und Vorgaben an die neue E-Learning-Plattform besprochen und offene Fragen geklärt. Anschließend wurden die Abgabe-Termine und der Ablauf besprochen.

Nutzeranalyse

Die Nutzer gehören zu einem Unternehmen, das ihnen den Zugang und die Kurse zum Thema Arbeitssicherheit zuweist. Primär werden die Plattform und die Kurse von Nutzerinnen und Nutzern verwendet, die im Büro tätig sind. Dabei gibt es zwei verschiedene Nutzergruppen.

$

Administratoren:
In jedem Unternehmen gibt es einen oder mehrere Nutzer, die für die Einrichtung und die Zuweisung der Kurse und Accounts verantwortlich sind. Diese sollen einen guten Überblick aller Teilnehmer, den Stand der durchgeführten Kurse und die Möglichkeit haben, Kurse zuzuweisen.

$

Mitarbeiter:
Die Mitarbeiter müssen die zugewiesenen Kurse in einem bestimmten Zeitraum abschließen und ein Zertifikat vorweisen können. Sie sollen einen guten Überblick über ihre aktuellen Kurse und Zertifikate haben.

Primäre Ansicht bei der Nutzung:
Die Plattform wird in erster Linie über einen Desktop oder einen Laptop genutzt. Als mobile Lösung soll die Plattform auch über ein Tablet gut nutzbar sein.

In Zukunft soll eine App für die mobile Nutzung entwickelt werden.

Konkurrenz-Analyse

Als direkte Konkurrenz gibt es die Haufe-Akademie und Weka E-Learning, die ebenfalls Kurse zum Thema Arbeitsschutz anbieten.
Um die Plattform von anderen abzuheben, war es wichtig, eine bessere Nutzerführung und eine ansprechende und moderne Ansicht zu schaffen.

Plattform-Analyse

Die E-Learning-Plattform wird bereits von über 10.000 Nutzern aus 5 verschiedenen Ländern verwendet. Dabei ist das Feedback von Unternehmen und Nutzern schon sehr gut. Die Navigation und einige Funktionen waren vor dem Redesign nicht ganz eindeutig und nutzerfreundlich und sollten überarbeitet werden.

UX-Design

Auf Basis der Analysen nach Rücksprache mit den Entwicklern habe ich die Menü-Führung, ein paar Handlungsabläufe und die Nutzeroberfläche überarbeitet und optimiert. In erster Linie sollte die Plattform übersichtlicher und einfacher in der Bedienung werden.

UI-Design

Style-Guide

Login-Seite

Menu-Führung

Farb-Variante

Trainings-Ãœbersicht

Filterung

Kurs-Teilnehmer verwalten

Artikel anlegen

Einstellungen

Fazit

Die neue E-Learning-Plattform bietet eine bessere Übersicht der Kurse und eine klare Navigation durch die einzelnen Seiten. Die Filterung ist nutzerfreundlicher und die Administratoren können die Kurse besser verwalten. Vor allem ist die Plattform optisch ansprechender geworden.

WAVE 3 Projekt-Management-Plattform

UI- / UX-Design

WAVE 3 – Projekt-Management-Plattform

WAVE ist eine Projekt-Management-Plattform für Artwork und Packaging Prozesse von 5Flow. Das Unternehmen startete, als Start-Up 2011 mit der Vision ein Artwork Management Tool zu bauen, das die Prozesse und Abläufe für Verpackungen, Designs und Content automatisieren und beschleunigen sollte.

Nach vielen Jahren der Weiterentwicklung und Optimierung soll die Plattform in einem Relaunch eine optimierte User Experience und ein neues User-Interface bekommen. Seit November 2022 arbeite ich als UX- / und UI-Expertin für 5Flow und helfe dabei, die Plattform neu aufzubauen.

Methoden & Leistungen
Analyse | Konzept-Entwicklung | User Flows | User Journey | Wireframing | Prototyp-/Klick-Dummy | UX-/UI-Design | Design-Guide | Projektmanagement | Nutzertests und Optimierung

Tools
Adobe XD | Figma | Miro | Teams

Herausforderungen

r

Komplexes System mit individuellen Workflows.

r

Sehr viele unterschiedliche Features und Funktionen.

r

Bereits entwickeltes System ohne gute Voranalyse oder UX-Konzept.

r

4+ Nutzergruppen mit unterschiedlichen Anforderungen.

Ziele



Ein besseres Verständnis der Nutzeranforderungen und Bedürfnisse.



Eine bessere Nutzerführung durch komplexe Abläufe.



Beschleunigte Abläufe und Prozess.



Ein einheitliches und nutzerfreundliches User-Interface.

Projekt Phasen

Da WAVE viele komplexe Funktionen und Erweiterungen hat, habe ich jede Ansicht und jedes Feature einzeln durch einen Entwicklungs-Prozess begleitet. Zu meinen Aufgaben gehörten Analyse, Nutzer Testings, Auswertungen, Vergleiche und Optimierungen der einzelnen Funktionen.

Analyse und Einarbeitung

Analyse und aktueller Stand

Das WAVE System ist sehr komplex und bietet individuelle Systeme und viele unterschiedliche Funktionen. In einer Einarbeitungs-Phase habe ich sehr viele Gespräche mit den Projekt-Verantwortlichen geführt. So konnte ich im ersten Schritt die Haupt-Ansichten und Basis-Funktionen kennenlernen. Mit Support-Mitarbeitern habe ich die Anforderungen und Nutzerbedürfnisse der verschiedenen Nutzergruppen analysiert.

Vergleich und Gegenüberstellung

Da viele der Funktionen und Ansichten bereits vor meinem Start in das Projekt neu gestaltet und entwickelt wurden, musste ich nicht nur die alten, sondern auch die neuen Funktionen analysieren. In einer Gegenüberstellung konnte ich die Änderungen beurteilen und Optimierungs-Möglichkeiten ausarbeiten. So konnte ich die Nutzerführung und die User-Experience besser bewerten.

Nutzer und Bedürfnisse

Insgesamt hat das System vier verschiedenen Nutzergruppen:

$

Projektmanager: Leiten den Prozess und sorgen für die Einhaltung der Fristen.

$

Entscheider und Genehmiger: Prüfen Informationen, sowie Inhalte und geben sie frei.

$

Externe und interne Teilhaber: Liefern Dateien und Informationen.

$

Viewer: Haben nur eine Übersicht der Informationen, können aber nichts editieren.

Die Herausforderung war es die Bedürfnisse der verschiedenen Nutzergruppen zu analysieren. Da die Gruppe der Projektmanager die meiste Zeit in diesem System verbringt, habe ich mich im ersten Schritt auf diese Haupt-Nutzergruppe fokussiert.

User Interviews im alten WAVE 2.0 System

Ich habe 4–5 langjährige Projektmanager und Haupt-Nutzer interviewt und mir von ihnen die wichtigsten Basis-Funktionen und Abläufe in dem alten System zeigen lassen. Durch eine Simulation der Abläufe in ihrem Arbeitsalltag und mehrere Nachfragen konnte ich herausfinden, welche Funktionen für die Kunden am wichtigsten sind. Viele Nutzer konnten durch Verbesserungswünsche und Ideen die weitere Entwicklung bereichern.

Interview-Auswertung und Fazit

In einer Auswertung der Interviews habe ich festgehalten, welche der Funktionen in welcher Weise genutzt wurden und konnte mögliche Nutzungsprobleme identifizieren.

User Tests mit dem überarbeiteten WAVE 3.0 System

Auf Basis der Interviews zum alten System konnte ich Aufgaben und Fragen für die User Tests zusammenstellen. So konnte ich testen, wie gut die Anforderungen und Bedürfnisse in der neuen Plattform erfüllt werden. Getestet habe ich jeweils 5–6 Nutzer aus zwei verschiedenen Unternehmen und fünf verschiedenen Ländern.

Durch das Beobachten des Klick-Verhaltens und der Handlungs-Abläufe habe ich die Funktionen und Ansichten analysiert und ausgewertet. Dazu habe ich eine Tabelle mit einer genauen Dokumentation erstellt.

Lösungen zur Optimierung

Nachdem ich alle User Tests ausgewertet hatte, habe ich eine Präsentation mit der Zusammenfassung und möglichen Lösungsvorschlägen erstellt.

UX Design

MVP Sitemap

In einer Sitemap habe ich die wichtigsten Funktionen und Ansichten sowie ihren Status aufgelistet. So hatte ich einen Ãœberblick, was bis zur Fertigstellung des MVP vorbereitet werden sollte.

Aufbau der User Flows

Für besonders komplexe Handlungs-Abläufe habe ich User Flows aufgebaut, um sie mit dem Team gemeinsam abzustimmen.

 

UI Design

Aufbau eines Design-Guides mit Material UI

Da das gesamte System auf dem Material UI Bausatz basiert, habe ich die verschiedenen Elemente im Programm Figma zusammengefasst und dokumentiert.

Um den Arbeitsaufwand gering zu halten, sollten im ersten Schritt die Standart-Designs verwendet werden. Im nächsten Schritt, voraussichtlich 2024, werde ich das User-Interface moderner und nutzerfreundlicher gestalten.

Um das Design später schneller ändern und optimieren zu können, arbeite ich mit einer sogenannten Component Library. Dort werden alle Designs, Farben und Schriften definiert und können mit wenigen Klicks geändert werden. So aktualisieren sich alle Elemente in den anderen Dateien automatisch.

Optimierung verschiedener Ansichten und Funktionen

Durch das Feedback und die Anwendungs-Probleme, die mir bei den Nutzertests aufgefallen sind, konnte ich verschiedene Ansichten optimieren.

Dashboard

Tabellen

Buttons

Forms

Filterung

Prototyp-Entwicklung

Bei Bedarf habe ich einen Klick-Dummy für eine Funktion erstellt um den Handlungsablauf und die einzelnen Schritte zu testen. So konnte ich sicherstellen, dass es keine Fehler oder Unklarheiten bei der Nutzung gibt.

Ãœbergabe an die Programmierung

Sobald ein Design final abgestimmt und freigegeben wurde, übergebe ich das Layout an die verantwortlichen Programmierer. In einem Meeting werden die Änderungen gemeinsam diskutiert und für die Umsetzung finalisiert.

Anschließend erstellt der Scrum Master einen Task und weist diesen einem der Programmierer zu.

Qualitäts-Check und Optimierung

In der Entwicklung kommen die Programmierer bei möglichen Fragen auf mich zu. Wenn die Entwicklung fertig ist, wird sie in einem Sprint-Review präsentiert. Bei Fehlern oder Änderungen gehe ich auf die Programmierer zu und bitte sie, diese zu korrigieren.

Fazit

WAVE 3 ist ein komplexes und vielfältiges Project-Management-System, das immer weiter entwickelt wird. Für eine optimale User Experience und ein ansprechendes User-Interface werde ich das Projekt noch eine längere Zeit begleiten.

CO2-Rechner App

Product-Design

COâ‚‚-Rechner App

Die COâ‚‚-Rechner App ist ein freies Projekt, dass ich, inspiriert von ein Start-Up Event, gestaltet habe.

Wenn wir den Klimawandel wirklich stoppen wollen, müsste jeder von uns anfangen weniger als 2 Tonnen CO₂ zu verbrauchen. Aktuell liegt der durchschnittliche Verbrauch in Deutschland laut WWF bei ca. 12 Tonnen.

Die Hürde ist also riesig und kaum zu schaffen.

Die Idee: Eine App, die nicht nur einen groben Überblick über einen CO₂-Fußabdruck bietet, sondern den monatlichen oder sogar täglichen Verbrauch zählt. Der Nutzer soll dazu animiert werden, eine Art CO₂-Diät zu machen.

So könnte ein Bewusstsein dafür geschaffen werden, wie viel CO₂ wir in unserem Alltag verbrauchen.

Herausforderungen

r

Der Nutzer soll dazu animiert werden, die App möglichst oft zu nutzen.

r

Der Nutzer sollte kein schlechtes Gewissen bei der Eingabe empfinden.

r

Der Nutzer sollte ein Bewusstsein dafür bekommen, wo er im Alltag CO₂ verbraucht.

Ziele



Der Nutzer sollte schnell und einfach Aktivitäten und konsumierte Artikel eingeben.



Der Nutzer soll durch Challenges und Belohnungen dazu animiert werden, seinen CO₂ Ausstoß gering zu halten.



Der Nutzer sollte einen Überblick darüber behalten, wie viel CO₂ er bereits verbraucht hat.

UX- / UI-Design

Logo

Farben

Schriften

Einleitung

Home-screen

Aktivitäten-Eingabe

Fructose-Zähler App

Product-Design

Fructose-Zähler App

Die Fructose-Zähler App soll Menschen mit einer Fructose-Intoleranz dabei helfen, sich Klarheit darüber zu schaffen, wie viel Fructose sie täglich essen und welche Mengen sie vertragen.

Die App zählt den Fructose- und Glucose-Gehalt in den Lebensmitteln, die über den Tag gegessen werden (ähnlich wie eine Diät-App Kalorien zählt).
Dafür hat der Nutzer die Möglichkeit, die einzelnen Lebensmittel in den Mahlzeiten einzugeben und damit die gespeicherten Fructose-Werte zu zählen.

Die App ist meine eigene Idee und befindet sich gerade in der Interview- und Test-Phase.

Tools:
Adobe XD, Miro, Flutterflow

Herausforderungen

r

Die App sollte nicht nur die Werte festhalten, sondern auch einen Überblick über die Verträglichkeit schaffen.

r

Der Nutzer sollte die Möglichkeit haben, seinen Grenzwert selbstständig zu bestimmen und die Symptome zu protokollieren.

r

Der Nutzer sollte die Möglichkeit haben, eigene Lebensmittel und deren Fructose-Werte einzugeben.

Ziele



Der Nutzer sollte schnell und einfach die gegessenen Lebensmittel eingeben können.



Der Nutzer soll ein besseres Bewusstsein und Kontrolle über seine Intoleranz bekommen.



Der Nutzer sollte einen Überblick darüber behalten, was er gegessen hat und wie viel Fructose die Lebensmittel enthalten.

Projekt Phasen

Analyse

Die Ziel-Nutzer sind Menschen mit einer stärkeren Fructose-Intoleranz, die die App dauerhaft oder während der Karenzphase (dem zwei Wochen Fructose-Fasten) nutzen möchten.

Nutzer-Analyse

Den Nutzern ist es wichtig einen Überblick darüber zu bekommen, wie viel Fructose sie zu sich nehmen, wie viel sie vertragen und was sie ohne Beschwerden essen können. Sie möchten endlich wieder freier und unbeschwerter essen und ihr Leben wieder genießen können.

Die Ziel-Nutzer werden schon viele Internet-Foren und Apps zu diesem Thema ausprobiert und viel darüber gelesen haben. Zeitmangel und Stress sorgen oft dafür, dass die Zielgruppe sich nicht bewusst ernährt und ihre Fructose-Intoleranz nicht in den Griff bekommt.

Gerätenutzung:
Die Nutzer gebrauchen Android und iPhone
Die App soll vorerst nur für Android nutzbar sein

Konkurrenz-Analyse

Die Konkurrenz sind die Apps „Frag Inga“ und „Histamin, Fructose und Co.“ Beide Apps bieten Listen mit Lebensmitteln, in denen die Fructose/Glucose-Werte aufgeführt sind. Die Lebensmittel sind in verträgliche und unverträgliche Lebensmittel geteilt. Es gibt bei beiden die Möglichkeit, Favoriten zu markieren und die Lebensmittel, selbst für sich zu bewerten.

Die App „Histamin, Fructose und Co“ hat eine sehr ausführliche Liste über die einzelnen Lebensmittel. Sie hat außerdem einen guten Support mit schneller Hilfestellung.

Beide Apps widersprechen sich, wenn es um die Verträglichkeit der Lebensmittel geht. Außerdem gibt es einige Unterschiede in den Werten und keine der Apps bietet die Möglichkeit, die Fructose-Werte oder Lebensmittel festzuhalten.

Produkt-Analyse

Die neue App bietet die Möglichkeit, die gegessenen Lebensmittel einzugeben und die Fructose und Glucose auszurechnen. So bekommt der Nutzer eine genaue Übersicht über die täglich verzehrte Fructose. Mit dem Vergleichswert hat er die Möglichkeit, seine Fructose-Intoleranz besser einschätzen zu können.

Strategie und Konzept

Finale Strategiefrage:

Auf Basis der Analysen habe ich eine finale Strategiefrage herausgearbeitet:

Wie konzipiere und gestalte ich die App, damit der Nutzer schnell und unkompliziert seine täglichen Fructose-Werte zählen und auswerten kann?

Handlungen und Funktionen

In diesem Schritt habe ich alle Handlungen und Schritte aufgezählt, die ein Nutzer tun müsste, um seine Lebensmittel und Symptome festzuhalten.

In einem Brainstorming habe ich Ideen für mögliche Funktionen gesammelt und sie in Must Have, Should Have und Nice to Have geteilt.

$

Must Have: Lebensmittelsuche, Lebensmitteleingabe, …

$

Should Have: Symptome, Stimmung, Wochenübersicht, …

$

Nice to Have: Community-Forum, QR-Code-Scanner, Rezepte, …

User Flows

Für die einzelnen Handlungen in den Funktionen habe ich jeweils einen User-Flow, also einen Handlungsablauf angelegt, um sicherzugehen, dass ich keinen wichtigen Schritt vergesse.

Mit einem User Flow wird eine Handlung in einzelne Zwischenschritte und Entscheidungsmöglichkeiten aufgeteilt. Damit entsteht ein Ablauf, den der Nutzer in einem digitalen Produkt durchlaufen muss, um ein Ergebnis zu bekommen.

Structur Map

In Miro habe ich eine Übersicht der einzelnen Ansichten und Funktionen aufgebaut und sie anschließend in einer Structur Map verbunden.

Damit hatte ich die erste Grundlage für den Aufbau der App und konnte mit einigen Programmierern über die Umsetzung und den Aufwand sprechen.

Prototyp-Entwicklung

Wireframes

Vor der Entwicklung eines User-Interface-Designs habe ich die gesamte App mit Wireframes aufgebaut. Es ist sozusagen ein Entwurf der einzelnen Seiten und Funktionen. So konnte ich planen, welche Elemente benötigt werden und wo sie platziert sein sollten.

Klick-Dummy-Tests und Optimierung

Mit einem Klick-Dummy habe ich die Abläufe getestet und optimiert. So konnte ich sicher gehen, dass alle Handlungen und Informationen logisch und verständlich aufgebaut sind.

UI-Design

Nach den ersten Tests und der Optimierung der Wireframes, ging es weiter in die Ausarbeitung eines UI-Designs.

Farben

Schriften

Icons

Registrierung

Home-screen

Lebensmittel-Liste

Mahlzeiten eingeben

Symptome eingeben

Fazit

Die App bietet den Nutzern einen genauen Überblick über die gegessene Fructose und ihre Symptome. Aktuell befindet sich die App noch in einer Test- und Interview-Phase. Damit möchte ich sichergehen, dass die Nutzer alle wichtigen Handlungen und Funktionen in der App finden, die sie benötigen, um ihre Intoleranz in den Griff zu bekommen.

Skip to content