Main_Banner.png

Neste case você verá como:

image.png

Conduzi de ponta a ponta a frente de UX/UI do maior encontro de líderes de educação do Brasil.

image.png

Transformei limitações técnicas em soluções criativas que equilibraram estética, usabilidade e viabilidade.

image.png

Atuei próximo de diferentes equipes, desenvolvendo protótipos, peças de divulgação e facilitando decisões estratégicas.


Contexto & Desafio:

Prancheta 1.png

O Educa Week é um dos maiores eventos de educação do Brasil, reunindo mais de 4.500 participantes, 100 palestrantes e 80 patrocinadores em três dias de palestras, painéis e networking.

Além do objetivo principal que era vender 3000 ingressos até o dia do evento, o cliente trouxe um desafio específico: cada participante poderia escolher até 5 palestras entre mais de 40 opções, distribuídas em horários conflitantes e auditórios com lotação limitada.

<Print do PPT com paineis>

<aside> <img src="/icons/thought-alert_purple.svg" alt="/icons/thought-alert_purple.svg" width="40px" />

Era preciso prever interesses, evitar hiperlotação e ainda transmitir a sensação de liberdade de escolha ao usuário.

</aside>


Como começou:

Junto com o briefing inicial, o cliente já trouxe pronta uma versão beta da Landing Page que no fim virou um site completo. ****

Nesta página, as conversões se davam apenas pelo formulário de inscrição para colaboradores e um botão de cadastro que registrava leads em uma lista de espera, avisando-os da possibilidade de se inscrever assim que as vagas ficassem disponíveis.

A partir disso e uma planilha enorme de paineis e palestrantes, começou assim o desafio de implementar tudo no site, com fidelidade de conteúdo, flexibilidade na escolha por parte do usuário e controle de inscrições por parte da gestão.

Screens.png


Primeiros esboços:

Primeira sugestão de layout para a agenda.

Primeira sugestão de layout para a agenda.

A primeira solução proposta pelo cliente foi usar o Sympla. Isso poderia até resolver a questão de vender ingressos de acordo com o interesse em painéis diferentes dentro de um único evento, mas traria vários outros: tem taxa da plataforma, não traz um modo claro para o usuário visualizar a agenda, palcos e programação como um todo, fora que também nos traria problemas na hora de fazer quaisquer mudanças na agenda, que a cada dia era atualizada de acordo com o planejamento dos horários e palestrantes.

A partir daí, já começamos a pensar em um primeiro esboço, pensando em organizar os cards por horário, e usando as cores como indicadores de qual o fórum (tema) correspondente.

Com base na necessidade de customizar ingressos através da programação do evento, um pensamento que tive foi tirar o foco da venda, e trazer o foco à experiência do usuário na hora de visualizar a agenda como um todo e se programar de acordo com seus temas de interesse.

Com base em outros eventos em que tive que desenvolver agendas em formato de tabela por horários, pensei em uma interface onde o usuário pudesse selecionar os temas como se estivesse interagindo com um calendário.

Essa opção também foi descartada pois, além de ser mais difícil de ser programada dentro do wordpress, traria problemas quando viesse para o mobile, principalmente considerando que esse layout depende de uma vizualização em 5 colunas, e com bastante texto por card.

Segunda sugestão de layout para a agenda.

Segunda sugestão de layout para a agenda.


A solução:

Figma:

image.png

Wordpress:

image.png

Ao apresentar fluxos e esboços, chegamos a uma versão que mescla praticidade e responsividade. Com base nesse layout proposto, foi possível instalar um plugin de e-commerce, no qual cada painel funcionasse que nem um produto diferente a ser colocado no carrinho. Essa solução permitiu tanto que usássemos um sistema de vendas pré-pronto sem precisar programar tudo do zero, quanto possibilitou que fôssemos alterando o conteúdo dos temas, paineis e palestrantes conforme o comitê organizava o evento.

<aside> <img src="/icons/thinking_purple.svg" alt="/icons/thinking_purple.svg" width="40px" />

Para facilitar a experiência e minimizar a margem para erros, também implementamos:

image.png