Matrícula Online é um projeto de Interface do Usuário desenvolvido e aprimorado em menos de duas semanas. Foi um desafio muito importante porque eu era o unico e primeiro UX/UI Designer na empresa.
O objetivo inicial do Matrícula é melhorar a experiência ao matricular um aluno em determinada escola, inicialmente tendo como usuários somente funcionários públicos da secretaria da educação. Em acordo com os stakeholders, foi definido ir realizando upgrades (para eventual adição de interface centrada para o público; dashboards, etc.) no decorrer dos negócios.
O objetivo inicial do Matrícula é melhorar a experiência ao matricular um aluno em determinada escola, inicialmente tendo como usuários somente funcionários públicos da secretaria da educação. Em acordo com os stakeholders, foi definido ir realizando upgrades (para eventual adição de interface centrada para o público; dashboards, etc.) no decorrer dos negócios.
Iniciei fazendo um deep dive nas necessidades do usuário para entender como melhorar a usabilidade da melhor maneira, em seguida fiz rascunhos da interface, validei e fui para o figma. Antes de iniciar a prototipação, estudei a identidade visual e desenvolvi um design system consistente e atraente.
Cores
As cores definidas combinam com a identidade visual da prefeitura, público alvo e contraste. Fora o branco que está presente por todo o layout para harmonizar e deixar agradável aos olhos, o azul é a cor principal que da a modernidade e identidade, o amarelo é a cor secundária que valoriza o azul e destaca as partes mais importante da composição do layuout, sendo utilizado em hovers, breadcrumb, headline e etc.
Iconografia
A biblioteca definida foi a Lucide Icons, possuí icones minimalistas com alguns cantos arredondados que conversam perfeitamente com o público alvo, mesmo pensando a longo prazo quando o projeto tomar outras proporções, é uma biblioteca sólida e atemporal que também possui muitos estilos educacionais, podendo facilitar o fluxo e aumentar a carga cognitiva do usuário ao navegar pelo sistema.
Assets
Os assets foram inteiramente criados do zero, todos organizados e aperfeiçoados para uma composição harmonica junto ao layout, que foi desenvolvido seguindo um grid/proporção consistente e adaptável para futuras atualizações responsivas, a proporção de tela inical foi criada apartir de 1440px considerando a tela dos usuários finais.
Houve duas escolhas tipográficas, uma para título e outra para texto, todas seguindo o pixel perfect com suas dimensões pré definidas.
Houve duas escolhas tipográficas, uma para título e outra para texto, todas seguindo o pixel perfect com suas dimensões pré definidas.
Fluxo de tela interativo de alta fidelidade
O fluxo parte da interação do usuário para vizualisar um aluno dentro de determinada escola. A interface foi inteiramente centrada no usuário para melhorar a experiência. Em reuniões os stakeholders estavam priorizando a estética do layout, inicialmente propuseram a idéia de organizar cada escola e alunos em formato de cards, porém, que em questão de usabilidade não se aplica. O público alvo se trata da secretaria pública responsável pela matricula de alunos do município, o que resulta em um enorme banco de dados. Pensando nisso, o formato de tabela facilitaria a navegação visto que em uma escola existe diversas turmas e dentro de cada turma existe diversos alunos. Na possibilidade de upgrade para o público, o layout com cards se aplicaria perfeitamente.
Para melhorar a usabilidade também foram adicionados accordions nas turmas para uma visualização geral simplificada de cada aluno.
O fluxo parte da interação do usuário para vizualisar um aluno dentro de determinada escola. A interface foi inteiramente centrada no usuário para melhorar a experiência. Em reuniões os stakeholders estavam priorizando a estética do layout, inicialmente propuseram a idéia de organizar cada escola e alunos em formato de cards, porém, que em questão de usabilidade não se aplica. O público alvo se trata da secretaria pública responsável pela matricula de alunos do município, o que resulta em um enorme banco de dados. Pensando nisso, o formato de tabela facilitaria a navegação visto que em uma escola existe diversas turmas e dentro de cada turma existe diversos alunos. Na possibilidade de upgrade para o público, o layout com cards se aplicaria perfeitamente.
Para melhorar a usabilidade também foram adicionados accordions nas turmas para uma visualização geral simplificada de cada aluno.
Todo esse processo foi criado em menos de duas semanas, foram 4 dias de pesquisas e espera pelo material de trabalho (visto que estive esses dias sem os hardwares necessários) e 2 dias para uma prototipação de média fidelidade que foi aprimorada durante os dias seguintes. Foi uma experiência importante para minha carreira, tive a oportunidade de liderar um projeto com um time de desenvolvedores onde ensinei e aprendi bastante.
Obrigado pela leitura. Case do projeto Matricula Online desenvolvido em Janeiro de 2024.