Tervezői szemmel: az ELMŰ-ÉMÁSZ portál redizájn

Dizájnerként mi lenne álmaid melója? Ha volna rá lehetőséged, melyik szájtot fixálnád meg először? Mivel tennéd az emberek mindennapi életét egy kicsit szebbé, könnyebbé? Létezik egyáltalán az álomügyfél?

Mindannyian ismerjük ezeket a kérdéseket. Gyakran kérdezgetjük önmagunktól, egymástól, miközben egy megfelelően rugalmas, ugyanakkor határozott elképzelésekkel bíró ügyfélről álmodozunk, aki szakemberként tekint ránk, és akinek tetszenek az ötleteink…

Túl szép, hogy igaz legyen? Nem feltétlenül! Az alábbi elbeszélés valós eseményeken alapszik.

Mielőtt elkezdtem volna megírni ezt a posztot, sokat gondolkodtam azon, mit válasszak mondandóm vezérfonalául. Nehéz volt eldönteni, vajon mely téma lehet elég érdekes és megfelelően releváns ahhoz, hogy írásom alapját képezze, és fenn tudjam vele tartani a szakmai és laikus közönség érdeklődését egyaránt.

Azt a terjedelmet ugyanis, amelyet a Kedves Olvasó még képes lehet egyszerre befogadni – és amelyre ezáltal gondolataim megírásában szorítkozni igyekeztem –, nem éreztem elegendőnek egy ekkora projekt minden aspektusának részletes bemutatásához.

Ugyanakkor mindenképpen szerettem volna átfogó képet adni arról a majdnem egy évig tartó tervezési folyamatról, amelynek eredményeképpen júniusban megújult az ELMŰ-ÉMÁSZ Energiaszolgáltató Zrt. weboldala.

Jó-jó, de ki vagy te?

Porkoláb Dorottya vagyok, és a Melkweg nevű digitális ügynökségnél dolgozom dizájnerként. Tervezési vezetőként a kezdetek óta gondoztam az ELMŰ-szájt redizájnját, kezdetben UX, majd UI tervezői, később pedig tartalomkezelői minőségben is.

Akkor ez egy one-man show volt?

Ahogy vesszük: abban az értelemben igen, hogy saját magamnak adtam át a drótvázakat további kidolgozásra, de azért túlzás lenne azt állítani, hogy ne lett volna felettem szakmai revízió, vagy hogy ne lett volna segítségem. És mint ahogyan az lenni szokott, a végső döntést úgyis mindig az ügyfél hozta meg.

Tény azonban, hogy a szabályos UX/UI átadás hiánya miatt némileg felborult a tervezői folyamat egyensúlya, és mivel magamat inkább UX-esnek vallom, nyilván erre az oldalra billent a mérleg, ami még a tartalomkezelés során is érződött. Én tényleg őszintén hiszem, hogy egy weboldal akkor lehet igazán szép, ha a váza, a struktúrája rendezett, illetve hogy a további bővítések sikerét kockáztatjuk azzal, ha ingatag alapokra építünk.

Mi volt a feladat?

A redizájn nem pusztán a megjelenést, hanem a háttérrendszereket is érintette. Régóta esedékes volt már a megújulás ezen a téren, az arculatosítás pedig kiváló lehetőséget nyújtott arra, hogy végre a működést is új alapokra helyezzük.

A redizájn során eszközölt fejlesztések közül fontosnak tartom kiemelni a reszponzivitást, a folyamatok gördülékenyebbé tételét és az egységesített megjelenést.

Mostantól egy domain alatt érhető el minden ELMŰ-ÉMÁSZ tartalom, ami jelentős előrelépés az eddigiekhez képest. Ide csatornáztuk be az online ügyfélszolgálat elérhetőségét is, valamint az összes olyan oldalt, ami a vállalathoz tartozik. A közérthetőbb megfogalmazás érdekében igyekeztünk finomítani az oldal nyelvezetén, és célunk volt az is, hogy a vizualitást párhuzamba állítsuk a funkcionalitással. A mai internetfelhasználók számára ezek alapvető elvárások, és éppen ezért szerettünk volna ezeknek megfelelni.

Az előbb említetted, hogy a UX oldalára billent a mérleg. Háttérbe szorult a UI a UX-hez képest?

Jobban kidolgoztam a drótvázakat, mint egyéb esetekben indokolt lett volna, míg végül a fejlesztés számára átadott működési specifikációt igazán magas szintű UX tervekkel támaszthattuk alá. Ebben nyilván közrejátszott az is, hogy előre definiált styleguide-dal kellett dolgoznunk, hiszen a redizájn egyik lényege az Innogy-család egységes arculatához való igazodás volt.

Az ilyesmi egyfelől korlátozza a mozgásteret, ugyanakkor lehet mankó is: arra gondoltam, hogy ha már úgyis ismerjük a leendő betűtípust (és hozzá az ikonszettet), akkor miért ne építhetném be ezeket egyből a drótvázakba? Ezzel lehetőség nyílt arra is, hogy a tervezési folyamat már egy viszonylag korai szakaszában teljesebb képet tárhassunk az ügyfél elé.

Hozzá kell tennem, hogy az eredeti Innogy-dizájn nem akkora mennyiségű tartalom kiszolgálására készült, mint amennyivel az ELMŰ-ÉMÁSZ honlapja bír, ezért már strukturális szinten aktualizálnunk kellett a megjelenést, majd minden változtatást a német vezetőség elé tártunk elfogadásra. Emellett az itthon hatályos jogszabályi előírásoknak is meg kellett felelni, hiszen mégiscsak egy közműszolgáltató honlapjáról van szó.

A felhasználói felület Innogy-arculathoz való igazítása viszont elsősorban a UI feladata, ugye?

Igen, ez így van. A UX tulajdonképpen a dizájn backend-je, feladata a folyamatok és a működés bemutatása, annak az elvnek az ismertetése, amelyhez nélkülözhetetlen a rendszerszintű gondolkodás, és amelyben éppen ezért mellőzzük a zajt, a zavaró részleteket.

A pixelpontos terveket valóban a UI szolgáltatja, én azonban előre tudtam, hogy azokat is én fogom majd elkészíteni, így megengedhettem magamnak azt a “luxust”, hogy bizonyos szabályszerűségeket már a UX tervezés során meghatározzak.

Mire gondolsz?

A projekt indulásakor leültünk beszélgetni a csapattal arról, hogy milyen stratégiával lenne érdemes megközelíteni egy ekkora volumenű feladatot. El kellett döntenünk, melyik módszertan alkalmazása lenne a legoptimálisabb egy ennyire szerteágazó tervezési folyamat megfelelő mederben tartásához.

Választásunk végül a moduláris tervezési metódusra esett.

A moduláris tervezési metódus (atomic design) lényege, hogy az adott digitális felületet – hasonlóan a tudományban használt szerkezeti modellekhez – hierarchikusan egymásra épülő elemi egységek rendszereként fogja fel, mely elemek a tervezési folyamat során szisztematikus, koherens egésszé állnak össze. A legkisebb grafikai egységek az ún. atomok, melyekből molekulák, majd organizmusok, template-ek és végül oldalak jönnek létre.

Azt gondoltuk, hosszútávon gyorsabban lehetne haladni a munkával úgy, ha az egyes oldalak letervezése helyett inkább kidolgozunk egy rendszert – a modulok összerakási útmutatóját, ha tetszik –, és megtervezzük hozzá a teljes grafikai elemkészletet.

Oldaltípusokat határoztunk meg, eszerint csoportosítottuk a leendő portál tartalmát, később pedig minden ilyen template-oldalra vonatkoztattunk egy-egy felépítési szabályt. Érdemes erre úgy gondolni, mintha az egész weboldal egy virtuális LEGO lenne. Tulajdonképpen rendelkezünk egy doboz teljes tartalmával, illetve többféle építési útmutatóval, a kockák megfelelő sorrendben való összeállítása pedig változatos, egyedi megjelenést eredményez.

Brad Frost – Atomic Design

Ez a megközelítés számos előnnyel járt:

jelentősen lerövidítette a tervezési időt,
megkönnyítette a fejlesztést,
valamint tartalomszerkesztői szempontból is könnyen kezelhető lett a megjelenés.

Rendkívül jó validációs lehetőség volt ráadásul előállítani az egyes kulcsoldalak teljes layout-ját, hiszen így saját magunkon próbálhattuk ki, hogy működik-e az elv a gyakorlatban is. Sok apróságra éppen a tartalomkezelés közben derült fény.

Tudnál erre példát mondani?

Általános érvényű igazság, hogy a szépen elgondolt-lefejlesztett oldalterv mit sem ér odaillő tartalom nélkül; egy honlap esetében a grafikai lehetőségek maximális kihasználtsága révén lesz végül színes és sokoldalú a digitális megjelenés. Mindezek összessége az, amit a végfelhasználó érzékel majd, mint élményt.

A tervezés viszont nyilván nem tud felkészülni az összes élethelyzetre. Tesztkörnyezetben látni a működést mindig kicsit más, mint egy “házilag” készített prototípust kattintgatni. Sok esetben az animáció kell, hogy segítse a munkafolyamat megértését, úgyhogy leginkább az interakciós dizájn körül merültek fel kérdések, amit a prototípusokban egymás után fűzött statikus oldalak nem kezeltek le elég hatékonyan korábban.

Utólag visszagondolva a minél magasabb szintű felhasználói élmény elérésének szempontjából rendkívül szerencsésnek tartom, hogy az együttműködés során lehetőséget kaptunk a kiszolgált tartalom kezelésére is.

Említetted, hogy volt segítséged.

Persze, például a desktop nézetek mobilverzióinak teljes kidolgozása az általam készített prototípusok alapján, közvetett módon valósultak meg – amit tudtam, delegáltam. Újdonság volt számomra ez a fajta működés, tervezési vezetőként tudatosítanom kellett magamban, hogy immár nemcsak a saját kezem alól kiadott munka minőségéért tartozom felelősséggel, hanem a tervezés irányításáért, a dizájnerek és a fejlesztés összefogásáért is.

Porkoláb Dorottya, UX Designer @melkwegdigital

Úgy gondolom, sikerült az általunk ideálisnak gondolt működés alapjait lefektetni, ami egy ekkora energetikai szervezet esetében igazán egyedülálló eredmény. Ügyfelünk azt szerette volna megmutatni, hogy az ELMŰ-ÉMÁSZ Energiaszolgáltató Zrt. több mint egy közmű: két német multinacionális cég színes, sokoldalú, társadalmilag is hasznos tevékenységet folytató magyarországi leányvállalata, és egy ennek megfelelő online megjelenés elérését tűzte ki célul.

Sokat köszönhetünk a Grape Solutions csapatának is, külön öröm volt számunkra, hogy a dizájn és a fejlesztés között érezhetően megvolt az összhang. Valódi együttműködés történt, közösen dolgoztunk a sikerért.

Viszont, ha nem bánod, most már szeretnék visszatérni a blogbejegyzéshez, amit eredetileg elkezdtem írni…

Persze, természetes. Csak még annyit, hogy szerinted melyik a jobb: szólóban vagy csapatban dolgozni?

Szerintem mindkettőnek megvan a maga varázsa. Ha egyedül dolgozol, akkor tiéd a totális kontroll, a legapróbb részletekig mindenben te döntesz, viszont ez azzal is együtt jár, hogy nálad összpontosul a tudás, és adott esetben nem vagy helyettesíthető, nem tudnak neked segíteni.

A csapatmunka ennél sokkal organikusabb, egymáson átívelő folyamatok összessége, ahol sokat kommunikálunk, megosztjuk az információt. Ebben az esetben az okozza a legfőbb nehézséget, amikor el kell dönteni, hogy hol ér véget az egyik, és hol kezdődik a másik feladata (és felelőssége) a folyamatban.

Szerencsésnek mondhatom magamat, hiszen a nagy szólózás közepette bármikor számíthattam a kollégáim és a szakmai feletteseim segítségére, sosem hagytak magamra. Nagyon tanulságos volt számomra ez a projekt, igazi kihívást jelentett a tényleges tervezési munka mellett például a feladatok koordinálása is, de mindez nem valósulhatott volna meg az alkalmasságomba vetett bizalom nélkül, amiért nagyon hálás vagyok.

És hát akkor mi ez, ha nem igazi csapatmunka?

Az ELMŰ-ÉMÁSZ Energiaszolgáltató Zrt. weboldala a budapesti MelkwegDigital és a Grape Solutions csapatának közreműködésével, nagyjából egy év alatt újult meg. A teljes redizájnon átesett www.elmuemasz.hu 2018. június 18. óta segíti a felhasználókat az ügyintézésben és a gyors tájékozódásban. A MelkwegDigital büszke arra, hogy szakértelmével és tapasztalatával hozzájárulhatott egy olyan energetikai portál kialakításához, amely megfelel a modern digitális elvárásoknak.