MONA Onlineshop

Neue Gestaltung für die Best-Ager-Marke

Die Aufgabe:

Migration des MONA-Onlineshops auf das neue modulare Designsystem der KLiNGEL-Gruppe, um so an Flexibilität, Effizienz und Skalierbarkeit zu gewinnen. In der Funktion als Visual Designer und Berater sind wir gefragt, den Umstellungsprozess zu begleiten und die markenkonforme Umsetzung sicherzustellen.

Unsere Umsetzung:

Zunächst analysierten wir das bisherige Userinterface und ermittelten die zentralen Designparameter. Diese übertrugen wir auf die Pattern Library, die Teil des multimandantenfähigen Designsystems ist. Da die Pattern Library mit dem produktiven Code verbunden ist, lassen sich von nun an Änderungen und Weiterentwicklungen im Handumdrehen auf den gesamten Shop ausrollen.

Das MONA Designsystem:

Die Farbpalette

Weniger ist mehr: eine aufgeräumte und aufs Wesentliche reduzierte Farbpalette sorgt für Konsistenz im User Interface.

Die Überschriften

Nur vier genau aufeinander abgestimmte Überschriften-Styles benötigen wir, um Textinhalte hierachisch und optisch sinnvoll zu strukturieren. Unser Überschriften-Baukasten kommt im gesamten Shop zum Einsatz, sei es auf Teasern, auf der Produktdetailseite, im Bestellprozess oder auf Textseiten, wie AGBs oder Impressum.

MONA Designsystem: Zuweisungen von Headline-Styles

Das Interaktionskonzept

Ein durchdachtes Konzept legt fest, wie Buttons, Links und alle weiteren Interaktionselemente aussehen und auf Nutzerinteraktionen reagieren. Dieses einheitliche System bringt Konsistenz in die User Experience und macht den Shop für die Kundin vorhersebar und verständlich.

Barrierefreiheit

MONA richtet sich vor allem an die Best-Ager unter den Konsumenten. Da die Differenzierungsfähigkeit im fortschreitenden Alter immer mehr abnimmt, legten wir besonders strenge Maßstäbe an die Gestaltung. Hoher Kontrast, gut lesbare Schrift und große Bedienelemente sind die Basis für eine positive Nutzererfahrung.

Um die Wahl unserer Interaktionsfarben zu überprüfen, setzten wir spezielle Farbkontrast-Checker ein.

Unsere Basisschriftgröße von 16 px plus konstrastreicher Textfarbe sorgt für eine sehr gute Lesbarkeit.

Komponenten

Das vollständige User Interface setzen wir analog dem Atomic Design Prinzip aus Einzelkomponenten zusammen. Damit sich dabei immer ein stimmiges Gesamtbild ergibt, bringt jede Komponente eine eigene Abstands- und Verhaltenslogik mit.