UX optimalisatie Laravel CMS

Voor het volledige process bekijk mijn afstudeer portfolio: https://larawall.elaineheijboer.nl/ 

LiveWall is een Digital Creative Agency. Bij LiveWall worden online ervaringen, creatieve concepten, innovatieve producten, slimme apps en spraakmakende campagnes ontwikkeld. Tijdens mijn stage heb ik gewerkt aan een opdracht die van toepassing is op hun platforms team. Het platforms team is dagelijks bezig met het ontwikkelen van platformtoepassingen op maat. Voor deze opdracht heb ik mij specifiek gericht op hun Laravel CMS. Elk Laravel CMS dat ontwikkeld wordt bij LiveWall is op maat ontwikkeld voor de klant.

In september 2021 heeft LiveWall de opdracht geformuleerd om de gebruiksvriendelijkheid van het Larawall CMS te onderzoeken en op basis van dit onderzoek het CMS te verbeteren. Met de onderzoeksvraag “Hoe ontwerp ik een gebruiksvriendelijk Larawall CMS?” ben ik aan de slag gegaan. 

Tijdens dit project heb ik verschillende onderzoeks methodes gebruikt waarbij ik o.a. gewerkt heb aan wireframes, designs, prototypes, en een proof of concept. 

Design

Het bestaande systeem waarmee bij LiveWall gewerkt word is een combinatie van Laravel met het open-source package Orchid. Orchid zorgt voor de standaard CMS elementen en interface. Voor het gebruiksvriendelijker maken van de Interface heb ik een re-design gemaakt waarbij er rekening is gehouden met de bestaande interface. Voor het maken van de designs heb ik een UI Design pattern onderzoek gedaan waarbij ik heb onderzocht hoe standaard/basis elementen zoals een filter of een zoekbalk over het algemeen functioneerd.

Aan de hand van de requirements is er een lijst opgesteld met UI design patterns die gebruikt kunnen worden in het project.

Na het UI design pattern onderzoek heb ik wireframes en versie 1 van de designs. Met behulp van een Usability test is vast gesteld dat gebruikers een grote voorkeur hebben voor het nieuwe design en heb ik versie 2 gemaakt waarbij de feedback van de gebruikers is verwerkt. De designs zijn gemaakt in Adobe XD. 

Een tabel pagina in het huidige systeem

Een tabel pagina in het nieuwe design

Prototypes

Tijdens het implementeren van de designs heb ik geconstateerd dat Orchid niet het beste package is om de verbeteringen in door te voeren. Behalve dat het CMS gebruiksvriendelijk moet zijn voor gebruiks moet het ook gebruiksvriendelijk zijn om in te developen. Door dat er veel standaard CMS elementen ontbreken in Orchid zoals filter opties, globale zoekbar en bulk opties, de documentatie niet compleet en het lastig is om styling aanpassingen door te voeren is er besloten om te kijken naar alternatieven. 

Voor het uitkiezen van een alternatief voor Orchid is er onderzoek gedaan naar verschillende packages waarbij er een lijst aan eisen zijn gesteld. Uit deze lijst zijn drie packages gekozen en uitgewerkt in prototypes. Van deze prototypes is er gekozen om verder te werken met Backpack.

Proof of Concept (PoC)

Met het proof of concept is er onderzocht of Backpack een alternatief kan zijn voor Orchid op basis van gebruiksgemak, customization en betere documentatie. Om dit PoC te maken is er een project opgezet met requirements waarbij alle basis functionaliteiten gebruikt worden.

Uit het maken van de PoC blijkt dat Backpack een goede documentatie heeft en een goed instap niveau is voor (junior) developers. De styling van Backpack kan makkelijk worden aangepast net als de pagina’s. Uit dit onderzoek kan geconcludeerd worden dat Backpack een goed alternatief is voor Orchid, gebaseerd op gebruiksgemak, customization en een beter documentatie.

Door middel van een user test met het PoC wordt er bepaald of het PoC gebruiksvriendelijker is dan Orchid. Uit deze user test blijkt dat het Backpack CMS goed wordt ontvangen. De testpersonen navigeren allemaal gemakkelijk door het CMS en ze vinden het er modern en clean uit zien. De grootste problemen van dit CMS doen zich voor in de tabellen, waarbij de reset knop moeilijk te vinden is en de multiselect omslachtig werkt. Desondanks komt het Backpack CMS uit deze test als een modern en gebruiksvriendelijk CMS, dat op basis van gebruiksvriendelijkheid goed alternatief is voor Orchid.

Proof of Concept