Kenkō Design System

Ein Design System für eine Gesundheits-App, die den Schwerpunkt auf tägliche Aktivität, Ernährung und ausreichende Wasseraufnahme legt.

Design System

Für Kenkō haben wir ein barrierefreies Designsystem entwickelt, das sowohl in einem hellen als auch in einem dunklen Theme verfügbar ist. Die Farben sind kontrastreich und der Fokus liegt auf Klarheit, Minimalismus und Einfachheit.

Unser Prozess

Brainstorming

Wir starteten unseren Prozess mit einem Brainstorming zu möglichen Funktionen für Kenko. Dabei sammelten und gruppierten wir unsere Ideen in die Bereiche Aktivität, Ernährung und Wasser. Schnell beschlossen wir, diese Themen in separaten Abschnittskarten darzustellen, damit der Benutzer auf einen Blick seine wichtigsten Gesundheitsdaten sehen kann.

Mood Board

Nachdem wir die ersten Funktionen festgelegt hatten, erstellten wir ein Moodboard für Farben und Komponenten, um Inspirationen für die Wireframes zu sammeln, die wir im nächsten Schritt entwickelten. Dabei ließen wir uns von Apps wie Apple Health, Apple Fitness und Family inspirieren, die ähnliche UI-Elemente und Funktionen aufweisen. Unser Ziel war es, die App wirklich einfach und benutzerfreundlich zu gestalten, damit jeder sie schnell verstehen konnte.

Wireframes

Anschließend entwarfen wir erste Wireframes und Komponenten für UI-Elemente, die wir dann mit verschiedenen Farben einfärbten, um uns darauf zu einigen, welche Farben am besten zu unserem Konzept passen. Zur Generierung unserer Farbpaletten wählten wir das Figma-Plugin „Supa Palette“, das Paletten mit präzisen Anweisungen generiert. Wir hatten unsere drei Hauptfarben, die wir für die verschiedenen Kategorien der App verwenden wollten: Aktivität, Ernährung und Wasser. Basierend auf ihnen erstellten wir eine Farbpalette für die gesamte App, die sowohl im Dunkel- als auch im Hellmodus funktioniert. Wir stellten außerdem sicher, dass die Farben einen starken Kontrast aufweisen, damit die App für alle zugänglich ist.

Design System

Der nächste Schritt war die genaue Gestaltung der App-Oberfläche mit Komponenten sowie ausgewählten Schriftarten und Farben. Daraus entstand dann das gesamte Designsystem von Kenkō.