ChamSys Hungary – UX/UI, Weboldaltervezés és Fejlesztés
Szerepem
UX / Web designer
WordPress fejlesztő
Időtartam
2024. 09. – 2025. 04.
Platform
Reszponzív weboldal
Bevezetés
A ChamSys egy professzionális világítástechnikai márka, technikai felhasználói bázissal, így a weboldal nemcsak értékesítési céllal működik, hanem egyben egy szakmai, támogató felület is a hazai világosító közösség számára.
A ChamSys Hungary weboldal újratervezése során a cél egy informatív, mégis könnyen kezelhető és bővíthető felület létrehozása volt, ami jól kiszolgálja a világosító szakemberek igényeit.
Szerepem
A projektben én feleltem a teljes UX és UI tervezésért, a tartalomstratégiáért, valamint a WordPress + Elementor + WooCommerce alapú fejlesztésért is.
Feladatkörök:
- UX kutatás, versenytárs elemzés, régi weboldal analitika elemzés
- információs architektúra tervezése
- vizuális rendszer és reszponzív layoutok (Figma)
- ajánlatkérési logika felépítése
- termékoldal-sablonok és egyedi komponensek kialakítása
Probléma
A régi ChamSys weboldal tartalmilag gazdag volt, de nem igazodott megfelelően a felhasználók igényeihez.
A Wix integrált analitika alapján 2024-ben a leglátogatottabb oldalak sorrendben a kezdőlap, a MagicQ Compact eszközök, az eszközök főoldal, a MagicQ szoftver adatlap, valamint a helyszínek aloldal voltak. A legtöbb kattintás a MagicQ szoftver letöltés gombra érkezett, valamint a „bővebb információ” gombokra a szoftverek és helyszínek landing oldalán, ezt követte a QuickQ szoftver letöltési opció.
Ezek az adatok igazolják, hogy a világosító szakemberek határozott céllal érkeznek a ChamSys weboldalára és legtöbbször letöltéseket, műszaki adatokat és valós helyszíneken használt showfileokat keresnek.
Cél
- könnyen navigálható, reszponzív és UX szempontból átgondolt
- gyorsan skálázható és szerkeszthető
- nem vásárlásra, hanem ajánlatkérésre épül
- vizuálisan illeszkedik a ChamSys nemzetközi arculatához
Kutatás és inspirációk
A kutatást a régi weboldal és az eredeti ChamSys (UK) weboldal elemzésével kezdtem. Később a versenytársak következtek, amely során megnéztem, hogy milyen megoldásokat alkalmaznak a nagy nemzetközi világítástechnikai cégek; főleg az MA Lighting, az Avolites és az ETC.
Tartalmilag hihetetlenül gazdag weboldalakat kellett átnéznem, amik néha tényleg túlságosan megterhelők voltak az agynak. Többszintes, túlbonyolított menürendszerek, több A4-es oldalnyi sitemapek. Ezért a célom az volt, hogy szakmailag komolyan vehető maradjon, de mégis átláthatóbb legyen, ahol a szakemberek számára gyorsan elérhetők a leggyakrabban keresett elemek: szoftverek, termékadatlapok, szerviz és showfile-ok.
A döntések meghozatalánál sokat segítettek a régi weboldalról gyűjtött adatok. Láttam, hogy mire kattintanak legtöbben, hol hagyják el az oldalt, és hol lehetne könnyebbé tenni a navigációt. Ezek alapján már az IA tervezés során eldőlt, hogy szükség lesz egy top bar menüre „MagicQ szoftver letöltés„menüponttal és egy letisztult főmenüre.
Információs architektúra és navigáció
A struktúra tervezésekor az elsődleges szempont a legkeresettebb tartalmak elérésének egyszerűsítése volt. A menüfelépítés ennek megfelelően két szintű lett: egy top bar és egy fő navbar, összesen 6 menüponttal (amely a későbbiekben egy online kurzus felülettel is bővül világosítóknak).
A top bar-ban kiemelt elem a “MagicQ szoftver letöltése”, mivel ez a leggyakrabban kattintott funkció.
A főmenü a következő logikát követi:
- Kezdőlap
- Szoftverek – MagicQ és QuickQ szoftver külön aloldalon
- Eszközök – termékcsaládok szerinti bontásban (MagicQ Compact, Stadium, QuickQ stb.)
- Szerviz – szerviz űrlap, termékregisztráció
- Rólunk
- Kapcsolat
A cél az volt, hogy a legfontosabb elemek mindig kéznél legyenek, a többi pedig jól strukturáltan, logikusan felépítve álljon rendelkezésre.
Wireframe és layout tervezés
A layout tervezést papíron kezdtem (mert szeretek papíron tervezni) majd Figma-ban folytattam (mert ott is szeretek tervezni). A fő fókusz az információ elrendezésén és az akciógombok logikai helyén volt. Az első drótvázakban a fókusz az oldal átjárhatóságán volt: világos főmenü, kiemelt szoftverletöltés a top barban, valamint olyan tartalmi komponensek, amiket könnyen lehet ismételni (kártyák, táblázatok, ikonrács).
A Figma-ban elkészült high fidelity prototípus a ChamSys kék arculati színeire, világos háttérre (f4f4f4) és sok whitespace-re épül, hogy az összetett műszaki tartalom is könnyen befogadható maradjon. Fontként az Exo családot használtam, külön beállítva a méreteket és vastagságokat desktop, tablet és mobil nézetre.
A tervezés során törekedtem arra, hogy a tartalmi mintázatok újrahasználhatók legyenek: például a termékadatlapok, a szoftverek és a szervizoldalak is azonos logika mentén épülnek fel, így könnyebb a felhasználónak is eligazodni.
WordPress + Elementor fejlesztés
A layoutokat az Elementor Pro Theme Builder-rel építettem fel WordPress-ben. Az oldal WooCommerce-re épül, viszont nem klasszikus webshopként működik: nincs ár és kosárba helyezés helyett ajánlatkérő lista van a folyamatosan változó árak miatt. A termékek egyedi adatlapokat kaptak termékcsaládok és a termékek típusa szerint, ahonnan az érdeklődők listába tehetik az eszközöket, majd az „Ajánlatkérő listára” gombbal egy ajánlatkérő oldalra jutnak, ahol egy űrlapon keresztül kérhetnek ajánlatot a kiválasztott termékekre. A rendszer egyszerre ad visszajelzést az ajánlatkérőnek, és egyszerűsíti az érdeklődést a WordPress dashboard-on.
Az oldal mobil-és tablet nézete kiemelt figyelmet kapott: a navigáció, az ajánlatkérési folyamat és a szoftverletöltések is külön optimalizálva lettek, gyors, jól követhető felhasználói élménnyel. Desktop nézetben az asztali gépekre letölthető szoftverek vannak kiemelt helyen, míg tabletes és mobilos nézetben az eszközökre letölthető Remote Control Applikációk linkjei és leírásai szerepelnek gyorsan elérhető helyen.
Eredmények
(A projekt élesítése után analitika, tesztek és felhasználói visszajelzések alapján frissül.)
Tanulságok
A végeredmény egy reszponzív, vizuálisan letisztult és tartalmilag erős weboldal lett, ami nemcsak technikailag tükrözi a ChamSys világát, hanem használható is – mind a szakemberek, mind a disztribútor számára. Az analitikában korábban azonosított kulcspontok (szoftverletöltés, termékinfó, helyszínek) előtérbe kerültek, az oldal navigálhatóbb, strukturáltabb és keresőbarát lett.
Sikerült egy olyan termékstruktúrát felépíteni, ami jól kezeli a bonyolult műszaki tartalmat, miközben új termékek hozzáadása is egyszerű marad. Az ajánlatkérő logika jól működik, a látogatók össze tudják gyűjteni a számukra releváns eszközöket, és célzottan tudnak kapcsolatba lépni a forgalmazóval.
Jövőbeli teendők
- Analytics implementálása és konverziós útvonalak figyelése
- Új termékek beillesztése sablonalapú módszerrel
- Felhasználói visszajelzések gyűjtése a letöltési, ajánlatkérési és navigációs élményről
- SEO finomhangolás, bugok javítása