Unideb design system
Az Unideb, vagyis a Debreceni Egyetem és a hozzá tartozó intézmények (elsőként a Klinikai Központ) megújította a digitális megjelenéseit. Mivel a Debreceni Egyetem online kommunikációjának addottsága, hogy számtalan egymástól független oldalt üzemeltetnek – például minden karnak van egy saját platformja és egyes projektek is önálló landing oldalt kaptak – ezért ennél a projektnél egy design system létrehozása volt a legjobb megoldás.
Mindenre felkészíteni a rendszert.
Egy olyan megoldásra volt szükség, ami könnyen sokszorosítható és implementálható különböző helyzetekre mind design, mind pedig strukturális kérdésekben.
A feladat tehát az volt, hogy egy könnyen módosítható, minden eshetőségre felkészült design systemet készítsünk, amit a fejleszetők UI designer segítsége nélkül is képesek használni.
Így született meg az UNIDEB Design System.
Minden hosszútávú tervezés alapja a kutatás.
A design system alapjait az egyetem és a Klinikai Központ tervezése közben hoztuk létre, mivel ez a két legnagyobb és legfontosabb platform, ami az új design systemet használni fogja.
A kutatás alapját kvantitativ módszerek adták, többek között az akkori oldalon végzett keresések, felhasználói útvonalak és látogattsági adatok elemzése által építettük fel az információs hierarchiát, illetve fedeztünk fel ismétlődő perszóna mintákat.
A kutatás nehezségét adta, hogy COVID lezárások alatt történt, így az aktuális adatok nem adtak valós képet (pl.: magasan a karrier oldal volt a leglátogatottabb).
Perszónák
A perszónáknak három aspektusát vettük figyelembe: milyen digitális előképzettsége van, mi a célja az oldalon és milyen speciális igénye van. Perszónák tekintetében létrehoztunk egyrészt egyetemi perszónákat, vagyis hallgatókat, tanárokat, felvételiző középsikolásokat és külföldi hallgatókat is. Ezek mellett a design systemnek ki kell elégítse a kórházi dolgozók és a nyugdíjas betegek igényeit is, ezért ezek a perszónák is bekerültek a kutatásunk folyamatába.
Problémák
A redesign folyamathoz a double diamond módszertant alkalmaztuk, vagyis elsőkörben a feladatunk az volt, hogy detektáljuk a fennálló problémákat.
1. Túl sok aloldal – Több aloldal is van, amin egy-két sornyi tartalom van összesen vagy csupán átlinkel egy harmadik oldalra. Egy olyan design systemre van szükség, ami ezeknek a rövid tartalmaknak helyet biztosít.
2. Rossz struktúra – Max. három mélységig mehet a menü. Az oldalakat tematika alapján kell csoportosítani.
3. Információs architectúra hiánya – Ha az adott információ fogyasztás folyamán új kérdések vetődnek fel a userben, nincs lehetősége tovább jutni, mindig vissza kell mennie egy kiindulópontra (főoldal) és elölről kezdeni a kutatást. Ezért ki kell építeni egy rendszert az oldalon belüli linkelésekre.
4. Nem létező hierachia – A gombok és bekezdés stílusok között egyértelmű és ösztönösen érzékelhető hierachiát
Könnyen változtatható színekkel adaptálhatóbb a rendszer
A design system kialakításánál fontos szempont volt, hogy a színek is rendszert adjanak és következetes felhasználást biztosítsanak a usereknek és mindemellett könnyen adaptálhatóak legyenek. Az egyetem és a klinikának a színei az alap arculatból eredő zöld, azonban mindkettőnek vannak olyan alintézményei, amelyek kék vagy éppen vörös színt használnak.
A színrendszer alapja a százalékos generálás. Minden alapszín négy verziót kap, így egy teljes oldal újraszinezéséhez elég egyetlen HEX kódot átírni.
UI KIT és az elemek rendszere
A UI KIT és a vizuális nyelv kialakításánál fontos szempont volt, hogy széles körben befogadható legyen. A design system tervezése előtt végigmentünk egy szűkített branding sprinten, hogy milyen értékeket és érzéseket kell közvetítenie a rendszernek.
A sprint eredményeként egy konzervatívabb stílusra volt szükség. Ezért a rendszer vizuális szögletes formákra épül, ami megjelenik az ikon készletében, az illusztrációkban és a UI elemekben is.
A színrendszer alapja a százalékos generálás. Minden alapszín négy verziót kap, így egy teljes oldal újraszinezéséhez elég egyetlen HEX kódot átírni.
Moduláris összetevők
Az UNIDEB design system az atomic design metódusra épül. Minden részlete kompatibilis egymással így designeri iránymutatás nélkül is cserélhetőek az elemei.
Egy-egy kártya között könnyen kialakítható a hierarchia csupán a gomb stílus vagy éppen az ikon megjelenítése által.
