Jak Lynksen pomocí Spline oživil web složité B2B platformy

Elecctro vyvíjí softwarové systémy pro bezobslužné služby – například prodejní automaty, nabíječky elektromobilů nebo automatizaci myček aut. Jeho nabídka sahá od hardwaru po software a pohybuje se v oblasti trhu, která s B2B kupujícími tradičně komunikuje hutnými technickými listy a schématy. Jeho misí je modernizovat bezobslužné služby pomocí chytrých, propojených řešení.

Elecctro potřebovalo web. Ale ne jen tak ledajaký. Takový, který udrží pozornost kupujícího dost dlouho na to, aby skutečně vysvětlil, co firma dělá, vizuálně ji odliší od desítek podobných společností a rychle dovede návštěvníky k rozhodnutí.

„Potřebovali předat spoustu informací,“ říká Tania, projektová manažerka v Lynksenu, digitální designové agentuře, kterou si firma přizvala k přestavbě webu. „Ale zároveň chtěli vyniknout ve velmi technické oblasti.“

Odpovědí nebylo víc obsahu. Byl to úplně jiný druh interaktivního rozhraní.

Domovská stránka, kterou prozkoumáváte, nejen čtete

Hlavní myšlenka Lynksenu byla klamně jednoduchá: nechat uživatele systém prozkoumat, místo aby ho jen vysvětlovala slova.

Z domovské stránky se stala interaktivní 3D scéna. Prostorový přehled celé produktové rodiny Elecctro, nad kterým mohou uživatelé najíždět kurzorem, proklikávat se jím a procházet ho vlastním tempem. Každý asset ve scéně je propojený s vlastní produktovou stránkou. Cesta od „co je to za produkt?“ k „jsem připravený se ozvat“ se zkrátila na pár kliknutí.

Uživatelé přijdou na domovskou stránku, vidí všechno, jednou kliknou a už směřují k tomu, aby Elecctru předali informace, které potřebuje.

Byl to podstatný posun. Většina B2B webů bere domovskou stránku jako obsah knihy. Lynksen postavil tu pro Elecctro jako prostředí – něco, čím procházíte, místo abyste to četli shora dolů.

Proč Spline?

Vize byla jasná, ale jak ji uskutečnit?

Tradiční 3D nástroje nepřicházely v úvahu. Už jen jejich křivka učení by spolkla celý projekt. A co bylo důležitější, tým Elecctro musel být schopen web po spuštění udržovat. To znamenalo žádné neprůhledné pipeline, žádnou závislost na specializovaných umělcích a žádné nástroje, které vyžadují měsíce zaškolení jen kvůli výměně assetu.

Lynksen Spline vyzkoušel a uviděl jinou cestu:

• Stavět a iterovat v jednom prostředí.
• Prototypovat interakce přímo v nástroji.
• Dodávat assety připravené pro produkci bez složitého řetězce předávek.

Prakticky bez zkušeností jsme napoprvé dodali celý projekt.

Nebyly to jen nástroje, co to umožnilo. Byla to komunita. Než tým Lynksenu napsal jediný řádek kódu, strávil čas v komunitní knihovně Spline: prozkoumával remixy, zjišťoval, jak k interakcím přistupují jiní designéři, a hledal techniky, které by mohl pro tento klientský projekt upravit.

Mít místo jako komunita Spline, s různými projekty a možností remixovat a zjistit, jak lidé řešili různé interakce, nám po vzdělávací stránce opravdu pomohlo.

Pro Elecctro hrál roli ještě jeden faktor: dlouhá životnost.

Chtělo řešení, které jeho tým bude po spuštění skutečně mít ve svých rukou.

Nemusíte být nijak technicky zdatní, abyste přidali objekt, vytvořili jinou interakci a projekt po našem předání udržovali. To pro nás byla opravdu klíčová výhoda.

Budování zážitku

Proces Lynksenu začal úplně bez pohybu.

Statické wireframy. Ploché UI layouty. Jasná informační hierarchie stanovená dřív, než přibyla jediná animace. Teprve když byla struktura pevná, začal tým přidávat další vrstvy.

„Vždycky začínáme staticky a pak přidáváme animace vrstvu po vrstvě,“ říká Tania. „Klíčové stavy definujeme ve wireframech a skicách a během implementace ladíme pohyby kamery, hrajeme si s animacemi a dbáme na to, aby vše do sebe zapadlo, jak má.“

Tato disciplína zabránila tomu, aby se projekt zhroutil pod vlastními ambicemi. Tým se držel jednoduchého designového principu: pohyb podporuje příběh.

V praxi to znamenalo:

• Jemné stavy při najetí kurzorem a mikrointerakce na 3D assetech
• Odhalování obsahu při scrollování, které vedlo pozornost, aniž by si ji vynucovalo
• Přechody kamery, které uživatele orientovaly, místo aby je oslňovaly
• Výraznou kreativitu vyhrazenou pro vedlejší momenty (patička, stránka 404), kde jsou malá překvapení potěšením, a ne rozptýlením

Stránka 404 se stala oblíbenkyní celého týmu. Je postavená celá ve Spline a uživatelé se po ní mohou proklikávat a odhalovat skryté 3D assety. Malý easter egg, který většina návštěvníků nikdy nenajde, ale tým Lynksenu si jeho tvorbu zjevně užil.

„Je fajn schovat malý easter egg,“ říká Ross. „Když ho někdo najde, budeme jako designéři moc rádi.“

Detail 3D ikon použitých v navigačním menu webu.

Výsledky

Přepracovaný web byl spuštěn a čísla se okamžitě pohnula.

Počet aktivních uživatelů vzrostl o 524 % a projekt získal 5 ocenění.

Web získal 20 000 nových zobrazení a designová komunita si ho všimla.

Výsledky odrážely něco, co tým budoval záměrně: nejen pěkně vypadající web, ale skutečně účinný. Takový, který funguje pro kupující, kteří potřebují jasno, i pro tým klienta, který ho musí udržovat bez vývojáře na plný úvazek.

Pro týmy, které zvažují 3D

Týmům, které poprvé zvažují 3D na webu, radí Tania jednoduše: nezačínejte s tradičními nástroji.

Se Spline je křivka učení zvládnutelná. Člověk s designovými dovednostmi se do něj dostane během pár dní. Náš tým vytvořil solidní MVP během prvního týdne používání.

Ross to vidí jako širší posun v tom, jak mohou týmy k 3D přistupovat: místo skládání několika složitých nástrojů a postupů mohou navrhovat, iterovat a dodávat v jediném prostředí – díky čemuž je interaktivní 3D hned od začátku mnohem dostupnější.

Pokud chcete pracovat v jednom prostředí bez hlubokých technických znalostí a dodat to, co vidíte, zvolte Spline.

Pro designové agentury, které klientům nabízejí interaktivní webové zážitky, je projekt přesvědčivým důkazem: se správným nástrojem se během jediného projektu dostanete od nulových zkušeností k oceňovanému webu.

Začněte se Spline

Stejně jako Lynksen mohou agentury pomocí Spline pomáhat klientům komunikovat složité produkty prostřednictvím interaktivních zážitků, které jsou srozumitelnější, snáze se udržují a lépe se pamatují.

Pro Elecctro to znamenalo proměnit technickou B2B platformu v interaktivní web, který produkt vysvětlil, urychlil rozhodování a pomohl značce vyniknout na přeplněném trhu.

Ať jste agentura, která tvoří pro klienta, nebo interní tým, Spline vám pomůže dostat se od nápadu k produkci rychleji – bez složité 3D pipeline nebo specializovaných technických dovedností.

Kontaktovat obchodní oddělení