Züruck
Zwei Hände ordnen bunte Papierformen auf einem Tisch an.

univers

Art Direction & UI/UX Design

Herausforderung

Aktuelle digitale Versionen von Mastermind sind kaum barrierefrei gestaltet. Die Spielmechanik basiert fast ausschließlich auf Farbe, was insbesondere für Menschen mit Rot-Grün-Farbenblindheit zu Verständnisschwierigkeiten führt. Gleichzeitig wirken viele Interfaces visuell veraltet und sprechen moderne Mobile-User:innen nicht mehr an.Die Herausforderung bestand darin, ein klassisches Logikspiel neu zu gestalten: zugänglich, ruhig und zeitgemäß – ohne die strategische Tiefe des Originals zu verlieren.

kunde

Cimdata Bildungs Akademie
Weiterbildung projekt

jahr

2023

Lösung

Univers wurde als inklusives Logikspiel konzipiert, bei dem Accessibility nicht als Zusatz, sondern als Grundlage des Designs dient. Durch die Kombination aus farboptimierten Paletten und klar unterscheidbaren Formen bleiben alle Spielsteine eindeutig erkennbar – unabhängig von individueller Farbwahrnehmung.Ein reduziertes UI, hohe Kontraste und eine ruhige visuelle Sprache schaffen eine fokussierte Spielerfahrung, die sowohl barrierefrei als auch ästhetisch zeitgemäß ist.

kunde

CIMDATA Bildungs Akademie
Studienprojekt

jahr

2023

Meine Aufgaben

Atomic Design System
UX Research
Accessibility Design (A11y)
Information Architecture
Typography & Color Concept
Interactive PrototypingColor Blindness Optimization

INSIGHTS

Univers ist eine konzeptionelle Gaming-Plattform, die das soziale Spielerlebnis durch radikale Inklusion revolutioniert. In meiner Rolle als Art Directorin lag der Fokus auf der Überwindung visueller Barrieren. Basierend auf einer tiefgehenden User Research zur Barrierefreiheit im Gaming wurde ein Interface entwickelt, das speziell auf die Bedürfnisse von Menschen mit Farbfehlsichtigkeit (Rot-Grün-Schwäche) optimiert ist.

Durch die Entwicklung eines umfassenden Design Systems nach Atomic Design-Prinzipien wurde eine visuelle Sprache geschaffen, die nicht nur auf Farben, sondern auf Formen und Kontrasten basiert. Das Projekt vereint komplexe Funktionen wie Community-Management mit einer Architektur, die sicherstellt, dass die Freude am Spiel für jeden zugänglich ist – unabhängig von visuellen Einschränkungen.

kunde

Christian Lell

jahr

2023

Agentur

Designbüro Persch

Rolle

Visual Design & Branding
UI Design
Webflow-Entwicklung
Social Media Design

Startseite der Planetary Health Challenge Website auf Desktop mit klarer Informationsstruktur und inhaltlicher Hierarchie
RECHERCHE · SPIELANALYSE

Spiel & Insights

Mastermind basiert auf logischer Deduktion, Analyse und Mustererkennung. Das Spiel fördert Aufmerksamkeit, Arbeitsgedächtnis und Problemlösungsfähigkeit und zählt heute zur Kategorie der Casual Games, die den Mobile-Gaming-Markt dominieren.

Eine heuristische Analyse der bestehenden Jason-O’Neill-Version zeigte zentrale Schwächen: starke  Abhängigkeit von Farbe, fehlende Unterstützung für Farbsehschwächen sowie eine kaum ausgeprägte visuelle Identität.

Daraus entstand das zentrale Insight, dass Barrierefreiheit und Spielverständnis untrennbar miteinander verbunden sind.

Zentrales Insight:
Wenn Farben nicht eindeutig unterscheidbar sind, verliert das Spiel seine logische Klarheit.

Drei Screenshots eines Mastermind-Spiels mit Dropdown-Menüs zur Farbauswahl und daneben eine Liste mit sieben Designkritiken in deutscher Sprache.
Abstrakte grafische Formen zur Visualisierung von Systemdenken, Vernetzung und ökologischen Prozessen
Startseite der Planetary Health Challenge Website auf Desktop mit klarer Informationsstruktur und inhaltlicher Hierarchie
DEFINIEREN · NUTZERBEDÜRFNISSE

USER & INSIGHTS

Arturo
Nutzer mit Rot-Grün-Farbenblindheit. Benötigt eine klare visuelle Unterscheidbarkeit der Spielsteine ohne reine Farbabhängigkeit. Liebt klassische Logik- und Denkspiele.

Fatima
Sucht kognitive Stimulation und mentale Ruhe. Nutzt Spiele bewusst als Ausgleich und zur Förderung von Fokus und Konzentration.

Charakterprofil von Fatima Soler, 42, Flugbegleiterin aus Pinnenberg, Deutschland, mit Fotos, Persönlichkeitsmerkmalen, Zielen und Problemen.
Abstrakte grafische Formen zur Visualisierung von Systemdenken, Vernetzung und ökologischen Prozessen
IDEENFINDUNG · UX/UI-KONZEPT

KONZEPT & UI-Konzept

Das visuelle Leitkonzept von Univers basiert auf dem Universum als Metapher für Ruhe, Konzentration und Klarheit. Dunkle Hintergründe, schwebende Formen und gezielte Kontraste unterstützen einen meditativen Spielzustand und reduzieren visuelle Ablenkung.

Ein zentraler Designentscheid war die Kombination von Farbe und Form. Statt ausschließlich auf Farbe zu setzen,Ein zentraler Designentscheid war die Kombination von Farbe und Form. Statt ausschließlich auf Farbe zu setzen,

wurden die Spielsteine durch unterschiedliche Formen ergänzt. Parallel entwickelte ich mehrere Farbpaletten, die gezielt für Rot-Grün-Farbenblindheit optimiert und mithilfe von Simulationstools sowie Nutzerfeedback validiert wurden. Dadurch bleibt das Spiel für alle Nutzer:innen verständlich – unabhängig von individueller Farbwahrnehmung.

Logo der Planetary Health Challenge als reduziertes Zeichen für Wissenschaft, Umwelt und Vernetzung
Typografisches System der Planetary Health Challenge mit Fokus auf Lesbarkeit und wissenschaftliche Klarheit
Junge Frau mit orangefarbener Strickmütze und Brille lächelt, während sie auf ihrem Handy schaut.
Abstrakte grafische Formen zur Visualisierung von Systemdenken, Vernetzung und ökologischen Prozessen
RECHERCHE · BARRIEREFREIHEIT

farbblind studie

Der Fokus lag auf Rot-Grün-Farbenblindheit. Schnell wurde klar, dass Farbe allein nicht ausreicht, um Spielsteine zuverlässig zu unterscheiden.

Design-Entscheidung:
Neben barrierefreien Farbpaletten wurde ein zusätzliches System aus unterschiedlichen Formen eingeführt.

Die Lösung war ein kombiniertes System aus Farbe und Form. Unterschiedliche Formen unterstützen die Wahrnehmung der Spielsteine und ermöglichen ein sicheres Verständnis der Spielmechanik – unabhängig von individueller Farbwahrnehmung.

Dieser Ansatz stellt sicher, dass die Spielmechanik auch bei eingeschränkter Farbsicht klar und verständlich bleibt.

Ein Raster aus geometrischen Formen in neutralen, rosa, gelben, orangefarbenen, blauen und grauen Farbtönen auf dunklem Hintergrund.
Abstrakte grafische Formen zur Visualisierung von Systemdenken, Vernetzung und ökologischen Prozessen
DEFINIEREN · USER FLOW

User Flow Map

Der User Flow wurde bewusst reduziert und linear aufgebaut: Einstieg ins Spiel, Levelauswahl, Spielphase und Feedback.

Ziel war es, kognitive Belastung zu minimieren und den Fokus vollständig auf das logische Spielgeschehen zu lenken.

Startseite der Planetary Health Challenge Website auf Desktop mit klarer Informationsstruktur und inhaltlicher Hierarchie
PROTOTYP · LOW FIDELITY

wireframes

In der frühen Phase entwickelte ich Low-Fidelity-Wireframes, um Struktur, Informationshierarchie und Spielfluss zu definieren.

Der Fokus lag auf Klarheit, Wiederholbarkeit und einfacher Orientierung innerhalb des Spiels.

Startseite der Planetary Health Challenge Website auf Desktop mit klarer Informationsstruktur und inhaltlicher Hierarchie
PROTOTYP · HIGH FIDELITY

High Fidelity

Auf Basis der Wireframes wurde der komplette User Flow visuell ausgearbeitet. Kontraste, Abstände und Interaktionszustände wurden iterativ verfeinert.

Jede visuelle Entscheidung sollte das Spielverständnis unterstützen, nicht davon ablenken.

Produktdarstellung einer Sicherheitskamera mit klarer, technischer Bildsprache
Produktdarstellung einer Smartwatch zur Kommunikation von Sicherheit und Alltagstauglichkeit
Social-Media-Story mit Smartphone und Sicherheitsprodukt zur Einführung in das Thema mobile Sicherheit
Social-Media-Story zum Thema Handscanner mit Hinweis auf einfache und sichere Zugangskontrolle
Social-Media-Story mit Smart-Home-Produkt zur Visualisierung intelligenter Sicherheitslösungen
Produktdarstellung einer Sicherheitskamera mit klarer, technischer Bildsprache
Produktdarstellung einer Smartwatch zur Kommunikation von Sicherheit und Alltagstauglichkeit
Social-Media-Story mit Smartphone und Sicherheitsprodukt zur Einführung in das Thema mobile Sicherheit
Social-Media-Story zum Thema Handscanner mit Hinweis auf einfache und sichere Zugangskontrolle
Social-Media-Story mit Smart-Home-Produkt zur Visualisierung intelligenter Sicherheitslösungen
prototype · MOBILE UI

Mobile Version

Die finalen Mobile-Mockups zeigen eine reduzierte, barrierefreie Oberfläche mit klarer visueller Hierarchie.Ergebnis:

Ein modernes Logikspiel, das für farbenblinde Nutzer:innen zugänglich ist und für alle anderen intuitiver wirkt.

Startseite der Planetary Health Challenge Website auf Desktop mit klarer Informationsstruktur und inhaltlicher Hierarchie
ITERIEREN · NÄCHSTE SCHRITTE

Mögliche Iterationen

Mögliche nächste Schritte wären User-Profile mit Fortschrittslogik, dezente Gamification-Elemente sowie erweiterte Spiellevel. Ziel wäre es, Motivation und Langzeitbindung zu erhöhen, ohne die meditative Grundstimmung des Spiels zu brechen.

work

next projekt

Eine kuratierte Auswahl an Projekten, die meinen Ansatz zeigen: klare visuelle Lösungen, funktionale Interfaces und durchdachte digitale Konzepte.

la crispeta circ social

let´s create

something

together