Cum a reproiectat Tonik site-ul web al lui Voucherify?

Creșterea rapidă este un blestem și o binecuvântare pentru fiecare startup care crește rapid. Atunci când noi funcții sunt lansate în mod regulat și piața țintă se schimbă, un site web lansat cu doar un an înainte poate fi deja depășit.

Este un semn grozav, dar este la fel de enervant când vizitatorii tăi nu văd ce faci tu. Dacă nu îți actualizezi site-ul web, ei te vor judeca în funcție de prezentarea învechită.

La începutul anului 2021, Voucherify se confrunta cu probleme similare. Site-ul web nu a explicat bine produsul, animațiile erau foarte abstracte și nu aveau legătură cu produsul, iar stilul și brandingul nu au atras clientul întreprinzător, cunoscător de tehnologie la care încercau să ajungă. Culorile pastelate, ilustrațiile abstracte și personajul cu aspect de caricatură al unui miner nu au fost suficiente pentru a-i face pe cei în costume să chicotească.

În al doilea rând, site-ul s-a simțit spart împreună, mai degrabă decât construit cu grijă. Inconsecvențele minore, interacțiunile îndoielnice și lipsa fluxului general nu păreau a fi mare lucru atunci când sunt examinate separat – dar împreună, au creat o primă impresie slabă.

Provocarea

Voucherify ne-a contactat pentru a-i ajuta să-și reproiecteze site-ul web – astfel încât să se adreseze grupului țintă – și să creeze un sistem de design, pentru a permite echipei să lanseze mai multe pagini de destinație. Dar stai, cine suntem noi ?

Suntem tonik, un studio de design digital. De cele mai multe ori, lucrăm cu startup-uri aflate în stadiu incipient pentru a le ajuta să-și lanseze MVP-urile, dar asta nu înseamnă că nu colaborăm cu companii mai consacrate. Clienți precum Segment, Auth0 sau Chronosphere confirmă capacitatea noastră de a ne integra într-o echipă existentă.

Pentru acest proiect, ne-am unit forțele a doi designeri – Mikolaj Biernat & Mikolaj Szymkowiak – și Aga Kaczmarek, care a gestionat munca în calitate de Project Manager. Cu o afecțiune sănătoasă pentru agil din partea ambelor echipe, nu ne-am stabilit termene grele, ci am vrut să încheiem proiectul în câteva luni. Deci, de unde am început?

Procesul de proiectare

Înainte să ne murdărim mâinile, am schițat procesul de proiectare pentru a defini ce metode de proiectare vom folosi pentru a atinge obiectivul. De asemenea, ne-a ajutat să estimăm calendarul proiectului, numărul de iterații și cantitatea de feedback de care vom avea nevoie de la client în fiecare etapă. Iată cu ce am venit.

Crearea arhitecturii informaționale

Am început lucrurile prin crearea unei arhitecturi informaționale (IA). Este o diagramă care arată relația dintre toate subpaginile (și uneori și conținutul acestora), ceea ce face ușor să imaginezi navigarea. Când lucrăm la o reproiectare a site-ului web, folosim IA pentru a înțelege conținutul acestuia și a vizualiza scopul unui proiect.

Stabilirea dispoziției potrivite

Clienții au adesea o viziune asupra modului în care doresc să arate noul lor site web. Momentul perfect pentru a-l așeza este atunci când creăm moodboard-ul proiectului. Este o colecție de referințe vizuale pe care le folosim pentru a ne alinia aspectului și simțului pe care îl căutăm. Cel mai bun lucru este că nu pierdem timpul căutând adjectivele potrivite – capturile de ecran ale benchmark-urilor funcționează de mii de ori mai bine.

Planul

Pe lângă reproiectarea pur vizuală, echipa Voucherify a dorit să actualizeze conținutul de pe paginile cheie. Ceea ce spui pe site-ul tău web este mult mai important decât modul în care este prezentat. De aceea, am lucrat mai întâi cu wireframes pentru a găsi aspectul potrivit pentru conținut. Le puteți considera modelul site-ului. Nu folosesc culori, grafică sau alte efecte vizuale, așa că este mai ușor să vă concentrați asupra elementelor de bază.

Un spectacol secundar rapid – modernizarea siglei

Când am început să iterăm pe wireframes cu culorile și fonturile potrivite, am găsit o oportunitate de a câștiga rapid pentru Voucherify ca marcă. Logo-ul lor – tipografia sa, mai exact – s-a simțit dezechilibrat. L-am modificat puțin pentru a îmbunătăți lizibilitatea fără a reinventa întregul branding.

Poza completă – modelele finale

În cele din urmă, datorită tuturor evaluărilor pe care le-am făcut mai devreme, totul s-a reunit. Site-ul web Voucherify a fost reproiectat cu noul limbaj vizual. Merită menționat că, în loc să lucrăm la proiectele finale în spatele unei uși închise, am colaborat strâns cu dezvoltatorul Webflow de la Voucherify, Piotr, care a livrat fiecare subpagină în mod iterativ, pe măsură ce i-am terminat designul. În acest fel, am putea reacționa la orice probleme pe care le-am întâlnit pe parcurs și am putea lansa proiectul mai rapid, în comparație cu lucrul într-un siloz.

Construirea LEGO-urilor – pregătirea unui sistem de proiectare

În paralel cu reproiectarea, lucram la sistemul de design care alimenta site-ul. Livrabilul conținea un set de blocuri și linii directoare despre cum să le utilizeze, astfel încât oricine din echipa de marketing a Voucherify să poată proiecta (construiește din componente gata) o pagină de destinație. Într-o realitate de start-up, lucrurile se mișcă rapid și aveți nevoie de instrumente pentru a vă executa planurile rapid și eficient – ​​sistemul de proiectare trebuia să meargă cu asta.

Fiecare element de design – de la jetoane umile care conțin informații despre culori, fonturi și umbre, până la secțiuni întregi – este proiectat cu atenție pentru a fi scalabil la o varietate de conținut. Datorită puterii Figma – instrumentul nostru de design preferat (cel puțin în momentul scrierii), toate elementele sunt disponibile într-o simplă glisare și plasare.

Rezultatele proiectului

Cu ce ​​am ajuns?

Site web bazat pe Webflow

Bineînțeles, nu am dezvoltat noi înșine site-ul web – a fost realizat de Piotr Gacek, dezvoltatorul front-end al Voucherify (foarte bun!) – dar nu ar fi corect să enumeram un fișier de design ca rod al colaborării noastre. La urma urmei, un site web este o piesă interactivă pe Internet – nu o imagine statică. Datorită Webflow, echipa Voucherify l-a putut construi în cel mai scurt timp.

Sistem de proiectare

Sistemul de design pe care l-am creat nu este doar o bibliotecă de design pe care am folosit-o pentru a accelera procesul de ideare. Pentru a asigura coerența între echipe, Piotr a replicat componentele în Webflow. În acest fel, Voucherify ar putea face fără probleme construirea mai multor pagini de destinație în viitor. ‍

Active de marketing

Punem un accent suplimentar pe elementele vizuale, cum ar fi ilustrațiile sau pictogramele, astfel încât acestea să poată funcționa în contexte diferite. În acest fel, noul limbaj vizual nu trăiește exclusiv pe site. Alte active de marketing, cum ar fi cărțile electronice, atrag elementele cheie din aceeași bibliotecă de design.

„Eu am fost managerul de proiect din partea Voucherify pentru această reproiectare. Mi-a plăcut foarte mult să lucrez cu tonik ca agenție de design. Au lucrat într-un mod agil, iterativ, în care am putut interveni în fiecare etapă a designului, crescând eficiența colaborării noastre. Au fost întotdeauna deschiși criticilor și au pregătit noi versiuni ale designului de câte ori le-am cerut noi. De obicei, erau contactați și au răspuns rapid. Întâlniri săptămânale și rezumate zilnice trimise prin Slack, precum și un grafic de urmărire mi-a oferit o imagine foarte clară a progresului lucrării și a prevăzut calendarele proiectului. Apreciez foarte mult transparența, claritatea și deschiderea echipei lor. Suntem foarte mulțumiți de designul final al site-ului. Sistemul de design a ajutat deja am creat câteva pagini de destinație noi și creăm aproape o sută de machete promoționale. Este foarte ușor de utilizat chiar și pentru cei care nu sunt dezvoltatori.” – Katarzyna Banasik, Product Marketing Manager la Voucherify.

Ce urmeaza?

O lansare de succes mai târziu, am început un parteneriat cu Voucherify pentru a-i ajuta pe ei și pe clienții lor cu tot ceea ce privește designul digital, concentrându-se pe produse și branding. Citiți anunțul complet pentru a afla mai multe.