Cashare

Platforma e parë P2P e huadhënies në Zvicër, e ridizenjuar nga e para.

Kur fillova të punoja me Cashare, faqja e internetit kishte qenë prej vitesh aty. Funksiononte, teknikisht. Faqet ngarkoheshin, formularët dërgoheshin, huatë kërkoheshin. Por nuk ndihej më si kompania.

Cashare ishte platforma e parë peer-to-peer e huadhënies në Zvicër. Ata e kanë bërë këtë që nga viti 2008, më gjatë se sa kanë ekzistuar shumica e fintech-eve. Besimi ishte aty, përvoja ishte aty, ekipi ishte i fortë. Faqja e internetit thjesht nuk po i arrinte më ritmit.

Prandaj filluam nga e para. Jo marka, jo kompania, vetëm sipërfaqja që njerëzit shohin së pari.

Qëllimi nuk ishte ta bënim të dukej si çdo faqe tjetër fintech. Shumica përpiqen shumë fort të duken "moderne" dhe përfundojnë duke u dukur si i njëjti model me gradient dhe me një logo tjetër sipër. Cashare meritonte diçka më të qetë. Diçka që përputhej me ndjesinë reale të punës me ta: e qetë, zvicerane, e kujdesshme, njerëzore.

Kjo është historia se si arritëm deri aty. Zgjedhjet pas tipografisë, ngjyrës, ikonave që i ndërtuam nga e para, dhe detajet e vogla që shumica e njerëzve nuk do t'i vërejnë kurrë, por që e mbajnë të gjithë gjënë të bashkuar.

Ky është modeli i seksionit që përdoret në të gjithë sitin. I njëjti ritëm çdo herë: tagline në krye, linja hero, trupi poshtë, butoni, pastaj një rresht me tre karta veçorish më poshtë.

Hapësirat janë të fiksuara. 15px midis tagline-it dhe hero-s, 15px midis hero-s dhe trupit, 28px deri te butoni. Pastaj kartat vendosen në një rresht me 3 kolona me hapësira prej 40px mes tyre, dhe secila ndjek rrjetën e vet të brendshme (ikonë, tagline 24px, trup 16px).

Të ndërtosh sitin në këtë mënyrë do të thoshte që çdo seksion formohej vetë. Sapo rregullat ekzistonin, nuk po projektoja më faqe nga e para; po mbushja një strukturë. Kjo është edhe arsyeja pse siti lexohet kaq qetë. Që në seksionin e dytë, syri yt tashmë e di se ku do të vendoset gjithçka, kështu që ndalon së punuari dhe thjesht lexon.

Kartat e shërbimeve në të gjithë sajtin ndjekin të gjitha të njëjtën rrjetë të brendshme. 345px të gjera, me ikonën sipër, një hapësirë prej 35px, pastaj një slogan 24px, një hapësirë prej 15px dhe një tekst trupi 16px poshtë. E njëjta hapësirë në çdo kartë, pa përjashtime.

Bllokimi i strukturës herët e bëri pjesën tjetër të sajtit më të lehtë për t’u ndërtuar. Qoftë kur një kartë ishte për huamarrje, investim, apo diçka në faqen "Rreth nesh", ajo lexohej gjithmonë njësoj: ikonë, slogan, trup. Syri e mëson ritmin që te karta e dytë, dhe pas kësaj e gjithë faqja ndihet e parashikueshme në një mënyrë të mirë.

Sistemi i ngjyrave ndahet në dy pjesë: një paletë bazë për ndërfaqen e përdoruesit dhe një sistem gradientësh për shërbimet.

Baza është ndërtuar rreth ngjyrës teal të markës (#00B5CE), me një version më të errët, më të çelët dhe më delikat për gjendje të ndryshme. Pastaj vjen grupi mbështetës: ngjyrat e gjendjeve (error, warning, info, success), një shkallë e errët për tipografinë dhe sipërfaqet, dhe një shkallë e çelët për sfondet dhe ndarëset. Së bashku, kjo mjafton për të trajtuar çdo vendim të ndërfaqes pa dalë kurrë jashtë sistemit.

Gradientët janë aty ku jeton personaliteti.

Çdo shërbim merr përzierjen e vet me dy ngjyra, kurrë një ngjyrë të vetme të sheshtë.

Huamarrësit

Ata mbështeten te skaji teal i spektrit, investitorët te jeshilja. Që aty, çdo nënshërbim ka çiftin e vet: Huamarrës Privat kalon nga vjollcë në teal, Huamarrës SME nga rozë në teal, Huamarrës Hipotekar nga blu e errët në teal.

Investitorët

Ata ndahen në të verdhë-në-jeshile për Investitorët Privatë dhe portokalli-në-jeshile për Investitorët Institucionalë.

Logjika është e thjeshtë. Çdo gradient përfundon me ngjyrën mëmë të kategorisë së vet. Pra, pavarësisht se ku ndodhesh në sajt, gradienti të tregon në heshtje se në cilën botë je. Faqet e huamarrësve përfundojnë gjithmonë te teal. Faqet e investitorëve përfundojnë gjithmonë te jeshilja. Ikonat marrin gradientët e tyre bonus (nga rozë në vjollcë, nga blu në rozë) për momente që kanë nevojë për pak më shumë ngrohtësi.

Duket si shumë, por në të vërtetë janë vetëm dy rregulla: zgjidh një ngjyrë mëmë për kategorinë dhe përzie gjithmonë drejt saj. Kjo është ajo që e mban një sajt me kaq shumë shërbime të mos duket si një qese me Skittles.

Kartat e shërbimeve secila mori identitetin e vet të ngjyrës, të lidhur me pjesën e platformës ku i përkasin. Huamarrja shkon në teal, investimi në të gjelbër, dhe seksioni për rreth/informacione në vjollcë. E njëjta strukturë e kartës, i njëjti sistem ikonash, vetëm me një theks tjetër, që vizitorët ta kuptojnë menjëherë në cilën botë ndodhen.

Gjendja e hover-it është ajo ku bëhet më interesante. Kur kalon mbi një kartë, hija me rënie merr ngjyrën e vet të kartës në vend që të mbetet gri neutrale. Kalon mbi një kartë teal, merr poshtë një shkëlqim të butë teal. Kalon mbi një të gjelbër, një shkëlqim të gjelbër. Për vjollcën, njësoj.

Është një detaj i vogël, por e bën gjithë navigimin të duket i gjallë. Kartat nuk vetëm ngrihen kur kalon mbi to, por ndriçohen me ngjyrën e tyre, sikur çdo shërbim po të thotë qetësisht "po, kjo është." Kjo e përforcon edhe sistemin e ngjyrave pa shtuar më shumë UI. Hija po bën punën e brandimit që përndryshe do ta kishin bërë etiketat.

Numrat për të cilët erdhën njerëzit

Llogaritësi është gjëja për të cilën shumica e vizitorëve erdhën vërtet, prandaj e trajtova me kujdesin më të madh.

Dy versione, një për huamarrësit privatë dhe një për NVM-të. E njëjta strukturë, ngjyrë tjetër: jeshile-blu për privatët, rozë për biznesin. Ndryshimi i ngjyrës të tregon se në cilën rrugë je, edhe para se ta kesh lexuar skedën.

Dy rrëshqitës, një pagesë mujore në kohë reale dhe një çelës për sigurimin. Asnjë formular, asnjë pengesë email-i, asnjë buton "llogarit". Ti tërheq, sheh, vendos. Përllogaritja ndodhet menjëherë poshtë rrëshqitësve, kështu që njerëzit mund të krahasojnë skenarët pa lëvizur faqen ose pa klikuar.

Ideja lindi duke vëzhguar se si silleshin njerëzit në të vërtetë në faqen e vjetër. Shumica prej tyre e përdornin llogaritësin tre ose katër herë para se të bënin diçka tjetër. Prandaj e trajtova si faqen kryesore të uljes, jo si një widget anësor.

Navigimi ishte i ndërlikuar.

Cashare ka shumë audienca (huamarrës privatë, SME, huamarrës hipotekarë, investitorë individualë, investitorë institucionalë) plus faqet e zakonshme rreth/presë/punë/blog. Një dropdown i zakonshëm do të ishte një mur teksti.

Kështu e ndava në tre kolona sipas qëllimit: Huamarrje, Investime dhe Rreth nesh. Çdo element merr një ikonë të personalizuar në të majtë, një titull dhe një përshkrim me një rresht. Ikona bën pjesën më të madhe të punës. Syri yt e gjen piktogramin e duhur përpara se të kesh mbaruar së lexuari etiketat.

Përshkrimet mbahen të shkurtra me qëllim. Ato nuk shesin, por orientojnë. Mjaftueshëm për të të treguar çfarë fshihet pas lidhjes para se të klikosh.

Këto janë kartat e ankandit në kohë reale, ku investitorët në fakt shfletojnë huatë e hapura dhe vendosin çfarë të financojnë. Secila duhej të përfshinte shumë informacion në një hapësirë të vogël pa u ndier e ngarkuar.

Hierarkia ishte pjesa më e vështirë. Ka shumë për t’u shfaqur: shuma e huasë, norma e interesit, vlerësimi i kreditit, lloji i huasë, numri i ankandit, afati, koha e mbetur dhe progresi i financimit. Prandaj ndërtova një lexim të qartë nga e majta në të djathtë: etiketa e vlerësimit së pari, pastaj shuma e madhe e huasë, e më pas detajet të vendosura në të djathtë me një peshë më të qetë. Syri juaj ndalet te dy gjërat që kanë më shumë rëndësi (vlerësimi dhe shuma) përpara se të kapë diçka tjetër.

Etiketa e vlerësimit kryen një funksion të dyfishtë. Shkronja të tregon shkallën e kreditit (B, B+, C) dhe ngjyra e forcon këtë: e gjelbër për huatë më të sigurta, portokalli për ato më të rrezikshme. E njëjta logjikë vlen për shiritin e progresit në fund. Investitorët mund të skanojnë një rresht kartash dhe ta lexojnë menjëherë formën e asaj që është në dispozicion, pa lexuar asnjë etiketë.

Shiriti i progresit është rrahja e zemrës së kartës. Është e vetmja gjë që ndryshon në kohë reale, ndaj qëndron në fund, me gjerësi të plotë, dhe përqindja menjëherë sipër tij. Mund të kuptosh me një shikim nëse një hua sapo ka filluar, është financuar përgjysmë, apo tashmë ka arritur 100% dhe po mbyllet.

Çdo ikonë u ndërtua mbi të njëjtin rrjet me 193x193px me të njëjtën zonë të brendshme të sigurt. Tingëllon si gjë geekësh, por është e vetmja mënyrë që një set me më shumë se 50 ikona të mbetet i qëndrueshëm. Pa një rrjet të përbashkët, një ikonë përfundon më e madhe se një tjetër, qendrat optike zhvendosen dhe e gjithë navigimi fillon të duket i çrregullt.

Rrjeti i mban të gjitha të balancuara vizualisht. Çdo ikonë qëndron në të njëjtën kuti kufizuese, me të njëjtën hapësirë frymëmarrjeje rreth skajeve, kështu që kur vendosen njëra pranë tjetrës (në navigim, në listat e veçorive, në listat kontrolluese) ato të gjitha japin përshtypjen e të njëjtës peshë. Asnjë ikonë nuk e zë gjithë hapësirën, asnjëra nuk duket e humbur.

Është lloji i strukturës që askush nuk duhet ta vërë re. Kjo është e gjithë ideja.

Ikonat ishin një nga gjërat e para që e dija se duhej t’i ndërtoja nga e para.

Setet e gatshme të ikonave duken të gjitha njësoj tani, ai stil i sheshtë me konture që përdor çdo fintech. Cashare kishte nevojë për diçka me më shumë personalitet.

E projektova të gjithë setin brenda kompanisë. Mbushje me gradient, forma gjeometrike të buta, dhe një paletë fikse me nuanca të kaltër-gjelbra, vjollcë, blu, rozë dhe një prekje të gjelbër. Çdo ikonë është ndërtuar sipas të njëjtave rregulla vizuale: forma të rrumbullakosura, forma të shtresuara, pa konture, kurrë më shumë se tre ngjyra për ikonë. Ajo qëndrueshmëri është ajo që i bën të duken si një familje, në vend të një koleksioni të rastësishëm.

Sfida më e madhe ishte shtrirja.

Cashare kishte nevojë për ikona për gjithçka, nga "Huamarrës Privat" te "Pa Borxh", te "Identiteti i Konfirmuar", te "Crowdlending." Disa nga këto koncepte nuk kanë një paraqitje të dukshme. "Proces i tejdukshëm" ishin thjesht dy rrethe që mbivendoseshin, një i plotë, një transparent. "Pa Borxh" ishte një kartë krediti me një vijë mbi të. "Të Ardhura të Rregullta" ishte një kartë me një shigjetë poshtë. Truku ishte t'i bëje secilin të lexohej brenda një sekonde, edhe në madhësi të vogla në navigim.

Në fund kishte mbi pesëdhjetë ikona në të gjithë sajtin. Ato shfaqen në navigim, në listat e veçorive, në listat e kontrollit të përshtatshmërisë dhe në faqet hyrëse. I njëjti sistem kudo, ndaj i gjithë sajti duket sikur është qepur së bashku nga e njëjta dorë.

Hijet janë të vogla, por bëjnë shumë punë. Ndërtova dy gjendje për çdo kartë të klikueshme në sajt: një hije të butë 5% në gjendje pushimi dhe një hije më të thellë 20% kur klikohet. Zhvendosje e njëjtë, i njëjti blur, vetëm një rënie më e fortë kur diçka është aktive.

Është një nga ato detaje që askush nuk i vë në dukje, por është arsyeja pse faqja ndihet reaguese në vend që të jetë e sheshtë. Klikon, karta fundoset pak, dhe truri yt e kupton që prekja u regjistrua edhe para se faqja të lëvizë.

E gjithë faqja përdor Plus Jakarta Sans. Është i pastër, modern dhe miqësor pa u përpjekur shumë, gjë që dukej e përshtatshme për një markë që qëndron mes bankave zvicerane dhe një audience më të re fintech.

Ndërtova një sistem të thjeshtë tipografik: etiketën në ngjyrë teal në krye për të vendosur kontekstin, rreshtin kryesor në gri të errët për të mbajtur mesazhin, dhe tekstin poshtë për të plotësuar detajet. I njëjti ritëm me tre hapa në çdo seksion, kështu që faqja lexohet si një bisedë në vend të një muri teksti.

Cashare nuk kishte të bënte kurrë me ridizajnime të bujshme apo me ndjekjen e trendeve. Bëhej fjalë për t'i bërë siç duhet qindra gjëra të vogla: kalkulatori që ngarkohet i pari, ikona që lexohet në 24px, hija që të tregon se një kartë u prek, sistemi i tipografisë që e mban së bashku një faqe të gjatë uljeje.

Dy vjet më vonë, faqja bën atë që duhet të bëjë. Huamarrësit e gjejnë më shpejt rrugën e tyre. Investitorët u besojnë asaj që shohin. Ekipi shpenzon më pak kohë duke shpjeguar dhe më shumë kohë duke folur me njerëz që tashmë e kuptojnë.

Kjo është pjesa e dizajnit që nuk shfaqet në një pamje ekrani. Por është pjesa që kishte më shumë rëndësi.

Çdo seksion u ndërtua gjithashtu me qasje mobile-first. Rreshti i kartave me 3 kolona shndërrohet në një grumbull të vetëm, teksti kryesor zvogëlohet, butoni zgjatet në gjithë gjerësinë, dhe hapësira ngushtohet mjaftueshëm sa të ndihet e duhur në një ekran të vogël pa humbur ritmin. E njëjta strukturë, e njëjta logjikë, thjesht e palosur për gishtat e mëdhenj.