Pánácz Design Blog
A data36 redesign-jának esettanulmánya

A data36.com-ot és tulajdonosát Mester Tomit nem nagyon kell bemutatni azoknak, akik hallgatnak üzleti podcastot. Tomi az egyik házigazdája a Biznisz Boyz podcastnak, a legnépszerűbb ilyen témájú, magyar műsornak. Én is innen ismerem őt. Plusz a szintén nagyon népszerű, befektetésekkel foglalkozó Mi a Matek!? podcast is az ő nevéhez fűződik.

Tomi és a munkássága is hatással volt a szabadúszóvá válasomra. Első szabadúszó napomon többek között a Biznisz Boyz facebook csoportjában osztottam meg egy csoport specifikus kis köszönő oldalt, ami megadta a kezdőlökést az egyéni vállalkozásomnak. Erről itt írtam részletesen.

Röviden a data36 egy angol nyelvű, adatelemzéssel foglalkozó blog. Amellett, hogy Tomi cikkeket oszt meg az oldalon, oktatásokat is tart a témában. Az üzleti modell nagyvonalakban tehát, hogy a blog által, organikusan generált forgalmat konvertálja kurzus résztvevőkké. Aki követi Tomi munkásságát az tudja, hogy ez nagyon jól működik, egy jól menő bizniszt épített fel.

Hogy kerültem én a képbe?

Tomi twitteren posztolta, hogy új design-t kapott a data36 blogja és csatolt egy elötte-utána képet is a bejegyzéshez. Rá is kérdezett, hogy kinek melyik tetszik jobban, de hozzátette azt is, hogy igazából mindegy, mert az új verzió jobban konvertál. :)

Mivel a redesign-okat egyébként is szeretem tanulmányozni, így ezt is megnéztem. A legnagyobb változáson az elrendezés esett át. A régi verzión bal oldalon volt a menü, az újnál pedig a manapság elterjedtebb felső részre került. Plusz kialakításra került egy főoldal, ahol klasszikusan egy kis infó található, hogy mi is ez az oldal és kivonatok az aloldalak tartalmából. Összességében szerintem is egy modernebb és informatívabb elrendezés született.

Aztán megnéztem a böngészőben is az új oldalt és pár építő kritika és ötlet megfogalmazódott bennem. Mivel a fent leírtak miatt kedvelem Tomi munkásságát, gondoltam leírom neki is ezeket, hátha hasznát veszi. Szóval küldtem egy e-mailt az észrevételeimmal, javaslataimmal. Erre másnap vissza is írt, hogy köszöni szépen és reagált az egyes pontokra. Továbbá az e-mailemen felbuzdulva lehet újra elővenné a design kérdést a data36-tal kapcsolatban, tudnék-e ajánlatot adni neki. Hamar meg is egyeztünk, hogy megnézzük mit tudok kihozni a főoldalból.

Redesign

Az oldal felépítése egy jól kitalált, letesztelt alap volt, szóval a feladat elsősorban az volt hogy még egyértelműbb, modernebb és szebb legyen az egész. Ezt az elején tisztáztuk is, hogy az alábbi dolgokat mindenképp szeretné megtartani:

• minimalista hozzáállás
• oldal alapstruktúrája
• szövegezés
• alap színkészlet
• SEO barát design

Ezek alapján neki is láttam a munkának. Az átalakított főoldalt pár nap múlva küldtem is Tominak véleményezésre. Szerencsére tetszett neki is. Pár apróság volt, amit még helyre tettünk, de hamar megszületett a végeredmény.

A legfontosabb változásokat az alábbiak miatt eszközöltem az oldalon:

• A felső hero részt nagyobbra vettem betűméret és kép ügyileg is. Itt egy stock fotót használtam, ami hangulatában passzol az oldalhoz, de nyilván csak jelezve, hogy valami hasonló fotó róla szerintem jó választás lenne ide.
• Nem éreztem elég egyértelműnek, hogy melyik részek tartoznak össze. Kicsit ömlesztettnek tűnt a tartalom. Persze címsorokkal szépen tagolva volt, de vizuálisan is megtámogattam ezt.
• Egységesítettem a blogbejegyzések megjelenését. Az eredeti verzióban volt ahol képes-szöveges kivonat plusz egy gomb volt egy bejegyzés, volt ahol csak egy link és volt ahol kártya. Az én verziómban mindegyik bejegyzésre utaló elem szinte ugyanúgy néz ki. Persze vannak különböző változatai: képes, kép nélküli és különböző méretű variációk. A lényeg, hogy a látogató miután látja, hogy néz ki egy blogbejegyzés az oldalon, onnantól ezt könnyen felismeri és egyértelmű lesz a használat.

Ezen kívül a távolságokkal és néhány további elemmel igyekeztem könnyebben áttekinthetővé tenni az oldalt. Ezeket részletesen nem fejtem ki, talán úgy is az a legbeszédesebb, ha megmutatom az előtte-utána állapotot:

A képre kattintva, új oldalon megnyitva nagyban is megnézhető.


Ezen a ponton megjegyezném, hogy a korábban leírtakból is látszik, hogy szándékosan elég szűk mozgásteret hagytam a dizájnban Csabának. Nem akartam nagy átalakításokat, inkább csak finomhangolást. Elsőre azt gondoltam, hogy na én vagyok az a tipikus kukacoskodó ügyfél, akit egy UX/UI-dizájner a háta közepére se kíván. :D De titokban kíváncsi is voltam, hogy ebből a megmaradt néhány elemből mit lehet kihozni. És aztán megdöbbentem, hogy tényleg mennyit számít egy ideális szövegpozíció, vagy egy jól megválasztott betűméret – vagy akár csak egy kis buborék egy-egy főcím felett, ami tisztázza a tartalmi viszonyokat. Csaba tipikusan azt a varázslatot mutatta be, amit a konyhában is csak a mesterszakácsok tudnak: néhány alapélelmiszerből ínyenc lakomát állított össze. Azt gondolom, hogy a régi és új dizájn közötti különbség magáért beszél.

Mester Tomi

A főoldal véglegesítése után megterveztem még az aloldalakat is. Itt már könnyebb dolgom volt, mivel sokminden adott volt.



Fejlesztés

Az oldal átalakítása az új design alapján már nem az én feladatom volt. Mivel Tomi az Elementor nevű WordPress sitebuilder eszközt használta a blog összerakásához, így a design implementációja során volt amit nem lehetett (vagy csak bonyolultan lehetett volna) kivitelezni. Ezzel számoltunk már az elején is, és igyekeztem is az ilyen szempontból túl bonyolult elemeket mellőzni, de azért így is akadt pár dolog. Ezzel egyébként nincs semmi baj. Nyilván mérlegelni kell, hogy adott design megoldást megéri-e megvalósítani, ha az bonyolultabban oldható meg adott környezetben, vagy használjunk helyette egy könnyen kivitelezhető verziót. Összességében elmondható azért, hogy nagyrészt sikerült átűltetni az oldalra a terveket.

Végeredmény

Én teljesen elégedett vagyok a végeredménnyel, úgy gondolom, hogy sikerült elérni a kitűzött célokat (egyértelműbb, modernebb, szebb megjelenés) az új design-nal. Persze majd meglátjuk, hogy a számok és a visszajelzések mit mutatnak! :) Mindenesetre örülök, hogy együtt dolgozhattam Tomival az oldala újratervezésén és talán így kicsit hozzájárulhattam a data36 sikerességéhez.

Természetesen megkérdeztem őt is, hogy mi a véleménye a közös munkáról és az elkészült tervekről:

Én is iszonyatosan elégedett vagyok az eredménnyel. Adatos szakemberként úgy álltam neki a saját verziómnak ebből a dizájnból, hogy az apró részletek nem számítanak, a főbb dolgok legyenek a helyükön és konvertáljon az oldal. Csaba újratervezése és finomhangolása viszont rávilágított, hogy azért az adatelemzés sem minden: az én első redizájnomban voltak olyan zavaros elemek, amiket ő rutinos UX/UI-osként egyből kiszúrt és néhány praktikus és egyszerű fogással elegánsan "kivasalt". Továbbá az egységes, rendezett képnek az összhatása is profibb és bizalomkeltőbb… Ezt rövid távon nem lehet konverzióban mérni, de hosszú távon a visszatérések számában és a márkaismertség/márkahűség növekedésében érződik. A legfontosabb pedig, hogy végre nem az az érzésem van, hogy "összepakoltam magamnak egy weboldalt, mindegy csak működjön", hanem büszkén nyitom meg és mutatom másoknak is. Köszi szépen, Csaba!

Mester Tomi