Die wichtigsten Lektionen, die ich beim Erstellen eines beliebten Designsystems gelernt habe

Illustration von der super talentierten Maya Ealey

2012 startete ich ein kleines Nebenprojekt, um die Entwurfsmuster und das Benutzererlebnis von 12 Softwareprodukten bei Atlassian zu standardisieren. In den nächsten 3 Jahren wurde dieses kleine Nebenprojekt zu einem sehr großen Projekt, das zu meiner Vollzeitbeschäftigung wurde. Es umfasste das Erstellen und Versenden mehrerer Versionen des Atlassian Design Systems und gründete das Design Platform-Team (das heute noch besteht, aber mit vielen weiteren) Menschen), um Systeme zu warten und zu nutzen, die in der gesamten Atlassian-Produktsuite funktionieren.

Angesichts der zunehmenden Diskussionen über Designsysteme in den letzten Jahren werde ich gelegentlich um Tipps oder Erkenntnisse gebeten, die ich aus meiner Erfahrung mit dem Aufbau des Designsystems bei Atlassian gewonnen habe. Wenn Sie erwogen haben, eines für Ihr Produkt oder Ihr Unternehmen zu erstellen, gerade eines zu erstellen oder es ausprobiert und aufgegeben haben, können Sie mit diesen Erkenntnissen hoffentlich ein besseres Design-System für Ihr Unternehmen erstellen.

Bei Asana stehen wir am Anfang unserer Reise, um ein ganzheitliches Designsystem aufzubauen. Ich habe festgestellt, dass das Nachdenken über diese Lektionen uns geholfen hat, das Team und das Unternehmen auf den Erfolg vorzubereiten, damit wir den wahren Wert eines Konstruktionssystems liefern können.

1. Beginnen Sie damit, Dinge zu tun, die nicht skalierbar sind

Die allererste Version des Atlassian Design Systems enthielt ungefähr 20 statische HTML-Dateien, die ich auf einem Mac Pro unter meinem Schreibtisch hosten ließ. Diese Dateien enthielten keine Vorlagen, keine Versionskontrolle, ich hatte das CSS aus unseren Produkten importiert und das Markup für jede Komponente selbst geschrieben. Diese Version war mühsam zu aktualisieren und nicht skalierbar, aber es fanden genug Leute Wert darauf, dass ich inspiriert war, mehr Zeit und Mühe zu investieren, um das Atlassian Design System zu entwickeln.

Ohne etwas zu tun, das nicht skaliert werden konnte, hätten wir möglicherweise viel länger gebraucht, um anzufangen. Wenn Sie an Ihrem System arbeiten, sollten Sie nicht zu sehr von der Überentwicklung eines nahtlosen, perfekten Workflows besessen sein, sondern nach kritischen Einstiegsmöglichkeiten suchen und nur dann Fortschritte erzielen, wenn dies funktioniert.

2. Waffen Sie Ihre Richtlinien nicht aus

Wenn Sie ein Design-System erstellen, damit andere keine Fehler machen, die Sie (und nur Sie!) Später beheben müssen, können Sie dies möglicherweise nicht mit der richtigen Einstellung angehen.

Das Ziel eines Konstruktionssystems ist es, sich selbst (und Ihr Konstruktionsteam) zu skalieren, um Produkte schneller zu erstellen und alle zu befähigen, bessere Konstruktionsentscheidungen zu treffen.

Ein Design-System ist ein Instrument zur Ermächtigung und keine Waffe zur Kontrolle des Designs.

Es ist wirklich wichtig, das Regelbuch nicht auf Menschen zu werfen und es zu töten. Versuchen Sie stattdessen, sich dem System mit der Philosophie zu nähern, dass ein Design-System ein Werkzeug ist, um das Design in Ihrem Unternehmen zu demokratisieren. Dieser Ansatz öffnet wirklich die Türen, so dass die Menschen dazu beitragen und ein Teil davon sein wollen. Denken Sie daran, ein Design-System ist ein Instrument zur Ermächtigung und keine Waffe zur Kontrolle des Designs.

3. "Lassen Sie uns einfach alles neu gestalten"

Widerstehen Sie dem Drang, dies zum Anlass zu nehmen, Ihr Produkt neu zu gestalten. Wenn Sie ein System erstellen und gleichzeitig Ihre App neu gestalten, werden Sie erheblich langsamer. Es ist viel einfacher zu dokumentieren, was Sie heute haben, sowohl die guten als auch die schlechten Muster, und anschließend die schlechten Muster durch eine Neugestaltung der visuellen Sprache zu beheben.

Bei Atlassian gab es viele Versuche, die Produktsuite neu zu gestalten, bevor die Grundlagen für die Dokumentation unserer Systemkomponenten zufriedenstellend waren. Es hat lange gedauert, die Architektur des Systems zu erstellen, aber es hat Atlassian später erleichtert (und beschleunigt), die visuelle Sprache zu aktualisieren, da die Grundlagen solide waren.

4. Erhalten Sie funktionsübergreifende Unterstützung für Ihr Designsystem

Ich glaube, dass die Schaffung eines Designsystems keine akademische Übung ist. Wenn niemand das System verwendet oder Ihr Team dadurch nicht schneller vorankommt und bessere Entscheidungen trifft, verschwenden Sie möglicherweise Ihre Zeit.

Indem Sie andere dazu bringen, Ihren Tätigkeiten zu folgen und zur Verbesserung der Muster und Richtlinien beizutragen, erhalten Sie das Buy-in und die Unterstützung, die Sie benötigen, um wirklich etwas zu bewirken und großartige Produkte zu entwickeln. Ich kann nicht genug betonen, wie wichtig dies für den Erfolg Ihrer Systeme ist.

Im Jahr 2013 lag das Verhältnis von Designer zu Ingenieur im Bereich von 1 Designer pro 15 bis 20 Ingenieure. Während ich heute bei dem Gedanken an diese Zahl schaudere, habe ich damals versucht, dieses Ungleichgewicht zu meinem Vorteil zu nutzen. Etwas, das mir geholfen hat, die technische Organisation bei Atlassian auf meine Seite zu bringen, war, während ihrer ersten Einstiegswoche im Unternehmen einen Vortrag für Neueinsteiger zu halten. Ungefähr 15 Leute waren jede Woche dort und ich würde sie dazu bringen zu verstehen, was wir von Tag 1 an versuchten. Zum Beispiel würde ich eine Geschichte darüber durchgehen, wie wir 44 verschiedene Dropdowns hatten Menüs (keine Übertreibung), aber wir haben jetzt ein und hier ist, wie Sie es verwenden sollten.

Im Laufe des Jahres 2013 und da sich die Größe von Atlassian fast jedes Jahr verdoppelte, hatte ich im Grunde genommen etwa 500 Personen über die Bedeutung unseres Designsystems und dessen Einsatzmöglichkeiten informiert. Ich fand das eine sehr effektive Möglichkeit, die Unternehmenskultur in Bezug auf Design zu verändern.

5. Gehen Sie über einen Styleguide hinaus

Ein Design-System (oder eine Richtlinie) unterscheidet sich von einem Style-Guide. Es ist relativ einfach, alle Komponenten in einer Skizzendatei zu haben. Alle primären Schaltflächen haben dieselbe Farbe, oder Sie verwenden ein 8-Pixel-Raster. Aber wann verwende ich einen Primärknopf anstelle eines Sekundärknopfes? Welche Art von Beschriftungen sollten die Schaltflächen haben? Wenn ein primärer und ein sekundärer Knopf zusammen sind, welcher ist links?

Diese Fragen sollten von einem Design-System gelöst werden und nicht nur die Pixelwerte Ihrer Komponenten dokumentieren. Viele Designteams lassen diesen Aspekt bei der Erstellung ihres Systems aus und verpassen letztendlich einen starken Nebeneffekt der Systemarbeit.

Wie bereits erwähnt, war das Atlassian-Designteam zu Beginn des Jahres 2013 relativ klein (~ 13 Mitarbeiter) im Vergleich zum Ingenieurteam (~ 300 Mitarbeiter). Ein Vorteil der Aufnahme schriftlicher Richtlinien war, dass die Ingenieure ohne Designer große Fortschritte erzielen konnten. Dies bedeutete, dass wir aufhören konnten, Bildschirme in Sketch zu entwerfen, stattdessen auf ein Whiteboard springen und einen Flow Brainstorming durchführen oder größere Produktprobleme bearbeiten konnten, die es im Vorfeld gab.

6. Lassen Sie das System von jemandem beaufsichtigen, stellen Sie jedoch sicher, dass alle dazu beitragen

Wir haben ein zentrales Modell verwendet, das es jedem Designer im Unternehmen ermöglichte, einen Beitrag zu leisten. Wir hatten auch ein ca. dreimonatiges Rotationsprogramm, in dem Designer und Ingenieure von ihren jeweiligen Produkten abgezogen wurden und mit dem Design Platform-Team zusammenarbeiteten, um das System voranzutreiben. Sie würden einen großen Beitrag leisten, während sie in unserem Team waren, und dann zu ihren ursprünglichen Produktteams zurückkehren, um überzeugte Befürworter des Systems zu sein.

Es ist sehr, sehr wichtig, dass jemand das System überwacht. Diese Person (ich bei Atlassian) ist wahrscheinlich eine Designerin, die als Produktmanagerin arbeitet. Sie sollten das System schützen, aber sehr vorsichtig sein, um keine Umgebung zu schaffen, in der die Leute es ablehnen und auf Abwege geraten. Vergessen Sie nicht, der Zweck des Systems ist es, jeden im Unternehmen zu einem besseren Designer zu machen.

Sie möchten mehr über Asana erfahren? Wir haben eine nette Seite unter https://asana.design mit ein wenig darüber, wer wir sind und was wir tun. Darüber hinaus stellen wir Designmanager und Produktdesigner in unserem Büro in San Francisco ein, einem der besten Arbeitgeber für 2018 in den USA! (Wir können Sie umsiedeln, wenn Sie derzeit nicht in der Bay Area ansässig sind.)

Wenn Ihnen dieser Beitrag gefallen hat, möchten Sie vielleicht unserer Veröffentlichung folgen, um weitere Artikel von Asana Design zu erhalten