Experiência de gamificação
Design Ux & Ui para a plataforma educacional Madrasa
No âmbito das iniciativas MBRGI, foi-nos pedido que colaborássemos na sua plataforma educativa Madrasa. O objetivo da colaboração era gamificar a experiência do utilizador para o encorajar a praticar mais e mais vezes, colocando-o em confronto com os outros.
Concebemos o processo de gamificação e os diferentes ecrãs para atingir os nossos objectivos, seguindo a plataforma e as particularidades educativas e culturais do projeto.
Atualmente, o Madrasa oferece acesso gratuito a cursos de matemática e ciências em árabe e inglês a milhões de utilizadores.
Ux: Página inicial Wireframind, V1. Conceito da página inicial da Madrasa: E-learning para todos.
A imagem mostra o wireframe de uma versão inicial da página inicial da Madrasa, plataforma educacional online. Os elementos principais incluem seções dedicadas a perfis de usuários, notícias e apresentação de vencedores ou competições. No centro, uma seção chamada “Caminho de aprendizagem” oferece um mecanismo de busca e mapas de progresso interativos com pontos atribuídos. A parte inferior contém informações sobre a visão, objetivos e funcionalidades da plataforma, além de links para download dos aplicativos Android e iOS.
Ui: Finalização da página de perfil. Página inicial dinâmica da Madrasa.
A imagem ilustra uma versão finalizada da página inicial da plataforma de e-learning Madrasa. No topo, um banner convida os usuários a serem os melhores do seu país, acompanhado do destaque dos vencedores e prêmios. A seção intermediária apresenta um “Caminho de aprendizagem” interativo com categorias coloridas e pontos de progresso. Uma caixa destaca uma citação inspiradora de Mohammed Bin Rashid Al Maktoum. Na parte inferior, a plataforma descreve sua missão, visão e objetivos, acompanhada de links para download dos aplicativos em iOS e Android, todos adornados com uma paleta de cores roxa e branca para um design atraente e profissional.
Ui: Criação de pop-ups. Escolha do avatar. Personalização de avatar – Madrasa.
A imagem mostra uma janela pop-up da plataforma Madrasa dedicada à personalização de avatares. A área principal apresenta uma seleção de ícones ilustrados de dinossauros com diversos acessórios e temas. Cada ícone é acompanhado por uma legenda que indica o número de pontos necessários para serem desbloqueados. Os itens já desbloqueados são coloridos, enquanto os itens bloqueados são cinza com um emblema “Bloqueado”. A interface, com fundo roxo, é simples e envolvente, incentivando os usuários a interagir e personalizar sua experiência na plataforma.
Ux: Wireframing da página de perfil. Perfil de usuário interativo no Madrasa.
A imagem ilustra um modelo da página “Meu Perfil” na plataforma educacional Madrasa. Na parte superior, são exibidos o nível e o apelido do usuário, junto com um botão para melhorar sua classificação. A seção “Lição Diária” oferece um vídeo educativo com possibilidade de ganhar pontos após a visualização. Mais abaixo, é apresentada uma coleção de emblemas, indicando as conquistas do usuário em diferentes categorias. Por fim, as listas “Lista de observação” e “Minhas últimas 5 aulas” permitem acompanhar os vídeos visualizados ou a serem visualizados, com pontos associados a cada conteúdo. O design é intuitivo e enfatiza a interatividade e o envolvimento do aluno.
Ui: Criação do pop-up do Mapa. Os 10 principais usuários de Madrasa no Egito.
A imagem mostra um modelo das 10 principais classificações de usuários na plataforma educacional Madrasa para o Egito. Cada classificação, da 1ª à 10ª posição, é acompanhada por um apelido de usuário, um avatar e uma indicação da quantidade de vídeos concluídos (aqui, 50 vídeos para cada usuário). A tabela de classificação é dividida em duas colunas, com um design claro e cores roxas distintas. No topo, o nome do país é exibido com a sua bandeira nacional, reforçando o caráter competitivo e comunitário da plataforma.
Ui: Finalizando meu modelo de perfil. Página de perfil de usuário no Madrasa.
A imagem mostra a página de perfil de um usuário na plataforma educacional Madrasa. Na parte superior, a classificação e os pontos são exibidos com um visual icônico de troféu dourado. A próxima seção apresenta uma aula diária, completa com um vídeo educativo e pontos para ganhar por assisti-lo. Mais abaixo, a seção “Emblemas” mostra diferentes distinções obtidas ou a serem desbloqueadas, com ícones coloridos. Por fim, o usuário pode consultar sua “lista de observação” e suas “últimas 5 aulas”, organizadas por categoria e pontos ganhos. A página tem um design clean e toques de roxo, típicos da carta gráfica de Madrasa.
Ui; Finalização do modelo de percurso de aprendizagem. Passeio educativo em Madrasa.
Esta imagem representa a seção “Caminho de Aprendizagem” do Madrasa. No topo da página, uma mensagem parabeniza o usuário pela classificação e pontos atuais. A seção central lista diferentes percursos educativos (“Lista de Caminhos”) com informações sobre os pontos a serem conquistados, a quantidade de vídeos e o tempo estimado para concluí-los. Abaixo, um player de vídeo exibe um exemplo de aula, com conteúdo de ciências educacionais. À direita, uma “Lista de Observação de Caminhos” permite ao usuário acompanhar seu aprendizado. O layout é claro e intuitivo, acentuado por tons roxos correspondentes à identidade visual da plataforma.
UI: modelo de tabela de classificação. Classificações e performances em Madrasa.
Esta imagem mostra a seção Tabela de classificação do Madrasa, onde os usuários podem visualizar as tabelas de classificação com base nos pontos acumulados. A parte superior exibe uma mensagem de parabéns com a classificação e pontos do usuário atual. A tabela de classificação principal mostra os 100 melhores usuários com suas classificações, pontos e avatares. Mais abaixo, os rankings específicos são divididos por categorias (A, B, C) com abas coloridas para cada segmento. A seção inferior ilustra o “Top 10 por país” usando um mapa interativo dos países árabes, onde marcadores roxos indicam locais ativos. A paleta de cores roxa e azul reflete a identidade visual da Madrasa, proporcionando uma experiência de usuário clara e envolvente.
Ux: Página inicial Wireframind, V2. Maquete da página inicial do Madrasa (versão 2).
Esta imagem mostra um wireframe de uma proposta de página inicial do Madrasa, apresentando um layout claro e organizado. A parte superior inclui um apelo à ação para um concurso e vencedores, seguido de uma secção para escolha de uma área de aprendizagem. Outra seção oferece caminhos educacionais na forma de mapas e indicadores de progresso. Os usuários também podem acompanhar seu progresso usando um botão de login ou de criação de conta. Na parte inferior, uma seção “Sobre” descreve a missão, visão e objetivos da Madrasa, enquanto os botões permitem baixar aplicativos móveis. O layout incorpora formas arredondadas e transições fluidas, reforçando uma navegação agradável e intuitiva.
