![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M 20 1.471 L 20 18.529 C 20 18.919 19.845 19.293 19.569 19.569 C 19.293 19.845 18.919 20 18.529 20 L 1.471 20 C 1.081 20 0.707 19.845 0.431 19.569 C 0.155 19.293 0 18.919 0 18.529 L 0 1.471 C 0 1.081 0.155 0.707 0.431 0.431 C 0.707 0.155 1.081 0 1.471 0 L 18.529 0 C 18.919 0 19.293 0.155 19.569 0.431 C 19.845 0.707 20 1.081 20 1.471 Z M 5.882 7.647 L 2.941 7.647 L 2.941 17.059 L 5.882 17.059 Z M 6.147 4.412 C 6.149 4.189 6.106 3.969 6.023 3.763 C 5.939 3.556 5.815 3.369 5.659 3.21 C 5.503 3.052 5.317 2.926 5.112 2.839 C 4.907 2.753 4.687 2.707 4.465 2.706 L 4.412 2.706 C 3.959 2.706 3.525 2.886 3.206 3.206 C 2.886 3.525 2.706 3.959 2.706 4.412 C 2.706 4.864 2.886 5.298 3.206 5.618 C 3.525 5.938 3.959 6.118 4.412 6.118 C 4.634 6.123 4.856 6.085 5.063 6.005 C 5.271 5.924 5.461 5.804 5.622 5.651 C 5.783 5.497 5.912 5.313 6.002 5.11 C 6.093 4.906 6.142 4.687 6.147 4.465 Z M 17.059 11.341 C 17.059 8.512 15.259 7.412 13.471 7.412 C 12.885 7.382 12.302 7.507 11.78 7.773 C 11.258 8.04 10.814 8.438 10.494 8.929 L 10.412 8.929 L 10.412 7.647 L 7.647 7.647 L 7.647 17.059 L 10.588 17.059 L 10.588 12.053 C 10.546 11.54 10.707 11.031 11.038 10.637 C 11.368 10.243 11.841 9.995 12.353 9.947 L 12.465 9.947 C 13.4 9.947 14.094 10.535 14.094 12.018 L 14.094 17.059 L 17.035 17.059 Z" fill="rgb(26, 29, 31)" height="20px" id="iZyFciD6x" width="20px"/></svg>)
©2026 Leonardo Kuabara. Todos os direitos reservados.
©2026 Leonardo Kuabara. Todos os direitos reservados.
App Let's Atlantica
O Let's Atlantica é um aplicativo de reservas de hospedagem que conecta viajantes a hotéis do grupo Atlantica Hospitality International (AHI). Além de permitir a reserva de hospedagens, a plataforma oferece recursos como check-in/check-out dentro do app, serviços de estadia, chaves digitais de acesso ao quarto e programa de pontos de fidelidade.
Objetivo: O objetivo geral do app se concentrou em tornar a experiência dos hospedes conveniente e eficiente por meio de funcionalidades que agregassem valor e fidelização.
Minha atuação: Entrei no projeto durante a fase de construção das interfaces, atuando no desenho de pequenos fluxos de usuários, criação de chaves digitais e documentação do Design System. Como são participações pontuais em setores distintos, separei este projeto em pequenos cases, mostrando um pouco do processo de construção de cada um.
Cargo/função
UX/UI Designer
Ano e Duração
2024 a 2025 (2 anos)
Trabalhei com
Experiência do usuário / Design de Interfaces / Produtos Digitais / Documentação Design System / Fluxo de Usuário / Metodologia Ágil
Walkthrough
Após a montagem de todos os fluxos de telas, fiquei responsável por desenhar o fluxo de Walkthrough, o guia passo a passo de utilização do app pelos novos usuários.
Processo de construção do fluxo
Seguindo o modelo de metodologia ágil, construímos o fluxo de Walkthorugh em sprints de curta duração.
Definição das jornadas do usuário
1 semana
Design das interações
1 semana
Prototipação
3 dias
Feedback e melhorias
1 semana
Interações e indicadores
Utilizamos tooltips como ferramenta de interação entre usuário e tutorial. Além de oferecerem uma breve explicação, os tooltips contém:
CTAs de voltar/avançar para o próximo passo;
Indicador numérico do estágio do tutorial.
Outros fluxos do Walkthrough
No total, participei da construção de 8 fluxos de Walkthrough para o app Let's Atlantica.
Fluxo de reserva - Primeiro acesso
Contexto: No app Let's Atlantica, o usuário pode explorar a plataforma sem a necessidade de fazer login. Porém, é solicitado o acesso a conta a partir do momento em que ele deseja fazer uma reserva de quarto.
Desafio: Pensar em um fluxo de reserva de quarto para usuários que ainda não possuem cadastro ou que ainda não efetuaram login no app.
Solução: A solução para este fluxo foi pensar em uma forma de autenticação sem senha, diminuindo atritos de acesso como:
- Criar e decorar uma senha;
- Recuperar uma senha esquecida.
Insights
Além dessa jornada ser por autenticação sem senha, eliminamos a necessidade de pagamento neste fluxo, ação que seria efetuada somente no check-in.
Com estes insights, o caminho torna-se mais fluido, diminuindo as chances de desistência e frustração do hóspede na sua jornada de reserva de quarto.
Chaves digitais
O que são: As chaves digitais são credenciais eletrônicas que substituem o cartão físico ou a chave tradicional do quarto do hotel. Nos hotéis da AHI, o hóspede recebe a chave em um aplicativo no celular e pode destrancar a porta aproximando o smartphone da fechadura.
O que fiz: A minha função neste projeto foi criar o design destas chaves digitais, que variavam em orientação e tipo de fidelidade.
Plano de Fidelidade: Além de funcionarem como chave, estes cartões também funcionavam como um indicativo do plano de membros de cada hóspede. Membros que atingiam um certo numero de hospedagens eram elegiveis a um determinado plano, obtendo beneficios exclusivos como quartos premium, serviços de massagem, cortesias, etc.
Para isso, foram necessários criar 5 cartões distintos: Não membros, Membros, Silver, Gold e Platinum.
Primeiros testes
A primeira versão dos cartões não obteve a aprovação dos clientes. Esperava-se que eles fugissem um pouco do perfil de cartões bancários.
Versão definitiva
Apos alguns testes, elaboramos uma nova versão das chaves. Uma versão mais simpática, que enfatizava o elemento gráfico do logo e as cores de cada tipo de plano.
Aplicação das chaves na UI
Apos alguns testes, elaboramos uma nova versão das chaves. Uma versão mais simpática, que enfatizava o elemento gráfico do logo e as cores de cada tipo de plano.
Documentação do Design System
Neste projeto, fiquei encarregado de documentar o Design System do Let's Atlantica. A documentação foi importante para auxiliar desenvolvedores a implementarem o sistema da forma correta, além de ser um arquivo sempre disponível para consulta.
O escopo deste projeto delimitou-se em documentar os fundamentos do sistema e a anatomia dos componentes e suas especificações visuais, estados e acessibilidade.
Fundamentos
Cores, tipografia, espaçamento, ícones, border radius, etc.
Cores
Neste Design System, as cores foram separadas entre:
Primitive colors: cores em sua forma bruta, sem contexto de uso.
Color Tokens: cores usadas com contexto de uso, como light/dark mode.
Tipografia e espaçamento
Componentes
Botões, inputs, tags, cards, etc.
Anatomia
Ilustra a composição de elementos de um componente e suas medidas.
Especificações e modos light/dark
Demonstra os estilos, estados e modos (light/dark) de um componente.
Conclusão e aprendizados
Foram mais de 2 anos trabalhando em um aplicativo com inúmeros recursos e funcionalidades a serem desenvolvidas. Seguindo o modelo de metologias ágeis, aprendi a projetar fluxos, interfaces e produtos de maneira rápida e prática, além de entender o funcionamento e a construção de um design system, tudo com feedback constante de gerentes de projeto e desenvolvedores.
Apesar de ser uma maneira eficiente de se fazer pequenas entregas em curto tempo, o método ágil pula etapas importantes do processo de design centrado no usuário, como uma pesquisa aprofundada e testes com usuários.
Dessa forma, concluo que tive uma boa experiência prática realizando este projeto ao atingir as expectativas que gerentes, programadores e stakeholders esperavam. Porém, finalizamos o projeto com uma etapa de pesquisa superficial que talvez dificulte a entender as reais necessidades do usuário do aplicativo futuramente, o que pode acabar custando caro para as empresas envolvidas.
App Let's Atlantica
O Let's Atlantica é um aplicativo de reservas de hospedagem que conecta viajantes a hotéis do grupo Atlantica Hospitality International (AHI). Além de permitir a reserva de hospedagens, a plataforma oferece recursos como check-in/check-out dentro do app, serviços de estadia, chaves digitais de acesso ao quarto e programa de pontos de fidelidade.
Objetivo: O objetivo geral do app se concentrou em tornar a experiência dos hospedes conveniente e eficiente por meio de funcionalidades que agregassem valor e fidelização.
Minha atuação: Entrei no projeto durante a fase de construção das interfaces, atuando no desenho de pequenos fluxos de usuários, criação de chaves digitais e documentação do Design System. Como são participações pontuais em setores distintos, separei este projeto em pequenos cases, mostrando um pouco do processo de construção de cada um.
Cargo/função
UX/UI Designer
Ano e Duração
2024 a 2025 (2 anos)
Trabalhei com
Experiência do usuário / Design de Interfaces / Produtos Digitais / Documentação Design System / Fluxo de Usuário / Metodologia Ágil
Walkthrough
Após a montagem de todos os fluxos de telas, fiquei responsável por desenhar o fluxo de Walkthrough, o guia passo a passo de utilização do app pelos novos usuários.
Processo de construção do fluxo
Seguindo o modelo de metodologia ágil, construímos o fluxo de Walkthorugh em sprints de curta duração.
Definição das jornadas do usuário
1 semana
Design das interações
1 semana
Prototipação
3 dias
Feedback e melhorias
1 semana
Definição das jornadas do usuário
1 semana
Design das interações
1 semana
Prototipação
3 dias
Feedback e melhorias
1 semana
Interações e indicadores
Utilizamos tooltips como ferramenta de interação entre usuário e tutorial. Além de oferecerem uma breve explicação, os tooltips contém:
CTAs de voltar/avançar para o próximo passo;
Indicador numérico do estágio do tutorial.
Outros fluxos do Walkthrough
No total, participei da construção de 8 fluxos de Walkthrough para o app Let's Atlantica.
Fluxo de reserva - Primeiro acesso
Contexto: No app Let's Atlantica, o usuário pode explorar a plataforma sem a necessidade de fazer login. Porém, é solicitado o acesso a conta a partir do momento em que ele deseja fazer uma reserva de quarto.
Desafio: Pensar em um fluxo de reserva de quarto para usuários que ainda não possuem cadastro ou que ainda não efetuaram login no app.
Solução: A solução para este fluxo foi pensar em uma forma de autenticação sem senha, diminuindo atritos de acesso como:
- Criar e decorar uma senha;
- Recuperar uma senha esquecida.
Insights
Além dessa jornada ser por autenticação sem senha, eliminamos a necessidade de pagamento neste fluxo, ação que seria efetuada somente no check-in.
Com estes insights, o caminho torna-se mais fluido, diminuindo as chances de desistência e frustração do hóspede na sua jornada de reserva de quarto.
Chaves digitais
O que são: As chaves digitais são credenciais eletrônicas que substituem o cartão físico ou a chave tradicional do quarto do hotel. Nos hotéis da AHI, o hóspede recebe a chave em um aplicativo no celular e pode destrancar a porta aproximando o smartphone da fechadura.
O que fiz: A minha função neste projeto foi criar o design destas chaves digitais, que variavam em orientação e tipo de fidelidade.
Plano de Fidelidade: Além de funcionarem como chave, estes cartões também funcionavam como um indicativo do plano de membros de cada hóspede. Membros que atingiam um certo numero de hospedagens eram elegiveis a um determinado plano, obtendo beneficios exclusivos como quartos premium, serviços de massagem, cortesias, etc.
Para isso, foram necessários criar 5 cartões distintos: Não membros, Membros, Silver, Gold e Platinum.
Primeiros testes
A primeira versão dos cartões não obteve a aprovação dos clientes. Esperava-se que eles fugissem um pouco do perfil de cartões bancários.
Versão definitiva
Apos alguns testes, elaboramos uma nova versão das chaves. Uma versão mais simpática, que enfatizava o elemento gráfico do logo e as cores de cada tipo de plano.
Aplicação das chaves na UI
Apos alguns testes, elaboramos uma nova versão das chaves. Uma versão mais simpática, que enfatizava o elemento gráfico do logo e as cores de cada tipo de plano.
Documentação do Design System
Neste projeto, fiquei encarregado de documentar o Design System do Let's Atlantica. A documentação foi importante para auxiliar desenvolvedores a implementarem o sistema da forma correta, além de ser um arquivo sempre disponível para consulta.
O escopo deste projeto delimitou-se em documentar os fundamentos do sistema e a anatomia dos componentes e suas especificações visuais, estados e acessibilidade.
Fundamentos
Cores, tipografia, espaçamento, ícones, border radius, etc.
Cores
Neste Design System, as cores foram separadas entre:
Primitive colors: cores em sua forma bruta, sem contexto de uso.
Color Tokens: cores usadas com contexto de uso, como light/dark mode.
Tipografia e espaçamento
Componentes
Botões, inputs, tags, cards, etc.
Anatomia
Ilustra a composição de elementos de um componente e suas medidas.
Especificações e modos light/dark
Demonstra os estilos, estados e modos (light/dark) de um componente.
Conclusão e aprendizados
Foram mais de 2 anos trabalhando em um aplicativo com inúmeros recursos e funcionalidades a serem desenvolvidas. Seguindo o modelo de metologias ágeis, aprendi a projetar fluxos, interfaces e produtos de maneira rápida e prática, além de entender o funcionamento e a construção de um design system, tudo com feedback constante de gerentes de projeto e desenvolvedores.
Apesar de ser uma maneira eficiente de se fazer pequenas entregas em curto tempo, o método ágil pula etapas importantes do processo de design centrado no usuário, como uma pesquisa aprofundada e testes com usuários.
Dessa forma, concluo que tive uma boa experiência prática realizando este projeto ao atingir as expectativas que gerentes, programadores e stakeholders esperavam. Porém, finalizamos o projeto com uma etapa de pesquisa superficial que talvez dificulte a entender as reais necessidades do usuário do aplicativo futuramente, o que pode acabar custando caro para as empresas envolvidas.
