Speak Easy
Plataforma de aprendizado de idiomas
O SpeakEasy é uma plataforma de idiomas que propõe uma experiência prática, leve para quem deseja aprender uma nova língua de forma autônoma. Desenvolvi esse projeto em parceria com o designer Sillas Oliveira , durante minha atuação como UX/UI Designer na empresa júnior: Aprimora Conhecimento. Nosso objetivo era simular o ciclo completo de um produto digital real, da pesquisa até a prototipação navegável, aplicando os princípios do design centrado no usuário.
Desafio:Como tornar o aprendizado de idiomas mais acessível e motivador para estudantes brasileiros, considerando sua rotina atribulada e as dificuldades em manter a constância nos estudos?
Etapas do processo:
Etapa 1 (Descoberta e Pesquisa)
Desk Research
Análise de Concorrentes
Matriz CSD
Pesquisa Qualitativa e Quantitativa
Criação de Personas
Jornada do Usuário
Desk Research
Análise de Concorrentes
Matriz CSD
Pesquisa Qualitativa e Quantitativa
Criação de Personas
Jornada do Usuário
Etapa 2 (Estruturação e Protótipo de baixa fidelidade)
Arquitetura da Informação
User Flow
Protótipo de Baixa Fidelidade
Arquitetura da Informação
User Flow
Protótipo de Baixa Fidelidade
Etapa 3 (Identidade Visual e protótipo de alta fidelidade)
Moodboard
Design System
Protótipo Interativo
Meu papel no projeto:
Pesquisa de mercado e análise de plataformas existentes
Desenvolvimento de personas e fluxos de navegação
Criação de wireframes e protótipo de alta fidelidade no Figma
Etapa 1:
O projeto começou com uma análise de concorrentes e a construção de uma matriz CSD. Com isso em mãos, pude identificar o problema: o site da clínica não era focado em conversão, não transmitia claramente os diferenciais da marca e não guiava os visitantes de forma estratégica até o agendamento de consultas.
Para entender melhor esse cenário, realizei uma pesquisa exploratória com foco em referências do mercado e no perfil dos usuários.
Análise de Concorrentes
Observei sites de clínicas odontológicas de alto padrão, identificando boas práticas em design, hierarquia de informações e estratégias de engajamento com pacientes. Isso me ajudou a perceber que era essencial:
Observei sites de clínicas odontológicas de alto padrão, identificando boas práticas em design, hierarquia de informações e estratégias de engajamento com pacientes. Isso me ajudou a perceber que era essencial:
- Destacar tratamentos e diferenciais da clínica de forma clara e elegante;
- Garantir CTAs visíveis em pontos estratégicos da página;
- Incorporar elementos visuais que transmitam sofisticação e credibilidade.
Persona
Com base na pesquisa, construí perfis representativos de usuários:
Com base na pesquisa, construí perfis representativos de usuários:
- Ana, 32 anos, profissional de classe média alta, busca atendimento de qualidade, informação clara sobre tratamentos e facilidade para agendar consultas;
- Carlos, 45 anos, empresário, valoriza eficiência, agendamento rápido e confiança na equipe da clínica.
A partir desses perfis, identifiquei a importância de criar uma landing page que unisse sofisticação, clareza e facilidade de uso, guiando o usuário de forma intuitiva até o agendamento.
Jornada do Usuário
Mapeei as etapas desde o primeiro contato com a página até o agendamento da consulta, identificando três pontos críticos:
Mapeei as etapas desde o primeiro contato com a página até o agendamento da consulta, identificando três pontos críticos:
- Primeiro contato com a página – a interface precisa transmitir confiança imediatamente;
- Exploração dos serviços – o usuário deve entender rapidamente os tratamentos e diferenciais da clínica;
- Agendamento da consulta – o CTA deve ser claro e acessível, evitando qualquer fricção que impeça a conversão.
Esses insights me levaram à Etapa 2, focando na estruturação da informação, prototipagem e criação de uma experiência intuitiva, elegante e persuasiva.
Etapa 2:
Com base nos dados da pesquisa e nas necessidades das personas, entramos na fase de ideação para organizar o conteúdo e criar uma experiência fluida e engajadora.Arquitetura da InformaçãoDefinimos a estrutura principal da plataforma com foco em três pilares:1- Acesso rápido ao conteúdo principal 2- Progresso claro e motivador3- Espaço para interação entre usuáriosIsso garantiu que a navegação fosse simples e coerente com os objetivos de Ana e Carlos.User FlowO fluxo do usuário foi desenhado para garantir fluidez entre as ações principais:1- Cadastro e personalização do perfil2- Acesso às trilhas de estudo3- Participação social e acompanhamento de progressoO flow também considera caminhos de erro e decisões-chave, o que facilitou o desenvolvimento de um sistema mais empático e adaptável.Protótipos de Baixa FidelidadeDesenhamos wireframes iniciais à mão focando em organização de conteúdo, usabilidade e hierarquia de informações.
Etapa 3:
Com a estrutura do produto validada e os fluxos definidos, avançamos para a construção da identidade visual e desenvolvimento da interface final do aplicativo.MoodboardComeçamos reunindo referências visuais que traduzissem o tom da plataforma: amigável, acessível e moderna.
Selecionamos paletas suaves com pontos de cor vibrantes, tipografia limpa e ícones simples, que transmitissem leveza e dinamismo.Design SystemCriamos um sistema visual completo, garantindo consistência, acessibilidade e escalabilidade ao projeto. O design system incluiu: 1- Logotipo e identidade visual2- Cores principais e auxiliares, com contraste adequado para acessibilidade3- Tipografia padronizada, com hierarquia bem definida4- Botões, campos, ícones e espaçamentos, compondo uma biblioteca reutilizável5- Regras de uso para facilitar futuras implementaçõesEsse sistema otimizou o processo de criação e garantiu coesão em todas as telas.
Selecionamos paletas suaves com pontos de cor vibrantes, tipografia limpa e ícones simples, que transmitissem leveza e dinamismo.Design SystemCriamos um sistema visual completo, garantindo consistência, acessibilidade e escalabilidade ao projeto. O design system incluiu: 1- Logotipo e identidade visual2- Cores principais e auxiliares, com contraste adequado para acessibilidade3- Tipografia padronizada, com hierarquia bem definida4- Botões, campos, ícones e espaçamentos, compondo uma biblioteca reutilizável5- Regras de uso para facilitar futuras implementaçõesEsse sistema otimizou o processo de criação e garantiu coesão em todas as telas.
Protótipo de Alta Fidelidade:
Com os elementos visuais definidos, desenvolvemos o protótipo final no Figma, simulando a navegação completa do usuário.
Foram priorizados:Fluxos intuitivos e responsivosInterface leve e motivadoraMicrointerações que reforçam o progresso e a evolução do usuário.
Foram priorizados:Fluxos intuitivos e responsivosInterface leve e motivadoraMicrointerações que reforçam o progresso e a evolução do usuário.
Protótipo navegável:
Clique aqui para testar o protótipo no Figma
Aprendizados:
Esse projeto foi uma oportunidade rica para aplicar o ciclo completo do design de produto em ambiente colaborativo, desenvolvendo não apenas habilidades técnicas em UX e UI, mas também soft skills como comunicação, trabalho em equipe e autonomia criativa.
