Redesign da landing page Joy Education

Considerações sobre UI Design

Fui desafiado a reprojetar a landing page da Joy education como etapa de um processo seletivo. Encarei o desafio como um bom exercício sobre boas práticas e padrões de design de interfaces gráficas. Como não conhecia suficientemente o produto, o negócio, suas necessidades, limitações e público, não foi possível contribuir com sugestões mais profundas e assertivas de alterações.

Decidi começar o processo analisando a atual plataforma, identificando estrutura, elementos básicos recorrentes, e buscando problemas para balizar sugestões de mudança para a página.  Alguns dos pontos problemáticos encontrados foram: pouca margem e padding, comprometendo o respiro dos itens da página; uso de duas cores principais muito saturadas e utilizadas em contraste entre si para elementos textuais, o que pode prejudicar conforto e legibilidade; uso de tipografia em tamanhos muito pequenos, dificultando o acesso a algumas informações; componentes desalinhados com relação ao grid da página e problemas com entrelinhas de alguns textos.

Além disso, as capturas de tela utilizadas para demonstrar as funcionalidades da plataforma não passam mensagens claras.

Depois de realizar a análise de toda a página e pontuar as principais oportunidades de melhoria, comecei a redesenhar os  elementos mínimos e de maior recorrência encontrados na página.

Cores e tipografia foram tratadas primeiramente por serem os elementos que mais se repetem. Optei por alterar a tipografia, utilizando famílias tipográficas distintas para título e corpo de texto, com a intenção de trazer um ritmo mais dinâmico à página através desse contraste. Decidi não utilizar o laranja da marca em conjunto com o roxo que estava sendo usado, escolhendo outro tom de roxo para ilustrações e detalhes, não utilizando-o em sobreposição ao laranja em elemento algum. Também optei pela substituição dos prints utilizados na versão atual por ilustrações, deixando a página mais amigável e padronizando melhor a comunicação.

Para tornar o consumo do site mais fácil, reduzir o tamanho da página pareceu uma boa ideia, dada a grande quantidade de informação com redundância ou pouco valor apresentadas na versão atual,  mantendo somente o conteúdo relevante.
Com base nas observações feitas, foram realizadas explorações e testes, até alcançar o resultado desejado no prazo sugerido para entrega do desafio, adicionando interações, criando componentes e pensando nos elementos de prototipagem. Optei pela utilização de ícones maiores, fontes maiores, mais espaçamento, menos imagens e trabalhar principalmente o contraste branco/laranja/preto. A entrega exigia construção de uma biblioteca de componentes da interface mobile, além de um protótipo em alta fidelidade.

É possível navegar no protótipo da solução clicando aqui.