Shoe APP – UI/UX ProjeKt

Shoe

MOBILE APP

Screendesign & User Interface einer fiktiven mobile APP

Über das Projekt

Auszüge aus meiner Projektarbeit im Rahmen meiner UI/UX Design Weiterbildung.
Thema: Screendesign & User Interface Design mit Sketch, Mai 2022

CHALLENGE

ENTWICKLUNG EINER FIKTIVEN APP IN FIGMA

Problem

Wo ist dieser Sneaker erhältlich?

Sneaker Liebhaber entdecken im öffentlichen Raum bei anderen tragende Sneakers und wollen diese haben. Jedoch wissen Sie nicht, um welches Modell es sich handelt oder wo dieser erhältlich ist. Auch passieren solche Fälle, beim vor Ort Kauf, dass ausgerechnet der Schuh nicht in einer anderen Farbe oder Größe da ist.

Projekt

SCREENDESIGN & USER INTERFACE DESIGN

Shoe ist eine App, die einem bei der Suche nach dem Sneaker Modell hilft. Einfach abfotografieren und die Online Suche geht los. Nach wenigen Sekunden wird das Ergebnis angezeigt, wo dieser im Online-Store oder vor Ort erhältlich ist. Preisvergleich, weitere Ausführungen und Rezensionen werden angezeigt.

1 |

Die APP

2 |

Personas

Um ein besseres Verständnis für die Zielgruppe zu bekommen, entwickelte ich zwei Personas. Diese sollten den weiteren Designprozess für die Look Entwicklung der App unterstützen. Die Personas sind leidenschaftliche Sneakerträger und Sammler. Trendbewusst und müssen immer den neusten Schuh besitzen.

3 |

The Golden Cycle

4 |

Das Design

5 |

User Flow

Eine kurze Visualisierung, wie der Weg von einem User aussieht, wenn er die App startet und die Funktionen nutzt.

6 |

Wireframes

Es mussten Wireframes angelegt werden für das Interface Design. Diese legten die Basis dar, welche Elemente auf den Screens wichtig sind und unterstützten somit auch die einzelnen Schritte für die Interaktionen mit der App.

7 |

Prototyp

8 |

App Design

Infinity Memories – UI/UX Case Study

Infinity
Memories

UI/UX

Digitales Service System für eine Hochzeit, inklusive Vor- und Nachbereitung

Über das Projekt

Auszüge aus meiner 5-tägigen Projektarbeit im Rahmen meiner UI/UX Design Weiterbildung.
Thema: UX & Design Thinking, November 2022

Design Challenge

Eine Art Theme-Party mit globalen Megatrendthemen als Hochzeitsframing.
Alle Gäste – von jungen Trendsettern über etablierte Mainstreamvertreter, bis hin zu älteren traditionsverhafteten Familienmitgliedern – sollen sich wohlfühlen und eine großartige, bezaubernde, überraschende Hochzeitsexperience erleben, die sie danach begeistert teilen und weiterempfehlen.

UX Tools

Recherche
Problem Statement
Stakeholder Map
Megatrend Analyse
Personas
Brainstorming
Vision Cone
Happy Future Vision
Service Blueprint
Create a Pitch

1 |

Design Thinking

2 |

Personas

3 |

Ideen finden

4 |

Pitch

Rewe – UI/UX Case Study

REWE

ui/UX

Digital Touchpoints & Interaction Design an einem Vergleich von 3 Brands

Über das Projekt

Auszüge aus meiner Projektarbeit im Bereich Digital Touchpoints & Interaction Design im Rahmen meiner UI/UX Design Weiterbildung, Oktober 2022

BRANDED UX | INTERACTION DESIGN

Rewe Voice Over Assistent

Mit einer Markenanalyse und mit Brand Filtern wurde eine Basis geschaffen für eine Interaktive Gestaltung.

An einem Vergleich, einer Gegenüberstellung von 3 Brands, wurde für die UX-Bespielung eines digitalen Markentouchpoint die richtige Grundlage gelegt.

Mein Team bestand aus 5 angehenden UI/UX Designern.

UX Tools

Markenpositionierungskreuz

Brandbios

Verhaltensarchetyp

Benchmark

Digitale Touchpoints

Value Proposition

Brandfilter

Customer Lifecycle

HSD NEU – UI/UX Case Study

HOCHSCHULE DORTMUND

UI/UX

Website Optimierung für einer der größten Fachhochschulen Nordrhein-Westfalens mit Sitz in der Landeshauptstadt Düsseldorf.

Über das Projekt

Auszüge aus der Analyse einer Webseite für eine Hochschule und 5-tägige Projektarbeit im Rahmen meiner
UI/UX Design Weiterbildung.
Thema: Usability & User Experience, August 2022

Startseite der HSD Düsseldorf

https://hs-duesseldorf.de/

CHALLENGE

OPTIMIERUNG DER WEBSEITE

Die HSD besitzt eine unübersichtliche Webseite. Das Ziel war es die Auffindbarkeit von Informationen und die Menüführung zu verbessern. Dafür wurde die Webseite auf Usability und User Experience analysiert. Mit den eingesetzten Tools wurde eine neue Informationsarchitektur aufgebaut und die Navigationsarchitektur optimiert.

Projekt

EIN TEAM, EIN MONAT

Unser Team bestand aus 2 angehenden UI/UX Designerinnen mit einem reichen Erfahrungsschatz im Bereich Art Direktion, Web- und Grafikdesign und 1er Redakteurin.

UX METHODEN

Für die Optimierung der Webseite

Für die Optimierung der Webseite haben wir innerhalb von drei Wochen die unten aufgeführten Methoden durchgeführt. In der 4. Woche kam es zur eigenen Projektentwicklung. Die vorher entstandenen Ergebnisse flossen in meine Abschlussarbeit mit ein.

1 |

untersuchen & verstehen

Heuristische Evaluation

Wir haben als erstes das Interface Design der Webseite untersucht.
Die Homepage haben wir mit den 10 Usability Heuristiken für Interface Design (Norman Nielsen) abgeglichen, um den Aufbau der Webseite auf Verwendbarkeit und Funktionalität zu bewerten.

Mit dieser Analyse konnten wir feststellen, welche Schwachstellen es gibt und welche Verbesserungen wir uns überlegen müssen.

Screenshot Miro Board

Fazit der Analyse

Es gibt zuviele doppelte Informationen und die Navigation ist für den User schwer zu verstehen.

Eine gewisse Struktur ist durch die Kachelanordnung und der gleichen Formen der Artikel vorhanden.

Einzelne Elemente der Seite nehmen sich gegenseitig die Aufmerksamkeit. Es gibt keine Zielführung.

Texte & Bilder sind schwer lesbar. Elemente weisen Ähnlichkeiten auf, jedoch wirkt alles sehr überladen.

2 |

Zielgruppen

Fokusgruppen

Wir definierten als nächstes unsere Fokusgruppen. Welche Eigenschaften, wie: Alter, Region, sozialer Stand, berufliche Bildung, Devices usw. haben sie? Dafür machten wir ein kleines Brainstorming, um die Zielgruppe einzugrenzen. Für die ausgewählte Fokusgruppe erstellten wir daraufhin eine Befragung, um Einstellungen und Erwartungen zu erfahren, wieso die HSD für ein Studium interessant ist.

Für die spätere Persona Erstellung konnten wir aus den Bedürfnissen und Wünschen, die aus der Befragung entstanden, die ersten konzeptionellen Überlegungen entwickeln.

Zielgruppendefinition

3 |

FOKUSGRUPPEN UND BEFRAGUNGEN

Heuristische Evaluation

Für unsere Fokusgruppen führten wir eine Online Befragung durch. Dafür erstellen wir Hypothesen, um Einstellungen und Erwartungen von unseren Usern zu erfahren. Diese Phase unterstütze uns bei der genauen Persona Erstellung und wie der Fokus auf der Webseite ausgelegt werden sollte.

Hypothesen

Umfrage via Google Forms

Unsere Umfrage führten wir via Google Forms aus. Wir befragten 15 Personen auf berufliche Aussichten, finanzielle Situationen, Wohnverhältnisse, Studiumsinteressen, persönliche Intention und Motivation der Studierenden.

Screenshots Miro Board

Auswertung Umfrage

Ein Großteil der Befragten findet ein Angebot zur finanziellen Unterstützung hilfreich oder interessant

Angebot zur Kinderbetreuung macht Sinn, aber steht nicht im Vordergrund

Die meisten studieren im Bachelor und könnten sich für einen Master-Studiengang interessieren. Die Informationen für die Bachelorstudiengänge könnten mehr hervorgehoben werden auf der Webseite

Da ein Großteil der Befragten Studieninteressierte sind, macht es Sinn, vor allem diese bei der Gestaltung der Webseite zu berücksichtigen und abzuholen
Angebote für ein Fernstudium wären sinnvoll

Auf ausgefallene Designelemente auf der Startseite verzichten

Die Zielgruppe ist hauptsächlich mobil unterwegs -> mobil-first-Strategie

Studienangebot trifft die Studierendenwünsche

Die HSD ist international weniger bekannt, als wir dachten. Wir müssen mit unserer Website stärker ausländische Studierende ansprechen

4 |

PERSONA

Nutzerprofile aufgebaut aus der Umfrage

Anhand unserer bisherigen Untersuchungen, erstellten wir Personas aus den Ergebnissen der vorherigen Umfrage. Wir legten drei Personas fest.

5|

CUSTOMER JOURNEY MAP

HYPOTHESE: DIE EINSCHREIBUNG AN DER UNI IST FÜR STUDENTEN EINFACH

Für zwei unserer Personas haben wir anschließend ihre Customer Journey in Bezug auf den Umgang mit der Webseite und die Einschreibung an der Uni durchgespielt. So konnten wir überprüfen, wie unsere Personas die einzelnen Phasen meistern und ihre Nutzererfahrung sind.

Am Anfang der Customer Journey von unserer Persona gibt es Schwierigkeiten bei der Einschreibung und ihrer Bewerbung. Daraus konnten wir die Problemstellen erkennen und daraus weitere Optimierungen für die Webseite ableiten.

Customer Journey Map

6|

CARD SORTING

DIE STARTSEITE DER HSD

Für unsere Informationsarchitkur führten wir ein offenes Card Sorting durch. Die Inhalte auf der Website wurden neu strukturiert und geclustert. Es wurden vier Oberkategorien neu angelegt. Eine neue Zuordnung der Navigationsinhalte wurden festgelegt.

Card Sorting Auswertung

7|

INFORMATIONSARCHITEKTUR

Die Ergebnisse aus dem Card Sorting bildete die Basis

Nach unserem Card Sorting, konnten wir eine neue Struktur der Website Oberfläche entwickeln. Es wurden 4 Hauptnavigationspunkte mit neuen Unterkategorien festgelegt.

Navigation Tree mit neuen geordneten Inhalten

8|

SCRIBBLE,WIREFRAMEs, USER TESTINGs

REMOTE USABILITY TEST ZUM RELAUNCH DER HSD WEBSEITE

Jetzt wurden detalierte Scribbles zum Aufbau der Seite gemacht und die Inhalte wurden überlegt. Ich habe mich mich mit der Studium Seite in der 2. Ebene befasst. Darauf wurden Prototypyen in Adobe XD angefertigt.

Wir führten an unseren Prototypen Usability Tests durch, um die Navigation zu testen. Dazu stellten wir den Probanden Fragen und konkrete Aufgaben, wie sie z.Bsp. bestimmte Informationen aufsuchen sollten.

Wireframe Scribbles zur Seite Studium

Adobe XD Prototyp vor dem Test für den Usability Test

9|

EINZELPORJEKT

OPTIMIERUNG DER SEITE BEWERBUNGSPORTAL

In meiner Projektwoche befasste ich mich mit dem Bewerbungsportal der HSD Seite. Mit den erlernten UX- und UI Methoden wurde das Bewerbungsportal optimiert.

Die erarbeiteten Erkenntnisse und Analysen verwendete ich meinen Projekt. Für meine Optimierung legte ich folgende Methoden fest: Problemanalyse, User-Testings, Prototyping und Umsetzung der Auswertung (Finetuning).

Ausgangsituation

Das Bewerbungsportal der HSD Düsseldorf

alte Version

neue Version

Zustand Analyse

Zuviel Text verursacht dass die Informationen schwer auﬃndbar sind
keine Abgrenzung zu den verschiedenen Inhalten
Verschiedene Themen sind optisch schwer auﬃndbar
Übersicht fehlt

Ziele und Umsetzung

Struktur/ Sichtbarkeit für die Auﬃndbarkeit der einzelnen Themen verbessern
Reduzierung von Text und tiefgreifendere Information auf die 3. Ebene setzen
Fokus aufs Bewerbungsportal setzen
Kategorien von Themen klar deﬁnieren und reduzieren
Wireframes
Prototyping
Usability Test
Redesign

WIREFRAMING

Scribbles für verschiedene Devices wurden angefertigt. Ausgehend von der Desktop Variante wurde die Tablet und Mobile Variante danach angepasst. Am Anfang wurden die Inhalte festgelegt, um so auch visuell zu überlegen, wie die Kommunikation auf der Website für den User funktionieren soll.

10 |

PROTOTYPING & USER TESTING

Optimierung der Seite Bewerbungsportal

Die Wireframes wurden in einem User Test getestet. Anhand der Feedbacks wurde die Funktionen und das Layout angepasst.

Wireframes für Desktop, Tablet, Mobile

11 |

OPTIMIERUNG DER WIREFRAMES

Optimierung der Seite Bewerbungsportal

Es gab noch weitere Anpassungen. Funktionen wie Menüleiste und Buttons wurden visuell und funktionell nachgebessert.

Daily UI

DAILY UI

UI/UX

Daily UI ist eine Reihe täglicher Design-Herausforderungen.

ÜBER DAS PROJEKT

Projekt

Eine Reihe von spannenden Design-Herausforderungen

Die täglichen Daily UI Challenges ermöglichen die Fähigkeiten im UI/UX Bereich zu verbessern.

01 |

SIGN UP

Welcome to the Fruitbox

Es handelt sich um eine App Anmeldung für einen Obst Lieferdienstservice.

02 |

CREDIT CARD CHECKOUT

Welcome to the Fruitbox

Formular für eine Kreditkartenzahlung.

03 |

LANDING PAGE

Kejoo

Landingpage für ein Nature Shop.

Shoe

MOBILE APP​​

Über das Projekt

CHALLENGE

Problem

Projekt

1 |

Die APP

2 |

Personas

3 |

The Golden Cycle

4 |

Das Design

5 |

User Flow

6 |

Wireframes

7 |

Prototyp

8 |

App Design

InfinityMemories

UI/UX

Über das Projekt

Design Challenge

UX Tools

1 |

Design Thinking

2 |

Personas

3 |

Ideen finden

4 |

Pitch

REWE

ui/UX

Über das Projekt

BRANDED UX | INTERACTION DESIGN

UX Tools

HOCHSCHULE DORTMUND

UI/UX

Über das Projekt

CHALLENGE

Projekt

UX METHODEN

1 |

untersuchen & verstehen

Fazit der Analyse

2 |

Zielgruppen

Zielgruppendefinition

3 |

FOKUSGRUPPEN UND BEFRAGUNGEN

Hypothesen

Umfrage via Google Forms

Auswertung Umfrage

4 |

PERSONA

5|

CUSTOMER JOURNEY MAP

6|

CARD SORTING

7|

INFORMATIONSARCHITEKTUR

8|

SCRIBBLE,WIREFRAMEs, USER TESTINGs

9|

EINZELPORJEKT​

Ausgangsituation

WIREFRAMING​

10 |

PROTOTYPING & USER TESTING​

11 |

OPTIMIERUNG DER WIREFRAMES​

DAILY UI

UI/UX

ÜBER DAS PROJEKT​

Projekt

01 |

MOBILE APP

Infinity
Memories

EINZELPORJEKT

WIREFRAMING

PROTOTYPING & USER TESTING

OPTIMIERUNG DER WIREFRAMES

ÜBER DAS PROJEKT

SIGN UP

CREDIT CARD CHECKOUT

LANDING PAGE