Case Study: UI/UX Design für „Flover Fusion“

Gutes Design ist mehr als nur Oberfläche. Anhand von Flover Fusion präsentiere ich meine Herangehensweise an modernes UI-Design. Diese Übersicht dokumentiert die Entstehung des User Interfaces – angefangen beim Styleguide mit Advent Pro und Poppins bis hin zum responsiven Layout. Ein klares Raster und durchdachte Komponenten bilden hierbei das Fundament für ein konsistentes Nutzererlebnis über alle Endgeräte hinweg.

Flover Fusion
Frische Ideen für jeden Tag und jeden Ges​chmack. 

Flover Fusion App ist für Menschen konzipiert, die gerne nachhaltig kochen - mit Rezepten, die überwiegend aus Zutaten aus ihrer Region bestehen. Auch wer auf Kalorien und Gesundheit achtet, ist mit FlavorFusion bestens versorgt. Dazu kommen personalisierte Vorschläge, die den Alltag einfacher und bewusster machen.

Problem Statement

Die Herausforderung: Flexibilität in einer mobilen Welt 

Viele Menschen – insbesondere Studierende, Berufseinsteiger und Expats – stehen vor dem gleichen Problem: Sie ziehen für einen begrenzten Zeitraum in eine neue Stadt und benötigen eine vollständige Wohnungseinrichtung. Der Neukauf von Möbeln, Elektronik und Haushaltsgeräten ist jedoch mit extrem hohen Kosten und logistischem Aufwand verbunden. Da die Wohndauer oft ungewiss ist, scheuen viele die Investition. Es fehlt eine Lösung, die hochwertige Einrichtung zugänglich und flexibel macht, ohne den ökologischen Fußabdruck durch ständige Neuanschaffungen zu vergrößern.

The Solution

Die Antwort: Mieten statt Besitzen 

Wir haben eine intuitive Miet-Plattform entwickelt, die Nutzern maximale Freiheit bei der Gestaltung ihres Zuhauses bietet:

Flexible Laufzeiten: Mieten für eine Woche, einen Monat oder ein ganzes Jahr – ganz nach Bedarf.
Nachhaltigkeit: Fokus auf die Vermietung von generalüberholten und recycelten Artikeln.
Full-Service: Kostenlose Lieferung, professionelle Reinigung und regelmäßige Wartung sind inklusive.
Maximale Mobilität: Bei einem Umzug ziehen die Mietobjekte über die App kostenlos mit.
Upgrade-Option: Nutzer können gemietete Artikel jederzeit gegen neuere Modelle oder Upgrades eintauschen (Swap-Service).

My Role & Project Overview

In diesem Projekt war ich als End-to-End Product Designer für den gesamten Entstehungsprozess verantwortlich – von der ersten Nutzerbefragung bis hin zum finalen High-Fidelity-Prototyp.

 • User Intenview ​ • User Research  • Competitor Analysis • Affinity Mapping  • Persona • Customer Journey map • Card Sorting • User Flow • Information Architecture • Low Fidility   • High Fidility  • Usability Testing

Project Duration

6 Wochen  35+ Screens

Tools Used

Figma, Photoshop, Miro, Google Forms/Sheets

Design Process
1. Empathize:
  • Durchführung von User Interviews und User Research, um die Pain Points der Zielgruppe zu verstehen.
  • Detaillierte Competitor Analysis, um Marktlücken zu identifizieren.
2. Define:
  • Strukturierung der Erkenntnisse mittels Affinity Mapping.
  • Erstellung von Personas, Empathy Maps und Customer Journey Maps, um die Nutzerführung zu definieren.
3. Ideate:
  • Entwicklung von User Flows und Information Architecture.
  • Optimierung der Navigation durch Card Sorting.
4. Design:
  • Iteratives Design von Low-Fidelity Wireframes bis zu den finalen High-Fidelity Interfaces.
5. Test:
  • Validierung der Konzepte durch Usability Testing und anschließende Implementierung des Feedbacks.
  • Kochen einfacher & angenehmer machen
  • Große Rezeptsammlung & Einkaufslisten bereitstellen
  • App-Mehrwert kommunizieren
  • Downloads & Engagement fördern
 ​ About project
 ​ Wichtige Anforderungen an das Design
  • Visuell ansprechendes Design
  • Benutzerzentriertes Layout
  • Konversionsoptimierung (CTAs, Bewertungen)
  • Responsives Design
 ​ ​ Fonts

H 01

Advent Pro

Weight: Regular Weight Regular Size: 24px 
Line Height: Automatic

ABCDEFGHIJKLMNOPQRST UVWXYZ1234567890!#$ #$% ^ & *()

SH 01

Poppins

Weight: Regular 
Size: 14 px 
Line Height: Automatic

ABCDEFGHIJKLMNOPQRST UVWXYZ1234567890!#$ #$% ^ & *()

 ​ ​ ​ Colors

Primary

#9FC494

#​80B16F

#​5F9D4A

#​4B7E3B

#​3A5F2C

#13470c

Secondary

# ffdc9a

#​​ffd07a

#​​ffc45c

#​​d59f49

#​​a07636

#​593c10

Komponenten

Buttons

Icons

 ​ ​ ​ ​​Wireframes

Low

 ​ ​ ​ ​​​High Fidelity 

Mobile

 ​ ​ ​ ​​​High Fidelity 

Desktop