Hogyan segítettük létrehozni Magyarország első fociesemény-szervező alkalmazását. A Grundról – esettanulmány

Ambrus KrisztiánHead of Design
2024. 01. 24.-Branding & Visual IdentityDesign SystemsMobile App & Web DesignUser Experience Design
cover

Hogyan segítettük létrehozni Magyarország első fociesemény-szervező alkalmazását. A Grundról – esettanulmány

A Grund csapata egy olyan szakmai partnert keresett, aki az ötletükből olyan appot tud fejleszteni ami üzletileg és funkcionalitás terén is megállja a helyét, és így országos sikert arathat. Már az első találkozó után egyértelmű volt, hogy nem csupán egy platform fejlesztésében gondolkodtunk, hanem abban, hogy egy dinamikus és innovatív hídként működő megoldást tervezzünk meg és hozzunk létre, amely összefogja az amatőr futball közösséget és elősegíti annak fejlődését.

Az alapötlet mögött álló felismerés a következő volt: a futball, mint a világ egyik legnépszerűbb sportja, egyben komplex és szétszórt világot is takar az amatőr szinten. A Grund ezen a területen kíván segítséget nyújtani egy olyan platform képében, mely az amatőr futball közösségének igényeire szabott. A közösen megszervezett termékfejlesztési workshopjainkon keresztül létrehoztuk azt a struktúrát és folyamatot, mely lehetővé tette számunkra, hogy ezt a látomást valósággá alakítsuk.

A probléma

Az amatőr futball és annak résztvevőinek feltérképezésekor rájöttünk, hogy számos kihívással találkoznak a mindennapjaik során:

  • Játékosoknak kihívás társaságot, és sportolási lehetőséget találni,
  • Csapatok nehezen szerveződnek,
  • A sportpályák fenntartása nehezen biztosított,
  • Sportpálya üzemeltetése támogatása papír alapon működik (ha működik),
  • A pályafoglalás nem felel meg a modern kor elvárásainak, aluldigitalizált.

Közös munkánk során a Grunddal arra törekedtünk, hogy maradéktalanul válaszokat adjunk ezekre a kihívásokra, és egyben új lehetőségeket teremtsünk az amatőr futball közösség számára.

Célcsoportunk

A Grunddal közösen azonosítottuk a két fő célcsoportot, akikre a platformunknak a legnagyobb hatással kell lennie: a B2B partnerek, akik megbízható üzleti megoldásokat keresnek, és az amatőr focisták, akik a környezetükben keresnek sportolási lehetőségeket. Mindkét célcsoport számára célunk volt egy olyan platform létrehozása, amely megkönnyíti és gazdagítja az amatőr futballélményt.

Előtervezés - Üzleti tanácsadás

A Grund szakmai partnereként feladatunk volt, hogy közösen formáljuk és közösen alkossuk meg a termék alapjait. Mielőtt a kivitelezési és fejlesztési fázisba léptünk volna, a Grund vízióját összehangoltuk a felhasználók és a piac aktuális igényeivel. Ezen a ponton vált teljesen egyértelművé, hogy milyen célcsoportokat kell megcéloznunk és milyen funkciókkal tudjuk őket legjobban kiszolgálni. Például a társakat és sportolási lehetőségeket keresőknek egy megosztott pályabérlési rendszert és könnyített csapatkeresőt terveztünk, míg az eseményeket rendezők számára egyszerűsített eseménykezelő eszközöket fektettünk le. A sportpálya üzemeltetői oldalon a hangsúlyt a könnyebb adminisztrációra és a pályák jobb kihasználtságára helyeztük.

grund_workshop.png

A platform fenntarthatósága érdekében egy fenntartható pénzügyi modellt dolgoztunk ki, és teljesen átlátható digitális pénzügyi rendszert terveztünk meg, amely segítséget nyújt a közreműködő partnerek bevonásában.

A Grunddal a vízióalkotástól kezdve a célcsoport azonosításon át, egészen a funkcionális tervezésig közösen tettük le az üzleti alapokat. Az együttműködés alatt számos workshopot tartottunk, amelyek során a termék koncepcióját alaposan körvonalaztuk és finomítottuk. Mind a Grund, mind a mi csapatunk tagjai aktívan részt vettek a terméktervezési folyamat minden lépésében, így egyesítve erőinket a siker érdekében.

Előkutatás

Az előkutatás során egy alapos és átfogó branding kutatásba kezdtünk, hogy megértsük a piacot és annak vizuális és funkcionális felhozatalát. Ez a kutatás tette lehetővé számunkra, hogy egy olyan releváns és versenyképes márkát és funkcionális készletet alkossunk, amely a Grund értékeit tükrözi, ugyanakkor megállja a helyét a ma ismert megoldások mellett.

A digitális piac áttekintésének érdekében, azonosítottunk és elemeztünk hasonló applikációkat, amelyek az általunk megtervezett MVP funkciók egy részét már megvalósították. Ez lehetővé tette számunkra, hogy megismerjük a piacon lévő best practice-eket, és azokból tanulva optimalizáljuk saját termékstratégiánkat. Az analízis során nem csak az erősségeiket vettük szemügyre, hanem a hiányosságaikat is, így elkerülve a potenciális buktatókat és az MVP fejlesztését még hatékonyabbá téve.

App flow tervezés

Az app flow tervezést az előtervezés során elkészített funkcionális listából és a definiált scopeból indítottuk ki. Az elkészült ábra rávilágított a különböző felhasználói interakciókra és tranzakciókra, ugyanakkor megfelelő alapot szolgáltatott a fejlesztési becslések és a tényleges kódolási munkálatok számára is. Miután elkészültünk az első verzióval, belső egyeztetést tartottunk, ahol a különböző csapatok képviselői – a tervezőktől a fejlesztőkig – alaposan átvizsgálták és ellenőrizték a folyamatokat. Ezen belső audit eredményeként született meg a projekt dokumentációnk végleges változata, amelyet aztán alapul vettünk a fejlesztési munka elkezdésekor.

grund_app-flow.png

Emellett a fejlesztési folyamat hatékonyabbá tétele érdekében szorosan együttműködtünk házon belüli fejlesztőinkkel. Velük egyeztettünk az alkalmazás kivitelezésének konkrét lehetőségeit illetően, hogy biztosak legyünk abban, hogy a tervezett funkcionalitások technikailag megvalósíthatók, ugyanakkor az alkalmazás használata intuitív és felhasználóbarát marad.

Wireframing

Az elkészült app flowból high-fidelity wireframe-eket alkottunk meg. Ezen részletes és magas minőségű vázlatok létrehozása különös fontos volt a Grund számára, hogy partnerünk pontosan láthassa, hogyan néznek majd ki az egyes képernyők és milyen interakciókra lesznek képesek. A wireframe-ekkel nem csak a tervezési irányt szemléltettük, hanem lehetőséget biztosítottunk az ügyfél számára, hogy ellenőrizze a megvalósítást, és biztosítsa azt, hogy azok teljes mértékben összhangban vannak a kezdeti vízióval.

grund_wireframe.png

Az elkészült terveket ismét alávetettünk egy belső vizsgálatnak, melynek keretein belül a fejlesztő csapatunk áttekintette az elkészült képernyőket. Ezen egyeztetések során különös figyelmet szenteltünk annak, hogy milyen technikai megoldásokra lesz szükség a tervezett képernyők és funkcionalitások megvalósításához. Ezzel biztosítottuk, hogy a kivitelezés során a design és a fejlesztés szoros összhangban maradjon.

Prototyping

A high-fidelity wireframe-ek sikeres elkészítése után a következő lépésben a pontos prototípust hoztuk létre. A wireframe-k alapján elkészült prototípus a legfontosabb gesztusokat és felhasználói interakciókat tartalmazta, de az animációk és egyéb kiegészítő vizuális elemek nélkül.

grund_prototype.png

Az egyszerű, de hatékony gesztusokkal és interakciókkal a prototípus nem csak az alkalmazás designjának és funkcionális elemeinek bemutatására szolgált, hanem lehetővé tette az ügyfél számára, hogy testközelből ismerkedjen meg a tervezett felhasználói élménnyel. Ezzel nem csak a tervezési folyamatot optimalizáltuk, hanem biztosítottuk azt is, hogy az elkészülő termék valóban megfeleljen az ügyfél igényeinek és elvárásainak.

UI Design

A projekt egyik legfontosabb szakasza a UI (User Interface) Design volt, mely során a wireframe-ek és a prototípus tapasztalataira támaszkodva hoztuk létre az alkalmazás végső vizuális terveit.

grund_design.png

A tervezési folyamat során az Extended Atomic Design Systemet vettük alapul, amely egy átfogó, moduláris módszertan. Ez a rendszer lehetővé tette számunkra, hogy a tervezés minden lépését logikusan és hatékonyan kövessük végig, valamint elősegítette a designerek és fejlesztők közötti együttműködést. A rendszer alkalmazásával könnyen létrehozható, módosítható és bővíthető felületi elemeket alkottunk, amelyek konzisztens és egységes felhasználói élményt biztosítottak.

Mindenekelőtt büszkék vagyunk rá, hogy az eddigi legfejlettebb Design Systemünket használtuk, amely magába foglalja mindazokat a bevált gyakorlatokat és innovációkat, amelyeket korábbi projektek során tanultunk.

grund_ui.png

A projekt záró szakaszában a készült UI terveket bemutattuk az ügyfélnek és egyeztettünk a fejlesztő csapattal, hogy a kivitelezés során minden az elképzeléseinknek megfelelően valósuljon meg.

A design számokban

Statisztikailag tekintve a tervezési szakasz rendkívül eredményes volt. Összesen közel 150 UI oldalt hoztunk létre, amelyek mindegyike alapvető fontosságú volt a fejlesztési folyamat során. Ezek az oldalak több, mint 200 wireframe-ből származtak, amelyek az összes lehetséges és lényeges állapotváltozást is bemutattak. A teljes Design System pedig 24 UI atomi elemből állt össze, amelyek az alkalmazás összes felületén alkalmazhatóak voltak.

Az elért célok

A Grunddal való közös munkánk során elértük a kívánt célokat, és az eredmények magukért beszélnek. A projekt befejezésekor létrehozott termék nem csak a mi elvárásainkat teljesítette, hanem a Grund ügyfeleinek és befektetőinek visszajelzései alapján is pozitívan fogadták. Az általunk kifejlesztett megoldás a piacra lépésre készen állt, és bizonyította, hogy a közös munka és az alapos előkészületek milyen értékes eredményekhez vezethetnek.

grund_mockup.png

Tanulságok és fejlődési lehetőségek

Természetesen, mint minden projekt esetében, itt is voltak tanulságok, tökéletes projekt nem létezik. Az app flow kidolgozottsága és részletessége egyrészről hozzájárult a projekt sikeréhez, másrészről viszont rámutatott arra, hogy túl komplexre sikeredett. Kevesebb megjelenített adat, több információ átadással jár, mert a projekt résztvevőinek kevesebb, de annál fontosabb részletekre kell figyelniük.

A funkcionális tervezésnél az ügyfélnek számtalan jó ötlete volt arra vonatkozólag, hogy merre lehetne tovább vinni a projektet. MVP funkcionalitás terén azonban érdemes törekedni a minimalitásra és csak egy adott funkciócsoport megvalósítására fókuszálni, amellyel validálható az alap elképzelés. Tanulva ebből az esetből még szigorúbban határoznánk meg az MVP funkcionalitásának körét, hogy a projekt mérhetőbb és gyorsabban szállítható legyen.

Alapvetően a wireframing és a prototyping folyamatok akkor indokoltak, hogyha a felületekkel kísérletezni szeretnénk. Ez a két eszköz lehetőséget ad gyors, hatékony és olcsó iterációk kipróbálására. MVP alapú projektbe most csak a prezentálhatóság és a befektetők korai bevonása érdekében került sor. Alapvetően nem javasolt.

A tanulságok mentén Grund projekttel kapott tapasztalatok nem csak az adott munka eredményeit javították, hanem hosszú távon is növelték a csapatunk hatékonyságát és szakmai tudását.

Tartalom

Beszéljünk

Mesélj nekünk egy kicsit a projektedről és nézzük meg közösen, hogy mit tehetünk érted.

Köszönjük, hogy felkerestél minket!