Forțele motrice ale designului – Un studiu de caz pentru reproiectarea site-ului web

Când este cel mai potrivit moment pentru a face o reproiectare a site-ului web?

Cine nu a dat peste un site care pare învechit și abandonat? Asemenea carcasei unui camion avariat lăsat afară în deșert, clar neatins de mulți ani.

Site-urile web sunt reînnoite din tot felul de motive. Din păcate, multe companii nu își dau seama că site-ul lor are nevoie de o reproiectare și sunt lăsate în urmă atunci când rivalii câștigă un avantaj competitiv prin îmbunătățirea lor, sporind astfel conversiile.

O greșeală frecventă pe care o fac companiile este să nu ia în considerare din timp ce s-ar putea întâmpla dacă nevoile lor de site-uri web ar deveni mai complexe și, în consecință, se află într-o situație dificilă, potențial costisitoare, atunci când trebuie să-l extindă. În plus, factori importanți, cum ar fi optimizarea pentru motoarele de căutare (SEO), SSL (care afectează clasarea și securitatea) și compatibilitatea cu dispozitivele mobile (care afectează clasarea și conversia) pot ajunge adesea să fie neglijați.

Noile design-uri de site-uri web apar adesea din cauza unei schimbări de conducere la vârf, unde este instituită o nouă direcție de branding și noi oameni de marketing de brand vin la bord. Evaluând site-ul web al companiei, ei sunt îngroziți să afle că are un UX îngrozitor și constată că lipsește o cantitate considerabilă de conținut de dorit. Ajuns la concluzia că este pur și simplu un „site-ul broșură” prost conceput, care nu oferă „vocea mărcii” sau conversiile pe care compania le caută, consensul este că este pregătit pentru schimbare. Este timpul pentru o renovare a site-ului web.

O renovare a site-ului web pentru o companie de automobile

Este important de menționat că acest studiu de caz de reproiectare a site-ului web auto nu este o reproiectare oficială, comandată. Nu am informații din interior despre companie, strategia lor digitală sau industria auto în ansamblu. Pur și simplu folosesc industria auto ca un caz de testare pentru un studiu de caz de reproiectare a site-ului web.

În acest studiu de caz, parcurgem procesul de reproiectare a site-ului web pentru marca croată de automobile, Rimac Automobili. Rimac este un brand care a început cu un concept de mașină simplu și de atunci s-a extins într-o mare companie de producție de componente. La fel ca multe startup-uri, compania a început cu o idee care a evoluat în cele din urmă în ceva diferit; această expansiune a afectat structura site-ului web și întreaga focalizare asupra utilizatorului sa schimbat. Cererea de pe piață a dus compania într-o altă direcție, așa că și concentrarea site-ului web trebuia să se schimbe.

Există multe aspecte și unghiuri diferite de luat în considerare pentru a obține o soluție excelentă de design de site web. În ciuda faptului că designerul web anterior poate să nu fi avut resursele sau suficient timp pentru cercetarea UX, wireframing, prototipare și testarea utilizatorului, atunci când vine vorba de calitatea generală a unui design, chiar și cele mai mici decizii timpurii de proiectare pot avea semnificative repercusiuni negative și o calitate mai puțin decât optimă a site-ului web va duce în cele din urmă la o reproiectare a site-ului web în doi sau trei ani. Rezultatul este că, pe termen lung, clienții plătesc pentru un site web mai mult decât își dau seama. Strategia de conținut bine definită și arhitectura informațiilor este crucială atunci când vine vorba de design nou de site-uri web.

Când proiectez site-uri web corporative mari, portaluri de știri și alte site-uri cu conținut ridicat, sunt un mare fan al designului atomic, un sistem de design flexibil care se referă la crearea tuturor componentelor UI care vor funcționa pentru mai multe ecrane și situații neprevăzute la început. a unui proiect. Chiar dacă acest studiu de caz particular nu este pentru un portal de știri mare, va face totuși procesul mult mai ușor dacă o bibliotecă de design de elemente de design atomic (un set de componente de proiectare atent considerate și bine definite) este configurată pentru a lucra cu mai tarziu.

Numai după ce site-ul are strategia de conținut adecvată și arhitectura informațională ar trebui să se schimbe pe experiența utilizatorului. Fără o structură adecvată a site-ului web, designul experienței utilizatorului nu are potență. Poate că, la prima vedere, site-ul web arată frumos și funcționează bine, dar dacă nu este integrată suficientă flexibilitate, este inevitabil ca la un moment dat compania să aibă în vedere o reproiectare a site-ului.

De ce să reproiecteze site-ul acestei companii de automobile?

Rimac Automobili se extinde, iar conform postărilor oficiale, un nou concept de mașină numit „Concept_One” este deja în producție. La momentul reproiectării site-ului web necomandat, site-ul lor prezenta doar o mașină, „C_Two”. Nu a existat o varietate vizuală – site-ul web a fost creat din două șabloane, astfel încât fiecare pagină arăta foarte asemănătoare. Designul s-a axat pe imagini mari și atractive ale mașinii, fără prea multe alte lucruri care să ilustreze calitatea mașinii C_Two - informații esențiale necesare pentru a-i îndrepta pe vizitatorii site-ului către o decizie de a cumpăra mașina.

După cum se spune, „Nu ai niciodată o a doua șansă să faci o primă impresie”. Este esențial să folosiți impactul unui design excelent pentru a convinge în mod eficient vizitatorii (care, în acest caz, ar fi în mare parte pasionați de mașini de înaltă performanță) să achiziționeze o mașină care costă aproape un milion (USD). Astfel de site-uri web de ultimă generație trebuie să îndeplinească un standard incredibil de înalt. Ei trebuie să proiecteze un sentiment de calitate și carisma și să ofere un nivel înalt de pricepere, precum și un stil convingător.

Designul excelent de site-uri web trebuie să iasă în evidență într-o mare de site-uri web similare

O mare problemă în industria auto este că majoritatea site-urilor web din acel spațiu tind să arate la fel. În afară de diferite scheme de culori și imagini cu eroi, aproape că se pare că folosesc același șablon de site.

Există mulți factori în spatele deciziilor de proiectare a site-ului web ale unei companii de automobile, dar trebuie făcută o distincție clară între o mașină de 1 milion de dolari și o mașină de 25.000 de dolari și în modul în care sunt prezentate.

În spațiul auto de ultimă generație, Ferrari, Lamborghini și Aston Martin au site-uri web prea simple, de obicei corporative, care (în opinia mea) nu oferă cu adevărat o experiență excelentă pentru utilizator.

Gama de consumatori medii (Volkswagen, Toyota, Peugeot și așa mai departe) are o structură de conținut a site-ului web foarte asemănătoare cu exemplele mai high-end menționate mai sus. Cea mai mare diferență între mărcile de mașini de consum de gamă înaltă și de gamă medie este prețul - așa că ne-am aștepta ca Rimac cu mașinile lor de ultimă generație să aibă un site web remarcabil pentru a reflecta această diferență și a-și prezenta marca scumpă.

Așteptările clienților sunt mari atunci când vizitează aceste site-uri web ultra-costisitoare ale mărcii de mașini; este un angajament financiar mare și, în mod firesc, vor să fie siguri că primesc cea mai bună mașină pe care banii lor o pot cumpăra.

De ce este un Rimac mai bun decât o Toyota? Privind pe site-urile lor, nu există prea multă diferențiere între aceste două mărci foarte diferite. Acest lucru nu ar trebui să fie evident din calitatea site-ului lor?

Vizează cumpărătorii de mașini de ultimă generație cu un design excelent de site-uri web

Orice site trebuie să ia în considerare utilizatorii săi. Cine este publicul țintă pentru acest tip de mașină? Ce caută ei?

Mașinile lui Rimac costă în jur de 850.000 de dolari și vor fi fabricate doar câteva, calificându-le pentru o etichetă „ediție limitată”. Deși nu putem identifica cu exactitate tipul de client care ar fi interesat să achiziționeze aceste mașini, putem presupune că majoritatea clienților vor fi din elita bogată. Site-ul Rimac vizează eficient acești clienți?

Analiza arhitecturii informaționale

Pe site-ul nostru exemplu, am putut vedea că primul element de navigare a fost „Concept_One” (la acea vreme, era singurul produs al companiei). Site-ul web real a fost actualizat de atunci. Al doilea element de navigare este evoluția companiei, modul în care a fost produsă mașina, în timp ce al treilea element este produsele și serviciile companiei. Al patrulea element de navigare este un alt produs al companiei (biciclete electrice Greyp). Ultimele două articole sunt „presa”, care conțin comunicate de presă și „blogul”, niciunul dintre acestea nu este deosebit de util, deoarece majoritatea știrilor lor au fost publicate pe rețelele de socializare.

O altă problemă a fost că legătura de carieră a fost ascunsă ca element de navigare secundar, mai puțin important și, având în vedere expansiunea uriașă a companiei, a reprezentat o chestiune importantă. Dacă considerăm utilizatorul drept centrul preocupărilor corporative, vom vedea că la majoritatea site-urilor web ale companiilor (excepțiile tipice sunt site-urile web corporative/extrem de mari) este foarte important să aveți un link proeminent de „cariere” sau CTA.

Procesul de reproiectare a site-ului web

Pagina de pornire Imagine Hero Înainte și După

Inițial, intenția a fost de a crea o versiune mai întunecată și mai puternică a mașinii. Am găsit câteva imagini cu mașina Concept_One online și cu ceva „magie Photoshop”, am creat prima imagine de erou pentru pagina de pornire. Următoarea idee a fost ca o animație să dezvăluie încet mașina, mai întâi fundalul, apoi un contur al mașinii, urmat de o imagine complet redată.

Designul paginii de pornire

Pentru pagina principală, conceptul a fost de a defini două zone vizuale principale: navigarea de sus și imaginea eroului mașinii. Asta e. Pentru a-l face minimalist și totuși izbitor, orice lucru inutil a fost eliminat. La o privire rapidă, toate lucrurile importante sunt vizibile - totul a fost mutat în subpagini din cadrul site-ului.

Strategie de conținut și design

Pentru astfel de proiecte de renovare a site-ului, este important să proiectați și conținutul, nu doar structura site-ului și estetica vizuală. Deoarece acesta este o reproiectare a site-ului web necomandat, oferă mai multă libertate de experimentare, precum și o flexibilitate estetică în care există posibilitatea deplină de a lua propriile decizii de design.

Procesul este simplu:

1. Pregătiți corpul textului care va apărea pe site.
2. Comunicați unele elemente de design - de exemplu, detalii atrăgătoare despre accelerație, cai putere și viteza maximă - prin pictograme sau animații interactive.

Procedând astfel, cuvintele auxiliare nu sunt necesare în UI și se atrage atenția asupra zonelor care sunt mai importante pentru vizitatorii site-ului.

Reproiectarea navigației site-ului web

Structura de navigare a site-ului este acum rearanjată pe baza unei ierarhii de importanță. Avem Vehicule ca prim dropdown din navigare, ceea ce oferă flexibilitate designului, deoarece permite companiei să adauge mai multe modele de mașini în viitor.

Pentru a oferi acces imediat la pagina secundară de produse de pe pagina de pornire, s-a decis ca, de dragul eficienței, în loc de a crea o altă pagină de listări de produse (pe o altă pagină web), produsele și subcategoriile acesteia să poată fi încorporate în pagina de pornire ca zonă derulantă și să facă parte din navigatia. Designul de mai jos arată diverse produse redate ca pictograme pe pagina de pornire atunci când vizitatorii fac clic pe Produse în navigare. Pentru randările 3D ale produselor care înseamnă al doilea nivel din Produse , aș recomanda Three.js, WebGL, Canvas și Greensock, deoarece sunt instrumente binecunoscute, standardizate.

Pagini secundare din Reproiectarea site-ului

Spre deosebire de Pagina de pornire , paginile secundare, cum ar fi paginile Despre și Servicii , folosesc o grilă diferită, cu model Z. Intenția diferitelor aspecte ale grilei este de a oferi vizitatorilor un mediu mai interesant și mai dinamic în timp ce scanează aceste pagini.

Ideea centrală este încă minimalismul vizual cu cât mai puțin text posibil. Oamenii nu vin pe aceste tipuri de site-uri auto pentru a citi mult text, ci pentru a obține informații rapid și vizual. Aceasta a fost gândirea din spatele fonturilor mari și îndrăznețe pe titlurile paginilor și a utilizării diferitelor stiluri de font.

Este important de reținut că acest tip de reproiectare a site-ului web „broșură companiei” este diferită de o reproiectare a serviciului. Un site web „broșură companiei” este mai mult despre produse de marketing. Reproiectările site-urilor web orientate spre servicii sunt înclinate mai mult spre conversia clicurilor în conversii și, eventual, a profitului.

Concluzie

Există câteva alte articole pe blogul de design care recomandă de ce este o idee bună ca designerii să se angajeze în proiecte de design necomisionate. Dacă doriți să proiectați un proiect cu adevărat grozav, alegeți o idee - poate fi un site web, o aplicație, un produs SaaS pentru întreprinderi - și rezolvați o problemă de design pentru aceasta.

Dribbble este plin de proiecte de reproiectare conceptuală nesolicitate în care designerii digitali au ocazia să-și arate talentele de design. Pe lângă faptul că vă oferă un design cool, care prezintă o soluție creativă lumii, lucrul la o problemă de produs „real” va arăta potențialilor companii și clienți cum gândiți, procesul și expertiza dumneavoastră.

În cazul meu, a fost un exercițiu grozav de abordare a unui site web auto de ultimă generație, deoarece este deosebit de important ca designul site-urilor web din acest sector să îndeplinească un standard excepțional de înalt.

Cu toate acestea, un cuvânt de precauție: înainte de a te scufunda și de a începe să proiectezi, este o idee bună să fii orientat spre viitor și să te gândești la felul în care va trebui să arate orice site web în trei ani, nu numai din perspectiva esteticii designului, ci și din punct de vedere al conținutului, funcție și structură. Este esențial ca flexibilitatea încorporată să fie o considerație serioasă de proiectare. Este mai ușor, mai eficient și mult mai puțin dureros să faci mici ajustări pentru a se potrivi cerințelor viitoare atunci când site-ul web sau subpaginile funcționează și sunt scalabile.

Uneori, este foarte greu să convingi un potențial client să facă o renovare a site-ului. Adesea, clienții sunt reticenți să se angajeze din cauza lipsei de resurse, fonduri sau timp. Cu toate acestea, o reproiectare nesolicitată a site-ului web este o modalitate excelentă de a prezenta lumii procesul de reproiectare a site-ului dvs. Și cine știe? Este foarte posibil ca reproiectarea site-ului dvs. să impresioneze un client destul de reticent pentru ca acesta să-i dea undă verde pentru un proiect „adevărat”, în care, ca bonus suplimentar, designerul este plătit!

• • •

Citiri suplimentare pe Blogul Toptal Design:

• Fundamentele reproiectării site-ului web – Un studiu de caz
• Adevăratul ROI al UX: Studii de caz de reproiectare B2B
• Scoaterea IKEA din cutie și reproiectarea lui pentru 1,6 miliarde de utilizatori
• Să reproiectăm Facebook: 10 inspirații pentru a începe
• Cum ar trebui să fie proiectat CrunchBase