Dealer.hu reDesign

Újradizájnoltuk a dealer.hu weboldalt. Az eredmény egy gyönyörű, egységes, reszponzív weboldal lett.

Dealer.hu reDesign

  • 2015-07-01
  • 3670 megtekintés
  • Szerző: Basa Bence

Egy weboldalra bizonyos időközönként ráfér egy kis felújítás. Nem szükséges, hogy a legfrissebb technológiákat alkalmazza, viszont nem árt, ha lépést tart a változó felhasználói igényekkel. Az egyik leggyakoribb oka a reszponzivitás hiánya. Ez két-három éve még nem volt a köztudatban, így sok weboldal készítésekor azt sem tudták a megrendelők, hogy akarhatnak ilyet - újabban viszont egyre gyakrabban szembesülhetnek a hiányossággal, ha más weboldallal hasonlítják össze a sajátjukat.

Ez vezérelte a dealer.hu* csapatát is, hogy felfrissítsék a weboldaluk arculatát. Nem mintha az előző divatjamúlt lett volna, de technikai okok miatt nehezen lehetett volna reszponzívvá tenni, így a teljes átalakítás mellett döntöttek.
* a Dealer az egyik legrégebben, és legeredményesebben működő kuponoldal, ami a <> szoftverre épül. A folyamatos bővítések, átalakítások mellett 2011 óta ez lesz a harmadik teljesen új arculat - tökéletes példa arra, hogy a webes vállalkozásoknál a folyamatos innováció a fennmaradás kulcsa.

A tervezéshez a SpaceboyDesign csapatát kérték fel, akikkel karöltve a mostani dizájn elkészült. Első lépésként Az arculatot kellett megtervezni (színek, felépítés, logó, stb), utána következhetett a KuponOS rendszerbe történő implementálás.
Mivel ez egy hosszabb folyamat volt, semmiképpen nem akartunk az éles dizájnon dolgozni, így készítettünk egy kapcsolót a szoftverbe, amit aktiválva az új, fejlesztés alatt álló oldalhoz tartozó sablonfájlok töltődtek be. Ez az MVC modellnek hála nagyon egyszerűen működött: a kapcsoló bekapcsolásáig a régi sablonfájlok kerültek a képernyőre, utána viszont egy elérési út módosításával már a fejlesztői nézetet kaptuk meg.
A módszer további előnye, hogy ugyanaz a program fut mindkét design mögött, ami pedig ugyanazokat az adatokat akarja ugyanolyan formában megjeleníteni.

Így tehát könnyű volt összehasonlítani a régi és az új változatot. Másik fontos eleme a megoldásnak, hogy munkamenetekhez kötöttük a kapcsolót, vagyis csak az adott munkaállomáson cserélődött ki a sablonkönyvtár, a többi látogató a régi oldalt látta.
http://dealer.hu/?template=space_design
Így lehetett bekapcsolni, majd ugyanazok a linkek működtek, mint az eredeti változatnál, csak éppen már az új köntösben töltődött be a tartalom. 

Eredeti listázási nézet Felújított kuponos weboldal

Az új elrendezés fontos eleme volt a reszponzivitás, minden képernyőméreten tökéletesnek kellett kinéznie. Ehhez a KuponOS szinte minden elemét testre kellett szabnunk (bejelentkező doboz, popup ablakok, táblázatok, stb), miközben folyamatosan teszteltük az új elrendezést. Ha pedig már az aloldalakat is átalakítottuk, kicsit egyszerűbbé tettük a sok átalakítástól nehezen átláthatóvá vált fizetőfelületet is, hogy minél jobban meggyorsítsuk a vásárlást.

Dealer.hu eredeti kupon megtekintő nézet Dealer.hu új, reszponzív kupon megtekintő oldal

A klasszikus elemeken (főoldali slider, effektek, stb) túl új hírlevél dizájnt is kapott a weboldal - a Spaceboy rutinjának köszönhetően ez a szakasz bizonyult a legrövidebbnek - alig pár nap alatt sikerült egy bomba- és gmailbiztos hírlevelet készíteni, amivel teljessé vált az átalakulás.
Az elkészült weboldal pedig magáért beszél: sebességre, kinézetre, felhasználóbarátságra egyaránt fényévekre van az előzőhöz képest.