Projekat 02 · Platforme i dizajn sistemi
Dizajn sistem za preko 30 brendova i klijent koji se vratio
Za više od 30 white-label brendova napravio sam oko stotinu komponenti. Tri godine kasnije klijent me je ponovo angažovao jer mu se Android aplikacija više nije mogla instalirati.
~100 komponenti za 30+ white-label brendova
napravljenih samostalno za dva mjeseca
Isti klijent vratio se nakon tri godine, s poslom iz sasvim druge oblasti
Priča u 5 koraka
Stack
- JavaScript
- CSS
- SCSS
- dizajn tokeni
- Figma
- npm
- Android
01 · Kontekst
Klijentov softver pretvara fotografiju tlocrta u procjenu troškova i plan radova po fazama, a klijent ga prodaje pod brendovima drugih firmi.
Klijentov softver pretvara fotografiju tlocrta u procjenu troškova i plan radova po fazama, a klijent ga prodaje pod brendovima drugih firmi.
Centralni dizajn sistem napravio sam im 2022. godine, samostalno i za dva mjeseca. Tri godine kasnije pozvali su me ponovo, za nešto sasvim drugo: Android aplikacija im se više nije mogla instalirati na aktuelnim uređajima.
02 · Nije se smjelo mijenjati
Proizvod je 2022. bio white-label: svaka od više od trideset građevinskih firmi dobijala je svoje boje, logotipe i fotografije.
Proizvod je 2022. bio white-label: svaka od više od trideset građevinskih firmi dobijala je svoje boje, logotipe i fotografije. Uz toliko brendova proizvod bez dizajn tokena nije mogao funkcionisati. Kod naivne implementacije sto komponenti za trideset brendova značilo bi tri hiljade varijanti koje niko ne bi održavao.
Aplikacija se 2025. više nije mogla instalirati na aktuelnim verzijama Androida, jer su biblioteke bile napuštene, a API-ji na koje se oslanjala zastarjeli. Aplikacija u takvom stanju nestane bez ikakve greške: novi korisnici je jednostavno ne mogu instalirati, a postojeći je izgube čim promijene telefon. Istovremeno je velik dio telefona na gradilištu star nekoliko godina, pa popravka nije smjela ostaviti te telefone bez aplikacije.
03 · Šta smo uradili
Dizajn sistem (2022, sam). Dizajn tokene sam iz Figme izvezao u JSON, iz njih generisao SCSS i na tome napravio oko stotinu komponenti, organizovanih po veličini, tipu i vrsti.
Dizajn sistem (2022, sam). Dizajn tokene sam iz Figme izvezao u JSON, iz njih generisao SCSS i na tome napravio oko stotinu komponenti, organizovanih po veličini, tipu i vrsti. Biblioteka je verzionisana i distribuira se kao paket, s vlastitom dokumentacijom.
Nijedna komponenta ne zna svoju boju, samo ime tokena. Novi klijent je novi set vrijednosti, a ne novi kod, i upravo zato je trideset brendova moguće održavati.
Biblioteku sam namjerno napravio nezavisnom od frameworka, jer je koriste dva različita proizvoda. Da je vezana za jedan framework, svaki korisnik izvan tog frameworka morao bi praviti vlastitu implementaciju istog dizajna, a dizajn sistem postoji upravo zato da to ne bude potrebno.
Sa stotinu komponenti organizacija po veličini, tipu i vrsti ima praktičnu svrhu. Bez dosljedne organizacije biblioteka te veličine postaje pretraga po imenima fajlova: developer koji za trideset sekundi ne nađe ono što mu treba zaključi da to ne postoji i napiše svoj CSS, pa se dizajn sistem zaobilazi, a da ga niko nije odlučio napustiti.
Android aplikacija (2025, nas troje). Vratili smo aplikaciju u rad i na aktuelnim i na starijim uređajima. Dozvole za kameru uskladili smo s promijenjenim pravilima prodavnice aplikacija, nadogradili smo zavisnosti za pregled dokumenata i posao premjestili s glavne niti.
04 · Rezultat
~100 komponenti za 30+ white-label brendova , napravljenih samostalno za dva mjeseca
- ~100 komponenti za 30+ white-label brendova, napravljenih samostalno za dva mjeseca
- Verzionisan paket s dokumentacijom, koji koriste dva proizvoda
- Android aplikacija se ponovo instalira i radi i na novim i na starim uređajima
- Isti klijent vratio se nakon tri godine, s poslom iz sasvim druge oblasti
05 · Šta bih uradio drugačije
Dokumentacija je bila napravljena po mjeri, bez standardnog alata, pa je postala još jedna stvar za održavanje i još jedna stvar koju je svaki novi developer morao naučiti.
Dokumentacija je bila napravljena po mjeri, bez standardnog alata, pa je postala još jedna stvar za održavanje i još jedna stvar koju je svaki novi developer morao naučiti. Za biblioteku od koje zavisi trideset brendova izabrao bih standardni alat za dokumentaciju, iako je to dosadan izbor.
Povezane usluge
Usluge koje se oslanjaju na ovaj projekat.
- Web razvojMulti-tenant i white-label SaaSDizajn sistem od stotinjak komponenti za više od trideset white-label brendova, u kojem je svaki brend skup vrijednosti tokena. Tri godine kasnije isti klijent se vratio da mu spasimo Android aplikaciju.
- Kako možemo sarađivatiDeveloper u vašem timuDizajn sistem za white-label proizvod, a tri godine kasnije isti klijent nas je ponovo pozvao da mu popravimo Android aplikaciju.
- Kako možemo sarađivatiPreuzimanje aplikacije: dovršetak i lansiranjeKlijent se vratio nakon tri godine jer se njegova Android aplikacija više nije mogla instalirati na novim uređajima. Sada radi i na novim i na starijim telefonima.
- Mobilne aplikacijeReact Native razvojAndroid aplikacija koja se više nije mogla instalirati na novije telefone. Osposobili smo je da radi i na novim i na starijim uređajima, za klijenta koji se vratio tri godine nakon prvog angažmana.
- Dizajn sistemiDizajn sistem i biblioteka komponentiBiblioteka od stotinjak komponenti za građevinski white-label proizvod s više od trideset brendova. Napravljena je za dva mjeseca, radi s bilo kojim frameworkom i organizovana je po veličini, tipu i vrsti, da bi developeri našli ono što im treba.
- Dizajn sistemiDizajn tokeni i teme za više brendovaWhite-label proizvod za građevinske firme, koji se prodaje pod više od trideset brendova, svaki sa svojim bojama, logotipima i fotografijama. Stotinjak komponenti sve to uzima iz tokena, koji su izvezeni iz Figme u JSON i generisani u SCSS. Biblioteku je za dva mjeseca napravio jedan developer.
- Dizajn sistemiFigma u kodBiblioteka s trideset brendova iz 2022. godine, u kojoj je plugin izvozio tokene iz Figme u JSON, a iz JSON-a se generisao SCSS. Bilo je automatizovano, ali samo u jednom smjeru i lako je zaostajalo za dizajn fajlom.
Projekat 02
Radite na sličnom problemu? Odgovaramo u roku od jednog radnog dana.
Prvi poziv traje 30 minuta i ni na šta vas ne obavezuje.