Način stvaranja dizajnerskog sustava omogućuje vašem timu da se usredotoči na ljude - ne na piksele.

Ovaj je post prvi u nizu o HubSpot Canvas, našem novom dizajnerskom jeziku.

Bok prijatelju. Govorit ću na konferenciji Rethink Design Systems 26. rujna. Ako želite prisustvovati, koristite moju vezu za popust od 40%.

Postoji stara skeča o komediji o poštaru koji odluči da više nije strastven u isporuci pošte - radije će isporučiti tacos.

U skitnji čovjek čeka kraj svog poštanskog sandučića kako bi se suočio s poštarinom zbog nedostatka stvarne pošte u njegovom poštanskom sandučiću. Unatoč ljubavnom tacosu, stanovnik kaže: "Da sam morao birati između tacoa i pošte, morao bih odabrati poštu."

Tacos je mnogo uzbudljiviji od računa, ali čovjeku ne trebaju tacoi. Treba mu pošta.

Kupcima HubSpot potreban je konzistentan, vrlo funkcionalan i simpatičan proizvod. Dakle, tim HubSpot Dizajna trebao je stvoriti sustav dizajna koji bi nam pomogao da kontinuirano ispunjavamo te potrebe.

U posljednjih nekoliko godina,

  • Izradio novi jezik dizajna (nazvan HubSpot Canvas; više o tome kasnije)
  • Redizajnirali su platformu HubSpot i osvježili vizualni identitet našeg branda
  • Izgradio je živi, ​​dišni sustav dizajna koji se može prilagoditi našem rastućem poslu

Da bismo sve ovo ostvarili, morali smo uložiti u svoj talent. Naš UX tim smo procijenili na 14 dizajnera proizvoda, 2 istraživača i 1 pisca na više od 34 dizajnera proizvoda, 8 istraživača, 3 pisca i 1 ilustratora proizvoda (i još uvijek zapošljavamo).

Ovo je priča o tome kako smo se obvezali dostavljati poštu (dok smo i dalje uspjeli ugurati neke taco-ove).

Zašto smo redizajnirali

Trebala smo redizajnirati HubSpot platformu iz dva razloga. Prvo, napraviti bolji posao u ispunjenju obećanja naše marke. Naši kupci vole brend HubSpot. Zabavno je, živo i puno osobnosti. Ali proizvod, ipak, nije. To samo nije odražavalo energiju koju su naši kupci ulagali u rast svog poslovanja.

Drugo, da uklonimo nedosljednosti koje su se našle u našem korisničkom sučelju. Naše sučelje imalo je nedosljednosti na čitavoj platformi, što je otežavalo korištenje i navigaciju po alatu. Uzmite ova dva načina u Marketinškom centru kao primjer:

Primjećujete li nedosljednosti u smještaju gumba, dizajnu kartica i obrascima interakcije? Te nedosljednosti povećale su kognitivno opterećenje za naše kupce, otežavajući im izvršavanje jednostavnih radnji poput spremanja posla ili zatvaranja dijaloga, što ih je u konačnici svakodnevno usporavalo.

Stoga smo odlučili započeti sakupljanjem povratnih informacija korisnika o našem trenutnom dizajnu. Povratne informacije nisu bile lijepe, ali su bile vrijedne:

"Čini se složenijim nego što mora biti."
"Previše opcija. Moje oko nije nigdje posebno crtano. "
„Gusta i zauzeta. Nema bijelog prostora. "
"Kombinacije boja su zastarjele i nisu ugodne."
"Previše je sivog i čini se da je sve ugurano u svoju malu kutiju."
"Nezanimljiv."

Znali smo da nam je potreban potpuni preusmjeravanje i preusmjeravanje prema klijentima kojima služimo - njihovim osobnostima, čudima, motivacijama, težnjama, pa čak i (ili posebno) njihovim strepnjama. Konačno, željeli smo osmisliti novi dizajn za naš proizvod koji će biti jednako drag i jednostavan za upotrebu kao i sve potrošačke aplikacije koje su svakodnevno koristili naši kupci.

Ali s tim je stigla i spoznaja univerzalne istine:

Redizajniranjem naše platforme značilo je da trebamo obustaviti 40+ proizvodnih timova na dva kontinenta. To je značilo da ćemo morati neke od dizajnerskih i inženjerskih resursa odvratiti od stvaranja novih iskustava kako bismo popravili postojeća. A tijekom predstavljanja to je značilo da su naši timovi za podršku i usluge, a naši kupci će se morati kontinuirano prilagođavati tekućim promjenama proizvoda.

Započeli smo taj proces znajući da nismo planirali redizajnirati samo svoj proizvod - morali smo u potpunosti preispitati način na koji smo dizajnirali i izrađivali proizvode.

Morali smo shvatiti koja nas je neučinkovitost u organizacijskoj strukturi i tijekovima rada dovela do stvaranja rascjepkanog korisničkog iskustva i zamijeniti ih s postupcima i sustavima koji djeluju.

Dakle, prvi dio ove priče usredotočen je na to kako smo prepoznali te izazove, kako pristupili redizajnu našeg proizvoda i alatima koje smo stvorili kako bismo osnažili naš dizajnerski tim da bude što dosljedniji, učinkovitiji i autonomniji.

Korijen problema

Prošle godine moji su roditelji odlučili prodati moju kuću iz djetinjstva. Bila sam uvučena u to da im pomognem u čišćenju potkrovlja - potkrovlju koje je nakupilo stvari vrijedne dvadeset godina. Kao što možete zamisliti, bilo je mnogo WTF momenata tijekom tog čišćenja. Neki trenuci su slijedili: WTF: Spasili smo ovu stvar !? Cool! Ali većina je bila više kao: WTF: Zašto još uvijek imamo 87 Beanie Bebies?

Pa, na potpuno isti način, naš dizajnerski tim prvo je trebao pregledati svaku komponentu koja je ikada zamišljena, kodirana i isporučena u proizvodnju tijekom prethodnih deset godina na HubSpot. Morali smo se spustiti na tu detaljnu razinu da bismo bolje shvatili kakvo je trenutno iskustvo proizvoda. Od svakog dizajnera zatraženo je da prođe kroz njihove odgovarajuće aplikacije i pronađe svaku komponentu, napravi snimak zaslona, ​​imenuje ga i pošalji ga na pregled.

Pop kviz: Koliko je odabirača datuma previše?

Tri? Možda četiri?

Pa, imali smo osam.

Evo još nekih stvari koje smo pronašli na našem tavanu:

  • 100+ nijansi sive boje
  • 40+ stilova teksta u 3 različita slova
  • 16 različitih stilova modaliteta
  • 6 različitih primarnih gumba (što znači da stvarno nismo imali primarni gumb)
  • 5 različitih načina filtriranja tablice
  • Modali s potvrdnim radnjama na lijevoj strani
  • Modaliteti s akcijama potvrde na desnoj strani
  • Tisuće i tisuće redaka prilagođenog CSS-a

Evo vizualnih prikaza svih gumba koji su istovremeno postojali na HubSpot platformi:

Da li ovo pritiska vaše gumbe?

Pa kako se to dogodilo? Kako smo završili s toliko gumba? Kako smo završili s toliko odabirača datuma?

Evo stvarnog razgovora iz tih starih, mračnijih dana:

Vraćanje sass-a u SaaS

Istina je da nijedan dizajner ili programer na HubSpot-u zaista ne želi potrošiti svoje vrijeme preispitujući odabire datuma.

Otkrili smo da su razlozi zbog kojih su timovi stvorili toliko mnogo varijacija u osnovi istih stilova i komponenti jer je naša organizacijska struktura stvorila probleme vidljivosti. Ukratko, bilo je vrlo teško otkriti što se već igra, a lakše je jednostavno izgraditi nešto novo.

HubSpot tim proizvoda sastoji se od malih, autonomnih timova koji su strukturirani oko rješavanja za specifične potrebe kupca. To nam omogućava da se brzo razvijamo kao organizacija za razvoj proizvoda i visoko reagiramo na promjenjive potrebe naših kupaca. No, to predstavlja i izazove kada je u pitanju usklađivanje različitih timova proizvoda.

Kada imate 40+ timova proizvoda koji brzo grade, šalju i ponavljaju, zapravo je prilično lako izgubiti iz vida cjelokupno korisničko iskustvo. Ako ste usko fokusirani na određeni problem, često znači da na sve ostale stavite rolete. Naši dizajneri i programeri su zahvaljujući tim zaslonima nesvjesno rekreirali postojeće elemente, komponente i uzorke u našem korisničkom sučelju. To je dovelo do rascjepkanog korisničkog iskustva i složenih dizajnerskih i tehnoloških dugova.

Naša mala, autonomna struktura tima neće se mijenjati - to je dio našeg DNK. Tako je bilo jasno da moramo uložiti više napora u stvaranje alata i sustava kako bismo što bolje uskladili timove proizvoda. Povezivanjem svih u jedan centralizirani sustav dizajniranja mogli bismo osigurati da imamo ujedinjeno korisničko iskustvo iako smo i dalje rasli.

To bi oslobodilo naše dizajnere i programere od opsjednutosti piksela kako bi mogli više vremena provesti opsesivno nad ljudima.

Postajanje principijelno

Revizija nam je pomogla identificirati probleme u našem dizajnerskom procesu i razumjeti koji su aspekti naše razvojne kulture stvorili neučinkovitost. Ali prije nego što smo mogli stvoriti ploče s raspoloženjem, prije nego što smo tipografiju mogli istražiti, prije nego što smo mogli započeti burne rasprave o savršenom nijansi naranče, trebali smo se načeti.

Morali smo se složiti u našim temeljnim uvjerenjima, na ona na koja bismo se mogli osloniti kada su odluke bile teške. I trebali smo otkriti koji su ideali naših timova osjećali odgovornost.

Dakle, dizajnerski tim izveo je nekoliko vježbi ideje kako bi uspostavio temelj našeg novog dizajnerskog jezika. Raspravljali smo, stavili smo se na mjesto i postavili smo pet temeljnih načela dizajna, ona koja su nas vodila kroz milijun mikro i makro-dizajnerskih odluka od tada.

Ti su principi:

Čisto
Dizajniramo za jasnoću i fokus. Naš rad pomaže korisnicima da učine sljedeću pravu stvar putem prioriteta obilježja, vizualne hijerarhije i kontekstualne svijesti.

ljudski
Osjećamo radost humanizacijom iskustva na načine koji odjekuju u kulturama. Naš rad korisnicima pruža razigranu i personabilnu interakciju svaki put.

dolazeći
Pojačavamo poruku i značenje ulazne metodologije. Naš rad korisnicima daje ulazni put jasnim i pomaže im da shvate zašto je to ispravno učiniti.

Integriran
Pojednostavljujemo korisničko iskustvo stvaranjem jedinstvenog sustava koji rješava njihove potrebe. Naš rad pomaže korisnicima da postignu sjajne stvari nudeći pojednostavljen, učinkovit pristup.

kolaborativni
Osmišljavamo snažne sustave koji potiču ljude da neometano rade zajedno. Naš rad pomaže ljudima da stvaraju i surađuju jedni s drugima na prirodne, intuitivne načine.

Ovi principi pomogli su nam da ostanemo usklađeni i usredotočeni dok smo radili kroz mnoge detalje redizajniranja našeg proizvoda. Možete promijeniti boju gumba, debljinu crta i veličinu zaglavlja. Ali ne biste trebali mijenjati stvari u koje temeljno vjerujete. U tim aspektima dizajna trebali biste biti čvrsti.

Novi vizualni smjer

Naš dizajnerski tim vodio je nekoliko sesija na redizajnu nekih glavnih ekrana u našem proizvodu, a zatim je izabrao grupu od četiri dizajnera proizvoda koji će cijeli, neprekinuti tjedan provesti u ideji, dizajniranju i na kraju testiranju nekoliko različitih vizualnih pravaca s našim kupcima. Ove su sesije proizvele neke divno različite dizajnerske upute koje su se osjećale doista novim i uzbudljivim.

Evo nekih vrlo ranih dizajnerskih koncepata dvoje članova dizajnerskog jezika, Drew Condon i Jackie Barcamonte:

Bivši HubSpot dizajn

Divlji, zar ne? Različit. Uzbudljiv. Definitivno ne dosadan, kruti "poslovni softver".

Tim dizajnerskog jezika konačno je testirao tri različita dizajnerska smjera s našim kupcima kroz više rundi anketa i intervjua. Kad smo čuli sljedeće izjave, shvatili smo da smo pronašli pobjednički smjer:

"Osjećam se produktivnom."
"Osjećam se sposobnom. Osjećam se kao da točno znam što da radim. "
"Ovo je zabavno. To bih očekivao od HubSpota. "
"Sljedeća generacija weba." (Netko je to zapravo rekao)
"Ne liči na poslovni softver."
"Osjećam kontrolu."

Evo zaviriti u razvoj smjera dizajna koji su najviše preferirali kupci s kojima smo razgovarali:

Bivši HubSpot dizajnDizajn poželjan tijekom prvog kruga razgovoraRazvijeni dizajn za drugi krug intervjua

Jednom kada smo potvrdili svoj smjer dizajna sa stvarnim korisnicima, došlo je vrijeme da se taj vizualni stil primijeni na sve naše osnovne UI komponente. A govorim o stotinama komponenti: gumbima, vezama, odabirima, tablicama, krušnim mrvicama, modalima, ulazima, napajačima (popis se nastavlja). Ovo je mjesto gdje se redizajn dobio puno manje zabavno, a puno više pažljivo i iscrpljujuće.

Ali taj pažljiv, iscrpljujući rad bio je dugoročna investicija u našu tvrtku i naše kupce. Sjećam se jednog petka poslijepodne da smo tim dizajnerskog jezika proveli u dvosatnom sastanku. Bili smo u koritu tuge.

Naš je posao tog dana bio odlučiti o margini i obloženju nekih od naših najotomatskih komponenti (tipki, kontrole, ulaza itd.) - sastavnih dijelova našeg korisničkog sučelja.

Na tom sastanku bilo nas je petorica i proveli smo vjerojatno petnaest minuta pažljivo razmatrajući marginu svih naših novih gumba. To znači da je HubSpot plaćao plaće pet dizajnera koji su sjedili u sobi i raspravljali o nečemu tako dnevnom kao i prostor koji okružuje tekst u kutiji.

Ali.

Nijedan od naših inženjera, dizajnerskih proizvoda, istraživača, pisaca ili ilustratora proizvoda nije trebao razmišljati o granici gumba od kada je ta odluka donesena prije dvije godine.

U tome je ljepota izgradnje dizajnerskog sustava. Odlučivši se za pojedinosti jednom, oslobodite cijeli tim za razvoj proizvoda da se usredotočite na rješavanje stvarnih problema s kupcima.

Sve naše sjajne nove komponente, kao i neke upute o tome kako ih koristiti, stavljamo u Sketch (naš izborni alat za odabir). To je stvorilo trenutnu eksploziju u produktivnosti našeg tima, a istovremeno je (naglo) održavalo usko usklađeni naš dizajnerski rad.

Održavanje timova

Prije nego što je taj proces započeo, nismo imali niti jedno centralizirano mjesto koje bi dizajneri mogli razumjeti koji elementi ili komponente već postoje, a nije bilo mjesta na koje bi mogli otići ako su htjeli koristiti te elemente ili komponente u svom radu. Dizajneri i programeri trudili su se donijeti dobre odluke o tome koje će se komponente ili obrasci koristiti, no glavna im je referentna točka bio postojeći proizvod - koji je bio nedosljedan.

Za borbu protiv nedosljednosti (istovremeno ubrzavajući naš tijek rada) izgradili smo robusnu biblioteku stila i komponenata za naš novi jezik dizajna. Ova datoteka Sketch za trideset stranica organiziraju "obitelji komponenti" i sadrži svaki pojedini element ili komponentu koja sadrži korisničko sučelje naših proizvoda. Ažurira se tjedno, a krasi je mala, rotirajuća radna skupina dizajnera proizvoda i posvećeni razvojni tim.

Trebate ikonu? Dođite ovamo.

Ikone Joshua Mulvey, Sue Yee i Chelsea Bathurst

Trebate vizualizaciju podataka? Imaš to.

Vizualizacija podataka Drew Condon

Trebate gumb? Kako želiš.

Sada imamo jedan primarni gumb. Narančasta je. Sviđa nam se boja narančasta.

Trebate doslovno bilo što drugo? HubSpot Canvas je pokrivao.

Svaka komponenta koja postoji u Sketch kompletu također postoji kao React komponenta, što olakšava prijevod bilo kojeg modela u kôd na isti način na koji sastavljate logotipe.

To znači da naši dizajneri ne provode dane gurajući piksele, crtajući listove naočala ili ne brinući o reakcijama svojih izgleda. To znači da naši programeri ne troše sate uređujući prilagođeni CSS (u stvari, oni pišu gotovo uopće).

To znači da naši programeri provode više vremena na izgradnji. A to znači da naši dizajneri provode više vremena istražujući, razmišljajući i ponavljajući, brzo i s velikom vjernošću.

Evo zavirite u prosječni radni tijek dizajnera HubSpot koristeći dodatke Biblioteke skica i dodatke Runner and Craft (by Invision).

I kako bismo išli ukorak s HubSpot proizvodom, naša knjižnica komponenti i dalje raste i razvija se. Održava ga glavna skupina dizajnera i programera, ali svi iz tima proizvoda doprinose i utvrđuju. Kad god se nova komponenta izgradi ili poboljša, vraća se u biblioteku Sketch i dostupna je svima. To uvelike smanjuje broj nepoštenih komponenata ili duplikata.

Izgradnja sustava

Naš Sketch kit samo je jedan dio većeg dizajnerskog sustava. Da bi on bio istinski učinkovit u dugom roku, morali smo stvoriti alate koji djeluju jednako učinkovito za programere. Saznali smo da je najbolji način za stvaranje konzistentnih, funkcionalnih i ugodnih iskustava s proizvodima znatno olakšati život onima koji ih izgrade.

Pročitajte sljedeći post kako biste saznali kako je dokumentacija pomogla njegovanju suvlasništva između dizajna i razvoja, kako smo široko usvojili naš dizajnerski sustav i koje smo alate stvorili za programere.

U zatvaranju:

Ljudi preko piksela.
Pošaljite preko tacosa.
Tacosi su ukusni.
Ali ljudima treba njihova pošta.

Bodovi:
Ilustracije Sue Yee

Resursi za koje smo smatrali da su korisni:
Atomski dizajn Brada Frosta
Dizajn savršenog odabira datuma i vremena Vitaly Friedman
Pronalaženje prave palete boja za vizualizaciju podataka Samantha Zhang

Izvorno objavljeno na blogu proizvoda HubSpot