Plataforma digital de ensino para reforço escolar — estudo de caso de UX/UI
- Ana Elisa Alves
- 11 de jun. de 2024
- 11 min de leitura
Atualizado: 18 de jun. de 2024
O objetivo geral do projeto foi desenvolver a interface gráfica de um aplicativo que servisse de apoio aos estudos dos alunos do Curso Angular, facilitando a prática e entendimento dos exercícios aplicados no colégio e no reforço escolar.
Com o amplo crescimento e desenvolvimento de produtos digitais no mercado há alguns anos, o número de downloads de aplicativos vem crescendo de forma significativa. Um dos principais segmentos atingidos ocorre na área da educação, causado pelo distanciamento social e as medidas de isolamento que foi impulsionado pela pandemia da COVID-19.
A fim de tentar ajudar os estudantes que foram prejudicados por essas questões, foi desenvolvido uma proposta de aplicativo para o Curso Angular, que auxilia no reforço escolar de crianças e adolescentes.
Objetivos Específicos
Fazer o levantamento de dados dos estudantes para saber quais matérias apresentam uma maior dificuldade de aprendizado;
Identificar ferramentas e recursos gráficos com base nos dados levantados a serem aplicados em uma interface;
Empregar um método com abordagem centrada no usuário;
Projetar soluções a fim de atender os requisitos de projeto no âmbito gráfico e em apoio às necessidades do usuário.
Metodologia
Para o desenvolvimento desse projeto, foi utilizado como base a metodologia de Garrett (2003), que é um estudo que defende o desenvolvimento de um produto centrado no usuário e ressalta a importância do envolvimento do usuário para o alcance de resultados satisfatórios durante todo o processo criativo.
Garrett apresenta vários processos para a criação de um produto intuitivo e funcional, de forma que a experiência do usuário seja agradável. Um dos assuntos levantados é a importância da comunicação para facilitar a compreensão do usuário ao utilizar o produto, no qual é abordado justamente como estruturar e organizar a informação de modo a tornar o uso do produto simples e fácil para o usuário.
A metodologia de Garrett envolve outras áreas do design que são importantes na composição de um produto e é definida em cinco planos, que trabalham gradativamente do intangível ao físico: Estratégia, Escopo, Estrutura, Esqueleto e Superfície.
1. Plano de Estratégia
Consiste em elaborar estratégias para o produto da empresa, com a intenção de aprimorar a funcionalidade e o conteúdo existentes. Para isso, o plano de estratégia aborda dois fatores: os objetivos do negócio e as necessidades do usuário. É completamente conceitual e baseia-se em pesquisas, levantamento de dados para análise e para que possibilite o bom desenvolvimento de todas as próximas etapas.
2. Plano de Escopo
Aplicam-se as informações obtidas no plano de estratégia, em duas partes: na funcionalidade e no conteúdo do produto. Nessa etapa será definido o posicionamento do seu site ou aplicativo, nicho, público-alvo, ou seja, as diretrizes conceituais, ainda abstratas, que guiarão o desenvolvimento físico que virá a seguir.
3. Plano de Estrutura
Constitui a criação da estrutura da interface em duas partes: design de interação e arquitetura da informação. Nessa fase, o projeto começa a criar forma através de fluxogramas ou organogramas que definem a estrutura e o fluxo de navegação que o usuário irá percorrer.
4. Plano de Esqueleto
O plano de esqueleto é definido pelo design de interface, pelo design de navegação e pelo design da informação. Nessa etapa, o trabalho é feito em escala menor, com foco em cada subfuncionalidade do site ou aplicativo e sua interação com o todo.
5. Plano de Superfície
O plano de superfície refere-se à composição entre o conteúdo, a funcionalidade e a estética representados visualmente no site ou aplicativo, sendo constituído por todos os planos anteriores e onde o design da informação se sobressai.
Descrição do caso
Plano de Estratégia
Nessa primeira etapa do processo foi definida a base conceitual do app. Definir “o que é” o aplicativo do Curso Angular e “para quem” ele está direcionado. Divide-se em três partes: necessidades do usuário, análise de concorrentes e objetivos do app.
— Necessidades dos usuários:
Demanda identificada de mercado: Foi identificada, a partir de análises e pesquisas, a alta taxa de crianças e adolescentes que sofreram um grande impacto em sua educação por conta da pandemia de COVID-19, que prejudicou o ensino em escolas e universidades do mundo todo. Em paralelo, notou-se um crescente avanço no aprendizado a distância, através de videoaulas e aplicativos de estudo.
Público-Alvo: Para entender melhor meu usuário, foi realizada uma pesquisa através de um questionário online com os alunos do Curso Angular, que contou com respostas de 12 participantes.
Alguns dos dados obtidos:
Faixa etária;
Disciplinas com maior e menor dificuldades;
Seus métodos de estudos preferidos;
Quais dispositivos tecnológicos eles preferem estudar.
— Análise de concorrentes:
Nesta etapa, foram analisados produtos ou serviços que tenham semelhança com a área na qual está sendo desenvolvido o projeto (seja em questão de público-alvo, área de atuação ou conteúdo). Para tanto, foram selecionados três aplicativos na área da educação: Duolingo, Estuda.com e RevisApp.
— Objetivos do app:
O objetivo principal é que estudantes consigam aprender e reforçar seus conhecimentos de uma maneira simples e objetiva, funcionando como um complemento as aulas da escola e do Curso Angular.
A proposta do aplicativo é ser uma plataforma na qual o usuário, conectado a uma conta pessoal, possa planejar sua rotina de estudos, com questões separadas por disciplinas e dificuldades para que, assim, consiga obter resultados expressivos e detalhados.
A partir de um layout claro e objetivo, o usuário teria acesso a inúmeras questões, suas estatísticas, correções de questões, videoaulas e uma ferramenta para que se possa montar seu plano de estudos semanal.
Plano de Escopo
Aqui serão definidas as características do produto, sua demanda para que possa realizar suas finalidades básicas e como funcionará.
— Requisitos de conteúdo:
Os elementos de conteúdo que serão necessários para que o app consiga exercer sua função corretamente:
a) Banco de dados para armazenar informações pessoais de cadastro do usuário;
b) Banco de dados das questões que serão fornecidas;
c) Apresentar estatísticas com as taxas de erros e acertos das questões respondidas, assim como as disciplinas com mais e menos dificuldade;
d) Display do plano de estudos criado pelos usuários;
e) Mostrar a correção das respostas logo após o usuário responder a questão.
— Personas:
Entende-se por personas como o perfil dos usuários-alvo de um projeto, levantando seus ganhos, suas dores e como seria a experiência ideal para essa pessoa ao utilizar o serviço ou produto do projeto em desenvolvimento.
MARIA
11 anos
Maria é natural de São Gonçalo - Rio de Janeiro e está cursando o 5º ano do Ensino Fundamental em um colégio municipal de seu bairro. É uma estudante dedicada e busca sempre excelência em suas atividades acadêmicas, por isso, sua mãe a matriculou em um curso de reforço escolar para que ela consiga tirar todas as dúvidas que ela possa ter nas disciplinas escolares.
O pacote que sua mãe pôde pagar foi o de 3 dias na semana, com 1 hora de duração por dia. Porém, Maria ainda sente a necessidade de estudar mais tempo para compreender melhor as matérias que ela tem uma maior dificuldade. Ela gostaria de se sentir amparada com relação a essa necessidade, sem que atrapalhe financeiramente sua mãe ou algum outro membro de sua família. Ela quer ter a possibilidade de estudar sozinha em horários flexíveis e compatíveis com sua agenda.
JOÃO
15 anos
João se mudou para São Gonçalo para poder estudar em um colégio melhor dos que tinham disponíveis em sua cidade natal. Ele está cursando o 1º ano do Ensino Médio em um renomado colégio particular de seu bairro e sonha em ser advogado.
Como antes João estudava em um colégio cuja educação era mais precária, ele tem muitas dificuldades em algumas disciplinas, principalmente as que envolvem cálculos. Com sua rotina agitada por conta das aulas na escola, curso de inglês e aulas de natação, João tem pouco tempo para se dedicar a resolver essas dificuldades escolares.
Pensando em ajudar o filho, o pai de João o matriculou em um curso de reforço escolar com aula 1 vez por semana e duração de 2 horas por dia. Ainda assim, João continua tendo muitas dificuldades nas matérias, precisando de ainda mais tempo de estudo para compensar esse aprendizado, mas o único horário que ele tem disponível para colocar os estudos em dia são nos finais de semana, dias em que ele não tem nenhuma atividade agendada.
Ele gostaria de poder ter como estudar com um apoio especializado, onde ele consiga estudar sem a ajuda de uma pessoa física o auxiliando, para que, assim, ele consiga aprender os assuntos escolares sozinho sem ter tanta dificuldade.
VITÓRIA
18 anos
Vitória tem 18 anos, é recém formada no Ensino Médio e estuda para passar no vestibular. Ela ainda está em dúvida entre os cursos de arquitetura e design, mas sabe que gosta muito de matemática, porém tem uma grande dificuldade em física.
Tem uma vida bem ativa, namora, pratica academia 5 vezes na semana, as vezes anda de bicicleta na beira mar e gosta de ir ao cinema nos finais de semana com seu namorado. Não vive sem seu smartphone e faz tudo o que pode com ele. Ainda assim, Vitória se dedica ao estudo todos os dias da semana durante a manhã em um curso de pré-vestibular e as sextas ela faz aula extra em um curso de reforço com duração de 3 horas.
Ela gostaria de poder estudar durante seu tempo livre, seja onde for, para que, assim, consiga continuar aprendendo e relembrando assuntos específicos de qualquer disciplina que ela queira, seja como videoaulas ou através de listas de exercícios.
Plano de Estrutura
A partir de agora começaremos a fazer a transição da definição e identificação dos conceitos e focaremos na parte mais física do app, na qual o usuário irá utilizar de fato.
— Requisitos de projeto:
Com base na observação e no questionário respondido pelos estudantes, foi proporcionada uma maior percepção das necessidades dos usuários que, por consequência, auxiliou na organização e priorização dos requisitos de projeto.
Requisitos podem ser divididos em categorias específicas. Nesse presente documento, abordaremos três requisitos: de conteúdo (dados que o sistema deve oferecer); funcionais (o que o sistema deve fazer) e de experiência (o que o sistema deve prover para uma melhor experiência emocional). Tais requisitos foram avaliados em grau de prioridade (alta, média ou baixa) e também a fonte de identificação daquela necessidade. Para melhor visualização, foi desenvolvida uma tabela resumida dos requisitos de conteúdo e funcionalidade para o desenvolvimento do aplicativo.
Com isso, fica estabelecido que a interface final será composta por três seções principais: informativa (contendo um banco de dados com questões de diversas disciplinas e videoaulas), comunicação (gabarito das questões feito pelos professores do curso) e praticidade (para iniciar rapidamente os estudos a qualquer momento).
— Arquitetura da informação:
Após listar os requisitos necessários para o funcionamento do aplicativo, resultados da pesquisa de benchmarking e pesquisa com o usuário, os tópicos foram organizados em telas e transformados em funcionalidades dentro do app. A organização ocorreu através da hierarquização de tarefas, que segundo Preece Rogers e Sharp em seu livro Design de Interação: Além da interação humano-computador, envolve a divisão de uma tarefa em subtarefas e, em seguida, estas em “subsubtarefas”, para que a jornada do usuário seja melhor compreendida.
A arquitetura foi montada em formato de diagrama, permitindo melhor visualização da navegação que será realizada dentro da plataforma, como ilustra a figura a seguir:
Plano de Esqueleto
No tópico anterior (plano de estrutura) definimos os requisitos de projeto e a arquitetura de informação do app. Neste tópico, definiremos a organização dos elementos em cada página, que são os wireframes.
— Wireframes:
Wireframes representam, de forma simplificada, o “esqueleto” de uma interface. Assim, podemos reunir em um mesmo documento: decisões, elementos gráficos e anotações referentes ao design visual e a sua organização.
Para o presente projeto foram desenvolvidos wireframes de baixa fidelidade, em papel sulfite branco sem aplicação de cores, onde preocupou-se em distribuir os conteúdos em acordo com a arquitetura de informação determinada anteriormente.
Plano de Superfície
O último plano de desenvolvimento cria os aspectos do app mais perceptíveis aos usuários: a parte gráfica. Aqui, conteúdo, funcionalidade e organização se unem para produzir o design final do trabalho, embasados pelos outros planos de desenvolvimento.
— Logotipo:
O logotipo do Curso Angular já havia sido criado anteriormente, assim como sua paleta de cores principais sido pré-definidos. Portanto, o design visual de todo app foi criado baseado nessas informações já pré-estabelecidas com o Curso em questão.
— Tipografia:
Sabendo que a tipografia utilizada para a criação do logotipo foi a Quicksand, foi pensada, para a criação do aplicativo, na família tipográfica Nunito. Essa tipografia é sem serifa e com alguns cantos arredondados, assim como a Quicksand, trazendo familiaridade com a fonte utilizada no logotipo, fluidez na leitura e confiabilidade, sem torná-la demasiadamente tradicional. Possui uma vasta variação de pesos, proporcionando versatilidade na diagramação sem a necessidade de uma tipografia complementar para títulos e subtítulos.
Para uma melhor composição da interface, foi determinado padrões de uso das fontes em tamanho e peso distintos, como mostra a tabela a seguir:
— Paleta de cores:
Como dito anteriormente, a paleta de cores foi criada tendo em base as cores principais já pré-definidas do logotipo. As cores secundárias foram criadas pensando em um degradê que ficasse harmônico com as cores primárias e também para as informações de destaque nas estatísticas.
— Elementos gráficos:
Para compor a interface foi necessário desenvolver elementos gráficos que servissem como apoio visual para a criação das telas. Ligado diretamente com a informação textual, os ícones foram padronizados para melhor ilustrar as funcionalidades que a plataforma oferece.
Visando atender os requisitos de projeto, foram adotados ícones com poucos detalhes e minimalistas, trazendo leveza e fluidez, concordando com os conceitos do projeto.
Tomou-se como padrão que todos os cabeçalhos serão compostos de um frame com formato de curva no canto inferior esquerdo, preenchido com a textura desenvolvida exclusivamente para o aplicativo.
Para a padronização da barra inferior de navegação, foi criado um padrão de gradiente baseado nas cores institucionais.
Os ícones que acompanham a barra serão sempre na cor cinza (#F2F2F2) e o preenchimento da cor é de um gradiente de roxo, o mesmo utilizado nos botões, conforme ilustra as figuras abaixo.
— Grids:
Visando o desenvolvimento estrutural das telas da interface, foi determinado o grid, que serviu como base para criação e distribuição dos conteúdos de forma ordenada e coerente. A aplicação do grid pode ser visualizada na figura a seguir:
O grid é composto por 6 colunas centralizadas. Cada coluna possui 47px de largura e o gutter (espaçamento horizontal entre as colunas) é de 6px.
Seguindo a estrutura do grid, os elementos são dispostos de forma a encaixarem de forma equilibrada, não sendo necessário seguir as linhas com rigidez, permitindo adaptações para os conteúdos sem perder a qualidade organizacional.
— Implementação do design visual:
Após determinados todos os elementos do Design Visual descritos acima, foram aplicados nas telas da interface do app, seguindo as diretrizes determinadas pelo guia de estilo.
Na tela “Iniciar” e na tela “Entrar” houve a aplicação do logotipo em suas duas versões, acompanhados dos botões arredondados nas cores definidas pela paleta institucional.
Na parte central superior da tela “Entrar” há a informação do título referente àquela tela, e ao lado desse título há um botão de “voltar”. Esse padrão se repete nas demais telas que necessitam de maior controle da navegação por parte do usuário.
A tela “Criar Conta” possui duas variáveis, onde a cor laranja implica na seleção e/ou preenchimento correto de algum item, como pode-se observar na figura acima. Nessa seção foi aplicado o padrão do cabeçalho e dos botões arredondados que foram utilizados nas telas anteriores. Ainda, foi incluído um padrão de frame com as bordas levemente arredondadas para preenchimento de informações.
Ressalta-se que se considerou a funcionalidade de rolamento infinito para o desenvolvimento da interface e que, por se tratar de uma pequena empresa, foi optado o cadastro por meio de um nome de usuário, e não por um e-mail ou a criação de uma conta por meio de uma rede social já existente que o usuário possa ter.
A tela “Home” possui em destaque as três ferramentas principais do app do Curso Angular: “Questões”, “Listas de Exercícios” e “Redação”. Na barra de navegação o usuário pode ter acesso as outras três ferramentas disponíveis no aplicativo: “Estudos”, “Estatísticas” e “Aulas”.
Considerações finais
O presente trabalho teve sua realização motivada pela percepção de uma necessidade que, com a pandemia de Covid-19, só piorou os índices de aprendizado dos estudantes ao redor do mundo.
Com o aumento de aulas remotas e de reforço educacional, o Curso Angular vem ganhando cada vez mais espaço em seu bairro e, diante deste fato, entendeu-se a necessidade da elaboração de um aplicativo que servisse como um objeto de apoio ao estudo desses alunos.
Dessa maneira, como designer, o principal objetivo do trabalho foi compreender as necessidades desses estudantes de acordo com os princípios de UX Design. A partir dos dados obtidos, buscou-se identificar soluções e ferramentas para auxiliar esse problema principal, que foi a dificuldade da compreensão e entendimento das disciplinas.
Para alcançar os objetivos específicos definidos para o projeto, as ferramentas e etapas aplicadas neste projeto seguiram a metodologia de Garrett e foram focadas nos usuários. Foi possível identificar, através de uma pesquisa de benchmarking, os pontos fortes e fracos de seus concorrentes para uma melhor visualização do nicho que o app do Curso Angular estaria inserido, tendo em vista suas capacidades e limitações. Além disso, realizou-se uma pesquisa prospectiva, na qual os dados coletados foram determinantes na tomada de decisões para a concepção da interface.
Observa-se que é necessário um estudo mais aprofundado sobre o tema e que sejam abordados aspectos que vão além dos que aqui desenvolvidos para que esse app seja lançado no mercado. Além dos smartphones, o produto também pode ser planejado para outros dispositivos, como o tablet e desktop.
Você pode conhecer melhor o aplicativo através do protótipo navegável que fiz utilizando o Figma.
Muito obrigada por ter lido até aqui! ❤
Quer falar comigo?
Me envie uma mensagem.
Comentários