Hvordan bygning af et designsystem giver dit team mulighed for at fokusere på mennesker - ikke pixels.

Dette indlæg er det første i en serie om HubSpot Canvas, vores nye designsprog.

Hej ven. Jeg taler på Rethink Design Systems-konferencen den 26. september. Hvis du gerne vil deltage, skal du bruge mit link til 40% rabat.

Der er en gammel komedie-skit om en mailman, der beslutter, at han ikke længere brænder for at levere mail - han vil hellere levere taco i stedet.

I skitten venter en mand ved sin postkasse for at konfrontere postmanden om manglen på faktisk post i sin postkasse. På trods af at elske tacos, siger beboeren, "Hvis jeg skulle vælge mellem taco og e-mail, var jeg nødt til at vælge e-mail."

Taco er meget mere spændende end regninger, men manden har ikke brug for taco. Han har brug for sin mail.

HubSpot-kunder har brug for et produkt, der er konsistent, yderst funktionelt og dejligt. Så HubSpot Design-teamet havde brug for at skabe et designsystem, der kunne hjælpe os med at opfylde disse behov løbende.

I løbet af de sidste par år har vi:

  • Oprettet et nyt designsprog (kaldet HubSpot Canvas; mere om det senere)
  • Gendesignet HubSpot-platformen og opdaterede vores visuelle identitet
  • Opbygget et levende, åndedrætsdesignsystem, der kan skaleres med vores voksende forretning

For at opnå alt dette havde vi brug for at investere i vores talent. Vi har skaleret vores UX-team fra 14 produktdesignere, 2 forskere og 1 forfatter til mere end 34 produktdesignere, 8 forskere, 3 forfattere og 1 produktillustratør (og vi ansætter stadig).

Dette er historien om, hvordan vi forpligtede os til at levere mailen (mens vi stadig også formår at smyge nogle tacos ind).

Hvorfor vi redesignede

Vi var nødt til at redesigne HubSpot-platformen af ​​to grunde. For det første at gøre et bedre stykke arbejde med at levere løftet om vores brand. Vores kunder elsker HubSpot-mærket. Det er sjovt, levende og fuld af personlighed. Men produktet var det ikke. Det reflekterede bare ikke den energi, vores kunder brugte til at vokse deres forretning.

For det andet at fjerne de uoverensstemmelser, der var sneget ind i vores UI. Vores interface var uoverensstemmelser på tværs af platformen, hvilket gjorde det sværere at bruge og navigere i værktøjet. Tag disse to modaler i Marketing Hub som et eksempel:

Bemærk uoverensstemmelser i knapplacering, fanebladdesign og interaktionsmønstre? Disse uoverensstemmelser øgede vores kunders kognitive belastning, hvilket gjorde det vanskeligt for dem at udføre enkle handlinger som at gemme deres arbejde eller lukke en dialog, hvilket i sidste ende bremsede dem hver dag.

Så vi besluttede at starte med at samle brugerfeedback om vores nuværende design. Feedbacken var ikke smuk, men den var værdifuld:

”Virker mere kompleks, end det skal være.”
”For mange muligheder. Mit øje tegnes ikke specifikt noget sted. ”
“Tæt og travlt. Intet hvidt rum. ”
”Farvekombinationerne er forældede og ikke behagelige.”
”For meget gråt, og alt ser ud til at være gemt væk i sin egen lille kasse.”
”Uinteressant.”

Vi vidste, at vi havde brug for en fuldstændig omfokusering og rededikation til de kunder, vi betjener - til deres personligheder, quirks, motivation, ambitioner og endda (eller især) deres ængstelse. I sidste ende ønskede vi at lave et nyt design til vores produkt, der ville være så dejligt og let at bruge som enhver af de forbrugsapps, som vores kunder brugte hver dag.

Men med det fulgte erkendelsen af ​​en universel sandhed:

Omdesign af vores platform betød, at vi bliver nødt til at forstyrre 40+ produktteam på tværs af to kontinenter. Det betød, at vi bliver nødt til at aflede nogle design- og ingeniørressourcer fra at skabe nye oplevelser, så vi kunne løse eksisterende. Og under implementeringen betød det, at vores support- og serviceteam, og vores kunder var nødt til løbende at tilpasse sig de løbende produktændringer.

Vi startede denne proces ved at vide, at vi ikke var i stand til at redesigne blot vores produkt - vi var nødt til helt at overveje den måde, vi designede og byggede produkter på.

Vi var nødt til at forstå, hvad ineffektivitet i vores organisationsstruktur og arbejdsgange havde ført os til at skabe en fragmenteret brugeroplevelse i første omgang og erstatte dem med praksis og systemer, der fungerede.

Så den første del af denne historie fokuserer på, hvordan vi identificerede disse udfordringer, hvordan vi nærmede os redesignet af vores produkt og de værktøjer, vi har oprettet for at styrke vores designteam til at være så konsistent, effektiv og autonom som muligt.

Roden til problemet

Sidste år besluttede mine forældre at sælge mit barndomshjem. Jeg blev brugt til at hjælpe dem med at rense loftet - et loft, der har samlet tyve års værdi af ting. Som du kan forestille dig, var der en masse WTF-øjeblikke under denne rengøringssession. Nogle øjeblikke var på linjen af: WTF: Vi reddede denne ting !? Fedt nok! Men de fleste lignede mere: WTF: Hvorfor har vi stadig 87 Beanie Babies?

Nå, på meget samme måde havde vores designteam først brug for at revidere alle komponenter, der nogensinde var forestillet, kodet og sendt til produktion i løbet af de foregående ti år på HubSpot. Vi var nødt til at komme ned på dette granulære niveau for bedre at forstå, hvad den aktuelle produktoplevelse var. Hver designer blev bedt om at gå gennem deres respektive apps og finde hver komponent, tage et skærmbillede, navngive det og arkivere det til gennemgang.

Popquiz: Hvor mange dateplukkere er for mange?

Tre? Måske fire?

Vi havde otte.

Her er nogle af de andre ting, vi fandt på vores loft:

  • 100+ nuancer af farven grå
  • 40+ tekstformater i 3 forskellige skrifttyper
  • 16 forskellige stilarter af modaler
  • 6 forskellige primære knapper (hvilket betyder, at vi virkelig ikke havde nogen primær knap)
  • 5 forskellige måder at filtrere et bord på
  • Modaler med bekræftelseshandlinger til venstre
  • Modaler med bekræftelseshandlinger til højre
  • Tusinder og tusinder af linjer tilpasset CSS

Her er en visuel af alle knapper, der eksisterede i HubSpot-platformen på samme tid:

Trykker dette på dine knapper?

Så hvordan skete dette? Hvordan endte vi med så mange knapper? Hvordan endte vi med så mange dateplukkere?

Her er en faktisk slack samtale fra de gamle, mørkere dage:

Sætter sass tilbage i SaaS

Sandheden er, at ingen designer eller udvikler hos HubSpot virkelig ønsker at bruge deres tid på at genimaginere datovælgeren.

Vi identificerede, at grundene til, at holdene havde skabt så mange variationer af stort set de samme stilarter og komponenter, var fordi vores organisationsstruktur skabte synlighedsproblemer. Kort sagt, det var meget svært at finde ud af, hvad der allerede var i spil, og lettere at bare bygge noget nyt.

HubSpot-produktteamet består af små, autonome teams, der er struktureret omkring løsning til specifikke kundebehov. Dette giver os mulighed for at bevæge os hurtigt som en produktudviklingsorganisation og være meget lydhøre over for vores kunders ændrede behov. Men det giver også udfordringer, når det gælder om at holde forskellige produktteam på linje.

Når du har 40+ produktteam, der hurtigt bygger, forsendes og itererer, er det faktisk ret let at miste synet på den samlede kundeoplevelse. At være tæt fokuseret på et specifikt problem betyder ofte, at du lægger blindere på alt andet. På grund af disse blændere genskabte vores designere og udviklere ubevidst eksisterende elementer, komponenter og mønstre på tværs af vores brugergrænseflade. Dette førte til en fragmenteret brugeroplevelse og sammensat design og teknisk gæld.

Vores lille, autonome holdstruktur vil ikke ændre sig - det er en del af vores DNA. Så det var tydeligt, at vi var nødt til at gøre en større indsats for at skabe værktøjer og systemer for bedre at tilpasse vores produktteam. Ved at forbinde alle til et centraliseret designsystem, kunne vi sikre, at vi havde en samlet brugeroplevelse, selvom vi fortsatte med at vokse.

Dette vil frigøre vores designere og udviklere fra at besætte over pixels, så de kunne bruge mere tid på at besætte over mennesker.

At blive principiel

Revisionen hjalp os med at identificere problemer i vores designproces og forstå, hvilke aspekter af vores udviklingskultur havde skabt ineffektivitet. Men inden humørbrædderne kunne oprettes, før typografien kunne udforskes, inden vi kunne have opvarmede diskussioner om det perfekte nuance af orange, var vi nødt til at blive principielle.

Vi var nødt til at blive enige om vores grundlæggende overbevisning, dem, vi kunne læne os på, når beslutninger var hårde. Og vi var nødt til at afsløre, hvilke idealer vores hold følte ansvaret for at opretholde.

Så designteamet kørte et par idéerøvelser for at etablere grundlaget for vores nye designsprog. Vi diskuterede, stackede, og vi landede på fem grundlæggende designprincipper, dem, der har ledet os gennem en million mikro- og makrodesignbeslutninger siden.

Disse principper er:

Klar
Vi designer for klarhed og fokus. Vores arbejde hjælper brugerne med at gøre det næste rigtige ved hjælp af funktionsprioritering, visuelt hierarki og kontekstuel opmærksomhed.

Human
Vi fremmer en følelse af glæde ved at humanisere oplevelsen på måder, der genklang på tværs af kulturer. Vores arbejde giver brugerne en legende og nacn interaktion hver gang.

Indgående
Vi styrker budskabet og betydningen af ​​den indgående metodik. Vores arbejde gør indgående sti klar for vores brugere og hjælper dem med at forstå, hvorfor det er den rigtige ting at gøre.

Integreret
Vi forenkler brugerens oplevelse ved at oprette et samlet system, der løser deres behov. Vores arbejde hjælper brugerne med at opnå fantastiske ting ved at tilbyde en strømlinet og effektiv tilgang.

Collaborative
Vi udvikler kraftfulde systemer, der tilskynder folk til at arbejde problemfrit sammen. Vores arbejde hjælper mennesker med at skabe og samarbejde med hinanden på naturlige, intuitive måder.

Disse principper hjalp os med at forblive på linje og fokuseret, da vi arbejdede igennem de mange detaljer ved omdesign af vores produkt. Du kan ændre farve på en knap, tykkelsen på en linje og størrelsen på en overskrift. Men du skal ikke ændre de ting, du grundlæggende tror på. I disse aspekter af designet skal du være fast.

En ny visuel retning

Vores designteam kørte et par sessioner for at redesigne nogle af kerneskærmene i vores produkt og valgte derefter en gruppe på fire produktdesignere til at tilbringe en fuld uafbrudt uge med at identificere, designe og i sidste ende teste et par forskellige visuelle retninger med vores kunder. Disse sessioner producerede nogle vildt forskellige designretninger, der føltes virkelig nye og spændende.

Her er en smag af nogle meget tidlige designkoncepter fra to medlemmer af designsprogholdet, Drew Condon og Jackie Barcamonte:

Tidligere HubSpot-design

Vilde, ikke? Forskellige. Spændende. Bestemt ikke kedelig, stiv "forretningssoftware".

Designsprogholdet testede i sidste ende tre forskellige designretninger med vores kunder gennem flere runder af undersøgelser og interviews. Når vi hørte følgende udsagn, vidste vi, at vi havde fundet en vindende retning:

”Gør mig til at føle mig produktiv.”
”Jeg føler mig i stand. Jeg føler, at jeg ved nøjagtigt, hvad jeg skal gøre. ”
"Dette er sjovt. Dette er, hvad jeg ville forvente af HubSpot. ”
“Næste generation af web.” (Nogen sagde faktisk det)
"Ser ikke ud som forretningssoftware."
"Får mig til at føle kontrol."

Her er et kig på udviklingen i den designretning, der blev mest foretrukket af de kunder, vi interviewede:

Tidligere HubSpot-designDesign foretrækkes i den første runde af interviewsUdviklet design til anden runde af interviews

Når vi validerede vores designretning med faktiske brugere, var det på tide at anvende den visuelle stil til alle vores centrale UI-komponenter. Og jeg taler om hundredvis af komponenter: knapper, links, markeringer, borde, brødkrummer, modaler, input, popovers (listen fortsætter). Det er her, redesignet blev meget mindre sjovt og meget mere omhyggeligt og udmattende.

Men det omhyggelige, udmattende arbejde var en langsigtet investering i vores virksomhed og vores kunder. Jeg kan huske en fredag ​​eftermiddag, at designsprogholdet og jeg tilbragte i et to timers langt møde. Vi var i sorgens tråg.

Vores job den dag var at beslutte margen og polstring af nogle af vores mest atomare komponenter (knapper, kontroller, input osv.) - byggestenene i vores brugergrænseflade.

Der var fem af os i dette møde, og vi brugte sandsynligvis femten minutter nøje med at overveje margenen på alle vores nye knapper. Det betyder, at HubSpot betalte lønningerne fra fem designere for at sidde i et rum og debattere noget så dagligdags som det rum, der omgiver tekst i en kasse.

Men.

Ikke en af ​​vores frontingeniører, produktdesignere, forskere, forfattere eller produktillustratorer har behov for at tænke på margenen på en knap, siden den beslutning blev truffet for to år siden.

Det er skønheden ved at opbygge et designsystem. Ved at beslutte en detalje en gang frigør du hele dit produktudviklingsteam til at fokusere på at løse faktiske kundeproblemer.

Vi lægger alle vores skinnende nye komponenter, såvel som nogle vejledninger til, hvordan du bruger dem, i Sketch (vores valgte designværktøj). Dette skabte en øjeblikkelig eksplosion i vores teams produktivitet, mens vi også (pludselig) holdt vores designarbejde tæt på linje.

Hold hold på linje

Inden denne proces startede, havde vi ikke et centralt sted, som designere kunne gå for at forstå, hvilke elementer eller komponenter, der allerede eksisterede, og intet sted, hvor de kunne gå, hvis de ville bruge disse elementer eller komponenter i deres eget arbejde. Designere og udviklere forsøgte deres bedste for at tage gode beslutninger om, hvilke komponenter eller mønstre de skulle bruge, men deres vigtigste referencepunkt var det eksisterende produkt - som bestemt var inkonsekvent.

For at bekæmpe uoverensstemmelser (mens vi fremskynder vores arbejdsgang) opbyggede vi et robust stil- og komponentbibliotek til vores nye designsprog. Denne tredive sider Sketch-fil er organiseret af "komponentfamilier" og huser hvert enkelt element eller komponent, der omfatter vores produkters brugergrænseflade. Det opdateres ugentligt og hyrdes af en lille, roterende taskforce af produktdesignere og et dedikeret front-end-team.

Brug for et ikon? Kom lige denne vej.

Ikoner af Joshua Mulvey, Sue Yee og Chelsea Bathurst

Brug for datavisualisering? Du har det.

Datavisualisering af Drew Condon

Brug for en knap? Som du ønsker.

Vi har en primær knap nu. Det er orange. Vi kan lide farven orange.

Brug for bogstaveligt talt noget andet? HubSpot Canvas har du dækket.

Hver komponent, der findes i Sketch-kittet, findes også som en React-komponent, hvilket gør det let at oversætte enhver mockup til en kode på samme måde som du samler legos.

Det betyder, at vores designere ikke bruger deres dage på at skubbe pixels, udarbejde spec-ark eller bekymre sig om deres layouters reaktionsevne. Det betyder, at vores udviklere ikke bruger timer på at finpusse tilpasset CSS (faktisk skriver de næsten ingen overhovedet).

Det betyder, at vores udviklere bruger mere tid på at bygge. Og det betyder, at vores designere bruger mere tid på at undersøge, ideater og iterere, hurtigt og i høj tro.

Her er et kig på den gennemsnitlige HubSpot-designer's workflow ved hjælp af Sketch-biblioteker og Runner and Craft (af Invision) plugins.

Og for at holde trit med HubSpot-produktet fortsætter vores komponentbibliotek med at vokse og udvikle sig. Det vedligeholdes af en kernegruppe af designere og udviklere, men alle i produktgruppen bidrager og vejer ind. Hver gang en ny komponent bygges eller forbedres, rulles den tilbage til Sketch-biblioteket og er tilgængelig for alle. Dette reducerer enormt antallet af useriøse komponenter eller duplikatkomponenter.

Udbygning af systemet

Vores skissesæt er kun et stykke af et større designsystem. For at det virkelig skal være effektivt på lang sigt, var vi nødt til at skabe værktøjer, der fungerede lige så effektivt for udviklere. Vi lærte, at den bedste måde at skabe konsistente, funktionelle og dejlige produktoplevelser er at gøre livet for dem, der bygger disse oplevelser, meget lettere.

Læs det næste indlæg for at lære, hvordan dokumentation hjalp med at kultivere medejerskab mellem design og udvikling, hvordan vi fik bred udbredelse af vores designsystem, og hvilke værktøjer vi har oprettet til udviklere.

Afslutningsvis:

Mennesker over pixels.
Mail over taco.
Taco er lækre.
Men folk har brug for deres mail.

credits:
Illustrationer af Sue Yee

Ressourcer, vi fandt nyttige:
Atomic Design af Brad Frost
Designing The Perfect Date and Time Picker af Vitaly Friedman
Find de rigtige farvepaletter til datavisualisering af Samantha Zhang

Oprindeligt offentliggjort på HubSpot produktblog