Aan de slag

In augustus 2023 werkte ik met het Prosumio Team vanuit Berlijn aan een UX-project als onderdeel van het Ironhack UX UI Bootcamp. Prosumio is een spel dat tieners milieuactivisme en duurzaam gedrag bijbrengt.

Onze opdracht

Het ontwikkelen van een nieuwe game feature, de Kenniskaart, een micro-les quiz spel binnen de app.

Doelen stellen

We ontdekten dat de volgende 3 elementen ontbraken in het basisconcept voor de Kenniskaart-functie. De kenniskaartfunctie, die bestaat uit een miniles en een vervolgquiz, werd gepresenteerd als één lange scrollende pagina met geïmplanteerde pdf's, niet bepaald telefoonvriendelijk. De lessen misten een gevoel van spelelementen en de mascotte Erdi was niet inbegrepen.

Marktonderzoek

We voerden een basisanalyse uit van de functies van apps van directe concurrenten om te begrijpen hoe Prosumio in de markt past.

Gebruikersonderzoek

Onze interviews waren gericht op het valideren van onze aannames en op het verkrijgen van een gevoel van emotionele connectie die tieners hebben met games. We interviewden Duitse leerlingen in de leeftijd van 14-17 jaar en Duitse docenten die gespecialiseerd waren in het ontwikkelen van duurzaamheidscurricula.

Inzichten uit onderzoek

Onze interviews waren ongelooflijk verhelderend en we hebben de volgende inzichten meegenomen, klaar om toe te passen op onze nieuwe functie.

Probleemstelling

Maar voordat we begonnen met ideëren, schreven we een probleemstelling op om duidelijk te maken wat het basisprobleem was met de bestaande Kenniskaartfunctie.

De Kenniskaart-functie in de Prosumio App is ontworpen om educatie en bewustzijn over duurzaamheidsonderwerpen te brengen. We hebben gemerkt dat de bestaande versie van Kenniskaarten niet voldoet aan het doel om boeiende en toegankelijke microlessen voor tieners te bieden, waardoor de aandacht en het begrip van de gebruikersgroep afneemt en de samenwerkingsmogelijkheden met scholen beperkt worden.

Must haves

We hebben vier belangrijke elementen gedefinieerd die meer aanwezig moesten zijn in de Kenniskaart-functie.

Low fi wire-frames

En we begonnen met het maken van wireframes om ons voor te stellen hoe we de app wilden laten werken.

Mid fi en testen

We hebben de app getest met een paar klasgenoten en interviewpersonen die de bètaversie hadden gebruikt, om feedback te krijgen. We kregen vooral functionele feedback, dus we hebben ons in deze fase vooral gericht op het verbeteren van de functie en de flow.

Visuele concurrentieanalyse

Voordat we aan de UI begonnen, hebben we naar de concurrenten gekeken. Met game-apps en met deze lastige leeftijdsgroep (tieners) wilden we dat de functie er vriendelijk en leuk uitzag zonder babyachtig, goedkoop of overdreven serieus over te komen. We hebben ons laten inspireren door de volgende sites, waaronder Duolingo, Kahoot! en Anton.

Prosumio Stijltegel

Vervolgens hebben we de Prosumio-stijl een beetje geherdefinieerd en een stijltegel gemaakt om alle elementen duidelijk bij elkaar te zien. Het stond niet specifiek in onze opdracht om een herontwerp van de UI te doen, maar we wisten dat het Prosumio-team geen UI-ontwerper had, en we voelden dat we door de app lichter te maken, met minder donkere achtergronden en meer duidelijke nadruk op het lesmateriaal, de algehele ervaring en functionaliteit van de app zouden verbeteren.

High Fi schermen

Om je te laten zien wat ik bedoel, zijn hier een paar "voor en na" gifs van hoe we de UI hebben aangepast om meer duidelijkheid en functie aan de app te geven.

Over het algemeen hebben we alles lichter gemaakt, meer hiërarchie aangebracht in tekst en titels en veel speelse elementen toegevoegd, zoals Erdi, en het quizgedeelte aangepast zodat het op een chat lijkt. We vonden dat de donkerpaarse achtergrond tekst moeilijk leesbaar maakte en afleidde van de inhoud.

Gelukkig pad / demo

Hier is een kleine demonstratie van onze herziene gebruikerservaring. We hebben nieuwe weergavefilters toegevoegd, evenals het leaderboard, een manier om de teams of groepen te laten zien en de hele les- en spelinterface. Veel plezier!

Donkere modus

We hadden een klein venster om te beginnen met het creëren van een donkere modus, wat leuk was. We hebben een Figma plug-in gebruikt voor de eerste conversie en daarna hebben we elementen aangepast, met de nadruk op het toevoegen of verminderen van kleurcontrasten waar nodig. Het voelt zeker anders aan dan de originele versie.

Volgende stappen

We hadden in totaal maar 9 dagen voor dit project, dus helaas hadden we geen tijd meer om meer verbeteringen aan te brengen. We hadden echter de volgende stappen in gedachten die we het Prosumio-team hebben aanbevolen als volgende stappen.

Bedankt voor het langskomen!