Full Doors cover
FULL.CO.HU

Honlap újratervezés és applikációfejlesztés

Szolgáltatások
UX UI KUTATÁS ÉS TERVEZÉS / DRUPAL FEJLESZTÉS
Időszak
2018
Ügyfél
FullDoors
Iparág
Épületasztalos ipar
A Cheppers fejlesztői csapatát izgalmas kihívás elé állította az egyik leginnovatívabb és legdinamikusabban fejlődő hazai ajtógyártó vállalkozás: olyan honlap és applikáció tervezésével bíztak meg minket, melyek egyszerre interaktívak, többnyelvűek, valamint hasznos és látványos UX megoldásokat nyújtanak a felhasználók számára.

 

NÉZD MEG A WEBOLDALT

A feladat

 

A Full Doors az egyedi beltéri ajtók tervezésének és kivitelezésének az egyik legnagyobb hazai szakértője 1991 óta. Többek között a számos ingatlanszakmai díjat elnyert Eiffel Palace, a Váci Greens irodaház, a Corvin Sétány és a Duna Medical Center nyílászáróiért felelt.

 

A folyamatos megújulás és innováció , illetve minőség iránti elkötelezettségük mára nemcsak Magyarország, hanem a régió vezető, kiterjedt hazai és nemzetközi ügyfélkörrel rendelkező vállalatává tette őket az iparágban. A regionális terjeszkedés, illetve az egyre összetettebb vásárlói igények idézték elő a cég számára egy modernebb, kifinomultabb, esztétikusabb, többnyelvű, többfunkciós honlap fejlesztésének szükségét is.

Full Doors ajtók - látványtervek
Full Doors ajtók - látványtervek 2.

Full Doors ajtók - látványtervek

Full Doors ajtók - látványtervek 3.

Project célok

 

A projekt elsősorban a meglévő honlap funkcionalitásának és működésének a megújítása volt. Az ügyfél azt szerette volna elérni, hogy a honlapon keresztül a potenciális vásárlók könnyen képet kapjanak a Full Doors beltéri ajtók választékából. Illetve az online üzletszerzést támogató új funkcionalitást emeljünk be. Ezt a kapcsolatfelvételi és partnerkereső funkcióval oldottuk meg.

Felhasználói élmény javítása

A régi, (felhasználói élmény- és vizuális szempontból is) teljesen elavult honlap  csak az ajtók alapszintű tervezését tette lehetővé. 

 

Weboldal modernizációja, újrastrukturálása

A régi honlap csak szűk funkcionalitással működött, az ügyfél kifejezett célja volt, hogy az új honlap bővebb funkcionalitással működjön. Az újratervezés során elengedhetetlen volt a honlap információs -, és funkcionális architektúrájának átgondolása.

Reszponzív felület, interaktív animáció 

Az oldal reszponzivitásának hiánya gátolta a termékekhez kapcsolódó információk bemutatását. A  fenti kép érzékelteti, hogy a reszponzivitás hiánya mellett milyen alacsony interaktivitási és minőségi szintet képviselt a site, gyakorlatilag a ‘90-es évektől szinte változatlan formában.

 

Új funkciók

Kapcsolatfelvételi lehetőség és a vásárlók összekötése a viszonteladókkal. A viszonteladói információk hiánya gátolta az oldalon keresztül történő üzletépítést. Többnyelvű honlap az új célországok és ügyfelek számára.

 

Full Doors régi weboldal

Régi honlap nyitóoldala

A tervezés

 

  • Ügyfélcélok megállapítása
  • Versenytárs elemzés
  • Célcsoport meghatározása
  • Felhasználói interjúk
  • Perszonaalkotás
  • Felhasználói utak
  • Információs architektúra
  • Hasznáhatósági tesztek

2018 augusztus végén a Cheppers két UX / UI designer munkatársa kezdte meg a tervezést.  Az anyagok véglegesítését a Full Doors ügyvezetőjével és marketing menedzserével közösen végezték.
A folyamat lépései és az átadott anyagok:

 

Workshop

A projekt indulásánál a megbízó ismertette üzleti céljait, valamint az új weboldallal kapcsolatos elvárásait. Az ügyféllel közösen megállapítottuk a célcsoporttal kapcsolatos hiptoéziseinket, majd ezek alapján megalkottuk a felhasználói interjúkhoz szükséges kérdéseinket.

 

Heti megbeszélések

Az ügyféllel heti szinten tartottuk a kapcsolatot, folyamatosan tájékoztattuk őt a projekt állásáról. 

 

Adatelemzés

A felhasználói interjúkkal felmértük a célcsoport igényét, jelenlegi problémáját és céljait. Az interjúkat elemeztük és megalkottuk a perszónákat és az azokhoz köthető felhasználói utakat. A felhasználói utak alapján megértettük a célcsoport igényét, problémáját és célját időrendi sorrendben és ezekhez funkciókat társítottunk. A begyűjtött és elemzett adatok alapján megalkottuk a termék információs architektúráját. Ez ad alapot a vizuális tervezéshez.

 

UX/UI tervezés

A projekt legizgalmasabb része, amikor a feldolgozott felhasználói igényekből, problémákból, célokból és funkciókból vizuális hierarchiát tervezünk. Ekkor kapja meg a termék a működésbeli elvárásait: navigáció, típus oldalak, statikus oldalak. Először skicceléssel jutottunk el a végleges elrendezéshez. Ennek célja, hogy minél hamarabb minél több ötletet, elrendezést tesztelni tudjunk a felhasználók között. Az iteratívan javított skicceket megterveztük és prototípust gyártottunk belőle, amit használhatósági tesztekkel ellenőriztük a felhasználók körében.
Az elfogadott drótváztervek után kialakítottuk a Full Doors új arculatát. Jelen esetben az újratervezett logót más cég készítette és az arculat további illusztratív elemei is adottak voltak. Erősebb, intenzívebb színeket adtunk az arculatnak. Ezután megterveztük a honlap összes oldalát, az ügyfél által elfogadott új arculat beépítésével.

Full Doors mobil előlnézet

Felhaszálói élmény

Egy építkezés talán egyetlen élvezhető része ( a beköltözésen kívül) a lakás látványosabb elemeinek válogatása a barkács- vagy lakberendezési áruházakban. Hogyan érhetjük el egy ajtógyártó honlapján, hogy az online nézelődés és információszerzés ne csak felvegye a versenyt, hanem többet is nyújtson annál?

A Full Doors egy látványos, de annál nagyobb kihívást jelentő elképzeléssel állt elő: az ajtók szerkezetét virtuális megfelelőik elemeire bontásával mutassuk be. Így interkatív módon tesszük lehetővé egyedi ajtók tervezését, az igények és adottságok felhasználók számára történő összeegyeztetését, akár szakértő segítsége nélkül.

Az eredmény

 

A projektindító megbeszélés és az átadás között eltelt 32 munkanap alatt a Cheppers 6 munkatársa - 2 frontend appfejlesztő, 1 sitebuilder, 2 backend fejlesztő, 1 projektmenedzser - közreműködésével a Full Doors főoldala az alábbi változásokon ment keresztül.


A Rólunk és a Kontakt menüpontokat a főoldallal összhangban újraterveztük , és az online üzletszerzést támogató Sajtóhírek és Partnerkereső funkciókkal egészítettük ki.

Full Doors új weboldal előlnézeti kép

Új design tervek

Kivitelezés - frontend applikáció

 

A projekt legizgalmasabb fázisa a főoldalon lévő animált frontend applikáció fejlesztése volt. Az adatrendszer óriási mérete,  a többnyelvűségből fakadó stílus override-ok elkerülése, illetve a rendszer konzisztenciájának megőrzése eleinte sok fejtörést okozott. A megoldást  végül egy javascript keretrendszer és a Drupalban használt CSS jelentette.


Az alkalmazás nemsokára kiegészül egy látványos mini-ajtókonfigurátorral, amelyben egy-egy ajtó összeállításának egymást követő fázisait animált képszekvenciákon keresztül kerülnek bemutatásra.

Megosztás

Van egy projekted számunkra?