Koncepciótól a piacravezetésig Egy online termékfejlesztés életútja az OANDER Media digitális ügynökségben.
2 Terepszemle Digitális stratégia és koncepcióalkotás 6 Funkcionális és ergonómiai tervezés 8-12 User interface design 14-16 Technológiai kivitelezés 18-20 Portálmenedzsment és üzemeltetés 22-23
3 Dióhéjban az Oanderről Az OANDER Media egy budapesti digitális műhely, amelynek 12 fős csapata tapasztalt ergonómiai tervezőkből, grafikusokból és fejlesztőkből áll. Nem klasszikus online ügynökség vagyunk, jól tudjuk: a design tervezés és fejlesztés a munkafolyamat vége, és nem az eleje. Több mint 70 portálfejlesztési é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. Ügynökségünk kellően nagy és tapasztalt ahhoz, hogy komplex digitális fejlesztési projekteken stabil szakmai erőforrásokkal szolgáljon ki, ám kellően kicsi ahhoz, hogy rugalmasak, kreatívak maradjunk, ügyfeleink projektjeit pedig kedvező óradíjak mellett szolgáljuk ki. Terepszemle
4 Tervezés-fókuszú szemlélet Több mint 70 portálfejlesztési é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. Az igazán komplex, nagyfokú kutatást és precizitást igénylő, sokszereplős projektektől pezseg a vérünk. Bátran ki merjük jelenteni, hogy kevés olyan digitális ügynökség van, amely akkora hangsúlyt fektet a gondos tervezésre, mint az OANDER Media. Valamennyi projektünk során A konkurencia alapos megfigyelésével és best practice kutatással állítjuk össze a készülő digitális termék építőelemeit. Napokat, heteket és néha hónapokat töltünk ergonómiai tervek, drótvázak 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 Digitális stratégia és koncepcióalkotás Terepszemle 3-4 Funkcionális és ergonómiai tervezés 8-12 User interface design 14-16 Technológiai kivitelezés 18-20 Portálmenedzsment és üzemeltetés 22-23
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 meghatá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ányozunk, ö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 Funkcionális és ergonómiai tervezés Terepszemle 3-4 Digitális stratégia és koncepcióalkotás 6 User interface design 14-16 Technológiai kivitelezés 18-20 Portálmenedzsment és üzemeltetés 22-23
8 Usability comes first A webes tervezés egy olyan szakterület, ami nagyban hasonlít egy építész vagy egy mérnökiroda tevékenységéhez. Megfelelő előkészítés és tervezés nélkül egy komplex portált fejleszteni éppen olyan, mintha házépítésbe fognánk tervrajzok nélkül. A webes termékfejlesztések egyik magától értődő, ezért gyakran elhanyagolt szempontja, hogy a projekt eredményeként létrejövő alkalmazásnak nemcsak esztétikusnak, szépnek és jól működőnek kell lennie, de használhatónak is. A funkcionális és ergonómiai tervezés során állítjuk elő azokat a fejlesztési kellékeket, amelyekből a grafikusaink és a programozóink felépítik majd a készülő termékéket. A körültekintő tervezés eredményeként a webes fejleszté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 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 kialakí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 Üzleti brief Best Practice 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ó szerint több száz kisebb-nagyobb ötlet, elképzelés, apró, ámde egyedi megoldás alkotja. A Best Practice vizsgálat során ezeket az építőelemeket gyűjtjük össze a site tervezéséhez, hogy aztán a termékműhelyek alkalmával a megrendelővel közösen megvitassuk őket. Gyakorlatilag egy gazdag étlapot készítünk elő, amiből aztán csak válogatni kell. 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é? Best Practice kutatás Tervezési termékműhely Funkcionális specifikáció Tervezési vezérfonal Ergonómiai tervezés User Interface design tervezés Funkcionális és ergonómiai tervezés
11 Ergonómiai tervezés Az ergonómiai tervezés valójában döntések sorozata. Mit mutassunk meg egy képernyőn és mit rejtsünk el? Hogyan lehet még egyszerűbbé tenni egy funkciót? Miként fókuszáljuk a felhasználó figyelmét egy adott irányba? A projekt ezen szakaszában még mindig nem design tervezésről van szó, hanem az ergonómia kialakításán dolgozunk. Ehhez wireframe terveket alkotunk, szedünk ízekre majd rakunk újra össze különböző variációkban. A wireframe-ek (drótvázak) az előállítandó webes alkalmazások felületeinek design nélküli tervrajzai. Gyakorlatilag szabásminták, amelyeket a projekt későbbi szakaszában a grafikusaink és fejlesztőink fognak valós, működő funkciókkal felöltöztetni. Funkcionális és ergonómiai tervezés
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 kapcsolatos 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 User interface design Terepszemle 3-4 Digitális stratégia és koncepcióalkotás 6 Funkcionális és ergonómiai tervezés 8-12 Technológiai kivitelezés 18-20 Portálmenedzsment és üzemeltetés 22-23
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 elké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 frontend fejlesztési szakértők is. Így aztán a tervezőasztalukat a webes technológiai követelményeknek maximálisan megfelelő, a fejleszté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 sztenderdek, mint a webdesignt User interface design
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 rutinszerű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 Drótvázból > design terv Egy fejlesztés során mindig több grafikai koncepció készül, majd a legjobbnak tűnő variációt addig finomítjuk, amíg az eredmény jobb lesz, mint amit az ügyfelünk elképzelt. Csak azt követően látunk neki az aloldalak grafikai tervezésének, ha már egy főképrenyős design terv formájában véglegesítettük a felhasználói felület arculati jellemzőit. A grafikai tervezés során mindig szigorúan követjük az ergonómiai tervekben definiált felépítést, így a látványvilág szolgálja ki a használhatóságot, és nem fordítva. User interface design
17 Technológiai kivitelezés Terepszemle 3-4 Digitális stratégia és koncepcióalkotás 6 Funkcionális és ergonómiai tervezés 8-12 User interface design 14-16 Portálmenedzsment és üzemeltetés 22-23
18 Nyílt forráskódú szemlélet Amennyiben a projekt mozgástere 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ábbvitele 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, jellemzően 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 Alkalmazott fejlesztési környezetek A Wordpress egy nyílt forráskódú tartalomkezelő rendszer, amelyen ügynökségünk komplex vállalati oldalakat és médiaportálokat fejleszt. A Wordpress szabad felhasználhatósága ugyanakkor páratlan rugalmassággal, stabilitással, testreszabhatósággal és megbízhatósággal párosul. Mindez egy globális méretű fejlesztői közösség önzetlen munkájának köszönhető, amely évek óta fejleszti a keretrendszert, hogy egyre hatékonyabb publikálás platformmá váljon. 2011-től kezdve az OANDER Media alkalmazástervezési és fejlesztési területének kiemelt jelentőségű üzletágát képezi a webáruházfejlesztés. A Magento keretrendszer, amelyen projektjeinket megvalósítjuk egy nyílt-forráskódú e-commerce fejlesztési megoldás, amelyet jelenleg több ezer fejlesztő használ és gondoz világszerte. Csapatunk segítségével az Ön vállalkozása is olyan webáruházzal rendelkezhet, amely ezen keretrendszert használva a világ technológiai élvonalába tartozik. Technológiai kivitelezés
20 Technikai alapvetések Az OANDER Media által gyártott frontend fejlesztések mindig a HTML szabvá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 frontend kód áttekinthető és fejlesztői kommentekkel ellátott legyen. Termékeink felületeit XHTML / HTML5 / CSS3 alapokon készítjük el. Javascript frameworknek 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 Portálmenedzsment és üzemeltetés Terepszemle 3-4 Digitális stratégia és koncepcióalkotás 6 Funkcionális és ergonómiai tervezés 8-12 User interface design 14-16 Technológiai kivitelezés 18-20
22 Forgalomelemzés és optimalizálás Az interneten nincs többé találgatás. Valamennyien otthagyjuk 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ítmé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 életciklusá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
Tartalomprodukció A tartalomkiszerelést támogató eseti kisebb-nagyobb fejlesztések Szöveges anyagok (cikkek, isremtető leírások, stb.) gyártása Tartalmak terjesztése különböző social media csatornákon Tartalmakhoz kapcsolódó képszerkesztési feladatok Folyamatos grafikai support minden online felületen Tartalmi és technikai keresőoptimalizálás Egy portál tartalmi menedzselése jellemzően az alábbi feladatokból áll: Az elmúlt években az OANDER Media csapata az ilyen jellegű, napi frekvenciájú feladatok ellátásában komoly tapasztalatra és rutinra tett szert. Ennek egyik legfontosabb ismertetőjegye, hogy ügynökségünk nemcsak ügyfeleknek nyújt online produkciós szolgáltatásokat, hanem saját kiadásában álló média- és e-kereskedelmi portálokat is működtet. 23 Portálmenedzsment és üzemeltetés
Kapcsolat Bobor Petra Projektvezető +36-30-399-0832 petra@oander.hu Radó Mátyás Ügyvezető +36-30-834-6519 rado@oander.hu Ocskay László Ügyvezető +36-30-834-6636 ocskay@oander.hu OANDER Media KFT. 1055 Budapest Bajcsy-Zsilinszky út 16. office@oander.hu Think online.