Lusoria - Level Select

Een world map level select scherm waarbij gebruikers kunnen kiezen uit verschillende thematische werelden met daar binnenin verschillende levels. Alle werelden zijn ondersteund met animaties en toepasselijke geluiden.

Verschillende schermen van het prototype

Datum

Mei/Juni 2025

Mijn Rol

UX/UI Design, Game design, Illustratie en animatie

Tools

Figma

Overview

Achtergrond

Dit prototype maakt deel uit van een groot groepsproject, Lusoria. Lusoria is een applicatie die middelbare scholieren helpt met het verbeteren van hun Engelse spreekvaardigheid. Deze applicatie heb ik samen met mijn vijf groepsgenoten ontwikkeld.

Ontwerpvraag

Hoe kunnen wij een AI-gestuurde applicatie ontwerpen die middelbare scholieren ondersteunt bij het verbeteren van hun Engelse spreekvaardigheid, aansluit op hun niveau en interesses, docenten inzicht en controle biedt, én volledig toegankelijk is voor leerlingen met een visuele beperking?

Research

UX Design

Wire Flows

Beschrijving

Wire flow selecteren van een level en uitvoering Wire flow selecteren van een level en uitvoering

Paper Prototype

Beschrijving

Paper prototype

Usability Testing

Beschrijving

Mid-Fidelity

Het doel van het mid-fidelity prototype is om de belangrijkste functies en schermen zo uit te werken dat we ze konden testen met gebruikers. We richtten ons vooral op het testen van de werking van de interactie: begrijpen gebruikers wat ze moesten doen en hoe ze door de applicatie navigeren? Zo konden we op tijd verbeteringen doorvoeren voordat we verder gingen met een high-fidelity prototype.

In ons mid-fidelity prototype ben ik mij gaan focussen op de kaart en het selecteren van de verschillende werelden / levels. Elk level opent een overlay met meer informatie over dit specifieke level, daarnaast is er een optie voor extra uitleg over de werelden zelf.

Mid-fidelity kaart

UI Design

Style Guide

Style guide

UI Components kit

High-Fidelity

Het high-fidelity prototype is bedoeld om een realistisch beeld te geven van de uiteindelijke app, inclusief visuele stijl, micro-interacties en animaties. Hiermee test ik niet alleen de gebruiksvriendelijkheid en navigatie, maar ook of de visuele keuzes aansluiten bij de doelgroep. Dit prototype is geschikt om uiteindelijk te presenteren aan onze opdrachtgever.

Specifiek doel high-fidelity kaart: Er achter komen wat de meest overzichtelijke manier is om gebruikers te laten kiezen tussen de verschillende levels, die zowel visueel als auditief aantrekkelijk zijn.

High-fidelity kaart

De volledige kaart is scroll-baar en verdeelt de werelden over verschillende vakken, aangegeven met grenzen. Elke wereld bevat een icoon dat bij het thema van deze levels past. Wanneer de gebruiker over deze icoontjes heen hoovert krijgt hij een bijpasselijke animatie te zien. Wanneer hij hier op klikt zoomt de kaart in en krijgt hij een weergaven van de levels binnen in de wereld, ook verschijnt dan onze 'buddy' in deze wereld.

High-fidelity kaart

Kaart zoomt in bij selectie en weergeeft een korte beschrijving van de wereld.

High-fidelity kaart

Levels die nog niet beschikbaar zijn bevatten een slotje.

Laadscherm

Wanneer je op een level klikt verschijnt er een laadscherm.

Laadscherm

'Rocket Roadtrip' bevat een uitgebreide animatie waarbij je een ander scherm krijgt te zien.

Test het volledige prototype!

Key Takeaways

Toevoegen.

← Terug naar portfolio