Redesign de ferramenta de IA para professores

Redesign de uma ferramenta de IA para planejar aulas

Um conjunto de ferramentas de IA que ajuda professores do Reino Unido a planejar aulas e criar materiais didáticos pediu à CodeLeap para renovar o visual. Redesenhamos as páginas principais do aplicativo web e criamos um novo estilo visual e um novo logo, em estreita colaboração com os fundadores no Figma.

Redesign de ferramenta de IA para professores — estudo de caso: Educação

A ferramenta do professor, redesenhada.

A CodeLeap redesenhou as páginas de planejamento de aulas, de criação de materiais e de conta, e criou um novo estilo visual e um novo logo, iterando ao vivo com os fundadores no Figma para que as decisões fossem tomadas na reunião, e não em rodadas de feedback por escrito.

O produto oferece aos professores ferramentas de IA para planejamento de aulas, fichas de exercícios e relatórios. À medida que conquistava seu público, a interface e a marca precisavam acompanhar o que o software de fato era capaz de fazer, e os fundadores trouxeram a CodeLeap para redesenhar as páginas principais e renovar a identidade. Nossos designers retrabalharam cada página no Figma, geralmente o fluxo inteiro em vez de uma tela por vez, compartilhando cada versão com os fundadores antes da aprovação.

Funcionalidades do produto

Novo estilo visual e novo logo

Um visual renovado construído sobre o laranja da marca, com um logo mais suave e marcante e um estilo consistente em todo o produto. Os fundadores avaliaram a nova direção e a adotaram de imediato.
Páginas principais redesenhadas

A CodeLeap redesenhou as principais páginas que os professores usam, da biblioteca de ferramentas às telas de conta e suporte. Em várias delas, desenhamos o fluxo completo em vez de uma única tela, para que a experiência se mantenha coesa de uma etapa para a outra.
Telas adicionais mapeadas e desenhadas

Além do conjunto principal, mapeamos e desenhamos outras telas de que os fundadores precisavam, incluindo My Content e Pricing. São essas as jornadas que decidem se alguém se cadastra e enxerga valor, então deixá-las de fora teria enfraquecido todo o resto.
Colaboração próxima no Figma

Todo o redesign aconteceu no Figma, com os fundadores comentando diretamente nas telas. Esse ciclo curto fez com que cada página fosse moldada a partir das contribuições deles e aprovada antes de ser considerada pronta.

Desafio

Um produto que conquistou seu público muitas vezes supera a interface com que foi lançado, e foi o caso aqui. As ferramentas de IA por trás faziam um trabalho sério para os professores, enquanto as páginas ao redor e a marca que as apresentava ainda tinham cara de produto em estágio inicial. O redesign também precisava respeitar o que já funcionava. Os professores usavam a ferramenta todos os dias, então a tarefa era elevar o padrão de algo que estava funcionando, e não recomeçar do zero — e os fundadores precisavam ver e aprovar cada decisão, em vez de receber um rebranding pronto no final.

Solução

A CodeLeap entregou um conjunto completo de designs no Figma cobrindo as páginas principais usadas pelos professores e as telas adicionais ligadas ao cadastro e à percepção de valor. A identidade visual foi renovada sobre o laranja já existente da marca, com um logo mais suave e um layout consistente no lugar dos blocos de cor pesados que começavam a envelhecer o produto. Trabalhar diretamente no Figma, com os fundadores comentando ao longo do caminho, permitiu definir a direção cedo e aprovar cada página à medida que ficava pronta. Eles saíram com uma interface mais clara e segura e uma marca à altura, prontas para seguir para o desenvolvimento quando decidissem construí-las.