O gamă de produse care a crescut idee cu idee.

Provocarea

figopay nu a pornit cu un plan pentru o gamă de produse. Ideile au venit în timp, pe măsură ce echipa găsea lucruri care meritau construite: o aplicație Android care primește plăți cu cardul direct pe telefonul comerciantului, linkuri de plată pe care comerciantul le poate trimite pe WhatsApp, o platformă de beneficii unde angajații cheltuiesc bugetul primit de la companie, magazine online white-label și site-ul public care le explică pe toate. Fiecare a fost lansat în ritmul lui, dictat de parteneri și de lansări, nu de procesul de design, iar backendul s-a schimbat de mai multe ori după ce designul era gata.

Așa că partea grea a fost rareori un singur ecran. Greu a fost să fac produse proiectate în momente diferite să pară ale aceleiași companii și să mă asigur că un comerciant care încasează pe un telefon vechi și un client care plătește cu un cititor de ecran pot trece amândoi prin plată fără ajutor.

Rolul meu

Sunt product designer într-o echipă mică, în care de backend, de procesarea plăților și de materialele tipărite se ocupă alți colegi. Proiectez figopos, aplicația cu care comercianții încasează; pagina de plată pe care clientul o deschide dintr-un link; social.coupons, atât pentru compania care împarte bugetul, cât și pentru angajații care îl cheltuiesc; magazinele white-label; și figopay.ro. La două dintre ele am scris și frontendul: social.coupons și figopay.ro, pe care l-am proiectat și construit și pentru care am scris textele, pe baza informațiilor primite de la echipă.

Tot eu am creat-o și pe Sofi, vulpița figopay; povestea ei are un capitol separat mai jos.

Decizii cheie

• Un singur set de componente, cu temă pentru fiecare produs. Produsele web folosesc aceleași componente cu teme diferite, așa că o corecție făcută într-unul ajunge și în celelalte, iar produsele par înrudite fără să arate identic.
• Accesibilitatea ca punct de plecare, nu ca o verificare la final. Ordinea focusului, contrastul și mărimea textului fac parte din prima versiune a fiecărui flux, pentru că a le repara mai târziu pe o tastatură de plată durează mai mult decât a le proiecta de la început. Tastatura figopos și ecranul de rezultat au fost testate cu un cititor de ecran și cu textul mărit la 200%, iar figopay.ro are pe fiecare pagină un meniu de accesibilitate pentru mărimea textului, contrast ridicat, linkuri subliniate, spațiere pentru citire și oprirea animațiilor.
• Design pentru backendul care există. Când API-ul s-a schimbat în timpul dezvoltării, am adaptat designul la ce s-a lansat de fapt, în loc să aștept după backend. Unele schimbări au simplificat fluxurile; pe câteva le-aș contesta și acum.

Sofi, vulpița figopay

Am hotărât împreună că o mascotă ar ajuta marketingul, iar un coleg a propus o vulpe. Restul l-am desenat eu: forma, culorile, expresiile și obiectele pe care le ține. Greul a venit după desen, pentru că nimeni din echipă nu are experiență în animație, voiam să rămânem la unelte gratuite, iar o mascotă care există doar ca imagine statică nu poate reacționa la o plată și nu poate fi vedeta unui clip pe TikTok.

Așa că eu regizez, iar Claude Code, un agent AI care scrie și rulează cod, se ocupă de execuție. A transformat desenul meu în SVG, a construit rigul în Blender și o animă, exportă animațiile și randează videoclipurile, cu tot cu muzică. Partea mea este să hotărăsc ce trebuie să transmită fiecare scenă, să aleg dintre ideile pe care le propune, să verific fiecare poziție statică înainte să se miște ceva și să dau feedback pe fiecare variantă până iese cum trebuie.

Primele încercări mișcau capul, corpul și membrele ca bucăți decupate separat, iar rezultatul arăta foarte ciudat: piciorul părea că se desprinde când se apleca. Abia un rig adevărat, cu vreo douăzeci de oase, brațe flexibile, urechi și coadă care îi urmează mișcarea, a făcut-o să se miște ca un singur corp. Rive ar fi fost potrivit, dar exportul pentru producție e cu plată. Acum fiecare animație iese din Blender ca fișier Lottie de vreo 190 KB, cu o intrare și o buclă de repaus, așa că același fișier merge pe site, în aplicații și într-un videoclip.

Din revizii au ieșit câteva reguli. O scenă durează cam cinci secunde, fiecare clip e o singură secvență continuă, iar rezultatul trebuie să se înțeleagă dintr-o privire: steluțe verzi pentru reușită, un balon roșu cu „!” pentru eșec. Designul ei e înghețat, pentru că Sofi e în curs de înregistrare ca marcă, așa că o animație îi poate schimba poziția și expresia, dar nu o poate redesena. Apare pe figopay.ro, în linkurile de plată și în social.coupons, unde întâmpină oamenii, umple ecranele goale și arată cum s-a încheiat o plată, dar și în clipuri pe TikTok, Facebook și LinkedIn. Un clip de Halloween a trecut prin șapte variante într-o singură zi, fiecare pornind de la o mică observație.

Încearcă: harta produselor

Rezultat

figopay.ro, figopos, linkurile de plată și social.coupons sunt live. Nu pot face publice cifre despre ele, așa că pot arăta doar munca în sine: harta de mai sus conține ecranele reale ale aplicațiilor și deschide cele două site-uri în forma lor de azi, iar figopay.ro apare și în pagina de site-uri. zyto și stickerele QR sunt încă în lucru.

Ce aș face mai departe

Aș începe setul comun de componente înainte de al doilea produs, nu după; primele produse au fost proiectate separat și unificate mai târziu, iar asta a costat timp pe care l-aș fi folosit mai bine pentru fluxuri. Aș transforma și verificările de accesibilitate într-o listă scrisă, folosită de toată echipa, în loc să rămână ceva ce știu doar eu și ce apare în reviziile de design. După asta urmează zyto și stickerele QR.