Plasma-ontwerpsysteem

Een productontwerpsysteem maken en documenteren

Deze case study is bedoeld om te beschrijven hoe we een ontwerpsysteem bij WeWork hebben gecreëerd. Ik deel inzicht in ons proces, productontwerp, de tools die we hebben gebruikt om het systeem te maken en te implementeren, en ook hoe we het systeem documenteren en delen met ons team.

Een voorbeeld-gebruikersinterface van een van onze producten met behulp van het plasma-ontwerpsysteem

Invoering

WeWork creëert inspirerende gedeelde werkruimtes, met een nadruk op de gemeenschap. We ontwerpen en bouwen onze eigen interne digitale tools om aan onze zakelijke behoeften te voldoen en om ons wereldwijde netwerk van gebouwen en leden te beheren. ‘Plasma’ is een ontwerpsysteem dat is gemaakt voor deze interne bedrijfstools.

Plasma als concept is opgericht door een van onze digitale creatieve leads, Nick Stamas. Nick introduceerde onze ingenieurs bij het concept van het bouwen van een systeem in React JS en Sass en heeft sindsdien de bouw van het systeem geleid. Ik leid het ontwerp, de creatieve leiding en documentatie. Ik werk ook samen met productontwerper Deena Edwards, die Plasma op onze producten toepast.

Stap 1: Ontwerpverkenning

We begonnen met experimenteren met drie verschillende interne producten waarop het systeem zou worden toegepast - het ontdekken, vaststellen en stresstesten van een stijl (en) en bibliotheek van componenten en patronen. De richting, gebruikersinterface (UI) en stijl zijn in de loop van de tijd veranderd, wat ik hieronder heb geprobeerd vast te leggen om de voortgang en het bereik van de geteste producten te tonen.

Schets tekengebieden met eerste verkenningen

Het is belangrijk op te merken: de ontwerprichting van dit systeem werd sterk beïnvloed door WeWork's digitale merkrichtlijnen, bekend als de WeWork Digital Foundations. Hier kunt u hier meer over lezen.

Eenvoudig, duidelijk en schoon

Onze interne tools zijn allemaal data-zware, webgebaseerde producten. Eenvoud, leesbaarheid en laadtijd staan ​​voorop. We wisten al vroeg dat we streefden naar een heldere en schone esthetiek.

Kleurtheorie

Het systeem is overwegend wit, zwart en grijs. Het is belangrijk dat het ontwerp de inhoud niet afleidt, dus subtiliteit is de sleutel. Helderdere kleuren worden gebruikt om betekenis over te brengen. Geel wordt gebruikt voor primaire acties, omdat geel een van WeWork's belangrijkste merkkleuren is. Blauw is voor navigatielinks. Rood is voor waarschuwingen en waarschuwingen. We gebruiken ook paars als tertiaire kleur, omdat het een oude kleur is in onze interne tools en we onze producten vertrouwd wilden houden.

Een overeenkomend lettertype

Plasma gebruikt uitsluitend Helvetica, een eenvoudig en gedurfd lettertype. Op Mac-computers is Helvetica vooraf geïnstalleerd en op alle computers die niet terugvallen op Arial (een vergelijkbaar, maar webveilig lettertype). Dit is belangrijk, omdat er geen scripts van derden nodig zijn om het lettertype te laden, wat betekent dat pagina's sneller worden geladen.

Alle staten ontwerpen. Een glimp van ons hoofdschetsbestand voor het Plasma-ontwerpsysteem

Productontwerp

Ik weet zeker dat je ‘UI-kit — gratis te downloaden!’ Vaak op Behance en Dribbble hebt gezien. Sommigen zien er mooi uit! Maar velen van hen zijn uiteindelijk gebrekkig, tenzij ze zijn ontworpen met echte producten, inhoud en gegevens. Pas de inhoud nooit aan het ontwerp aan, het systeem moet met elke inhoud werken. Ontwerp niet alleen voor het beste scenario - houd rekening met alle scenario's.

Het is van vitaal belang om een ​​ontwerpsysteem te maken met producten waarop het zal worden toegepast, met echte gegevens en problemen.

Ons doel is niet om het mooiste systeem te maken, maar om een ​​systeem te ontwerpen dat het beste aan onze behoeften voldoet - zakelijke behoeften in het geval van Plasma, maar de behoeften van klanten voor sommige systemen. We willen natuurlijk prachtige producten maken, maar alleen om de gebruikerservaring (UX) te verbeteren.

Hieronder vindt u een klein inzicht in de drie producten die het systeem hebben gevormd:

Product 1: CMS (ook bekend als ‘Maggie’)

Met ons CMS-product kunnen onze marketing- en groeiteams onze gebouwen en markten toevoegen, bewerken en beheren op onze kernmarketingwebsite: wework.com. Vóór Plasma was ons CMS gewoon een reeks HTML-tabellen met standaard CSS-aanpassingen. Plasma heeft de gebruikersinterface en UX van deze producten gevormd. Hieronder vindt u een klein voorbeeld van UI's van dit product. U kunt op de afbeeldingen klikken om elk formaat te bekijken.

Monsters van het CMS-product met het Plasma-ontwerpsysteem erop toegepast

Product 2: Spacestation

Ons Spacestation-product is een van onze meest gebruikte tools op het hoofdkantoor van WeWork en in elk van onze gebouwen internationaal. Het is een data-zwaar product om een ​​enorme database met informatie en facturen te beheren met betrekking tot onze leden en gebouwen. Dat zijn veel tabellen, formulierinvoer, filters en navigatie - het perfecte testbed voor een productontwerpsysteem! Ik werkte samen met Deena Edwards, de hoofdproductontwerper van Spacestation, om het systeem te concept, toe te passen, te testen en te itereren zoals het op dit product van toepassing was.

Voorbeeld, concept-UI van het Spacestation-product met het Plasma-ontwerpsysteem erop toegepast

Product 3: gegevensvraag

De aard van de activiteiten van WeWork betekent dat we veel gegevens hebben! In Digital betekent dit dat we over een schat aan gegevens beschikken die we kunnen gebruiken om betere producten te bouwen om aan de behoeften van onze klanten te voldoen. Het idee voor dit product kwam op een zeer geschikt moment - we waren al begonnen met het concept van het Plasma-ontwerpsysteem en wisten dat dit nieuwe product zowel het systeem kon gebruiken als verder kon gaan met de extra behoefte aan gegevens. Ik werkte samen met ons Data engineering-team om dashboards en dataquery-tools te ontwerpen. Een paar van die verkenningen zijn hieronder opgenomen.

Ontwerp verkenningen voor een gegevensproduct met behulp van het Plasma-ontwerpsysteem. Alle getoonde gegevens zijn gemaakt voor openbare presentatie!

Stap 2: Patronen en componenten

Na dagen van verkenning, beoordelingen en iteraties kwamen we tot een stijl waar we blij mee waren. De taak was nu om een ​​uitgebreide reeks patronen en componenten te maken, rekening houdend met alle staten en scenario's - in wezen een uitgebreide UI-kit voor ons team te gebruiken.

Ons systeem bestaat uit fundamentele elementen zoals gedefinieerde tekststijlen voor kopteksten en inhoud, een kleurenpalet, wat we patronen en componenten noemen, en sjablonen.

Consistente UI-patronen en componenten maken een enorm verschil in het begeleiden van een gebruiker door een product.

patronen

Patronen verwijst naar terugkerende of altijd aanwezige elementen of werkwijzen in een product. Voorbeelden hiervan zijn navigatie, kaarten, tabellen, lege of laadstatus, meldingen, waarschuwingen en modals. Patronen zijn veelzijdig, kunnen componenten bevatten en aan elkaar worden gekoppeld om een ​​sjabloon te vormen.

Components

Componenten verwijst naar onderscheidende UI-elementen die steeds opnieuw in een product worden gebruikt - normaal gesproken bruikbaar, soms om betekenis over te brengen. Een paar voorbeelden zijn knoppen, ingangen, selecties, schakelaars, avatars en knopinfo.

Het ontwerpsysteem (en middelen voor de documentatie) in uitvoering in Sketch

Volg deze link voor een korte rondleiding door het hoofdschetsbestand (zie hierboven) met alle patronen en componenten voor het ontwerpsysteem.

Beste tool voor de klus

Onze favoriete tool voor UI-ontwerp is Sketch. De functies die Sketch geweldig maken voor productontwerp, maken het bijzonder krachtig voor systeemontwerp. Wanneer u honderden bewerkbare symbolen en gemakkelijk toepasbare tekststijlen maakt, wordt de eenvoud van Sketch cruciaal.

Op reactievermogen

Plasma is ontworpen om responsief te zijn. Hoewel het eenvoudig is om responsieve componenten te bouwen, is het niet zo eenvoudig om responsief te mockupen. Of dat dachten we. Het is belangrijk om web-UI's te ontwerpen die op verschillende browserbreedtes werken. Gelukkig biedt Sketch de mogelijkheid om elementen in te stellen om op verschillende manieren te reageren naarmate ze groter of kleiner worden. Met een combinatie van instellingen, groepen en symbolen kunt u een eenvoudige responsieve gebruikersinterface maken in Sketch. Hoewel dit je niet zal helpen met breekpunten, is het krachtig om snel te zien hoe en of het ontwerp in verschillende browserformaten werkt. Daarom hebben we onze bibliotheek met patronen en componenten gemaakt om responsief te zijn.

Responsief ontwerp in Sketch

Lees dit artikel voor een inleiding tot responsief ontwerp in Sketch.

Stap 3: De kracht van een sjabloon

Omwille van de consistentie in onze producten is het belangrijk dat we het ons team zo eenvoudig mogelijk maken om met Plasma te ontwerpen. Gelukkig maken de bewerkbare symbolen en tekststijlen van Sketch het eenvoudig om een ​​ontwerpsysteem te distribueren en te onderhouden.

Het ontwerp van een product kan gemakkelijk mislopen als ons team het systeem niet eenvoudig in hun werk kan toepassen.

We hebben een hoofdschetsbestand (voor altijd in uitvoering) voor heel Plasma. Het laatste wat we willen, zijn mensen die vanuit dit masterbestand werken, per ongeluk dingen bewerken of verwijderen! Daarom hebben we een Sketch-sjabloon gemaakt die ons team kan gebruiken, gehost op Dropbox. De sjabloon heeft een breed scala aan bewerkbare symbolen, alle tekststijlen, merkkleuren en een standaard tekengebied dat klaar is om te starten - waardoor het eenvoudig wordt om snel een gebruikersinterface op te zetten en samen te stellen met behulp van plasma.

Het werken met gevestigde patronen en componenten stelt ons in staat ons te concentreren op gebruikerservaring, probleemoplossing en het bouwen van betekenisvolle functies en producten.

Dekt alle scenario's

We houden rekening met alle 'staten' in het systeem en er zijn symbolen voor elk van deze staten. Een formulierinvoer heeft bijvoorbeeld een tijdelijke aanduiding, zweven, focus, ingevuld, fout en uitgeschakeld. In het onderstaande voorbeeld voor onze multi-select component, ziet u aan de rechterkant het symbool "multi-select / placeholder" is geselecteerd. Van daaruit heeft u toegang tot een vervolgkeuzelijst met alle andere symbolen - en wijzigt u het symbool in "multi-select / ingevuld" of "multi-select / error". Dit is geweldig voor het ontwerpen en in kaart brengen van productstromen!

Alle toestanden van formulierinvoer, knoppen enz. Worden in symbolen weergegeven (in schets)

Craft Library

Een geweldig hulpmiddel dat we ook gebruiken is de Craft Library-plug-in van InVision voor Sketch. Hierdoor konden we een gedeelde bibliotheek met middelen (gehost op Dropbox) maken die ons team kan gebruiken om elementen naar hun ontwerpen te slepen en neer te zetten.

Update (december 2017): we gebruiken nu Sketch Libraries, in plaats van Craft Library. Het doet min of meer hetzelfde, alleen veel efficiënter! Alle wijzigingen die u aanbrengt in het hoofdschetsbestand voor de bibliotheek, worden gesynchroniseerd met alle ontwerpen met behulp van de bibliotheekcomponenten. Heel cool.

Het hebben van een vooraf ingestelde bibliotheek met knoppen, ingangen, stijlen, etc. vermindert het risico dat elementen herhaaldelijk opnieuw worden ontworpen.
Craft Library aan het werk in Sketch. Dit is een glimp van ons hoofdschetsbestand voor plasma.

Stap 4: Documentatie van een ontwerpsysteem

Bij het maken van een ontwerpsysteem is het belangrijk om er rekening mee te houden dat u niet de enige ontwerper (of ontwikkelaar) bent die ermee werkt.

Het letterlijk documenteren van het ontwerpsysteem was de grootste uitdaging voor mij in dit project. Normaal maak ik geannoteerde specificaties - meestal zijn dit een reeks .psd- of .sketch-bestanden, die bij het ontwerp of de ontwerpen moeten worden gevoegd. Een goed voorbeeld van deze aanpak is te zien in mijn case study voor Adobe Portfolio. Hoewel specificaties elk denkbaar detail kunnen bevatten, kunnen dingen nog steeds worden gemist of verkeerd begrepen wanneer een nieuwe of vervangende ontwerper in je schoenen stapt. We wilden het beter doen met plasma!

Hoe documenteer je een ontwerpsysteem?

Ik begon te lezen en te onderzoeken hoe andere teams dit hadden gedaan. Gelukkig biedt het internet hier veel antwoorden op en veel bedrijven hebben hun documentatie openbaar gemaakt.

Hier is een nuttige lijst met koppelingen naar alle documentatie van het online ontwerpsysteem die ik heb gevonden. Ik hoop dat het helpt :)

Mijn oorspronkelijke doel, zoveel geweldige voorbeelden online te hebben gezien, was om een ​​website te maken om het systeem, de specificaties, het voorbeeldgebruik te demonstreren en richtlijnen voor alle patronen en componenten te specificeren. Het zou fungeren als een snelle referentie of een bijbel om in detail te bestuderen.

Ik wilde echter niet worden tegengehouden door het ontwerp, de bouw en de tijdsdruk van het maken van een website hiervoor. Dus om te beginnen heb ik eenvoudig een nieuw Google-document gemaakt en ben ik gaan typen. Naarmate het document groeide, realiseerde ik me dat het precies deed wat we nodig hadden - de enige reden om een ​​openbare, merkwebsite voor dit te maken zou zijn als een 'pride-project' voor WeWork Digital, of als een bron als we het systeem open-source maken .

Maar voorlopig bleek Google Documenten het perfecte medium te zijn! Het is gemakkelijk toegankelijk voor ons hele team, en ze kunnen inline reageren, wat geweldig is voor feedback. De functie ‘Documentoverzicht’ van Google Documenten, plus de mogelijkheid om te linken / verankeren aan bladwijzers en koppen in het document, zorgde voor voldoende navigatie. Jobs is goed! ... zoals we zeggen in het noorden van Engeland :)

Voorbeeld van onze documentatie

Omdat de documentatie in een privé-Google-document is, heb ik hieronder enkele schermafbeeldingen gemaakt om een ​​goed idee te geven van hoe het is gebouwd, ingedeeld en wat het bevat. U kunt op de afbeeldingen klikken om elk formaat te bekijken.

Plasma-ontwerpsysteemdocumentatie in een Google-document

Update: december 2017

Sinds het publiceren van dit artikel, ongeveer 11 maanden later, is de documentatie geëvolueerd naar een website die u kunt zien! We gebruikten GitHub om versiebeheer en eenvoudige toegang door ons team mogelijk te maken om te schrijven en bij te dragen aan de documentatie. U schrijft in markdown, en met een beetje CSS-aanpassing kunt u de documentatie aanpassen aan uw merk! GitBook is niet perfect, het reageert niet, maar het doet het wel .

Bekijk de documentatie van het Plasma-ontwerpsysteem

Achter de schermen (download)

Ik heb een kleine bron gemaakt met inzicht in hoe dit ontwerpsysteem in Sketch is opgezet, inclusief een schetsbestanddownload en een fragment uit de documentatie. Bekijk de bron in de onderstaande link:

Stap 5: Engineering van een ontwerpsysteem

Terwijl de documentatie vorm kreeg, had het ontwerp een manier nodig om de build en integratie van het systeem efficiënt te communiceren en te volgen naar de ontwikkelaars. We hebben ervoor gekozen (en aanbevolen) om GitHub hiervoor te gebruiken. We hebben 'problemen' gemaakt voor specifieke componenten - het delen van previews van het ontwerp, de specificaties en CSS / Sass om het ontwikkelingsproces te vergemakkelijken. Op deze manier kunnen onze ingenieurs deze kleine stukjes stuk voor stuk aanpakken als ze klaar zijn, verantwoordelijk worden gehouden en niets wordt gemist!

We gebruiken GitHub om te bouwen componenten te communiceren

Ontwerp en code

Onze hoofdontwikkelaar op Plasma is ook een ontwerper. Onze hoofdontwerper (ik) is ook een ontwikkelaar. Dit wordt weerspiegeld in ons proces en de kwaliteit van het systeem. Via onze documentatie stellen we onze ontwerpers graag bloot aan CSS / Sass en moedigen we hen aan te begrijpen hoe dingen werken. Vanuit het oogpunt van ‘leren ontwerpen met het systeem’ helpt het om de waarden, afstanden en naamgevingsconventies in de build expliciet te zien en te leren. Het helpt ook om de kloof tussen ontwerp en engineering te overbruggen.

Naamgevingsconventies

Last but not least: een van de doelen van het ontwerpsysteem is om ontwerpers, ontwikkelaars en productmanagers allemaal dezelfde taal te laten spreken. We kunnen helpen dit te bereiken met consistente, semantische naamgevingsconventies die we allemaal kennen (in het ontwerp en de code), of het nu Sass-variabelen, lettertypestijlen, kleuren, UI-patronen en componenten, sjablonen of paginanamen zijn.

Het krijgt allemaal mooi vorm.

Dit is niet het einde

We hebben grootse plannen voor plasma. We zijn hard aan het werk om het systeem te ontwikkelen en uit te rollen in de Spacestation- en CMS-producten die u eerder zag. We leren veel in het proces en streven ernaar waardevolle feedback te krijgen van onze wereldwijde medewerkers die onze tools gebruiken en itereren op het systeem. We hebben het gehad over open-sourcing plasma, maar we zijn er nog niet.

Ik hoop dat je genoten hebt van deze case study, inzicht in ons ontwerpproces, de tools die we gebruiken en een preview van Plasma! :)

Laat [een product] op een positieve, vriendelijke toon :)

Speciale dank aan Nick Stamas en Deena Edwards bij WeWork voor hun harde werk en ondersteuning bij dit project. En ‘mijn redacteur’ Meagan Fisher!

Postscriptum U maakt geen productontwerpsysteem zoals dit door meteen in Sketch te springen. Er is veel werk verzet om dit stadium te bereiken. Mijn mede-leider van dit project, Nick Stamas, schreef over dit proces in: "Een ontwerpsysteem verkopen bij uw bedrijf", dat ik u aanraad om verder te lezen.

Update: 2019. Ik heb een boek geschreven over systeemontwerp en digitale merkrichtlijnen! https://designsystemfoundations.com