MONA Onlineshop

Neues Designsystem mit flexibler Pattern Library

MONA-Designsystem

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 Umstellungs­prozess 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 multimandanten­fähigen Designsystems ist. Da die Pattern Library mit dem produktiven Code verbunden ist, lassen sich von nun an Änderungen und Weiter­entwick­lungen 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.

MONA Designsystem: das Farbsystem
MONA Designsystem: das Farbsystem

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.

MONA Designsystem: Interaktionskonzept

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.

Das Design-System in Aktion

Sketch

Invision

Adobe Photoshop

Adobe Illustrator

Adobe After Effects

Visual Studio Code

Gitlab

Jira

Confluence

Kunde

K – Mail Order GmbH & Co. KG (KLiNGEL-Gruppe)

Unsere Leistungen

Designstrategie · Art Direction · UX & Interface Design · Atomic Design · Illustration und Icondesign

Launch

Mai 2019

 

Ergebnis

www.mona.de
www.mona.ch
www.mona-mode.at