Hoe maak je een stijlgids: begin met een UI Framework

Vraag en antwoord met de UX Designer van AdRoll over waarom we het hebben gedaan en wat we hebben geleerd

Deze blogpost is de eerste in een serie waarin de reis van de stijlgids wordt beschreven, van het maken ervan tot een volwassen UI-raamwerk voor onze teams en uiteindelijk een unieke stem en toon destilleren voor onze producten.

Hoi! Ik ben Arya Srinivasan, een UX-onderzoeker bij AdRoll. Ik ging zitten met Mason Lee, een UX Designer die werkte aan het API-product van AdRoll's native ads, om te praten over zijn werk bij het ontwikkelen van de stijlgids van AdRoll.

Arya: Om dingen af ​​te trappen, waarom ben je het stijlgidsproject begonnen? Wat was het probleem dat moest worden opgelost?

Mason: het probleem was ontwerpinconsistentie, zowel voor producten als voor één product. Bijvoorbeeld een knop die er overal hetzelfde moet uitzien, maar die in feite varieert in kleur, lettertype en randstijl.

Knoppen zien er anders uit in de mock van individuele ontwerpers en onze applicaties.

Door de snelle groei van AdRoll waren we gericht op snelheid. We zijn nu een groter bedrijf met meerdere producten, dus als ontwerper vind ik het belangrijk dat we de nadruk leggen op consistentie in de manier waarop we onze producten presenteren: via het ontwerp.

Om ons te concentreren op ontwerp, moesten we eerst bestaande inconsistenties oplossen. UX-ontwerpers richten zich hier meestal op een of twee producten, dus om ons team aan het ontwerp voor alle producten te laten denken, heb ik een wekelijkse "UI Smackdown" -vergadering opgezet om de UI-richtlijnen te bespreken.

In elke vergadering hebben we gekeken naar ontwerpinconsistenties om te beslissen over één ontwerp. Na een paar vergaderingen vroegen ontwerpers me nog steeds naar de juiste kleur of opvulling, enz. We hadden een centraal document nodig met alle antwoorden, dus bouwde ik ons ​​UI Framework in Sketch als hulpmiddel voor ontwerpers. Wanneer we ons realiseren dat er een component ontbreekt of een nieuwe component wilt opnemen, bespreken we deze en voegen we deze toe aan het master UI Framework-bestand.

Arya: U zei dat u wilt dat AdRoll een ontwerpgericht bedrijf is - wat bedoelt u daarmee?

Mason: Ik wil dat AdRoll design op de voorgrond plaatst zodat het een concurrentiedifferentiatie is - door klanten erkend als een goed ontworpen product dat echt aan hun behoeften voldoet.

Arya: Wat waren je directe doelen voor de stijlgids? Heb je een langetermijnvisie voor dit project?

Mason: Mijn doel op korte termijn is om consistentie in het ontwerp tussen ontwerpers te hebben door onze UI-componenten te standaardiseren. Ik wil dat ontwerpers dezelfde taal spreken als ze over design praten. In een modale of vervolgkeuzelijst bouwen ingenieurs bijvoorbeeld op basis van hoe de ontwerper suggereert. Als de ontwerpelementen tussen ontwerpers verschillen, gaan ingenieurs hetzelfde element op verschillende manieren maken.

Mijn doel op middellange termijn is om deze stijl te definiëren in onze code in 'RollUp', de interne UI-componentenbibliotheek van AdRoll. Als we een voorgedefinieerd stylesheet hebben, hoeven onze ingenieurs dit alleen te kopiëren. Ontwerpers en ingenieurs kunnen dezelfde taal spreken.

Arya: Heb je problemen ondervonden tijdens het maken van de stijlgids? Hoe heb je ze opgelost?

Mason: Een van de grootste hindernissen was de buy-in van mensen in productteams. Om iedereen erbij te betrekken, heb ik een vergadering opgezet met een duidelijke lijst van te behandelen agendapunten. Ik presenteerde ontwerpinconsistenties, zoals verschillende vervolgkeuzemenu's tussen producten. Visueel bewijs leveren leidt tot gesprekken en uiteindelijk geven mensen om hun product en willen ze consistentie.

Een andere uitdaging was het bepalen van de regels. Wanneer het gaat om het standaardiseren van een component, moet het overal en in elke context kunnen worden toegepast. Je moet aan elk randgeval denken. Het component moet flexibel zijn, maar tegelijkertijd voldoende compleet, zodat het gemakkelijk bruikbaar, consumeerbaar en toepasbaar is.

Hier is een voorbeeld van de flexibiliteit van onze stijlgids. Onze eerste beslissing voor de opvulling in deze vervolgkeuzelijst met geografische targeting was te groot, dus hebben we de stijlgids herzien om rekening te houden met deze use case.Voor (links), Na (rechts)

Ik wil eigenlijk nog een uitdaging uitroepen! Naamgeving kan moeilijk zijn. Zoals ik al eerder zei, wil ik dat ontwerpers en ingenieurs dezelfde taal spreken, maar dit moet zorgvuldig gebeuren. Voor zoiets eenvoudigs als een vervolgkeuzelijst, hebben we eigenlijk verschillende variaties (een met selectievakjes, een andere met selectievakjes en een tekstblok en een andere is een standaard vervolgkeuzemenu). Hoe noemen we drie verschillende dropdowns zodat er een universeel begrip is van welke welke is?

De semantiek is uitdagend; onze naamgeving moet logisch zijn. We hebben een aantal coole samenwerkingstools gebruikt om een ​​consensus te bereiken wanneer we een naam kiezen. Wake hielp ons bijvoorbeeld om alle open vragen en problemen te verzamelen, oplossingen te bespreken, de UI Smackdown-beslissingen te volgen en het gesprek met het grotere productteam voort te zetten via een integratie met Slack.

Hoe we Wake hebben gebruikt om UI-inconsistenties te bespreken en samen te werken aan componentregels.

Arya: Is er iets unieks aan de gebruikersinterface van AdRoll waarmee u rekening moest houden bij het maken van de stijlgids?

Mason: Ons dashboard is erg data-zwaar. Bovendien biedt de stroom van campagnecreatie adverteerders een aantal hefbomen om aan te trekken. Om aan de behoeften van minder ervaren adverteerders te voldoen, streven we naar effectieve standaardinstellingen. In onze producten hebben de componenten complexe functies, maar ze zien er eenvoudig uit en zijn gemakkelijk te gebruiken.

Arya: Zijn er dingen die je wou dat je wist toen je de stijlgids begon te maken?

Mason: Ik wou dat ik vanaf het begin meer inzicht had in hoe al onze producten werken. We delen bijvoorbeeld hoe ons respectieve product werkt in onze wekelijkse ontwerpkritiekbijeenkomst, dus ik weet hoe SendRoll (ons e-mail retargeting-product) op het oppervlak werkt, maar ik heb geen diepgaande kennis van SendRoll dat het de ontwerper is. Ik denk dat een genuanceerd begrip van het product zeker helpt bij het werken aan de stijlgids, omdat ik dan een beter begrip heb van alle mogelijke gebruikssituaties.

Arya: Dus wat is de beste manier om dat gemeenschappelijke begrip van het proces van een ontwerper en hun product te bereiken?

Mason: Hoewel we echt gericht zijn op het verzenden van onze producten, delen we ons ontwerpproces goed in onze wekelijkse ontwerpkritiekbijeenkomst. Ik denk dat we beter kunnen zijn om de kringloop na elke vergadering te sluiten - hoe heeft de ontwerper de feedback van de vergadering verwerkt? Zodra het product is verzonden en gebruikt door onze adverteerders, kunnen we ook delen hoe adverteerders de producten gebruiken op basis van de inzichten uit analyses.

Arya: Waren er bronnen waarnaar u verwees tijdens het werken aan dit project?

Mason: ik las Atomic Design van Brad Frost, deed online onderzoek en sprak met andere UX-ontwerpers bij MeetUps. Als je denkt dat een bepaald bedrijf een goed ontwerp heeft, is het vrij waarschijnlijk dat ze ergens online over hun stijlgids hebben gesproken.

Arya: Wat is de status van onze stijlgids?

Mason: Ik heb alle UI-elementen die we in onze verschillende producten gebruiken, vastgelegd en opnieuw gegroepeerd en gegroepeerd in stichtingen, componenten, patronen en pagina's, die zullen dienen als een bron van waarheid voor onze UI-ontwerpen.

Je kunt de basis- en component UI-elementen bekijken op Dribbble. Als u bekend bent met Atomic Design, heb ik de niveaus "atoom" en "molecuul" gegroepeerd in wat ik "componenten" noem. Door bijvoorbeeld de formuliertitel en de invoer te combineren, kunnen andere ontwerpers eenvoudig een ingevuld formulier kopiëren veld.

Bedankt voor het lezen!

Let op deze aankomende onderwerpen terwijl we onze stijlgids ontwikkelen:

  • Hoe een UI Framework de samenwerking vereenvoudigt
  • Ontwikkeling van nieuwe stylesheets op basis van het UI Framework
  • Hoe een Style Guide-website te bouwen
  • De reis naar het vinden van onze stem en toon