![full-co-banner](https://cdn.sanity.io/images/3bj230v2/production/ec5bfa5b5ff8bb7d9f49c50fa28240d5a4d8227f-1920x640.jpg?w=1920&h=640&auto=format)
![full-co-banner](https://cdn.sanity.io/images/3bj230v2/production/ec5bfa5b5ff8bb7d9f49c50fa28240d5a4d8227f-1920x640.jpg?rect=480,0,961,640&w=920&h=613&auto=format)
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.
![kep 1](https://cdn.sanity.io/images/3bj230v2/production/65ac81a7db1e73e251509586a8fed4fba08fdd3a-364x444.jpg?w=364&h=444&auto=format)
![kep 2](https://cdn.sanity.io/images/3bj230v2/production/a42ecd0bcac836d9213aebf3fa633bb8e864fed7-364x444.jpg?w=364&h=444&auto=format)
![kep 3](https://cdn.sanity.io/images/3bj230v2/production/0117c8e18e8aa8d3b9dab261f14a194822d34417-364x444.jpg?w=364&h=444&auto=format)
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.
![weblap design](https://cdn.sanity.io/images/3bj230v2/production/c78d689208801f608be4a45b3fa2190b0df1d02f-1920x1086.jpg?rect=1,0,1919,1086&w=1000&h=566&auto=format)
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.
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.
![Applikáció design](https://cdn.sanity.io/images/3bj230v2/production/9f8ea5b4b1c677286f762c5af2fc7cc2b5da2d32-1920x1080.jpg?rect=1,0,1918,1080&w=1000&h=563&auto=format)
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.
![Applikáció design](https://cdn.sanity.io/images/3bj230v2/production/2420599c052d83664c0012e344d91223dd0ee3bd-995x546.png?w=995&h=546&auto=format)
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
Hasonló projektek
![Legó kreálmányok közösségi platformja design](https://cdn.sanity.io/images/3bj230v2/production/c1d43f6c5c0d50efa41fa5d574fe122bf7d2fe2f-1092x874.jpg?w=600&h=480&auto=format)
A weboldal célja, hogy az építők bemutathassák alkotásaikat (My Own Creation - MOC), ugyanakkor munkájukért jutalmat is szerezhessenek. Így született meg a MOCHUB.