UX-Optimierung im mStudio: mehr Speed, mehr Accessibility

Mit dem neuen Designsystem legen wir die technische Grundlage für eine schnellere, flexiblere und zukunftssichere Weiterentwicklung des mStudios. Bei der Konzeption standen drei zentrale Aspekte im Fokus: Performance, Barrierefreiheit (Accessibility) und eine optimierte Developer Experience. Eine Dokumentation ermöglicht Contributoren von Extensions,  unsere Komponenten zu nutzen und unsere Design Patterns besser zu verstehen. Die Entscheidung für den Refresh war letztlich nicht nur intern motiviert, sondern basierte auch auf Kundenfeedback. 

Ein Beispiel: Der grüne „Anlegen“-Button wurde häufig übersehen, weil er außerhalb des eigentlichen Inhaltsbereichs lag. Solche Hinweise waren für uns ein klarer Auftrag die UX nicht nur optisch zu optimieren, sondern auch funktional zu verbessern. Die neue Positionierung direkt an der Liste wurde in Nutzertests deutlich intuitiver wahrgenommen. 

Eine bessere Accessibility war von Anfang an ein zentrales Ziel des Refreshs. Uns ging es dabei um mehr als nur Kontrastwerte zu prüfen. Deshalb haben wir gezielt an mehreren Stellen angesetzt: 

Farbsystem: Wir nutzen jetzt neutrale Grautöne als Basis, um Ruhe und Struktur zu schaffen. Gezielte Farbakzente mit unserem mittwald Blau lenken den Fokus auf zentrale Funktionen und erhöhen die visuelle Orientierung.  

Visuelle Hierarchie: Primäre Aktionen sind klar hervorgehoben, Inhalte sind logisch gegliedert und wiedererkennbare visuelle Muster werden konsistent eingesetzt. So verringern wir die kognitive Belastung und unterstützen die Nutzerführung. 

Technische Umsetzung: Durch die Rückkehr zu Webstandards – HTML und CSS – funktionieren Tastaturnavigation und Screenreader-Unterstützung jetzt verlässlich. Gleichzeitig verzichten wir auf unnötige Skripte, was auch die Ladezeit reduziert. 

Neben Barrierefreiheit bringt das neue Designsystem viele Verbesserungen mit, die sich im Arbeitsalltag spürbar positiv auswirken: 

Wir setzen konsequent auf HTML und CSS – und verabschieden uns von komplexen Eigenentwicklungen. Das bringt gleich mehrere Vorteile: 

• Schnellere Ladezeiten 
• Einfachere Wartung und Weiterentwicklung 
• Bessere Integration mit externen Systemen 

Ein zentrales Element dabei sind sogenannte Design Tokens – sie regeln zentral Farben, Abstände und Schriftgrößen. Dadurch ermöglichen wir einen direkteren Austausch zwischen UX und Development. 

Unsere Komponenten stellen wir auch externen Entwickler*innen zur Verfügung – z. B. für die Nutzung auf unserem Marktplatz. So fördern wir eine offene und konsistente Weiterentwicklung des mStudios durch die Community. 

Außerdem haben wir beispielsweise die Listenansicht überarbeitet. Inhalte werden jetzt in kleinen Paketen nachgeladen. Das macht das System bei großen Datenmengen deutlich performanter – ein Wunsch, den wir aus vielen Feedbacks kannten. 

Menschen sind Gewohnheitstiere, vertraute Strukturen und Muster geben Sicherheit. Deshalb setzen wir verstärkt auf wiedererkennbare Design-Patterns: Elemente wie Buttons, Filter oder Listen verhalten sich einheitlich, das schafft Vertrauen und reduziert den Aufwand, sich neu orientieren zu müssen. 

Mit dem Refresh des mStudios machen wir nicht einfach nur die Oberfläche hübscher – wir schaffen eine UX-Grundlage, die nachhaltiger, zugänglicher und zukunftsfähiger ist. Das Designsystem wurde neu gedacht: auf Basis des Kunden-Feedbacks, mit Blick auf moderne Webstandards und durch die Brille echter Nutzungsszenarien. 

Unser Anspruch bleibt eine durchdachte UX, die den Bedürfnissen von Agenturen und Freelancern gerecht wird. Deshalb laden wir alle Nutzer*innen herzlich ein, weiterhin ihre Ideen und Anregungen mit uns zu teilen. So können wir das mStudio gemeinsam stetig besser machen.