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.

HI Heute Nachrichtenportal

ux-/ ui-Design

HI Heute Nachrichtenportal

HI Heute ist eine Plattform, die Nachrichten rund um das Thema Handelsimmobilien in Deutschland veröffentlicht. Auf der Seite werden unter anderem Analysen, Tipps und Informationen zur Verfügung gestellt.

Im Auftrag der rend Medien Service GmbH habe ich das Redesign der Plattform übernommen.

Methoden & Leistungen
Analyse | Beratung | Nutzeranalyse | UX-Design | UI-Design

Herausforderungen

r

neuer Aufbau und Umstrukturierung der alten Seite

r

Darstellung möglichst vieler Nachrichten in verschiedener Form auf einer Übersicht

r

wenig Zeit für User Research und Konzept-Entwicklung

Ziele



eine übersichtliche und ansprechende Plattform



schnelle Orientierung und einfache Navigation



Werbeanzeigen, die sich in das Bild der Plattform einfügen

Projekt Phasen

Projekt Kick-Off

In einem Kick-Off wurden die Anforderungen und Vorgaben an die neue Plattform besprochen und offene Fragen geklärt.

Nutzeranalyse

Die Nutzer der Plattform beschäftigen sich regelmäßig mit Immobilien und möchten immer auf den neusten Stand bleiben. Ihnen ist ein schneller Überblick über die neusten Nachrichten und das schnelle Aufrufen der Artikel wichtig.

Primäre Ansicht bei der Nutzung:
Die Plattform wird sowohl im Büro, als auch unterwegs genutzt, deswegen müssen alle Seiten responsiv sein und auf allen Geräten optimiert angezeigt werden.

Konkurrenz-Analyse

Zu den Konkurrenz-Seiten gehören die ImmobilienZeitung, das Handelsblatt und indirekt auch die FAZ. Das Ziel war es, sich durch eine bessere Struktur und Übersicht von den Seiten abzuheben.

Plattform-Analyse

Auf Basis der Nutzer- und Konkurrenz-Analyse habe ich die alte Plattform untersucht und mir ein Bild über die Funktionen, sowie möglichen Probleme bei der User-Experience gemacht.

UX-Design

Die Nachrichten werden in verschiedenen Formaten dargestellt. Von kleinen Teasern und Kurznachrichten bis zu hervorgehobenen Artikeln und Videos passt alles perfekt ins Bild. Call to Actions sorgen für eine einfache Navigation und Labels sorgen für eine gute Orientierung. So können die Nutzer schnell alle wichtigen Informationen erfassen.

UI-Design

UI Grundlagen

Startseite

Themen-Seite

Artikel-Seite

Fazit

Die neue Plattform bietet eine schnelle und ansprechende Übersicht über alle Themen der Immobilien-Branche. Nutzer können sich schnell orientieren und alle wichtigen Informationen aufrufen.

plusX Spendenplattform

Redesign und Markenaufbau

plusX-Spenden-Plattform

2020 habe ich ehrenamtlich für das soziale Start-Up plusX gearbeitet. plusX möchte durch Aktivitätsspenden dafür sorgen, dass jeder Mensch seine Freizeit aktiv und frei gestalten kann. Mit Spenden stellt plusX den Abnehmern Freizeitgutscheine für z. B. Museen, die Kletterhalle oder Nähkurse zur Verfügung. Die Gutscheine werden über die Plattform gebucht und bei den Freizeitpartnern eingelöst.

Methoden & Leistungen
Corporate Design | Logo-Design | Konzept-Entwicklung | UX-/UI-Design | Social-Media Kampagnen | Print Design

„Die Zusammenarbeit mit Olga hat sehr viel Spaß gemacht. Wir haben als Team von ihrer Expertise im Bereich Corporate Design viel lernen können und fühlen uns mit unserem neuen Web-Auftritt sehr wohl. Auch im Bereich User Experience haben wir wertvolle Tipps zur Entwicklung unserer Plattform bekommen.“

– Felix Meuer, Gründer von plusX gUG

Projekt Übersicht

Monate Arbeit mit
Abstimmung, Korrekturen
und Umsetzung

gestaltete Screens mit
verschiedenen Ansichten,
Funktionen und Elementen

Unterschiedliche Bildschirm-
Ansichten (Desktop, Tablet
und Smartphone)

Herausforderungen

r

Eine ungewöhnliche Art der Spende, die es so noch nicht gibt.

r

Drei verschiedene Zielgruppen, die über eine Seite agieren sollen.

r

Übersicht und Verwaltung für Aktivitäts-Spenden.

Ziele



Vertrauen schaffen



Informieren



zum Spenden / Empfangen motivieren

Projekt Phasen

Beratung

Im ersten Schritt haben die plusX Gründer und ich die aktuelle Situation und die alte Plattform analysiert und einen Plan für den weiteren Ablauf erarbeitet.

Nutzeranalyse

m zweiten Schritt war mir wichtig herauszufinden wer die Nutzer sind und welche Anforderungen, Motivationen und Bedürfnisse sie haben. 

Primäre Ansicht bei der Nutzung:
Spender und Empfänger nutzen die Seite in erster Linie über das Smartphone, um von Unterwegs einen schnellen Zugang zu haben.

Partner nutzen primär das Dashboard zur Verwaltung der Tickets und rufen die Plattform über die Desktop-Ansicht auf.

Die Plattform sollte von drei verschiedenen Zielgruppen genutzt werden:


$

Spender sollen dazu motiviert werden Aktivitäten an benachteiligte Menschen zu spenden.

$

Empfänger sollen in der Lage sein sich anzumelden, sich als benachteiligte Person auszuweisen und die Aktivitäten zu nutzen.

$

Die Partner brauchen in erster Linie ein Dashboard zum Verwalten und Hochladen der gespendeten Aktivitäten.

Konkurrenz-Analyse

Da die Spenden-Plattform mit dieser Art der Spenden einzigartig ist, gab es nur indirekte Konkurrenz.
Dazu gehörten große Spenden-Plattformen wie Oxfam, WWF und Greenpeace, aber auch ein paar kleinere Organisationen, die regional aktiv sind.

UX-Design

Gemeinsam mit dem Team haben wir die Handlungs-Abläufe und den Aufbau der einzelnen Seiten erarbeitet.

Mit User Flows und Wireframes konnte ich die Plattform genau planen und umsetzen.

Corporate Design

Logo Design

Farben

Typografie

UI-Design

Startseite

Neues UX-Konzept und UI-Design für die Startseite
. Ein Nutzer sollte auf den ersten Blick erkennen können worum es geht.

Aktivitäten Übersicht

Spendenprozess

Dashboard Spender

Das Besondere hier: Der Spender erhält eine Push-Benachrichtigung in Echtzeit, sobald eine Aktivität vor Ort eingelöst wurde.

Dashboard Partner

Entwicklung

Da der Gründer Felix Meuer die Seite selbst programmiert hat, konnten Korrekturen, Freigaben und die Übergabe der Designs schnell und einfach erfolgen.

Fazit

Mit freundlichen Farben, emotionalen Bildern und einer einfachen und übersichtlichen Nutzerführung, schafft es die Plattform Vertrauen aufzubauen, zu informieren und zum Spenden und Empfangen von großartigen Aktivitäten zu motivieren.

plusX hat inzwischen viele Partner, Spender und Empfänger im Raum Köln für sich gewinnen können und wächst stetig weiter.

Unique United

UI- / UX-Design

Unique-United – Barrierefreie Plattform

Auf dieser Plattform sollen Menschen mit körperlichen und geistigen Behinderungen die Chance bekommen barrierefrei und damit selbstständig Angebote für Fortbildungen, Events, Reisen und Jobs zu suchen und zu buchen.

Der Gründer Louis Kleemeyer hat selbst seit seiner Geburt eine Lernbehinderung. Dadurch ist er seit vielen Jahren ehrenamtlich aktiv für die soziale Integration von Menschen mit Behinderungen und unterstützt seit 2022 auch die Special Olympics World Games 23.

Aktuell befindet sich die Plattform noch in der Entwicklung.

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

Tools
Adobe XD | Figma | Miro | Google Meets

Herausforderungen

r

barrierefreier Zugang für Menschen mit körperlichen und geistigen Behinderungen

r

einfache Suchfunktion für vier verschiedene Angebote und unterschiedliche Anforderungen

r

einfacher Aufbau und schnelle Übersicht der Themen und Angebote

Ziele



die Nutzer sollen schnell und einfach Angebote finden



die Nutzer sollen sich sicher und verstanden fühlen



die Nutzer sollen das Gefühl haben, sich frei auf der Seite bewegen zu können

Projekt Phasen

Schritt 1:

Analyse

In unserem ersten Meeting haben Louis und ich eine Analyse für die Umsetzung der Plattform Unique-United gemacht. Wir haben über seine Motivation gesprochen und darüber wie sich die Plattform in Zukunft entwickeln soll.

Nutzer-Analyse

In einer Zielgruppen-Analyse haben wir die folgenden beiden Zielgruppen für die Plattform herausgearbeitet:

$

Anbieter, die Fortbildungen, Reisen, Events und Jobs für Menschen mit Handicaps anbieten.

$

Nutzer, die eine körperliche oder geistige Behinderung haben und nach Angeboten suchen, die ihren Bedürfnissen gerecht werden.

Konkurrenz-Analyse

Mich hat überrascht, wie wenig Konkurrenz die Plattform Unique-United hat. Es gibt keine oder nur begrenzt Plattformen und Webseiten, die es Menschen mit einer körperlichen UND geistigen Behinderung ermöglichen, selbstständig nach Angeboten zu suchen und diese auch zu buchen.

Als indirekte Konkurrenz konnten Job-Portale wie inklupreneur und myability festgehalten werden. Allerdings sind beide Seiten nicht 100 % barrierefrei und bieten keine Möglichkeit nach bestimmten Kriterien und Bedürfnissen zu filtern.

Schritt 2:

Strategie und Konzept

In unserem Analyse-Meeting haben Louis und ich zwei finale Strategiefragen herausgearbeitet:

$

Wie muss die Plattform aufgebaut sein, damit der Handicap Nutzer sich schnell und einfach über Angebote informieren und sich direkt anmelden kann?

$

Was muss die Plattform können, damit der Anbieter schnell und einfach Angebote auf der Seite anlegen und veröffentlichen kann?

Wir fokussieren uns primär auf den Nutzer mit einer Behinderung, da er die Plattform so oft wie möglich nutzen soll.

Aber auch der Anbieter sollte sich schnell und einfach zurechtfinden, um viele Angebote für die Nutzer zur Verfügung zu stellen.

Funktionen

Eine komplexe Plattform kann unendlich viele Funktionen und Handlungsmöglichkeiten bieten. Damit diese nicht den Budget-Rahmen sprengen und die Nutzer nicht mit dem Angebot an Möglichkeiten überfordert sind, ist es wichtig die Funktionen zu priorisieren.

In einem Strategie-Workshop haben wir die Funktionen in drei Bereiche eingeteilt:

$

Must Have: Suchfunktion, Kontakt-Formular, Tool zur Barrierefreiheit, …

$

Should Have: Tutorials, Informationsseite, Bewertungen, …

$

Nice to Have: Community-Forum, Chat-Funktion, Login Bereich, …

User Flows

Für die einzelnen Handlungen haben wir jeweils einen User-Flow, also einen Handlungsablauf angelegt, um sicher zu gehen, dass wir keinen wichtigen Schritt bei dem Nutzererlebnis vergessen.

Mit einem User Flow wird eine Handlung (z.B. Angebote suchen) 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. (z.B. das richtige Angebot finden)

Sitemap

In der Sitemap haben wir alle Seiten und Funktionen der Plattform aufgelistet und in einer Hierarchie zueinander angeordnet. Sie ist ein Plan für die Navigation auf der Plattform.

Die Sitemap hilft dabei zu definieren, wie die Seiten und Funktionen miteinander zusammenhängen. Gerade bei komplexen Produkten und Anwendungen bringt eine Sitemap Struktur und Klarheit in ein UX-Konzept.

Schritt 3:

Prototyp-Entwicklung

Wireframes

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

Beim Aufbau der Seitenstrukturen und Funktionen habe ich darauf geachtet, dass die Nutzer sich einfach und schnell auf der Plattform zurechtfinden. Da die Ziel-Nutzer in erster Linie mit ihren Smartphones surfen, steht die mobile Ansicht an erster Stelle.

Klick-Dummy-Tests und Optimierung

Mit einem Klick-Dummy konnten wir alle Funktionen und Zusammenhänge testen, prüfen und optimieren. Neben internen Tests hat Louis die Seiten mit Personen aus der Zielgruppe getestet. So konnten wir sicherstellen, dass alle Zusammenhänge stimmen und Abläufe logisch aufgebaut sind.

Schritt 4

UI-Design

Nach den ersten Tests und der Optimierung der Wireframes, ging es weiter in die Ausarbeitung eines Design-Guides und dem UI-Design für die Plattform.

Das Design ist modern und ruhig. Die dunkelblaue Hintergrund-Farbe wirkt beruhigend und ansprechend. Dazu im Kontrast wird Rot als Signalfarbe für die Buttons und einige wenige Elemente zum Hervorheben genutzt.

Der Aufbau ist schlicht und minimalistisch. So, dass möglichst immer nur eine Information auf dem Bildschirm zu sehen ist.

Logo Redesign

In dem neuen Logo haben die Buchstaben und das Logo-Symbol eine einheitliche Form. Die Farben sind kräftig und modern und bilden einen komplementären Kontrast zueinander.

Figma Design-Guide

Ein Design-Guide hilft den Programmierern dabei das Design schneller zu erfassen und aufzubauen. Dabei ist es wichtig die Gestaltung der einzelnen Elemente genau zu definieren und in eine einheitliche Form zu bringen.

Mit einem Design-Guide können außerdem Fehler bei der Programmierung vermieden werden. Die klaren Vorgaben und Maße sollen dafür sorgen, dass das UI-Design in der Programmierung später genauso aussieht wie in den Entwürfen.

Schritt für schritt suche

Angebotsübersicht

Angebots-SEite

Überblick der angebote

Schritt 5

Programmierung

In einem Übergabe-Meeting habe ich den zuständigen Programmierer gebrieft und ihm alle Konzepte, Designs und Anforderungen übergeben. So konnten die ersten Fragen schnell geklärt werden.

Anschließend habe ich die Entwicklung der Seite weiter begleitet und stand für Fragen und mögliche Änderungen zur Verfügung.

Fazit zur Barrierefreiheit

Viele der Punkte für barrierefreie Gestaltung, wenn nicht sogar alle, sind für ein gutes UX- / UI-Design bereits Pflicht! Von einer barrierefreien App oder Plattform profitieren am Ende also alle.

Die wichtigsten Punkte für ein barrierefreies UX- / UI-Design:

$

einfache und schnell verständliche Navigation

$

Intuitive Nutzerführung

$

einfache und klar geschriebene Texte

$

große Schriften und ausreichend Abstände

$

hoher Kontrast

$

visuelle und auditive Elemente, wie Bilder, Icons und Videos

$

Videos mit Untertitel

$

Bilder und Icons mit Text-Alternativen

Natürlich kommen noch einige Punkte in Bezug auf die technische Umsetzung hinzu, die bei der Programmierung relevant werden. Unter anderem die Bedienbarkeit der Seite über die Tastatur, die Möglichkeit Texte zu vergrößern oder die Struktur der HTML-Elemente. Hierfür ist es wichtig sich rechtzeitig mit den zuständigen Entwicklern zusammen zu setzen. Im Fall von Unique-United haben wir das Tool Eye-Able® integriert, das alle wichtigen Funktionen für Menschen mit Behinderungen abdeckt.