Gamificazione Ux
Progettazione Ux & Ui per la piattaforma educativa Madrasa
Nell'ambito delle iniziative del MBRGI, ci è stato chiesto di collaborare alla loro piattaforma educativa Madrasa. L'obiettivo della collaborazione era quello di gamificare l'esperienza degli utenti per incoraggiarli a esercitarsi sempre più spesso mettendoli l'uno contro l'altro.
Abbiamo ideato il processo di gamification e le diverse schermate per raggiungere i nostri obiettivi, rispettando la piattaforma e le particolarità educative e culturali del progetto.
Oggi Madrasa offre gratuitamente a milioni di utenti l'accesso a corsi di matematica e scienze in arabo e in inglese.
Ux: Home Page Wireframind, V1. Concetto della homepage di Madrasa: e-learning per tutti.
L'immagine mostra il wireframe di una versione iniziale della homepage di Madrasa, una piattaforma educativa online. Gli elementi chiave includono sezioni dedicate ai profili utente, alle notizie e alla presentazione dei vincitori o dei concorsi. Al centro, una sezione denominata “Percorso di apprendimento” offre un motore di ricerca e mappe di avanzamento interattive con punti assegnati. La parte inferiore contiene informazioni sulla visione, gli obiettivi e le funzionalità della piattaforma, nonché i collegamenti per il download delle app Android e iOS.
Ui: Finalizzazione della pagina del profilo. Home page dinamica di Madrasa.
L'immagine illustra una versione finalizzata della home page della piattaforma e-learning Madrasa. In alto, un banner invita gli utenti a essere i migliori nel loro Paese, accompagnato da una evidenziazione dei vincitori e dei premi. La sezione centrale presenta un "Percorso di apprendimento" interattivo con categorie colorate e punti di progresso. Un riquadro evidenzia una citazione ispiratrice di Mohammed Bin Rashid Al Maktoum. Nella parte inferiore, la piattaforma delinea la propria missione, visione e obiettivi, accompagnati da collegamenti per scaricare le app su iOS e Android, il tutto adornato da una tavolozza di colori viola e bianco per un design accattivante e professionale.
Ui: creazione di pop-up. Scelta dell'avatar. Personalizzazione dell'avatar – Madrasa.
L'immagine mostra una finestra pop-up della piattaforma Madrasa dedicata alla personalizzazione dell'avatar. L'area principale presenta una selezione di icone di dinosauri illustrate con vari accessori e temi. Ogni icona è accompagnata da una legenda che indica il numero di punti necessari per essere sbloccata. Gli oggetti già sbloccati sono colorati, mentre gli oggetti bloccati sono grigi con il badge "Bloccato". L'interfaccia, con sfondo viola, è semplice e accattivante, incoraggiando gli utenti a interagire e personalizzare la propria esperienza sulla piattaforma.
Ux: Wireframing della pagina del profilo. Profilo utente interattivo su Madrasa.
L'immagine illustra un modello della pagina “Il mio profilo” sulla piattaforma educativa Madrasa. In alto vengono visualizzati il livello e il nickname dell'utente, insieme a un pulsante per migliorare il suo grado. La sezione “Lezione giornaliera” offre un video didattico con la possibilità di guadagnare punti dopo la visione. Più in basso viene presentata una raccolta di badge che indicano i risultati ottenuti dall'utente in diverse categorie. Infine, le liste “Watch List” e “Le mie ultime 5 lezioni” permettono di tenere traccia dei video visti o da vedere, con relativi punti per ogni contenuto. Il design è intuitivo e enfatizza l'interattività e il coinvolgimento dello studente.
Ui: Creazione del pop-up della Mappa. I 10 migliori utenti di Madrasa in Egitto.
L'immagine mostra un modello delle prime 10 classifiche degli utenti sulla piattaforma educativa Madrasa per l'Egitto. Ogni posizione, dalla 1a alla 10a posizione, è accompagnata da un nickname utente, un avatar e l'indicazione del numero di video completati (qui, 50 video per ogni utente). La classifica è divisa in due colonne, con un design chiaro e colori viola distintivi. In alto viene visualizzato il nome del Paese con la bandiera nazionale, rafforzando la natura competitiva e comunitaria della piattaforma.
Ui: Finalizzazione del modello del mio profilo. Pagina del profilo utente su Madrasa.
L'immagine mostra la pagina del profilo di un utente sulla piattaforma educativa Madrasa. In alto, il grado e i punti vengono visualizzati con l'iconico trofeo dorato. La sezione successiva presenta una lezione quotidiana, completa di un video educativo e punti da guadagnare guardandola. Più in basso, la sezione “Badge” mostra diversi riconoscimenti ottenuti o da sbloccare, con icone colorate. Infine, l'utente può consultare la propria “Watch list” e le proprie “ultime 5 lezioni”, organizzate per categoria e punti guadagnati. La pagina è realizzata con un design pulito e tocchi di viola, tipici della carta grafica di Madrasa.
Ui; Finalizzazione del modello del percorso di apprendimento. Tour didattico sulla Madrasa.
Questa immagine rappresenta la sezione “Percorso di apprendimento” di Madrasa. Nella parte superiore della pagina, un messaggio si congratula con l'utente per la posizione e i punti attuali. Nella sezione centrale sono elencati i diversi percorsi formativi (“Lista Percorsi”) con informazioni sui punti da acquisire, il numero di video e il tempo stimato per completarli. Di seguito, un lettore video mostra una lezione di esempio, con contenuti di scienze dell'educazione. Sulla destra, una “Lista di controllo del percorso” consente all'utente di monitorare il proprio apprendimento. Il layout è chiaro e intuitivo, accentuato dai toni viola corrispondenti all'identità visiva della piattaforma.
Interfaccia utente: modello di classifica. Classifiche e prestazioni su Madrasa.
Questa immagine mostra la sezione Classifica di Madrasa, dove gli utenti possono visualizzare le classifiche in base ai punti accumulati. La parte superiore mostra un messaggio di congratulazioni con il grado e i punti dell'utente corrente. La classifica principale mostra i primi 100 utenti con i loro gradi, punti e avatar. Più in basso, specifiche classifiche sono suddivise per categorie (A, B, C) con tabelloni colorati per ogni segmento. La sezione inferiore illustra la “Top 10 per Paese” utilizzando una mappa interattiva dei paesi arabi, dove gli indicatori viola indicano le località attive. La tavolozza dei colori viola e blu riflette l'identità visiva di Madrasa, fornendo un'esperienza utente chiara e coinvolgente.
Ux: Home Page Wireframind, V2. Mockup della home page di Madrasa (versione 2).
Questa immagine mostra un wireframe di una proposta di home page di Madrasa, mostrando un layout chiaro e organizzato. La parte superiore include un invito all'azione per un concorso e i vincitori, seguito da una sezione per la scelta di un'area di apprendimento. Un'altra sezione propone percorsi didattici sotto forma di mappe e indicatori di progresso. Gli utenti possono anche seguire i propri progressi utilizzando un pulsante di accesso o di creazione di un account. Verso il basso, una sezione “Informazioni” descrive la missione, la visione e gli obiettivi di Madrasa, mentre i pulsanti ti consentono di scaricare app mobili. Il layout incorpora forme arrotondate e transizioni fluide, rafforzando la navigazione piacevole e intuitiva.
