Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Koncepciótóla piacravezetésig Egy online termékfejlesztés életútja az OANDER Media digitális ügynökségben.
|2Terepszemle     Digitális stratégia   Funkcionális és       User interface   Technológiai   Portálmenedzsment     és kon...
|3   Dióhéjban               Az OANDER Media egy budapesti digitális műhely,            Ügynökségünk kellően nagy és tapas...
|4                                 Tervezés-fókuszú szemlélet    „Több mint 70 portálfej-     Az igazán komplex, nagyfokú ...
|5Digitális stratégiaés koncepcióalkotásTerepszemle   Funkcionális és       User interface   Technológiai   Portálmenedzsm...
|6            Mit is csinálunk, amikor       digitális stratégiát alkotunk?        A stratégiai tervezés a fejlesztési pro...
|7Funkcionális ésergonómiai tervezésTerepszemle   Digitális stratégia   User interface   Technológiai   Portálmenedzsment ...
|8„Usabilitycomes first”A webes tervezés egy olyan szakterület, ami     A webes termékfejlesztések egyik magától          ...
|9Kickoff, avagya koncepció „kicsomagolása”Egy webes termékfejlesztési projekt idejének meglepőenkis hányadát teszi ki mag...
| 10                                                                                                 Üzleti brief         ...
| 11Ergonómiai tervezésAz ergonómiai tervezés valójában döntések        A projekt ezen szakaszában még mindig nem       A ...
| 12                                                               Termékműhely megbeszélések                             ...
| 13User interface designTerepszemle   Digitális stratégia   Funkcionális    Technológiai   Portálmenedzsment             ...
| 14                    Művészet és technológia           Ahol az ergonómiai tervező team leteszi a lantot, ott veszi fel ...
| 15                        A jó felhasználói élmény                        alapja a felhasználó                        me...
| 16                              Drótvázból > design terv                        Egy fejlesztés során mindig több grafika...
| 17Technológiai kivitelezésTerepszemle   Digitális stratégia   Funkcionális és       User interface   Portálmenedzsment  ...
| 18                           Nyílt forráskódú szemlélet                           Amennyiben a projekt scope-ja engedi, ...
| 19 Alkalmazott                                             A Wordpress egy nyílt forráskódú                         2011...
| 20               Technikai alapvetések   Az OANDER Media által gyártott frontend fejlesztések mindig a HTML szab-     vá...
| 21Portálmenedzsmentés üzemeltetésTerepszemle   Digitális stratégia   Funkcionális és       User interface   Technológiai...
| 22                    Forgalomelemzés                    és optimalizálás                    Az interneten nincs többé t...
| 23     Tartalomprodukció     Egy portál tartalmi menedzselése jellemzően az alábbi feladatokból áll:            Az elmúl...
KapcsolatBobor Petra       Radó Mátyás       Ocskay László      OANDER Media KFT.Projektvezető     Ügyvezető         Ügyve...
Upcoming SlideShare
Loading in …5
×

Koncepciótól a piacravezetésig - OANDER Media

0 views

Published on

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

Published in: Design
  • Be the first to comment

  • Be the first to like this

Koncepciótól a piacravezetésig - OANDER Media

  1. 1. Koncepciótóla piacravezetésig Egy online termékfejlesztés életútja az OANDER Media digitális ügynökségben.
  2. 2. |2Terepszemle 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. |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. |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 aló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. |5Digitális stratégiaés koncepcióalkotásTerepszemle 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. |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. |7Funkcionális ésergonómiai tervezésTerepszemle 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. |8„Usabilitycomes 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ánnagyban 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óinkszí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. |9Kickoff, avagya koncepció „kicsomagolása”Egy webes termékfejlesztési projekt idejének meglepőenkis hányadát teszi ki maga programozás. Valójában méga 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 logikaifelé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őitFunkcionálisés ergonómiai tervezés
  10. 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ésA 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ésFunkcionálisés ergonómiai tervezés
  11. 11. | 11Ergonómiai tervezésAz 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ó webessorozata. 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 projektrű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. | 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 alegelhanyagolható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. | 13User interface designTerepszemle 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. | 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 webestechnológiai követelményeknek maximálisan megfelelő, a fejlesz-tés számára precízen kidolgozott látványtervek hagyják el. Eznagyon fontos, ugyanis a grafikai művészet egyetlen szak-ágát sem korlátozzák olyan szigorú technológiai szten-derdek, mint a webdesigntUser interface design
  15. 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. | 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. | 17Technológiai kivitelezésTerepszemle 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. | 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. | 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. | 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 azonosmegjelené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ékeinkfelü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 CSS3Technológiai kivitelezés
  21. 21. | 21Portálmenedzsmentés üzemeltetésTerepszemle 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. | 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. | 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ásPortálmenedzsmentés üzemeltetés
  24. 24. KapcsolatBobor 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-6636petra@oander.hu rado@oander.hu ocskay@oander.hu office@oander.hu Think online.

×