A Boxy arculat- és weboldal frissítésének kivitelezőiként új, fenntartható designt és közvetlen kommunikációt biztosítottunk, így minden vállalkozás számára elérhetővé tettük szolgáltatásaikat.

Bemutatás

A Boxy egy úttörő vállalat a logisztikai szektorban, amely a legkorszerűbb megoldásokat nyújtja az e-kereskedelmi áruházak számára. Raktározás, termékkezelés, csomagolás és szállítás terén kínálnak komplex szolgáltatást, mellyel a logisztikai folyamatok terhei alól mentesítik ügyfeleiket. Büszkék lehetnek Magyarország legnagyobb robotizált fulfillment raktárára és saját flottájukra, amellyel aznapi kiszállítást garantálnak. Európa egyik legmodernebb fulfillment központja a Boxy kezei között van, ahol a csomagok mozgatását és szortírozását robotok végzik egy környezettudatos raktárcsarnokban.

Projekt kontextusa

Az elmúlt években a Boxy számos változáson és szervezeti fejlesztésen ment keresztül. Ezek a változások formálták új szemléletüket és teremtették meg az igényt a brand és a kommunikációs stratégia frissítésére. A változó piaci igényekhez való alkalmazkodásuk részeként felismerték a weboldaluk újragondolásának szükségességét, hogy az az új ismeretek és célok mentén legyen strukturálva és újratervezve.

Miért mi?

A Boxy fél évvel ezelőtt döntött úgy, hogy minket választ partnernek a projekt megvalósításához. Megbízásunkat több tényező is befolyásolta:

  • Először is, korábbi együttműködésünk során bebizonyítottuk, hogy minden területen, amin együtt dolgoztunk, megbízható és hatékony partnernek bizonyultunk.
  • Másodszor, egy átfogó auditot végeztünk el, amely feltárta a hibákat és azokra megoldást is adott, ebből egy meggyőző projekttervet dolgoztunk ki számukra.
  • Harmadszor, technológiai megoldásaink tökéletesen illeszkedtek a Boxy víziójához, ami megerősítette őket abban, hogy a projektet ránk bízzák.

Mit csináltunk?

  • Strategy & Research
  • Project Planning and Management
  • Creative Direction
  • Branding & Identity Design
  • UI/UX Design
  • B2B Web Development
  • Maintenance

Szerepek és felelősségek

  • Varholik Máté (Project Owner) – Mint projekt tulajdonos, Varholik Máté felelőssége alá tartozott a projekt célok meghatározása és biztosítása, hogy azok összhangban legyenek a vállalat általános céljaival és stratégiájával.
  • Juhász József (Project Manager) – A projekt menedzsereként, Juhász József a projekttervezésért, a határidők betartásáért és a csapaton belüli kommunikáció zökkenőmentes működtetéséért felelt.
  • Ambrus Krisztián (Lead UI/UX Designer) – Ambrus Krisztián, mint vezető UI/UX tervező, azért felelt, hogy a weboldal felhasználói élménye és a cég arculata megfeleljen a projekt céljainak és a Boxy márka elvárásainak, összhangban legyenek az új stratégiákkal.
  • Ladányi Dorottya (UI/UX Designer) – Ladányi Dorottya, UI/UX tervezőként, Ambrus Krisztián mellett dolgozott, támogatva a vizuális és felhasználói élmény tervezési folyamatát, biztosítva, hogy az a Boxy és a célcsoportjainak igényeit tükrözze.

Arculati Ráncfelvarrás

Probléma Definíció

  • Régi arculat problémái: A Boxy kezdeti, startupra jellemző, játékos megjelenése az évek során ellentmondásossá vált a cég piaci pozíciójával és szerepével. Egy olyan vállalatnál, amely piacvezetővé vált és folyamatosan növekvő professzionalizmust képvisel, a régi, könnyedebb arculat már nem felelt meg a várakozásoknak. Emellett a cég arculati anyagai is elavultnak bizonyultak, frissítésük pedig nehézkes volt, ami a márka további erősítése szempontjából hátrányos helyzetbe hozta a vállalatot.
  • Vezetőség és arculat diszharmóniája: A Boxy vezetősége egyre kevésbé tudott azonosulni a régi arculattal. Ez a diszharmonia nem csak a vállalat belső képét torzította, hanem a kreatív munkára is befolyással volt, korlátok közé szorítva az újítási lehetőségeket.
  • Kommunikációs akadályok: A kifelé irányuló kommunikáció nem tükrözte megfelelően a vállalat egyik legfontosabb értékét: az elérhetőséget. Bár a vállalat rendkívül innovatív és robosztus megoldásokat kínált, kommunikációjukban a túlzottan corporate megközelítés miatt a potenciális ügyfelek úgy érezhették, hogy a Boxy szolgáltatásai számukra elérhetetlenek, vagy túl nagyvállalati jellegűek.

Kimondott Elvárások

  • Közvetlenebb kommunikáció: A Boxy.hu azt szerette volna, ha a kommunikáció középpontjában az elérhetőség áll. A vállalat szolgáltatásai a kisvállalkozásoktól a nagyvállalatokig minden méretű ügyfél számára elérhetőek, elfogadható áron.
  • Élethű képek használata: A vállalat új arculata valós, stock vagy AI által generált képek használatával szeretné megjeleníteni a célközönségét saját környezetében.
  • Dinamizmus és professzionalizmus: A Boxy hangsúlyozza, hogy bár több év tapasztalata van a hátuk mögött, mégis egy innovatív, lendületes vállalat. Ez a dinamizmus nem csak a szövegekben, hanem az arculati elemekben is meg kell hogy jelenjen.
  • Logó finomhangolása: Bár a Boxy logójának alapformáját nem lehetett megváltoztatni, a vállalat szerette volna elérni, hogy a logó arányait optimalizáljuk a professzionális megjelenés érdekében.
  • Színkonzisztencia fenntartása: A vállalat nyitott volt a javaslatokra, hogy mely elemeiben és milyen mértékben lehetne mégis frissíteni az arculatot, anélkül, hogy a már meglévő anyagokat, eszközöket és infrastruktúrát teljes mértékben le kellene cserélni.

B2B weboldal elkészítése

Előzetes kutatások

UI/UX audit

A projekt kezdetén egy alapos UI/UX auditot végeztünk a Boxy weboldalán. Ennek során feltártuk az oldal meglévő hiányosságait és fejlesztési lehetőségeit. Csak a főoldalon összesen 4 kritikus UI és arculati, valamint 4 kritikus UX problémát azonosítottunk, és további 27 kisebb javaslatot fogalmaztunk meg. Ezek az észrevételek csak a főoldalra vonatkoztak és céljuk a felhasználói élmény javítása volt. További javaslatokkal álltunk elő az oldal teljes terjedelmét is érintő problémákkal kapcsolatban.

Versenytárs elemzés

A versenytársak UI/UX megközelítéseit is alaposan megvizsgáltuk. A stílus, a képi és szöveges tartalmak összhangja, valamint az egyes weboldal szekciók marketing szempontból történő elemzése során kiemelten kezeltük a Boxy és a fulfillment szolgáltatás bemutatását. Megállapítottuk, hogy a Boxy a versenytársakhoz képest nem hangsúlyozta eléggé a fulfillment előnyeit a különböző célcsoportok számára, és nem szólították meg kellőképpen a célközönség fájdalompontjait. Továbbá, a bizalomépítés főként személyi kompetenciák bemutatásával történt, a marketing és sales célok elérését segítő különálló landing oldalak pedig számukban elenyészőek voltak.

Probléma definíció

  • Nem fenntartható weboldal: A weboldal nem moduláris, nem komponensekre épített rendszerű volt, és nem támaszkodott egy egységes Design Systemre. Ennek következtében a fenntarthatóság és a könnyű bővíthetőség nem volt biztosított. Az új igények kezelése különálló folyamatokon keresztül történt, mi időigényes és nem hatékony.
  • Elavult tartalom: A weboldal tartalmi elemei nem feleltek meg a Boxy jelenlegi kommunikációs stratégiájának. A túlzottan hivatalos hangvételű megfogalmazások és a merev képi világ nem volt képes megragadni a potenciális ügyfelek figyelmét. A Boxy szolgáltatásainak méretétől és komplexitásától való félelmük miatt a bizalom kiépítése és az érintett célcsoportok elérése extra erőforrásokat igényelt.
  • Hiányzó elemek: Az oldalon elvégzett audit során kiderült, hogy a landing page-ek nem tartalmaztak minden szükséges elemet, vagy azok nem kaptak megfelelő hangsúlyt. Ez további marketing és sales erőforrások bevonását tette szükségessé a célközönség bizonytalanságának feloldására.

Kimondott elvárások

  • Fenntarthatóság és egységesség: Fontos, hogy a weboldal hosszú távon fenntartható és könnyen kezelhetővé váljon. A Design System implementálása segített a konzisztens arculat megőrzésében és az oldal könnyű módosíthatóságában, nemcsak a fejlesztők, hanem a Boxy csapata számára is.
  • Közvetlen kommunikáció: Célzott, a különböző ügyfélcsoportok igényeire szabott oldalak létrehozása a cél, ahol a tartalom közvetlenül és hatékonyan szólítja meg a célközönséget. Fontos, hogy az oldalak megfelelően kezeljék az egyes célcsoportok specifikus problémáit, elvárásait és bizalmi kérdéseit.
  • Wow faktor: A designnak lenyűgözőnek és magával ragadónak kellett lennie, hogy az oldalt megnyitó felhasználó azonnal érezze: minőségi, gondosan megtervezett és jól megvalósított oldallal van dolga. Az oldalnak képesnek kellett lennie arra, hogy minden látogatót magával ragadjon, függetlenül attól, hogy milyen generációból, szakmából vagy élethelyzetből érkezik.

UI/UX folyamat

1. Workshopok és tervezés

A piaci elemzések és versenytársak tanulmányozása után elindítottuk a B2B értékesítési workshopjainkat. Ezek célja a Boxy értékesítési stratégiájának és célközönségének alapos megértése volt, hogy felismerjük a vásárlói fájdalompontokat és megtaláljuk rájuk a megfelelő megoldásokat. Az itt szerzett ismereteket használtuk fel a weboldal és a tartalmi struktúra kialakításánál, biztosítva, hogy az B2B vásárlók számára minden információ elérhető és könnyen feldolgozható legyen.

2. Wireframe készítés

A tervezési folyamat következő lépése a mid-fidelity wireframek készítése volt. Ezek a vázlatok már tartalmaztak szöveges tartalmat, amely segítette az ügyfelet abban, hogy minimális erőforrásból vizuálisan is átlássa az oldal szerkezetét. A wireframek készítésénél felhasználtuk a workshopok során nyert információkat, beleértve a stratégiai szempontokat és a sitemap struktúrát. Minden szekcióhoz konkrét célokat, szöveges és vizuális elvárásokat rendeltük, hogy a projekt későbbi szakaszaiban ezekre támaszkodva dolgozhassunk.

3. Wireframe feltöltése AI szöveggel

A wireframek további feltöltéséhez ChatGPT-t használtunk. Az így előállított szövegjavaslatok segítségével könnyítettük meg a Boxy és a copywriterek munkáját. Bár a végső szövegeket a projekt egy késői szakaszában dolgozták ki, a mi javaslataink jó kiindulási pontot szolgáltattak. Az eddigi tapasztalataink alapján, az AI használata felgyorsítja munkafolyamatokat, amennyiben a projekt megfelelően dokumentált és jól paraméterezett.

4. Vakmerőbb design

Az Atomic Design Systemnek köszönhetően a Boxy weboldala 54 egyedi szekciót tartalmaz, amelyek variációkkal együtt több mint 200 elemet ölelnek fel. A Design System a reszponzivitást is figyelembe vette, öt különböző képernyőméretre tervezve, az ultra wide-tól a mobilig. Ennek köszönhetően a fejlesztési folyamat könnyebb és gördülékenyebb lett. A design fázis első iterációjával mindössze egy hét alatt elkészültünk, köszönhetően a saját, jól dokumentált Atomic Design Systemünknek. Ezt több belső és külső iterációs körök követték melynek végeredményében mindösszesen három hét alatt lezárhattuk a UI design folyamatokat.

5. Nagyobb elemek, nagyobb tér

Az oldal olvashatóságának és felhasználói élményének javítása érdekében nagyobb white space-ket és nagyobb elemeket használtunk, különösen desktopon. A kutatások során megállapítottuk, hogy az amerikai versenytársak gyakran alkalmazzák ezt a megközelítést. Az oldal domináns színe a fehér lett, ami a letisztultságot hangsúlyozza és kiemeli a lényeges tartalmi elemeket, például az arcokat és a képeket.

6. Célközönségre tervezve

Minden oldal tervezésekor figyelembe vettük a célközönség specifikus igényeit. A szövegezés, a színek használata és a vizuális beágyazások mind a célközönség paramétereiből indultak ki. A használt képek és videóanyagok is úgy lettek megtervezve, hogy a célközönség tagjai könnyen azonosulhassanak velük.

7. Brand színek kihasználása

A brand színeit úgy használtuk, hogy azokat a megnevezett célközönségekhez rendeltük. Mindegyik célcsoportot egy hozzá illő színnel azonosítottunk, amely nemcsak az arculati tervezésben, hanem a későbbi marketing anyagokban is fontos szerepet játszott.

8. AI által generált képek

Ez volt az első projekt, ahol teljesen magabiztosan alkalmaztuk az AI lehetőségeit a képgenerálás terén. A képeket a célkitűzések és paraméterek alapján generáltuk, vegyesen használva a Boxy által nyújtott fotókat, stock képeket és a Midjourney által generált képeket.

9. Animáció tervezése

Az oldalra statikus képek mellett animációkat is terveztünk, hogy a wow faktort még jobban ki tudjuk emelni. A felhasználói élmény javítása érdekében több iteráció után végül egy animációt választottunk ki, amely segíti a felhasználót a további navigációban és hozzájárul az első benyomás erősítéséhez.

A projekt sikere

Elért célok

🌲 Fenntarthatóság

Az új weboldal fenntarthatóságát egy egységes, stílusos design system implementálásával értük el. A projekt kezdetétől fogva a fenntarthatóság volt a fő célkitűzésünk, így a tervezési folyamat minden szakaszában a hosszú távú használhatóságot, konzisztenciát és skálázhatóságot tartottuk szem előtt. A design system lehetővé tette a design elemek újrahasznosítását, egyszerűsítette a frissítéseket és a további funkciók hozzáadását, így biztosítva az oldal hosszú távú életképességét.

Közvetlen kommunikáció

"Mélyen tisztelt megszólításból a kedves megszolításig."

A projekt során közvetlen kommunikációs stílust alakítottunk ki, amely a szöveges és vizuális tartalomra egyaránt kiterjedt. Segítettünk a Boxy-nak kialakítani az oldal logikáját és megfogalmazni a cég stratégiáját. A design és a tartalom összehangolásával sikeresen enyhítettünk a szigorú, nagyvállalati megjelenítésen, és egy barátságos stílust hoztunk létre. Ezáltal az oldal megközelíthetőbbé vált, és javítottuk az ügyfélkapcsolatokat.

👨‍👩‍👦 Célközönség-specifikus tartalom

"Induló webáruházaknak, webáruházaknak, nagykereskedőknek és gyártóknak."

Gondosan azonosítottuk a Boxy célközönségének problémáit, igényeit és félelmeit, és ezekre szabott tartalmat készítettünk. A célzott tartalom lehetővé tette számunkra, hogy pontosan és hatékonyan kommunikáljunk a különböző ügyfélcsoportokkal. Ez a megközelítés javította az ügyfél-érdeklődést és az ügyfél-elkötelezettséget, mivel az ügyfelek releváns és értékes információkat kaptak, amelyek közvetlenül megoldották a saját, egyedi problémáikat.

🎨 Egységes arculat

Egy központi design system segítségével hoztunk létre egy egységes, minden platformon azonos arculatot. Ez az integrált megközelítés biztosította, hogy a Boxy márkája konzisztens és azonosítható legyen minden érintkezési ponton. A központi design systemnek köszönhetően az összes platformon egyszerűen kezelhetővé vált az arculat, és a márka erejét és jelenlétét a piacon megerősítettük.