Zurück

Referenzen UX-Design

User Experience Design richtet den Fokus auf die Anforderungen und Wünsche von Nutzenden bei der Interaktion mit Produkten und Dienstleistungen. Ich unterstütze dein Unternehmen dabei, Websites oder Anwendungen nicht nur benutzerfreundlicher zu gestalten, sondern auch bestehende Angebote zugänglicher zu machen. Nach dem Prinzip: „Build the right thing and build the thing right.“

FoodNow – UI-Design Checkout

UI-Design

Die Kasse (Checkout) ist häufig das Herzstück eines Onlineshops. Kleine Änderungen können schnell zu Kaufabbrüchen führen und die Conversion Rate negativ beeinflussen. Um den Umsatz zu steigern, nutzen Onlineshops häufig Upselling-Methoden. Man kennt es aus dem klassischen Kassenbereich in einemSupermarkt. Hier werden zusätzliche Impulskäufe von Kleinwaren getätigt, die den Umsatz steigern. Ähnlich verhält es sich online, allerdings zweidimensional und auf einer deutlich kleineren Fläche. Umso wichtiger ist es, den eigentlichen Kaufprozess nicht zu stark zu beeinflussen. Eine klare Hierarchie, gute Lesbarkeit und wenig Ablenkung sind daher essenziell. Für FoodNow haben wir den Checkout-Prozess umgestaltet. Wir haben das Hauptmenü im Warenkorb ausgeblendet, um unnötige Ablenkungen zu vermeiden und zeigen eine klare Aufteilung der einzelnen Bereiche. Für das Upselling haben wir im Warenkorb eine eigene Fläche angelegt, die sich vom Warenkorb selbst abhebt und nur Produkte anzeigt, die zur Bestellung passen.

Per Klick wandern die Produkte direkt in den Warenkorb und über den immer sichtbaren Sticky-Button gelangt man, ohne scrollen zu müssen, zur Kasse. Klickbare Elemente wie Radio-Buttons oder Checkboxen sind rechts ausgerichtet, um die natürliche Daumenbewegung auf mobilen Endgeräten zu unterstützen. Der Bottom-Layer ist aufklappbar und bietet Nutzer*innen jederzeit eine Kostenkontrolle. Unnötige Eingabefelder haben wir entfernt, um den Prozess schlanker zu machen. Insgesamt haben wir versucht, das bestehende Verhalten von einzelnen Komponenten nicht zu stark zu verändern, um Nutzenden kein komplett neues User-Interface anzueignen. Wir haben das Redesign Schritt für Schritt angepasst und konnten dadurch Programmieraufwände in kleine Pakete aufteilen und Nutzende nicht zu stark im gewohnten Bestellprozess beeinflussen. Wir konnten in den ersten zwei Wochen bereits 60 % der Produkte, die über das Upselling in den Warenkorb gelegt wurden, bis zum Bestellabschluss konvertieren.

Migros Online / myMigros – Landingpage

UX- und UI-Design

Die Migros hat zwei Online-Supermärkte, die unterschiedliche Ansätze verfolgen. Während Migros Online auf ein zentrales Fulfillment setzt, nutzt myMigros die Vorteile eines dezentralen Fulfillment und stellt Online-Bestellungen direkt aus einer lokalen Filiale zusammen. Da die Prozesse eher im Hintergrund passieren, sind Nutzer*innen häufig verwirrt, welchenOnlineshop sie verwenden sollen. Da eine Kombination technisch nicht möglich ist, haben wir eine Landingpage zur Aufklärung der beiden Varianten ausgearbeitet und in beiden Onlineshops an passenden Stellen integriert. Zum Aufbau der Landingpage haben wir ein Konzept entwickelt, Hypothesen aufgestellt, ein Wireframe und einen Prototyp entwickelt und mit echten Nutzer*innen getestet. Unser Ziel war, dass Kund*innen sich aufgrund der vorhandenen Informationen auf der Landingpage für einen der beiden Shops entscheiden können. Uns war wichtig, dass Kund*innen die Hauptmerkmale einfach erkennen und unterscheiden können.

Nach mehreren Interviews und Usability-Testings konnten wir die meisten Hypothesen bestätigen und haben uns an die Umsetzung der Landingpage gemacht. Besonders herausfordernd war es, eine gute Balance der beiden Plattformen zu finden, die keinen Service bevorzugt, sondern die Entscheidung komplett den Kund*innen überlässt. Ein Erklärvideo hat zudem dafür gesorgt, dass Nutzer die Unterschiede der beiden Shops nicht mühsam lesen mussten, sondern mundgerecht in einer Minute konsumieren konnten. Die Landingpage wurde von uns mit Webflow, einer No-Code Applikation, gebaut. So konnten wir Programmieraufwände komplett einsparen und die Website schnell veröffentlichen und integrieren. Du kannst dir den Desktop-Prototyp des Testings hier ansehen: Figma Prototyp. Das animierte Erklärvideo findest du hier: Video ansehen.

ImmoScout24 – Hypothekenrechner

UX- und UI-Design

Bei der Analyse der Kundenbedürfnisse stellten wir fest, dass die meisten Hypothekenrechner aus Sicht der finanzierenden Bank oder Versicherung entwickelt wurden. Demnach wurden nicht die tatsächlichen Kosten mit aktuellem Marktzins berechnet, sondern die generelle Tragbarkeit. Die Geldgeber möchten vor allem wissen, ob Nutzer*innen sich eine Immobilie auch langfristig leisten können. Nutzer*innen hingegen sind auch an aktuellen Zinsen interessiert und haben Angst vor versteckten Kosten. Wir fanden zudem heraus, dass durchschnittlich 2.5 % Kaufnebenkosten entstehen, welche i. d. R. nicht durch eine Hypothek gedeckt werden. Bei einem durchschnittlichen Preis von etwa einer Million CHF für eine Immobilie, bedeutet es, dass man mit etwa 25.000 CHF Kaufnebenkosten rechnen muss, die man zusätzlich an Eigenkapital benötigt.

Dank der transparenten Aufschlüsselung aller nötigen Eigenmittel halfen wir Nutzer*innen, besser zu kalkulieren und nach geeigneteren Objekten zu suchen. Wir konnten vielen Menschen ein frustrierendes Gespräch mit einem Finanzberater ersparen und bei der Suche nach dem Eigenheim helfen. Zusätzlich konnten wir die Seitenaufrufe in kurzer Zeit verdoppeln und Nutzenden einen fairen Hypothekenvergleich anbieten. Die Konvertierung zum Hypothekenvergleich konnten wir ebenfalls stark anheben und erhielten gleichzeitig qualifiziertere Leads. Wir haben Nutzenden eine transparente Lösung angeboten, die auch versteckte Kosten aufzeigt und Banken durch qualifizierte Kund*innen kostbare Zeit erspart.

myMigros – Picking App

UX- und UI-Design

Picker*innen stellen den Einkauf einer Online-Bestellung direkt in einer Migros-Filiale aus der Nähe zusammen. Um möglichst effizient zu sein, haben wir eine Applikation entwickelt, welche Picker*innen bei der Arbeit unterstützt. Der gesamte Picking-Prozess birgt Herausforderungen, wie z. B. Vorausplanung, Sonderwünsche, Wifi-Verbindung, Transportweitergabe oder abteilungsübergreifende Arbeiten an einzelnen Bestellungen. Effiziente Picking-Routen und ein klares User-Interface (UI) haben den Prozess für unsere Picker*innen spielend leicht gemacht. Um den gesamten Ablauf zu verstehen, sind wir regelmäßig selbst Picken gegangen, haben Nutzerinterviews durchgeführt und Prototypen per Usability-Testing geprüft.

So konnten wir die Applikation experimentell iterieren und zu einem unverzichtbaren Begleiter entwickeln. Fehleingaben im Offenverkauf (z. B. Karotten) konnten wir mit Preislimits abfangen, große Produktbilder haben bei der Suche im Regal geholfen, Vibrations-Feedback des Scanners half Personen mit Behinderungen und für große Bestellungen bauten wir die Möglichkeit, synchron mit mehreren Picker*innen zu arbeiten. Die Picking-App hat einen Statusindikator bei schlechter Verbindung angezeigt und mit einem Dashboard einen Überblick über alle offenen und laufenden Bestellungen bereitgestellt. Durch diese und viele weitere Optimierungen haben wir es geschafft, die Zeit pro Bestellung signifikant zu reduzieren.

Ekko – Landingpage Konzept

UX-Design

Ekko.io ist ein Unternehmen für die Prozessoptimierung in der Industrie 4.0. Für das Re-Design der aktuellen Website und dessen Landingpages habe ich ein Konzept auf Wireframe-Basis erstellt. Ziel der Landingpage ist es, potenzielle Unternehmen von Ekko und dem E-Kanban-Prozess zu überzeugen. Dabei ist es besonders wichtig, mögliche Hürden für Neukunden aus dem Weg zu schaffen und ein einfaches Onboarding zu integrieren. Da es eine Landingpage ist, ist eine SEO (Search Engine Optimization) ein wichtiger Faktor für die Auffindbarkeit einer Seite über Google. SEO-Texte neigen jedoch häufig dazu, keine gute Lesbarkeit zu haben, da sie sich stark auf Schlagwörter konzentrieren.

Eine gute Balance aus Schlagwörtern und dessen Semantik, mundgerechten oder interaktiven Inhalten kann bereits den Unterschied machen. Doch eine Landingpage umfasst weit mehr als eine gute Struktur und verfolgt eine klare Strategie. Kund*innen müssen genau dort abgeholt werden, wo sie es erwarten. Wer ist die Zielgruppe, welche Bedürfnisse oder Probleme haben sie, von wo kommen Kund*innen auf die Seite, wie stellt sich die Konkurrenz auf und was können wir tun, um aus der Masse herauszustechen? Gutes Design ist unsichtbar und bedeutet nicht, dass es nur optisch ansprechend aussieht. Ein gutes Konzept ist die Basis für erfolgreiche Produkte.

WRIGLEY – Sales App

UI-Design

Für die WRIGLEY Cash Zone Experts, haben wir aus statischen Powerpoint-Präsentationen ein interaktives und individuelles Verkaufsmedium erschaffen. Vertriebsmitarbeitende konnten gezielt Supermärkte analysieren und deren Verkaufspotential kalkulieren, z.B. an der Kassenzone. Durch die Eingabe von individuellen Daten, ansprechenden Animationen und interaktiven Bedienelementen konnten komplexeSituationen einfach dargestellt werden. Die Betriebsleitenden der Supermärkte konnten teilweise selbst die Daten direkt über das iPad spielerisch modifizieren und das Umsatzpotential berechnen.

Die Vertriebsmitarbeitenden konnten direkt vor Ort mit dem iPad arbeiten und benötigten keinen Laptop und Beamer mehr. Dadurch wurde eine schnelle und bedarfsgerechte Interaktion mit Kund*innen erreicht, die im Gedächtnis blieb. Die Applikation wurde in Zusammenarbeit mit der Juwi MacMillan Group GmbH (später ayeQ-benu GmbH) umgesetzt. Unser Team hat dabei maßgeschneiderte Verkaufspräsentationen interaktiv für iPad und Android-Tablets umgesetzt.

Tabak Wolters – Webdesign

UI-Design, Bildkonzept, Illustration und Bildbearbeitung

Wolters Tabakwaren ist ein Großhandel für Tabakwaren aus Norddeutschland, welcher 1930 gegründet wurde. Die Website und Corporate Identity waren mittlerweile in die Jahre gekommen, weswegen eine Neugestaltung der Website über die ATO interactive GmbH beauftragt wurde. Zu dieser Zeit war ich alsArt Direktor für das UI-Design der Website verantwortlich und durfte neben dem auch die Illustrationen und das Bildkonzept des neuen Web-Auftritts erstellen. Da nicht genügend Material der Flotte oder des Betriebs vorhanden war, durften wir mit einem lokalen und begabten Fotografen, Jonas Ginter zusammenarbeiten. Die technische Umsetzung fand ebenfalls über die ATO interactive GmbH statt.

Wir haben einen zum Thema passenden Look für die Website erstellt und die Corporate Identity um eine Akzentfarbe (Petrol) erweitert. Dadurch konnten wir das Layout etwas aufbrechen und Kontraste schaffen. Kund*innen, die Schwierigkeiten mit den Zigarettenautomaten des Unternehmens hatten, sollten über ein Störungsformular die Möglichkeit haben, eine Rückerstattung zu beantragen. Geschäftskund*innen sollten sich über das Unternehmen informieren können und einen einfachen Überblick über das Sortiment und den Leistungsumfang erhalten. Die Website kannst du dir hier ansehen: https://www.tabakwolters.de/