Fallstudie
Mia Markensystem & Landingpage Design
Mia ist eine KI-Gesprächspartnerin, die Menschen dabei hilft, echte Sprachkenntnisse ganz ohne den Druck von Streaks oder starren Zeitplänen zu üben. Der Gründer hatte zwar ein funktionierendes Produkt, aber der Prototyp sah aus wie jede andere Sprachlern-App auch. Ich habe die Marke von Grund auf neu aufgebaut – Identität, Komponentenbibliothek und eine auf Konversion ausgerichtete Landingpage – und Mia eine visuelle Präsenz verliehen, die endlich zu dem passt, was das Produkt eigentlich ausmacht.
Brand Design Product Design KI-Art-Direction
Das Briefing
Mia ist eine KI-Konversationspartnerin, die Menschen dabei hilft, echte Sprachkenntnisse zu üben – ganz ohne Streaks, Druck oder starre Pläne. Der Gründer hatte zwar ein funktionierendes Produkt, aber der Prototyp sah aus wie jede andere Sprachlern-App: schlicht, zweckmäßig, ohne visuelle Persönlichkeit. Nichts im Design vermittelte die Wärme und Nahbarkeit, die das Produkt eigentlich ausmachen.
Die Aufgabe war klar: Baue die Marke von Grund auf neu auf und übertrage sie auf das Produkt und das Marketing. Das bedeutete, mit der visuellen Identität zu beginnen – noch bevor auch nur ein einziger Screen gestaltet wurde.
Der Ansatz
Das Erste, was ich getan habe, war, das visuelle Fundament zu legen, denn alles andere – Komponenten, Landingpage, Bilder – musste aus derselben Quelle schöpfen.
Mia sollte sich wie ein Gespräch anfühlen, nicht wie ein Lehrplan. Die Marke musste warm und modern sein, ohne in generisches Edtech abzudriften. Um das zu erreichen, habe ich drei bewusste Entscheidungen getroffen:
Typografie: Lexend als Hauptschriftart – eine warme, serifenlose Schrift mit hervorragender Lesbarkeit, die ursprünglich entwickelt wurde, um den visuellen Stress für Menschen mit Legasthenie zu reduzieren. Genau die richtige Wahl für ein Produkt, das Sprachen zugänglich machen soll.
Farbe: Eine Palette aus Indigo, Zitronen-Gelb und Kirschblüten-Rosa. Energisch, aber nicht laut. Freundlich, ohne kindisch zu sein. Eine Kombination, die sowohl in der App-UI als auch auf Marketingflächen funktioniert, ohne sich einseitig anzufühlen.
Illustration: Ein Stil, der echte Menschen in realen Situationen an der Seite eines wiederkehrenden KI-Charakters zeigt – Mia selbst. Anstatt auf Stock-Illustrationen oder abstrakte Formen zurückzugreifen, habe ich FLORA genutzt, um Bilder mit einer klaren künstlerischen Leitung zu generieren, die Mia ein Gesicht und eine Präsenz geben. Das war keine Abkürzung in der Produktion – die KI-gesteuerten Bilder wurden zu einem Kernbestandteil der Art und Weise, wie die Marke auf den ersten Blick auf der Landingpage Wärme vermittelt und Vertrauen aufbaut.
Die Arbeit
Nachdem das Markenfundament stand, habe ich das Projekt auf drei miteinander verknüpfte Ebenen ausgeweitet.
Markensystem: Eine vollständige Identitätsdokumentation, die die Logo-Nutzung, Farbpalette, Typografie-Größen, Bildsprache und Tonalitätsanker umfasst. So konzipiert, dass sie nahtlos übergeben und bei wachsendem Produkt konsistent genutzt werden kann.
Komponenten-Bibliothek: Über 30 in Figma erstellte Komponenten für die direkte Übergabe an die Entwicklung – inklusive Typografie, Farbcodes (Color Tokens), interaktiven Zuständen und den wichtigsten UI-Mustern, die die App brauchte. Dass der Entwickler direkt mit diesen Dateien arbeiten konnte, hat die Umsetzungsphase deutlich verkürzt und typische Missverständnisse zwischen Design und Code verhindert.
Landingpage: Optimiert für Conversion, sowohl auf dem Desktop als auch mobil. Das Ziel war es, Mia noch vor dem offiziellen Launch als glaubwürdiges und vertrauenswürdiges Produkt zu positionieren – also nicht nur gut auszusehen, sondern Besucher:innen einen klaren Grund für die Registrierung zu liefern. Die KI-generierten Bilder spielen dabei eine entscheidende Rolle: Sie verleihen dem Produkt eine menschliche Note, noch bevor man es überhaupt ausprobiert hat.
Das Ergebnis
Eine einheitliche Produktidentität, die in der App und im Marketing perfekt funktioniert – in einem einzigen Projekt von Null auf produktionsreif aufgebaut.
Die Landingpage ist live unter fluentwithmia.com. Die Komponentenbibliothek mit über 30 Komponenten ist bereits aktiv im Einsatz, während sich das Produkt weiter in Richtung des Mobile-App-Launch entwickelt.