Collow LMS redesign

Het Collow LMS is bezig met het bouwen van een nieuwe versie van hun systeem met nieuwe technologie. Als UI/UX designer is het mijn taak om de interface opnieuw te ontwerpen. Deze showcase is vooral bedoeld om de UI-verbeteringen te laten zien.

Periode

11/2024 – heden

Rol

UI/UX Designer

Team

1 lead, 1 designer, 2 developers

Context

Collow is een startup die een corporate LMS bouwt. Het is gebouwd in Sanity met pure JavaScript en een eigen component library. Omdat Collow wil uitbreiden en groeien, wordt er een nieuwe versie van het platform ontwikkeld met een nieuwe tech stack (o.a. Nuxt en Shadcn). Dit gaf mij de kans om de interface een facelift te geven en op te schonen.

Doelen en beperkingen

De huidige UI en features een design facelift geven met de Shadcn component libary.
De UX verbeteren.
De enige input van gebruikers was via support tickets die over tijd zijn aangemaakt. Verder heeft het team ook uitgebreid gebruik gemaakt van het platform wat me een goede start gaf voor het aanpakken van de UI- en UX-issues.

Gebruikersbeheer

Een van de belangrijkste features van een LMS is het gebruikersbeheer. Admins moeten in staat zijn om gebruikers in te kunnen zien, uit te nodigen, te deactiveren en heractiveren en te verwijderen. Deze functionaliteiten zijn ook terug te vinden in de nieuwe versie van Collow met een verbeterde en meer gebruiksvriendelijke interface.

Versie 1

De user flow en het design van het toevoegen van gebruikers was niet optimaal en is meegenomen in het redesign.

Klik op de afbeeldingen om in te zoomen.

Versie 2

Voor de nieuwe versie heb ik gebruik gemaakt van modernere components, zoals de sheet om gebruikers toe te voegen. Ook wordt er gebruik gemaakt van minder kleur, zodat de interface rustiger en professioneler oogt.

Klik op de afbeeldingen om in te zoomen.

Profiel

Cursisten hebben hun eigen profiel. Hierop kunnen ze:

de trainingen die ze volgen en de bijbehorende voortgang inzien;
taken vinden, zoals het maken van een assessment;
hun instellingen wijzigen.

Versie 1

Voor de nieuwe versie wilde ik graag werken aan de overzichtelijkheid van het profiel en het een ander uiterlijk geven dan het admin dashboard.

Klik op de afbeeldingen om in te zoomen.

Versie 2

Om het overzicht te verbeteren, heb ik de trainingen opgesplitst in verschillende tabs en heb ik filters geïntroduceerd.

Klik op de afbeeldingen om in te zoomen.

Geleerde lessen

Consistentie

Aspecten zoals kleur, spacing en lettertypes en -groottes zijn een uitdaging om consistent door te voeren. Dankzij het gebruik van een externe component library was dit in de nieuwe versie makkelijker om te implementeren.

Trainingsomgeving

Cursisten spenderen de meeste tijd in het LMS aan het volgen van trainingen in de trainingomgeving. Het is daarom belangrijk dat de gebruikerservaring hier optimaal is.

Cursisten moeten:

makkelijk van stap naar stap kunnen navigeren, of dat nou van hoofdstuk naar les is of van quiz terug naar een vorige les.
makkelijk quizzen kunnen maken met vraagtypes die duidelijk feedback geven en gebruiksvriendelijk zijn op desktop en mobiel.
goed in kunnen zien hoe ver ze zijn in een training.

Versie 1

Navigatie, quizzen en vraagtypes waren aanwezig, maar het design en de logica waren inconsistent geïmplementeerd wat tot een suboptimale gebruikerservaring en tot veel verwarring leidde.

Klik op de afbeeldingen om in te zoomen.

Versie 2

De navigatie is gebruikersvriendelijker gemaakt. Verder oogt het design rustiger en hebben quizzen en vraagtypes een nieuwe flow gekregen.

Klik op de afbeeldingen om in te zoomen.

Geleerde lessen

Logica en user flows uitwerken

Wat gebeurt er als een gebruiker op "vorige" klikt? En wat als de gebruiker een quiz verlaat voordat deze is afgerond? Dit soort vragen moesten gesteld worden om de user flows en logica van de verschillende features duidelijk op papier te hebben zodat iedereen weet wat er moet gebeuren. Of dat nou voor design, development of marketing is.

Allemaal op een lijn

Je kunt heel makkelijk zeggen "Ik wil graag feature X", maar als niet met iedereen wordt afgestemd wat een feature precies inhoudt, gaat iedereen het voor zichzelf invullen. Dit kan leiden tot miscommunicatie tussen design, development en marketing. Hier heb ik meer rekening mee gehouden tijdens het redesign proces.

Conclusie

Het project is nog steeds aan de gang en elke dag leer ik wel weer iets nieuws. Het is interessant om terug te moeten kijken op mijn oude designs om te zien waar het beter kan en hoe ik de ervaring van gebruikers kan verbeteren. Het is fijn om de groei te zien in vaardigheden en zelfreflectie.

Geleerde lessen

Developers meer betrekken

Als UI/UX designer kun je alleen datgene ontwerpen waartoe de developers in staat zijn om te implementeren. Daarom probeerde ik de developers meer te betrekken bij het designproces om erachter te komen wat op techologisch gebied mogelijk is.