Ügyfelünk különböző gazdasági kimutatások és összefoglalók készítésével foglalkozik, amiket partnereik számára tesznek elérhetővé. Iparágvezető megoldásaikkal segítik ügyfeleiket a legjobb befeketetés kiválasztásában. Felmerült bennük az igény, hogy
-
egy interaktív webes 3D riportot jelenítsenek meg a honlapjukról,
-
ami könnyedén elérhető és áttekinthető,
-
magas színvonalú értéket képvisel ahhoz, hogy széles körben is promótálják.
Ügyfelünk egy látványos grafikus ábrázolást kért , amely tartalmazza róluk és a működésükről a legfontosabb információkat és az adatokat. A mai világban, ahol információk sokasága elérhető, nagyon fontos, hogy olyan formában tudjuk feldolgozni, amely könnyen értelmezhető, és tényleg csak a legszükségesebb adatokat tartalmazza.
Ezzel az adatvizualizációval látványosan és érthetően tudják bemutatni, hogy milyen területeken tudnak döntéstámogató szolgáltatásokat biztosítani ügyfeleik számára.
Szakmai kihívás:
Egy nagyon látványos marketingesek és designerek által tervezett videót kaptunk, ami felölelte az alap funkcionalitásokat és megmutatta azt a szín- és formavilágot a funkcionalitáson túl, amit meg kell valósítani. Ezen kívül egyéb specifikációt nem kaptunk és főként a vállalat business-oldali szakértőivel tudtunk egyeztetni.
A feladat az volt, hogy a kapott videónak teljesen megfelelő javascript design-t valósítsunk meg, ami telefonokon is jól működik, és az interaktív felületek és vezérlés modern UX megoldásokkal történjen.
Ezen túl 3D-s, körbejárható, módosításokra azonnal és gyorsan reagáló, árnyékokkal és látványos designelemekkel tűzdelt riportot kellett összerakni.
Megoldásunk:
A munka a videók kielemzésével és az üzelti oldallal való megbeszélésekkel kezdődött, majd egy vázat raktunk össze, ami megmutatta, mi hogyan fog működni és előhozta a megbeszélendő illetve megoldandó feladatok széles körét.
Bevezettünk a felületre egy az oldalak közötti haladást elősegítő navigációs eszközt, – breadcrumb-ot – ami jó döntésnek bizonyult és bármely oldal könnyen elérhető lett ezáltal. A UX megoldásokhoz saját tapasztalatainkra, hasonló alkalmazások megoldásaira valamint a megrendelővel közös ötletelésekre hagyatkoztunk. Egy-egy megvalósítást tesztalanyokon próbáltunk ki. A 3D megoldásokat házon belüli szakértőnk segítségével valósítottuk meg, sikerült a kezdeti szakadozó renderelést is felgyorsítani úgy, hogy élvezhető legyen a működés.
Már a kezdetektől paraméterezhetőre építettük fel a rendszert, azon pontokon, ahol kritikus volt, meghatároztunk minimum- és maximum megjeleníthető elemszámot, szükség esetén megjeleníthető szélsőértékeket is. Külön design megoldásokat dolgoztunk ki a szövegmegjelenítésre, hogy a megadott specifikációs videóhoz teljes mértékben igazodjon. Igy használtunk különféle hajlításokban és ütemekben megjelenő szövegeket, amihez már létező javascript megoldásokat is igénybevettünk.
A fejlesztést agilisen, heti sprintekben végeztük, mert fontos volt a gyakori visszajelzés.
A tesztelést manuálisan végeztük, a tesztelés alapja a video-specifikáció, valamint az ebből készült user story-k voltak.
ITware feladatai
- Projektvezetés, stratégiai projektirányítás
- Üzleti elemzési munka
- UX design
- 3D programozás
- Design
- Architektúra közös kialakítása a megrendelővel
- Technológiai döntések
- Webes felhasználói felület fejlesztés
- Integráció háttérrendszerekkel
Technikai leírás
A riportoló rendszer egy főként Javascript nyelven írt webes alkalmazás, melynek alapját a következő technológiák és szofverek szolgálják:
- Javascript
- REST – JSON
- Liferay framework
Végeredmény
Az elkészült rendszerrel sikerült egy interaktív reszponzív gyorsan és könnyen használható paraméterezhető webes riport-megjelenítőt kidolgoznunk, ami jól teljesít a különféle böngészőkön.
Jövőbeli tervek
- Tervben van a reporting rendszer további bővítése újabb megoldásokkal
- Elképzelhetőnek tartja az ügyfél – a látványos megjelenés miatt – hogy a riport nemcsak egy intaraktív riport lesz a jövőben, hanem egy interaktív kommunikációs felület az ügyfeleivel
Tech Stack: Javascript, REST, JSON, Agile, SCRUM, 3D, Graph
