Primer

Radovi / Softver za zdravstvo

Jedan sistem, dva tima.

Dva proizvoda istog proizvođača vremenom su se razišla: dva kompleta interfejsa, dva skupa pravila i jedna rasprava koja se vraćala svakog sprinta.

Uloga
Dizajn sistemi, front-end platforma
Godina
2024
Obim
Analiza, tokeni, biblioteka komponenti, uvođenje u timove
Tehnologije
TypeScript · React · Storybook · Style Dictionary

Ilustrativan primer. Nijedan klijent se ovde ne imenuje dok nemamo njegovu pisanu saglasnost.

Klijent
Proizvođač softvera za zdravstvo
Delatnost
Softver za zdravstvo
Sastav tima
Dizajner i inženjer, u timu klijenta
Saradnja
Analiza, a zatim postepeno uvođenje uz podršku pri usvajanju

Projekat

Kako je biblioteka nastala

Dizajn sistem je pitanje dogovora prerušeno u biblioteku komponenti. Tako smo mu i prišli.

Proizvođač je razvijao dva klinička proizvoda sa odvojenim front-end timovima, odvojenim ciklusima izdavanja i, u trenutku kada smo došli, sa dva kompleta interfejsa koji se gotovo ni u čemu nisu poklapali. Nijedan tim nije grešio. Svaki je rešavao svoje probleme sam za sebe, a cena je postala vidljiva tek kada je zajednički ekran morao da se napravi dvaput.

Izazov

Zadatak koji smo dobili bio je da ujednačimo komponente. Zadatak koji smo prihvatili bio je uži i teži: dogovoriti šta komponenta sme da odluči, a šta pripada proizvodu koji je koristi. Bez te granice jedna biblioteka postaje mesto gde se dva tima i dalje spore, samo sada u pregledu koda.

Analiza je pokazala uobičajenu sliku iza razilaženja — nekoliko gotovo istovetnih varijanti dugmeta, polja obrasca koja u svakom proizvodu drugačije obrađuju proveru unosa i razmake zaokruživane rukom sve dok se ritam više ni na dva ekrana nije poklapao. Dokumentacija je postojala za oba kompleta i nije odgovarala nijednom.

Pristup

Krenuli smo od tokena, a ne od komponenti, jer je zajednički rečnik ono što zajedničku komponentu čini podložnom pregledu. Boja, tipografija, razmak, radijus i pokret definisani su jednom, objavljeni i za dizajn i za kod iz istog izvora i preslikani na postojeće ekrane oba proizvoda pre nego što je bilo šta napravljeno iznova.

  • Jedan izvor tokena, objavljen u Figmu i u front-end pakete iz iste datoteke.
  • Komponente građene otvoreno, svaka sa svojim stanjima, beleškama o pristupačnosti i jasnom granicom upotrebe.
  • Put za doprinos, da tim kome treba varijanta predloži izmenu umesto da napravi svoju kopiju.
  • Migracija ekran po ekran, uz stari komplet koji radi sve dok se i poslednji ekran ne preseli.
Biblioteka je isporučena kao verzionisan paket u registru samog proizvođača, a prava pregleda drže njegovi inženjeri. Sistem koji niko izvan klijenta ne može da objavi nije sistem, već zavisnost.

Gde je sve stalo

Oba proizvoda sada grade nove ekrane od istih delova, a izmena jednog tokena stiže do njih kroz jedno izdanje umesto kroz dve ručno pisane zakrpe. Dokumentacija je sopstveni sajt biblioteke, generisan iz komponenti, pa zastareva samo onda kada zastari i kod.

Korisnija promena je tiša. Pregled dizajna se pomerio sa detalja na koje sistem već odgovara ka pitanjima na koja ne može da odgovori — šta lekar treba prvo da vidi i šta ekran ne sme da mu dozvoli.

Biblioteka

Svaki deo dokumentovan tamo gde se koristi.

Problem

Dva kompleta, jedna porodica proizvoda

Počeli smo tako što smo oba interfejsa postavili jedan pored drugog, ekran po ekran, i prebrojali mesta na kojima istu odluku donose različito. To je neefektan posao koji brzo rešava rasprave, jer neslaganje prestaje da bude stvar ukusa.

Analiza nije pokazala nemar. Pokazala je dva tima koja odvojeno plaćaju cenu odluke koju niko od njih nije ni bio pitan da donese.

  • Ekran potreban u oba proizvoda projektovan i napravljen dvaput.
  • Izdanje koje čeka da se drugi komplet uskladi.
  • Vreme pregleda potrošeno na ukus, a ne na proizvod.
Analiza interfejsa, prva nedelja.

Pristup

Prvo tokeni, pa komponente

Tokeni su oba tima doveli do zajedničkog rečnika pre nego što je iko morao da se odrekne neke komponente. Kada su boja, tipografija i razmak počeli da znače isto u Figmi i u paketima, pregled komponente postao je kratak razgovor umesto pregovora.

Gradili smo redosledom koji je odgovarao proizvodima, a ne onim po kom biblioteka izgleda najurednije, i ostavili stari komplet da radi dok se i poslednji ekran ne preseli.

  • Biblioteka odlučuje kako se deo ponaša, proizvod kada se koristi.
  • Svaka varijanta ima imenovanog vlasnika ili ne ulazi u izdanje.
  • Tekst, raspored strane i klinička terminologija ostali su kod proizvoda.
Jedan izvor tokena, dva odredišta.

Njihovim rečima

Dva tima su prestala da se raspravljaju o dugmadi i vratila se raspravi o proizvodu, a to je rasprava koja vredi.
Katarina RistićPrimerMenadžerka dizajnaExample Health Systems

Ilustrativan citat. Reči klijenta objavljujemo samo uz njegovu pisanu saglasnost.

Detalji

Tri dela sistema

Ova studija slučaja je ilustrativan primer. Klijent, citat i sve slike na ovoj strani zamenjuju stvarni rad koji još ne možemo da objavimo, a nijedan klijent se ne imenuje bez pisane saglasnosti.Pitajte nas o sličnom radu

Sledeći korak

Dva tima, jedan skup delova.

Ako su se Vaši proizvodi razišli, prvi koristan korak je iskrena analiza, a ne ponovna izrada. Recite nam gde se rasprave stalno ponavljaju i reći ćemo šta bismo prvo pogledali.