Cashare

Првата P2P платформа за кредитирање во Швајцарија, редизајнирана од темел.

Кога почнав да работам со Cashare, веб-страницата веќе постоеше со години. Технички, функционираше. Страниците се вчитуваа, формуларите се поднесуваа, заемите се бараа. Но веќе не делуваше како компанијата.

Cashare беше првата peer-to-peer платформа за кредитирање во Швајцарија. Ова го прават од 2008 година, подолго отколку што постојат повеќето fintech компании. Довербата беше тука, искуството беше тука, тимот беше солиден. Веб-страницата едноставно не успеваше да ги следи.

Затоа почнавме одново. Не брендот, не компанијата, само површината што луѓето прво ја гледаат.

Целта не беше да изгледа како секоја друга fintech страница. Повеќето премногу се трудат да делуваат „модерно“ и на крај изгледаат како ист шаблон со градиент и различно лого одозгора. Cashare заслужуваше нешто потивко. Нешто што ќе одговара на вистинскиот впечаток од работењето со нив: мирно, швајцарско, внимателно, човечко.

Ова е приказната за тоа како стигнавме дотаму. Одлуките зад типографијата, бојата, иконите што ги создадовме од нула, и малите детали што повеќето луѓе никогаш нема да ги забележат, но кои го држат сето тоа заедно.

Ова е шаблонот на секцијата што се протега низ целиот сајт. Ист ритам секојпат: слоганот горе, херојската линија, текстот под неа, копчето, па потоа редица од три картички со карактеристики подолу.

Растојанието е однапред фиксирано. 15px меѓу слоганот и херојската линија, 15px меѓу херојската линија и текстот, 28px до копчето. Потоа картичките се сместени во редица со 3 колони и 40px празнини меѓу нив, а секоја ја следи својата внатрешна мрежа (икона, 24px слоган, 16px текст).

Градењето на сајтот на овој начин значеше дека секоја секција самата се составуваше. Штом правилата постоеја, веќе не дизајнирав страници од нула; пополнував структура. Токму затоа сајтот се чита толку мирно. До втората секција, окото веќе знае каде сè ќе слета, па престанува да работи и едноставно чита.

Картичките за услуги низ целиот сајт сите ја следат истата внатрешна мрежа. Широки 345px, со иконата горе, празнина од 35px, потоа слоган од 24px, празнина од 15px, и основен текст од 16px подолу. Исто растојание на секоја картичка, без исклучоци.

Заклучувањето на структурата рано го направи остатокот од сајтот полесен за градење. Без разлика дали картичката беше за позајмување, инвестирање, или нешто на страницата За нас, секогаш се читаше на ист начин: икона, слоган, текст. Окото го учи ритамот до втората картичка, и по тоа целата страница делува предвидливо на добар начин.

Системот на бои се дели на два дела: основна палета за интерфејсот и градиентен систем за услугите.

Основата е изградена околу брендовата тиркизна (#00B5CE), со потемна, посветла и посуптилна верзија за различни состојби. Потоа доаѓаат потпорните елементи: бои на состојби (грешка, предупредување, инфо, успех), темна скала за типографија и површини, и светла скала за позадини и разделувачи. Заедно, тоа е доволно да се покрие секоја одлука за интерфејсот без никогаш да се излезе надвор од системот.

Градиентите се местото каде што живее личноста.

Секоја услуга добива своја двобојна комбинација, никогаш една рамна боја.

Заемопримачи

Тие работат на тиркизниот крај од спектарот, а инвеститорите на зелениот. Оттаму, секоја подуслуга има свој пар: Приватен заемопримач оди од виолетова до тиркизна, МСП заемопримач од розова до тиркизна, Хипо заемопримач од темно сина до тиркизна.

Инвеститори

Тие се делат на жолто-до-зелено за Приватни инвеститори и портокалово-до-зелено за Институционални инвеститори.

Логиката е едноставна. Секој градиент завршува во матичната боја на својата категорија. Па без разлика каде сте на сајтот, градиентот тивко ви кажува во кој свет се наоѓате. Страниците за заемопримачи секогаш завршуваат во тиркизна. Страниците за инвеститори секогаш завршуваат во зелена. Иконите добиваат свои бонус градиенти (розово-до-виолетово, сино-до-розово) за моменти што бараат малку дополнителна топлина.

Звучи како многу, но всушност се само две правила: избери матична боја за категоријата и секогаш блендирај кон неа. Тоа е она што спречува сајт со толку многу услуги да не се чувствува како кеса полна со шарени бонбони.

Картичките за услугите добија своја боена идентичност, врзана за делот од платформата на кој припаѓаат. Задолжувањето е во тиркизна, инвестирањето во зелена, а делот за „за нас/инфо“ во виолетова. Иста структура на картички, ист систем на икони, само различен акцент, за посетителите веднаш да знаат во кој свет се наоѓаат.

Состојбата при прелет со глушец е местото каде што станува поинтересно. Кога ќе прелетате над картичка, сенката ја презема сопствената боја на картичката наместо да остане неутрално сива. Прелетајте над тиркизна картичка и добивате мек тиркизен сјај под неа. Прелетајте над зелена — зелен сјај. Виолетова, истото.

Тоа е мал детаљ, но целата навигација ја прави да изгледа жива. Картичките не само што се подигнуваат при прелет, туку и засветлуваат во својата боја, како секоја услуга тивко да ви вели „да, оваа“. Тоа исто така го зајакнува системот на бои без да се додава уште UI. Сенката ја врши работата на брендирање што инаку би морале да ја прават етикетите.

Бројките поради кои луѓето дојдоа

Калкулаторот е единствената работа поради која повеќето посетители навистина дојдоа, па му пристапив со најголема внимателност.

Две верзии, една за приватни заемопримачи и една за МСП. Истата структура, различна боја: тиркизна за приватни, розова за бизнис. Промената на бојата ви кажува по кој пат сте уште пред да го прочитате табот.

Две лизгалки, месечна стапка во живо и прекинувач за осигурување. Нема формулар, нема бариера за е-пошта, нема копче "пресметај". Ги влечете, ги гледате, одлучувате. Подеталниот преглед стои веднаш под лизгалките, за луѓето да можат да споредуваат сценарија без да лизгаат или кликнуваат.

Идејата дојде од следење како луѓето навистина се однесуваа на старата страница. Повеќето од нив си играа со калкулаторот три или четири пати пред да направат што било друго. Затоа се однесував кон него како кон вистинска почетна страница, а не како спореден виџет.

Навигацијата беше незгодна.

Cashare има многу публики (приватни заемопримачи, МСП, хипотекарни заемопримачи, индивидуални инвеститори, институционални инвеститори), плус вообичаените страници за нас/прес/работни места/блог. Обично паѓачко мени ќе беше ѕид од текст.

Затоа го поделив во три колони според целта: Заемопримување, Инвестирање и За нас. Секој елемент добива прилагодена икона лево, наслов и опис во една линија. Иконата ја врши најголем дел од работата. Вашето око го наоѓа вистинскиот пиктограм пред да завршите со читање на ознаките.

Описите се кратки намерно. Тие не продаваат, туку ориентираат. Доволно е да ви кажат што се крие зад линкот пред да кликнете.

Ова се картичките за активна аукција, каде што инвеститорите навистина прелистуваат отворени заеми и одлучуваат што да финансираат. Секоја мораше да смести многу информации во мал простор без да изгледа пренатрупано.

Хиерархијата беше тешкиот дел. Има многу што да се прикаже: износ на заемот, каматна стапка, кредитен рејтинг, тип на заем, број на аукцијата, рок, преостанато време и напредок на финансирањето. Затоа изработив јасен приказ од лево кон десно: прво значката за рејтинг, потоа големиот износ на заемот, а потоа деталите подредени десно во посмирена тежина. Погледот ви паѓа на двете најважни нешта (рејтинг и износ) пред да забележи било што друго.

Значката за рејтинг има двојна улога. Буквата ви го кажува кредитниот степен (B, B+, C), а бојата го засилува тоа: зелена за побезбедни заеми, портокалова за поризични. Истата логика важи и за лентата за напредок на дното. Инвеститорите можат да прегледаат ред картички и веднаш да ја согледаат состојбата на тоа што е достапно, без да прочитаат ниту една ознака.

Лентата за напредок е срцето на картичката. Таа е единствената работа што се менува во реално време, па затоа е на дното, по цела ширина, со процентот веднаш над неа. Може да се види со еден поглед дали заемот штотуку почнува, е половично финансиран или веќе е на 100% и се затвора.

Секоја икона беше изработена на истата 193x193px мрежа со истата внатрешна безбедна зона. Звучи малку штреберски, но тоа е единствениот начин сет од 50+ икони да остане конзистентен. Без заедничка мрежа, една икона ќе заврши поголема од друга, оптичките центри ќе се поместат, а целата навигација ќе почне да изгледа невешто.

Мрежата одржува сè визуелно избалансирано. Секоја икона седи во истата рамка, со ист простор за дишење околу рабовите, па кога се наредени една до друга (во навигацијата, во листите со функции, во контролни листи) сите делуваат со иста визуелна тежина. Ниту една икона не го зафаќа просторот, ниту една не изгледа изгубено.

Тоа е тип структура што никој не треба да ја забележи. Токму тоа е поентата.

Иконите беа една од првите работи за кои знаев дека морам да ги изградам од нула.

Готовите комплети икони сега сите изгледаат исто, тој рамeн контурен стил што го користи секој fintech. На Cashare му требаше нешто со повеќе карактер.

Го дизајнирав целиот сет внатрешно. Градиентни исполни, меки геометриски форми и фиксна палета од тиркизни, виолетови, сини, розови тонови и малку зелена. Секоја икона е изградена според истите визуелни правила: заоблени форми, слоевити облици, без контури, никогаш повеќе од три бои по икона. Токму таа доследност ги прави да делуваат како семејство наместо како случајна колекција.

Поголемиот предизвик беше опсегот.

Cashare требаше икони за сè, од „Приватен заемопримач“ до „Без долг“ до „Потврден идентитет“ до „Краудлендинг.“ Некои од тие поими немаат очигледна визуелна претстава. „Транспарентен процес“ беше само два преклопени круга, едниот полн, другиот транспарентен. „Без долг“ беше кредитна картичка со линија преку неа. „Редовен приход“ беше картичка со стрелка надолу. Трикот беше секоја да биде читлива за една секунда, дури и на мали димензии во навигацијата.

До крајот имаше над педесет икони низ целиот сајт. Се појавуваат во навигацијата, во листите со карактеристики, во контролни листи за подобност и на целните страници. Ист систем насекаде, па целиот сајт изгледа како да е сошиен од истата рака.

Сенките се мали, но прават многу работа. Направив две состојби за секоја картичка што може да се кликне на сајтот: блага сенка од 5% во мирување и подлабока сенка од 20% при клик. Ист поместување, исто заматување, само посилен пад кога нешто е активно.

Тоа е вид на детаљ што никој не го посочува, но токму затоа сајтот делува одзивно наместо рамно. Кликнуваш, картичката малку се втиснува, и твојот мозок знае дека допирот е регистриран уште пред страницата да се помести.

Целиот сајт користи Plus Jakarta Sans. Чист е, модерен и пријателски без да се труди премногу, што изгледаше како вистински избор за бренд што стои меѓу швајцарското банкарство и помладата финтек публика.

Изградив едноставен типографски систем: тиркизната ознака горе за да постави контекст, истакнатиот ред во темно сива за да ја носи пораката и основниот текст подолу за да ги пополни деталите. Ист ритам од три чекори во секоја секција, па страницата се чита како разговор наместо како ѕид од текст.

Cashare никогаш не беше за впечатливи редизајни или следење трендови. Се работеше за да се направат правилно стотици мали работи: калкулаторот што се вчитува прв, иконата што се чита на 24px, сенката што ти кажува дека картичката е допрена, типографскиот систем што држи заедно долга лендинг-страница.

По две години, сајтот го прави тоа што треба да го прави. Заемопримателите побрзо се снаоѓаат. Инвеститорите му веруваат на тоа што го гледаат. Тимот троши помалку време на објаснување и повеќе време разговарајќи со луѓе што веќе го сфаќаат.

Тоа е делот од дизајнот што не се гледа на снимка од екранот. Но тоа е делот што беше најважен.

Секој дел е изграден и по принципот mobile-first. Редот со картички во 3 колони се претвора во еден стек, херојскиот текст се намалува, копчето се растегнува на цела ширина, а растојанието се стеснува токму колку што треба за да изгледа правилно на мал екран без да се изгуби ритамот. Истата структура, истата логика, само склопена за палци.