Kuszán felhalmozott tartalmakból összekapcsolt tudásbázis.
Egy nehezen áttekinthető, tartalmilag kusza corporate oldalból strukturált, összekapcsolt tudásbázis készült projektekhez, publikációkhoz, eseményekhez és szakmai tartalmakhoz.
01 · Kiinduló probléma
A kihívás
A korábbi oldalon sok értékes szakmai anyag szerepelt, de a tartalom kevéssé tagoltan jelent meg. Nem volt egyértelmű, hogyan kapcsolódnak egymáshoz a projektek, a knowledge tartalmak, a publikációk, események és a kapcsolati háló elemei.
A feladat ezért nem egyszerű vizuális redesign volt. Olyan információs struktúrát kellett kialakítani, amely egyszerre teszi külön kezelhetővé az eltérő tartalomtípusokat, és közben megmutatja közöttük a szakmai kapcsolatokat is.
Szakmai megközelítés
A projekt határozott ügyféligényekből indult, ezért külön kutatási szakasz helyett a struktúra modellezésére koncentráltam. Először wireframe-ek készültek a főbb lista- és adatlapoldalakról, valamint a menürendszerről.
Ezzel párhuzamosan felépítettem egy logikai térképet is a custom post type-ok, témák, címkék és kapcsolódó tartalmak összefüggéseiről. Ez lett az alapja annak, hogy a tartalmak kereshetők, szűrhetők és egymásból tovább böngészhetők legyenek.
02 · Szakmai döntés
Külön tartalomtípusok, közös rendszer
Probléma
A szakmai tartalmak korábban kevéssé elkülönítve jelentek meg, így nehéz volt átlátni, mi projekt, mi publikáció, mi esemény és mi magazinanyag.
Döntés
A tartalmakat önálló struktúrákra bontottam: Projects, Knowledge, Network és Team tartalomtípusokra, a Knowledge rendszeren belül pedig külön kezelhető eseményekre, magazinanyagokra és publikációkra.
Megoldás
Az új struktúra egyértelműbbé tette az oldalt, miközben megőrizte a lehetőséget arra, hogy a kapcsolódó tartalmak egymásra hivatkozzanak.
03 · Folyamat
A rendszer logikája még a design előtt megszületett
A projekt egyik legfontosabb része a tartalmak közötti kapcsolat megtervezése volt.
- 1
Wireframe
Elkészült a fő navigáció, a projektlista, a projektadatlap és a főbb tartalmi oldalak drótváza.
- 2
Entitástérkép
Logikai térképen modelleztem, hogyan kapcsolódjanak egymáshoz a különböző tartalomtípusok és taxonómiák.
- 3
Kapcsolódó tartalmak
A közös témák és címkék alapján egy projekthez automatikusan kapcsolódhatnak releváns knowledge és network elemek.
- 4
Keresés és szűrés
A listákban témák, címkék és szabad szöveges keresés segíti a nagyobb tudásanyag böngészését.
04 · Szakmai döntés
A kapcsolatokból böngészési útvonal lett
Probléma
Önmagában a tartalmak szétválasztása még nem oldotta volna meg a tudásanyag felfedezhetőségét.
Döntés
Az azonos témákhoz és címkékhez tartozó elemeket több tartalomtípusban is felhasználtuk, így ugyanaz a szakmai kapcsolat végigkövethetővé vált a rendszerben.
Megoldás
Egy projekt adatlapján megjelenhetnek a hozzá kapcsolódó publikációk, események és más knowledge elemek, ezekből pedig tovább lehet lépni újabb releváns tartalmakra. A weboldal így lineáris oldalsor helyett böngészhető szakmai hálóként működik.
05 · Szakmai döntés
Egyszerű szerkesztői felület biztosítása
Probléma
A tartalmakat a Burst Group projektmenedzserei töltik fel és frissítik, akiknek nincs szükségük arra, hogy WordPress-oldalakat vagy layoutokat szerkesszenek.
Döntés
Az adminfelületet ACF-mezőkre és egyedi tartalomtípusokra építettem. Minden tartalom saját, strukturált adatlapot kapott, ahol a szerkesztő a szükséges mezőket tölti ki.
Megoldás
Így új projekt, esemény, publikáció, magazincikk, network elem vagy csapattag fejlesztői beavatkozás nélkül létrehozható. Az átadáshoz részletes felhasználói kézikönyvet is készítettem a szerkesztési folyamatokról.
06 · Szakmai döntés
Vizuális irány referenciákból, majd saját design system
Probléma
A vizuális megjelenéshez az ügyfélnek kezdetben nem volt konkrét iránya.
Döntés
Referenciák alapján több UI-irányt készítettem, majd a kiválasztott megközelítést közösen finomítottuk tovább.
Megoldás
A végleges felülethez design system készült, amely egységesen kezeli a tipográfiát, színeket, komponenseket, kártyákat és a különböző tartalomtípusok vizuális megjelenését.
07 · Szakmai döntés
Az adatstruktúra és a frontend ugyanazt a logikát követi
Probléma
A legnagyobb fejlesztési kihívást az jelentette, hogy a sokféle entitás és kapcsolat a háttérben is helyesen működjön, miközben a frontend egyszerű és érthető marad.
Döntés
A WordPress adatmodelljét a korábban megtervezett információs architektúrához igazítottam, és a kapcsolódásokat taxonómiákkal, egyedi mezőkkel és lekérdezésekkel kezeltem.
Megoldás
Így a szerkesztőnek csak a tartalom megfelelő adatait kell megadnia; a weboldal ezekből automatikusan építi fel a listákat, szűréseket és kapcsolódó tartalmakat.
08 · Eredmény
Eredmény
Az új oldalon a projektek, knowledge tartalmak, események, magazinanyagok, publikációk, network elemek és csapattagok külön tartalomtípusként kezelhetők, mégis kapcsolatban maradnak egymással. A felhasználó egy projektből könnyen tovább tud lépni a kapcsolódó szakmai anyagokra, és fordítva.
Az adminfelületet úgy alakítottam ki, hogy fejlesztői háttér nélkül dolgozó projektmenedzserek is feltölthessék és frissíthessék a tartalmakat. Az átadáshoz részletes felhasználói kézikönyv is készült. Az ügyfél visszajelzése szerint a végeredmény átlátható és vizuálisan is erős lett.
A te projektednél mi a probléma, amit meg kell oldani?
Ha új weboldalon vagy digitális felületen dolgozol, szívesen megnézem, hogyan lehetne UX, design és technikai oldalról egy rendszerként felépíteni.