Egy online termékfejlesztés életútja az OANDER Media digitális ügynökségben

1. Koncepciótól
a piacravezetésig
Egy online termékfejlesztés életútja
az OANDER Media digitális ügynökségben.

2. |2
Terepszemle
Digitális stratégia Funkcionális és User interface Technológiai Portálmenedzsment
és koncepcióalkotás ergonómiai tervezés design kivitelezés és üzemeltetés
|6 | 8-12 | 14-16 | 18-20 | 22-23

3. |3
Dióhéjban
Az OANDER Media egy budapesti digitális műhely, Ügynökségünk kellően nagy és tapasztalt ahhoz,
amelynek 12 fős csapata tapasztalt ergonómiai hogy komplex digitális fejlesztési projekteken sta-
az Oanderről tervezőkből, grafikusokból és fejlesztőkből áll. Nem bil szakmai erőforrásokkal szolgáljon ki, ám kellően
klasszikus online ügynökség vagyunk, jól tudjuk: kicsi ahhoz, hogy rugalmasak, kreatívak maradjunk,
a design tervezés és fejlesztés a munkafolyamat ügyfeleink projektjeit pedig kedvező óradíjak mellett
vége, és nem az eleje. Több mint 70 portálfejlesztési szolgáljuk ki.
és piacravezetési projekttel a hátunk mögött abban
hiszünk, hogy egy hatékony, felhasználóbarát és
üzletileg sikeres digitális termék „lelke” a fejlesztést
megelőző gondos elemzés és tervezés.
Terepszemle

4. |4
Tervezés-fókuszú szemlélet
„Több mint 70 portálfej- Az igazán komplex, nagyfokú kutatást és precizitást igénylő, sokszereplős projektektől
lesztési és piacravezetési pezseg a vérünk. Bátran ki merjük jelenteni, hogy kevés olyan digitális ügynökség van,
projekttel a hátunk mö- amely akkora hangsúlyt fektet a gondos tervezésre, mint az OANDER Media. Valamennyi
gött abban hiszünk, hogy projektünk során…
egy hatékony, felhaszná-
»» A konkurencia alapos megfigyelésével és best practice kutatással állítjuk össze a
lóbarát és üzletileg sikeres
készülő digitális termék építőelemeit.
digitális termék „lelke” a
fejlesztést megelőző gon- »» Napokat, heteket és néha hónapokat töltünk ergonómiai tervek, drótvázak
dos elemzés és tervezés.” kialakításával, mielőtt a felhasználói felület grafikai tervezésébe fognánk.
»» Ügyfeleinkkel tartalmas termékműhely-találkozókon vitatjuk meg az ergonómiai
és funkcionális terveket. Nem gondoljuk, hogy mindentudók vagyunk: ügyfeleinket
bevonjuk a tervezésbe, építünk a meglátásaikra és iparági tapasztalataikra.
Terepszemle

5. |5
Digitális stratégia
és koncepcióalkotás
Terepszemle Funkcionális és User interface Technológiai Portálmenedzsment
ergonómiai tervezés design kivitelezés és üzemeltetés
| 3-4 | 8-12 | 14-16 | 18-20 | 22-23

6. |6
Mit is csinálunk, amikor
digitális stratégiát alkotunk?
A stratégiai tervezés a fejlesztési projekt üzleti és kreatív oldalát kapcsolja össze.
Meglepő, hogy milyen sok online termék lép piacra komolyabb előkészítés nélkül
és milyen fontos döntések születnek alulinformált módon. A digitális stratégia
célja, hogy ügyfeleink üzeneteit és értékajánlatát minél több eszközön célzottan
és interaktív módon elérhetővé tegye.
Rengetegszer tapasztaljuk, hogy amikor megrendelőink felkeresnek bennünket
egy tervezési vagy fejlesztési feladattal, a projekt koncepcióját alapjaiban megha-
tározó kérdések nincsenek megválaszolva. Ilyenkor kell visszalépnünk egyet, és
nem elméleti, hanem nagyon is gyakorlati elemzéseket végeznünk.
Forgalmi adatokat veszünk górcső alá, felhasználói viselkedést tanulmányo-
zunk, összehasonlítjuk a konkurensek működését, forgalomterelési csatornákat
elemzünk és technológiai platformokat mérlegelünk. Ezek szintézise a fejlesztés
adatokkal alátámasztott koncepciója, ahonnan már van értelme oldaltípusokról,
szolgáltatásokról és működésről beszélnünk.
Digitális stratégia
és koncepcióalkotás

7. |7
Funkcionális és
ergonómiai tervezés
Terepszemle Digitális stratégia User interface Technológiai Portálmenedzsment
és koncepció- design kivitelezés és üzemeltetés
| 3-4 alkotás | 14-16 | 18-20 | 22-23
|6

8. |8
„Usability
comes first”
A webes tervezés egy olyan szakterület, ami A webes termékfejlesztések egyik magától A funkcionális és ergonómiai tervezés során
nagyban hasonlít egy építész vagy egy mér- értődő, ezért gyakran elhanyagolt szempontja, állítjuk elő azokat a fejlesztési kellékeket,
nökiroda tevékenységéhez. Megfelelő előké- hogy a projekt eredményeként létrejövő alkal- amelyekből a grafikusaink és a programozóink
szítés és tervezés nélkül egy komplex portált mazásnak nemcsak esztétikusnak, szépnek és felépítik majd a készülő termékéket. A körül-
fejleszteni éppen olyan, mintha házépítésbe jól működőnek kell lennie, de használhatónak is. tekintő tervezés eredményeként a webes fej-
fognánk tervrajzok nélkül. lesztési projektek költségvetésen és határidőn
belül, az elvárt terjedelemben valósulnak meg.
Funkcionális
és ergonómiai tervezés

9. |9
Kickoff, avagy
a koncepció „kicsomagolása”
Egy webes termékfejlesztési projekt idejének meglepően
kis hányadát teszi ki maga programozás. Valójában még
a drótvázak megtervezése és a funkcionális specifikáció
elkészítése előtt is rengeteg munka zajlik egy weboldal ki-
alakításán. A tervezési munka kezdetén a termék logikai
felépítését, azaz a magas szintű koncepcióját alakítjuk ki.
Erre pedig a legjobb eszköz a papír, rajztábla és toll.
Ilyenkor definiáljuk a tervezőasztalunkra került alkalmazás
»» legfontosabb üzeneteit
»» funkciólistáját
»» információs architektúráját
»» navigációs térképét
és a felhasználók „terelésének” útvonalait
»» oldaltípus-listáját
»» meghatározó ergonómiai jellemzőit
Funkcionális
és ergonómiai tervezés

10. | 10
Üzleti brief
Best Practice
Best Practice kutatás kutatás
Egy webes terméket jellemzően nem egyetlen alapötlet tesz kiválóvá. Egy funkciógazdag
portál vagy alkalmazás felépítését, megjelenését, működését és szolgáltatásait szó sze- Tervezési
rint több száz kisebb-nagyobb ötlet, elképzelés, apró, ámde egyedi megoldás alkotja. vezérfonal
A Best Practice vizsgálat során ezeket az építőelemeket gyűjtjük össze a site tervezé- Tervezési
séhez, hogy aztán a termékműhelyek alkalmával a megrendelővel közösen megvitassuk termékműhely
őket. Gyakorlatilag egy gazdag étlapot készítünk elő, amiből aztán “csak” válogatni kell. Ergonómiai
tervezés
A BP kutatás fontos további feladata, hogy tisztán lássuk: a konkurensek milyen megoldá-
sokat alkalmaznak, ezekből mit érdemes adaptálnunk, és mivel válhatunk egyedivé?
Funkcionális
specifikáció
User Interface
design tervezés
Funkcionális
és ergonómiai tervezés

11. | 11
Ergonómiai tervezés
Az ergonómiai tervezés valójában döntések A projekt ezen szakaszában még mindig nem A wireframe-ek (drótvázak) az előállítandó webes
sorozata. Mit mutassunk meg egy képernyőn design tervezésről van szó, hanem az ergonó- alkalmazások felületeinek design nélküli tervrajzai.
és mit rejtsünk el? Hogyan lehet még egysze- mia kialakításán dolgozunk. Ehhez wireframe Gyakorlatilag „szabásminták”, amelyeket a projekt
rűbbé tenni egy funkciót? Miként fókuszáljuk a terveket alkotunk, szedünk ízekre majd rakunk későbbi szakaszában a grafikusaink és fejlesztő-
felhasználó figyelmét egy adott irányba? újra össze különböző variációkban. ink fognak valós, működő funkciókkal felöltöztetni.
Funkcionális
és ergonómiai tervezés

12. | 12
Termékműhely megbeszélések
Nem a digitális ügynökség az egyetlen ötletforrás. Feladata, hogy elképzelései bemutatá-
sával inspiráló kérdéseket tegyen fel. Erre szolgál a termékműhely.
Az OANDER Media tervezőcsapata nem ért egyet azzal az általános metódussal, hogy
kreatív tervező cégek ügyfeleiknek csak a kész, befejezett munkáikat mutatják meg. A
termékműhelyek alkalmával szándékosan bevonjuk a megrendelőt a munkafolyamatba a
készülőben lévő wireframe tervek megvitatásával. Az aktuális tervek bemutatását általá-
ban élénk vita követi, aminek egyetlen célja, hogy a termék egyre jobb legyen. Egy komplex
fejlesztés során nem ritka a 3-4 termékműhely sem, amik általában fél- vagy egész napos
megbeszéléseket takarnak. Hosszú, ámde produktív workshopokra kell számítani.
Funkcionális specifikáció
Az elkészült terveket ezt követően részletesen dokumentáljuk egy funkcionális specifikáció
formájában. A specifikáció egy olyan dokumentum, ami részletesen leírja termékkel kap-
csolatos fejlesztési követelményeket. Oldaltípusok és szolgáltatások működését ismerteti,
felhasználó-oldali műveleteket határoz meg és tartalmazza az elkészült wireframe terveket.
A specifikáció fontos funkciója, hogy a tervezés során ne maradjanak nyitott kérdések,
bizonytalanságok, hiszen a jó dokumentáció megírása kikényszeríti a döntéseket még a
legelhanyagolhatóbbnak tűnő kérdésekben is. Emellett nagyon fontos minőségbiztosítási
kellék. Kihagyni a specifikáció írását a létező legnagyobb szükségtelen kockázatvállalás,
amit egy nagy volumenű fejlesztési projektben elkövethetünk.
Funkcionális
és ergonómiai tervezés

13. | 13
User interface design
Terepszemle Digitális stratégia Funkcionális Technológiai Portálmenedzsment
és koncepcióalkotás és ergonómiai kivitelezés és üzemeltetés
| 3-4 |6 tervezés | 18-20 | 22-23
| 8-12

14. | 14
Művészet és technológia
Ahol az ergonómiai tervező team leteszi a lantot, ott veszi fel a fonalat a
hazai és nemzetközi ügyfeleken edződött grafikai csapatunk. Miután el-
készültek a drótvázak, kezdődhet a művészeti megvalósítás. Az OANDER
Media designerei nemcsak tehetséges grafikusok, de egytől egyig front-
end fejlesztési szakértők is. Így aztán a tervezőasztalukat a webes
technológiai követelményeknek maximálisan megfelelő, a fejlesz-
tés számára precízen kidolgozott látványtervek hagyják el. Ez
nagyon fontos, ugyanis a grafikai művészet egyetlen szak-
ágát sem korlátozzák olyan szigorú technológiai szten-
derdek, mint a webdesignt
User interface design

15. | 15
A jó felhasználói élmény
alapja a felhasználó
megismerése
A portálok arculatának és felhasználói felületének grafikai tervezése nem egy rutin-
szerűen végzett feladat, hanem felfedezőút. Sosem tudjuk, milyen lesz a végeredmény,
amíg oda nem érünk. Mivel a webdesign egy rendkívül szubjektív terület, csak a saját
vagy az ügyfelünk benyomásaira hagyatkozva könnyű öngólt lőni. Hogy ezt elkerüljük,
beszélgetünk a felhasználókkal. Ha kell fókuszcsoportos vizsgálatokat végzünk, ha kell,
design trendeket elemzünk. Ezek tapasztalataiból áll össze az a részletes design brief,
amely orientálja a felhasználói felület művészeti tervezését.
User interface design

16. | 16
Drótvázból > design terv
Egy fejlesztés során mindig több grafikai főképrenyős design terv formájában vég-
koncepció készül, majd a legjobbnak tűnő legesítettük a felhasználói felület arculati
variációt addig finomítjuk, amíg az ered- jellemzőit. A grafikai tervezés során mindig
mény jobb lesz, mint amit az ügyfelünk el- szigorúan követjük az ergonómiai tervekben
képzelt. Csak azt követően látunk neki az definiált felépítést, így a látványvilág szol-
aloldalak grafikai tervezésének, ha már egy gálja ki a használhatóságot, és nem fordítva.
User interface design

17. | 17
Technológiai kivitelezés
Terepszemle Digitális stratégia Funkcionális és User interface Portálmenedzsment
és koncepcióalkotás ergonómiai tervezés design és üzemeltetés
| 3-4 |6 | 8-12 | 14-16 | 22-23

18. | 18
Nyílt forráskódú szemlélet
Amennyiben a projekt scope-ja engedi, igyekszünk fejlesztéseinket nyílt forráskódú
technológiákon megvalósítani. Így az általunk előállított termékek későbbi továbbvi-
tele nincsen hozzánk kötve, az ügyfél valóban tulajdonosa az elkészülő fejlesztésnek.
Ezzel ellentétben azok a cégek, amelyek saját maguk által fejlesztett alaprendszerrel
dolgoznak, nem adnak hozzáférést a forráskódhoz, rendszerük egy jogilag korlátozott,
féltve őrzött szellemi termék, amihez más nem nyúlhat.
A nyílt forráskódú technológiák használatának másik előnye a költséghatékonyság.
Ügyfeleink projektköltségvetése elsősorban a felhasználói élmény megtervezésére és
az azt szolgáló frontend fejlesztésekre költjük ahelyett, hogy már kész tartalomkezelő
vagy e-commerce technológiákat építenénk fel a semmiből.
Technológiai kivitelezés

19. | 19
Alkalmazott
A Wordpress egy nyílt forráskódú 2011-től kezdve az OANDER Media
tartalomkezelő rendszer, ame- alkalmazástervezési és fejlesztési
fejlesztési
lyen ügynökségünk komplex vál- területének kiemelt jelentőségű
lalati oldalakat és médiaportálo- üzletágát képezi a webáruház-
környezetek
kat fejleszt. A Wordpress szabad fejlesztés.
felhasználhatósága ugyanakkor A Magento keretrendszer, amelyen
páratlan rugalmassággal, stabilitással, testreszab- projektjeinket megvalósítjuk egy nyílt-forráskódú
hatósággal és megbízhatósággal párosul. Mindez e-commerce fejlesztési megoldás, amelyet jelenleg
egy globális méretű fejlesztői közösség önzetlen több ezer fejlesztő használ és gondoz világszerte.
munkájának köszönhető, amely évek óta fejleszti a Csapatunk segítségével az Ön vállalkozása is olyan
keretrendszert, hogy egyre hatékonyabb publikálás webáruházzal rendelkezhet, amely ezen keretrendszert
platformmá váljon. használva a világ technológiai élvonalába tartozik.
Technológiai kivitelezés

20. | 20
Technikai alapvetések
Az OANDER Media által gyártott frontend fejlesztések mindig a HTML szab-
ványokhoz szigorúan illeszkedő, tiszta, szemantikus kódolással készülnek.
Projektjeink során kínosan ügyelünk arra, hogy valamennyi böngészőn azonos
megjelenést biztosító, böngésző-optimalizált megjelenést készítsünk, a front-
end kód áttekinthető és fejlesztői kommentekkel ellátott legyen. Termékeink
felületeit XHTML / HTML5 / CSS3 alapokon készítjük el. Javascript framework-
nek jellemzően a jQuery keretrendszert használjuk, amelyből nyilvános illetve
saját fejlesztésű plugin-okat is implementálunk. Igény esetén munkatársaink
gond nélkül tudnak reszponzív frontend fejlesztést végezni, amely lehető-
vé teszi, hogy egyazon oldaltípus több eszközön (pl. böngésző, táblagépek,
okostelefonok) a rendelkezésre álló oldalszélességhez igazodva jelenjen meg.
XHTML HTML5 CSS3
Technológiai kivitelezés

21. | 21
Portálmenedzsment
és üzemeltetés
Terepszemle Digitális stratégia Funkcionális és User interface Technológiai
és koncepcióalkotás ergonómiai tervezés design kivitelezés
| 3-4 |6 | 8-12 | 14-16 | 18-20

22. | 22
Forgalomelemzés
és optimalizálás
Az interneten nincs többé találgatás. Valamennyien ott-
hagyjuk a digitális újlenyomatunkat minden oldalletöltés,
kattintás vagy vásárlás alkalmával, ezek pedig részletes
adatok formájában elemezhetők. Így a portálok teljesít-
ménye mérhető és bármilyen más médiatípusnál jobban
optimalizálható.
A digitális termékek jellemzője – legyenek azok vállalati
oldalak, médiaportálok vagy social media alkalmazások
– hogy elindításuk nem jelenti a befejezésüket: hétről
hétre értékelni kell a tartalmuk és ergonómiai felépítésük
teljesítményét. Egy webes alkalmazás természetes élet-
ciklusának része a folyamatos optimalizálás. Az OANDER
Media forgalomelemző szakértői segítenek eligazodni
a rendelkezésre álló adatok tengerében és azonosítani
ügyfeleink felhasználóinak viselkedését.
Portálmenedzsment
és üzemeltetés

23. | 23
Tartalomprodukció
Egy portál tartalmi menedzselése jellemzően az alábbi feladatokból áll: Az elmúlt években az OANDER Media csapata az ilyen jel-
legű, napi frekvenciájú feladatok ellátásában komoly tapasz-
»» A tartalomkiszerelést támogató eseti kisebb-nagyobb fejlesztések
talatra és rutinra tett szert. Ennek egyik legfontosabb ismer-
»» Szöveges anyagok (cikkek, isremtető leírások, stb.) gyártása
tetőjegye, hogy ügynökségünk nemcsak ügyfeleknek nyújt online
»» Tartalmak terjesztése különböző social media csatornákon
produkciós szolgáltatásokat, hanem saját kiadásában álló média- és
»» Tartalmakhoz kapcsolódó képszerkesztési feladatok
e-kereskedelmi portálokat is működtet.
»» Folyamatos grafikai support minden online felületen
»» Tartalmi és technikai keresőoptimalizálás
Portálmenedzsment
és üzemeltetés

24. Kapcsolat
Bobor Petra Radó Mátyás Ocskay László OANDER Media KFT.
Projektvezető Ügyvezető Ügyvezető 1055 Budapest
Bajcsy-Zsilinszky út 16.
+36-30-399-0832 +36-30-834-6519 +36-30-834-6636
petra@oander.hu rado@oander.hu ocskay@oander.hu office@oander.hu
Think online.