Ver
Case
Ajudo empresas e suas equipes de produtos
a criar experiências de usuário agradáveis.

Designer
digital
projetando
para
experiencia
do usuário

Trabalhos

Trabalhos selecionados

Possuo no meu repertório conhecimentos em 
pesquisa de UX, prototipagem rápida, facilitação de workshops, visual design com boas práticas de acessibilidade.

Trabalhos selecionados

Possuo no meu repertório conhecimentos em 
pesquisa de UX, prototipagem rápida, facilitação de workshops, visual design com boas práticas de acessibilidade.

SOBRE

Mirante-Sesc

Meu propósito é transformar vidas por meio de soluções, usando o design para criar conexões e promover mudanças.

Integro inovação, sustentabilidade e tecnologia para aumentar o impacto, promovendo inclusão, fortalecendo comunidades e melhorando o bem-estar coletivo.

VALORES QUE ME MOVEM

Com vasta experiencia no mercado, como product designer atuei em consultoria, startups e bancos.
Meu foco é o segmento financeiro, especialmente em seguros.

Posiciono meu perfil como profissional generalista, o que me permite atuar em diversas frentes do design de produto.

Sou autodidata, comunicativo, colaborativo, curioso, empático, resiliente e adaptável. O que fundamenta minha base para atender às necessidades do usuário, colaborar em equipe e criar soluções de UX eficazes em um ambiente de trabalho dinâmico.

Resultados e Impactos:

Lucros de 15 milhões/Ano

Simplificando jornada de ofertas de um grande banco

Redução de perdas em -22%

De custo operacionais para um time de backoffice

Redução de esforço -43,7% CES

Modernizando um sistema legado

Alocação de recursos financeiros

Cruciais para uma promissora startup de investigação de dados em escala global de Londres, a partir de um protótipo apresentado ao conselho.

Repertório

01.

UX

Usabilidade

Acessibilidade

Experiência Emocional

Especialização em projetar interfaces e interações que melhoram a usabilidade, acessibilidade e prazer do usuário, garantindo uma jornada fluída e agradável.

02.

System thinking

Interconectividade

Causalidade Circular

Propósito e Função

Ver e abordar problemas e soluções de forma holística. Capacidade de analisar e integrar diversos componentes de um sistema para criar soluções holísticas que atendam a complexas exigências operacionais e estratégicas.

03.

Product Thinking

Foco no problema

Visão de longo prazo

Iteração Orientada
por feedback

Aptidão para conceber e otimizar produtos, combinando necessidades de negócios, expectativas do usuário e viabilidade técnica, visando a máxima eficácia e inovação.

04.

Data Analysis

Qualidade dos dados

Rigor analítico

Comunicação de Insights

Proficiência em coletar, analisar e interpretar grandes volumes de dados para extrair insights acionáveis que direcionem decisões estratégicas e melhorem o desempenho geral.

05.

Service design

COCriação

Foco no usuário

prototipagem iterativa

Competência para criar e aprimorar serviços, focando na integração efetiva de todos os pontos de contato e processos, de modo a proporcionar uma experiência excepcional e coesa para o usuário.

Design,
Product,
Business,
Innovation.

plugins premium WordPress

Estudo de casO

Fechar

BV SEG

Este case detalha a modernização do sistema de seguros do Banco BV, transformando um legado em uma ferramenta eficiente.


O projeto superou desafios de usabilidade e autonomia, resultando em uma interface moderna e melhor experiência do usuário.


Por meio de pesquisa e validação contínuas, a operação foi otimizada, gerando ganhos financeiros e redução de custos. Liderado por uma equipe dedicada, o BV Seg mostra como uma abordagem estratégica impulsiona a eficiência e a satisfação dos colaboradores.


Explore o case completo para entender seus impactos no negócio.

HIGHLIGHTS

2021/2023

Resultados e Impactos:

R$15,4+ MM/ano

Em ganhos estimados

-22%

Em custos operacionais

-43,7% CES

de redução de esforço

Impressões QualitativaS:

Maior eficiência operacional com menos tempo em tarefas manuais.
Melhoria na qualidade dos dados, reduzindo erros e retrabalho.
Aumento na satisfação e autonomia dos colaboradores.
Consistência visual e funcional, alinhada ao design system.

Pesquisa e planejamento​

Imersão com o cliente
Pesquisa de mercado e tendências
Benchmarking
Análise de público-alvo e stakeholders
Diagnóstico do sistema

Execução do Projeto:​

Desenvolvimento de plataforma de cadastro de produtos
Implementação de sistema de ofertas e coberturas
Criação de visão 360º do cliente
Prototipagem e validação contínuas

Tecnologias e Ferramentas:​

Figma

Card sorting

Wireframing

Análise de dados e relatórios

INTRODUÇÃO

Início do projeto​

O projeto BV Seg começou em dezembro de 2021 com a necessidade de modernizar o sistema de backoffice de seguros do Banco BV, anteriormente conhecido como Segp. O objetivo era empoderar a operação com funcionalidades robustas e uma interface moderna que atendesse às demandas tecnológicas atuais.

Necessidade identificada

A necessidade foi identificada pela comunidade de seguros, que enfrentava dificuldades com o sistema legado. A UI ultrapassada, a falta de rastreabilidade, e a dependência de hardcode para cadastro de produtos criaram um ambiente de baixa autonomia e usabilidade confusa.

Importância da ação

Era crucial agir para reduzir a curva de aprendizagem, melhorar a autonomia dos usuários e solucionar problemas de usabilidade. O projeto visava transformar a experiência dos operadores e otimizar a eficiência operacional.

PROBLEMA

Arquitetura de Software Defasada

O sistema legado não atendia mais aos requisitos modernos de arquitetura de software, dificultando a integração com parceiros e o cumprimento das normativas da SUSEP. Essa defasagem tornava impossível a implementação de novos recursos essenciais, como o cadastro de produtos de seguros na modalidade cartões, crucial para atender às demandas atuais do mercado.

Dores levantadas

  • Curva de Aprendizagem Longa: Novos usuários demoravam para se adaptar ao sistema.
  • Baixa Autonomia: Dependência de squads para cadastros em hardcode.
  • Usabilidade Confusa: Sobreposição de cadastros e regras mal definidas.
  • Arquitetura Defasada: A estrutura não atendia mais às demandas tecnológicas modernas.

Impacto no negócio

  • Ineficiência Operacional: As limitações do sistema resultavam em processos manuais demorados e retrabalho, impactando negativamente a produtividade.
  • Impossibilidade de Expansão: A arquitetura desatualizada impedia o banco de escalar suas operações, integrar novos parceiros ou adaptar-se rapidamente às mudanças do mercado.

PLANEJAMENTO

Organização e etapas

O planejamento inicial envolveu uma pesquisa detalhada, incluindo entrevistas com stakeholders e grupos focais para identificar problemas e oportunidades. A equipe adotou métodos de card sorting, análise de dados disponíveis e benchmarking para embasar as decisões.

Desafios superados

  • Limitações de Pessoas e Tempo: A equipe enfrentou limitações de recursos humanos e prazos apertados.
  • Ferramentas Adequadas: Utilização de ferramentas como wireframes e protótipos de média/alta fidelidade para visualização e validação das soluções.

IMPLEMENTAÇÃO

Execução do projeto

O projeto foi implementado de maneira cíclica e contínua, com fases de discovery e delivery. A prototipagem rápida forneceu uma visão concreta do futuro, guiando os próximos passos.

Superando desafios

Adaptar-se às mudanças inesperadas, como novas informações ou tecnologias, foi essencial. A equipe manteve comunicação constante com os desenvolvedores para garantir que o produto final estivesse alinhado com a visão inicial.

Experiencias entregues

Cadastro, consulta e edição de produtos de seguros

Primeiro fluxo do novo sistema projetado e subido para produção, é o CORE de toda a operação.

Distribuição e gerenciamento de ofertas

Seja por parceiros ou linhas de negócio, o jeito que a comunidade de Seguros trabalha suas ofertas evoluiu, com personalização e rastreabilidade.

Gráficos e relatórios

Relatórios específicos e personalizado, com possibilidade de espelhamento, fornecendo alta personalização e visão de dados.

Modalidade cartões

Uma das premissas do novo sistema é a flexibilidade e adaptação a mudanças e tendencias. Foi o caso da modalidade cartões em cadastro de produtos de seguros.

Visão 360º

Histórico com todas as informações necessárias para que o operador de seguros atenda as necessidades dos clientes com agilidade e eficiência.

BV Seg está em produção
e em constante evolução.

RESULTADOS

Impacto da Reformulação do Sistema BVSeg

R$15,4+ MM/ano

Em ganhos estimados

-22%

Em custos operacionais

-43,7% CES

de redução de esforço

Impressões Qualitativas:

Eficiência operacional, redução do tempo em tarefas manuais e repetitivas.

Qualidade dos dados, menos erros e retrabalho, com maior rastreabilidade.

O mapeamento da jornada permitiu detectar uma oportunidade crucial e implementar uma experiência que encurtou significativamente o tempo de cadastro de novos parceiros.

Melhoria na usabilidade do BVSeg, mitigação de riscos no desenvolvimento.

Satisfação dos colaboradores, facilidade de uso e maior autonomia nas operações.

UI alinhada com design system, consistência visual e funcional, facilitando adição de novos componentes.

A modernização trouxe uma
experiência aprimorada para os
usuários, encurtando o tempo de
cadastro de novos parceiros e
melhorando a qualidade dos dados.

EQUIPE

CINTHIA MANSO

Product Manager

Bruno da Silva

Product Designer

Marcelo Silva

Tech-lead | Front-End

Ton moreira

Back-End

Jerry Gilbert

Back-End

Matheus Loriato

API/Front | QA Tester 

Juliana Teixeira

Scrum Master

Ana Luiza Santos

Jovem Aprendiz

Nossa filosofia
— Somos um time que
trabalha para o cliente,
valoriza o aprendizado
contínuo, movidos por
resultados, promovemos a
diversidade e inclusão,
e acreditamos no poder
da colaboração.

APRENDIZADOS

O que funcionou bem

  • Pesquisa eficaz para compreender a visão dos usuários.
  • Colaboração estreita entre PD, PM e Tech Lead.
  • Prototipagens rápidas para visualizar e guiar o delivery estratégico.

O que poderia ser diferente

  • Envolver a célula de DesignOps desde o início.
  • Maior integração com outras áreas e mapeamento ágil de stakeholders.

CONCLUSÃO

O case BV Seg demonstrou como um projeto bem planejado e executado pode transformar a operação de uma empresa, trazendo benefícios significativos em termos de eficiência e satisfação dos usuários. A abordagem colaborativa e o foco na usabilidade foram cruciais para o sucesso do projeto.

Vamos construir
algo grandioso
juntos?

Estudo de casO

Fechar

University extension
courses platform

O projeto foi focado em reformular uma plataforma educacional digital de cursos de extensão universitária.

O objetivo era melhorar a experiência de usuários, tornando a interface mais acessível e intuitiva, facilitando o processo de inscrição e gerenciamento de cursos, tanto para alunos quanto para professores.

Com a aplicação de métodos de UX, incluindo entrevistas e análises comportamentais, o redesign trouxe melhorias significativas.

Por razão de NDA alguns dados serão ocultados.

HIGHLIGHTS

2024

Resultados e Impactos:

+28%

Taxa de inscrição

-28%

Bounce rate

Ganho de eficiência de gestão

Para os professores

Impressões QualitativaS:

Usuários relataram uma experiência de uso mais fluida e organizada, com melhorias perceptíveis na navegação e no tempo gasto para realizar tarefas simples como inscrição e monitoramento de progresso.

Pesquisa e planejamento​

Entrevistas com alunos e professores
Análises de comportamento com Google Analytics e Hotjar
Mapeamento das jornadas de usuário e identificação de pontos críticos de navegação
Definição de personas para guiar as decisões de design

Execução do Projeto:​

Redesign da interface
Simplificação dos formulários de inscrição
Criação de dashboards para professores acompanharem o progresso dos alunos
Testes de usabilidade contínuos

Tecnologias e Ferramentas:​

Figma

FigJam
Google Analytics
HotJar

INTRODUÇÃO

Início do projeto​

O projeto foi desenvolvido para uma universidade pública em São Paulo, visando a criação de uma plataforma online para cursos de extensão universitária. O objetivo era simplificar a experiência de inscrição e gestão dos cursos para alunos e professores, em um ambiente digital acessível e seguro.

PROBLEMA

Dificuldades de Navegação e Cadastro na Plataforma Educacional

Os alunos enfrentavam uma alta taxa de abandono durante o processo de inscrição devido à falta de clareza e complexidade na plataforma atual, que não facilitava a navegação. Já os professores relataram dificuldades em cadastrar cursos, devido a formulários extensos e mal estruturados, resultando em frustração e desistência.

PLANEJAMENTO

Organização e etapas

O planejamento inicial envolveu uma pesquisa detalhada, incluindo entrevistas com stakeholders e grupos focais para identificar problemas e oportunidades. 

Desafios superados

  • Limitações de Pessoas e Tempo: A equipe enfrentou limitações de recursos humanos e prazos apertados.
  • Ferramentas Adequadas: Utilização de ferramentas como wireframes e protótipos de média/alta fidelidade para visualização e validação das soluções.
  • Ausência de dados: Infelizmente, não havia dados históricos disponíveis, pois as ferramentas de captura de dados não haviam sido implementadas anteriormente.
  • Sistema legado: Devido à burocracia e legado técnico de uma instituição acadêmica pública, o desenvolvimento de software foi delicado. Adaptamos processos para lidar com limitações e particularidades técnicas do sistema.

Público

Pesquisa e Entendimento Profundo dos Usuários

Conhecer os usuários é essencial. Neste projeto conhecemos e conversamos com professores, alunos, administradores do sistema e com os colaboradores de secretarias internas. Foram realizadas entrevistas de profundidade, gravações de telas e análise de usabilidade da plataforma vigente.

Grupo de usuários

O projeto envolveu dois perfis principais de usuários: professores e alunos.
Eles foram divididos em dois grupos: heavy users (professores e alunos que utilizam frequentemente a plataforma) e light users (aqueles que utilizam esporadicamente).
Também foram incluídos usuários que não completaram cursos.

Dois usuários eram essenciais para entendimento do uso da plataforma: professores e alunos. Professores inserem os dados dos cursos que serão oferecidos ao público da universidade e o público geral. Por conta das normas a serem respeitadas pela universidade pública, os formulários são extensos, complexos e demandam grande esforço dos docentes.

Os alunos, por sua vez, precisam acessar a plataforma para se inscrever, matricular e acompanhar sua evolução nos cursos, além de retirada de certificados e atestados. A área de login não é clara para os alunos e o processo de inscrição é confuso e complexo, gerando uma alta taxa de abandono do processo de inscrição.

Personas

JORNADA

A análise das jornadas dos usuários, tanto alunos quanto professores, revela diversos pontos de frustração no uso da plataforma. Ambos enfrentam problemas relacionados à complexidade e falta de clareza no fluxo de navegação. Os alunos têm dificuldade em localizar o login e completar a inscrição, enquanto os professores lutam com um formulário extenso e mal estruturado para a criação de cursos. Essas jornadas destacam a necessidade de melhorias na usabilidade, como a introdução de fluxos simplificados, progress bars, e áreas logadas intuitivas, melhorando a experiência e eficiência.

Highlights do Aluno

Problemas identificados: O site apresentava uma interface confusa, com uma área de inscrição difícil de localizar e ausência de uma área logada. A página de inscrição era extensa e desorganizada, resultando em uma alta taxa de abandono.

Oportunidades: Melhorar a visibilidade do login, criar uma estrutura intuitiva para o formulário com o uso de um progress bar e organizar uma área de aluno dedicada, com informações claras sobre o progresso das inscrições.

Highlights do Professor

Problemas identificados: O formulário de criação de cursos era longo e desestruturado, sem indicar o esforço necessário, resultando em abandono.

Oportunidades: Inserir um stepper para dividir o formulário em etapas mais claras, além de adicionar uma área de upload de documentos e um sistema de acompanhamento para facilitar a criação e gestão dos cursos.

Jornada do professor
Jornada do aluno

USERFLOWS

Reestruturação do Login

Foi criada uma página única de login para todos os usuários. A partir dos dados inseridos, os usuários são direcionados automaticamente para suas respectivas áreas.

Área do Aluno

Na área logada, foi adicionada a pesquisa de cursos, mantendo o aluno na plataforma. O processo de inscrição foi simplificado com um formulário de stepper e progress bar, permitindo acompanhamento do progresso e carga de trabalho, além da adição de uma seção de upload de documentos para facilitar as inscrições.

Área do Professor

Seguindo as normas da universidade, o formulário foi reorganizado, e apesar de não poder ser reduzido, foi adicionado um stepper e progress bar para que os professores soubessem a carga total de trabalho. Também foi criada uma área de upload e assinatura de documentos para simplificar a finalização da criação de cursos.

Login
Professor
Aluno

Plataforma

A Prova de Conceito (POC) foi desenvolvida para atender duas tarefas principais: a criação e disponibilização de cursos pelos professores e a inscrição dos alunos nesses cursos. Ambas as tarefas foram analisadas e reestruturadas para melhorar a usabilidade. O objetivo era permitir que os administradores da plataforma identificassem possíveis melhorias, aumentando as conversões e a eficiência das interações dos usuários.

 

Execução do projeto

No vídeo acima, as melhorias feitas na área do Aluno e no processo de inscrição. Antes, a plataforma apresentava problemas graves de navegabilidade: não havia uma área de login visível, a arquitetura da informação era confusa, e a taxa de abandono era de 98%. Os alunos não conseguiam localizar a página de inscrição ou confirmar se o processo havia sido concluído.

Para os professores, o formulário de cadastro de cursos era desorganizado e longo, levando de 3 a 5 horas para ser preenchido, sem uma estrutura clara ou informações sobre os próximos passos após o cadastro.

Superando desafios

O projeto enfrentou desafios devido à atuação majoritariamente assíncrona, o que dificultava a validação iterativa das soluções. Para manter o progresso sem gerar gargalos, foi necessário adaptar a comunicação e os processos. Vídeos detalhados foram gravados com apontamentos e trocados entre a equipe de design, engenheiros de software e professores da universidade. Essa abordagem garantiu que todos os envolvidos, mesmo à distância, pudessem revisar e validar as propostas, mantendo o projeto fluindo de maneira eficiente.

IMPLEMENTAÇÃO

Execução do projeto

O redesign da plataforma focou em três pilares: acessibilidade, usabilidade e eficiência. Para os alunos, foi criado um novo sistema de login mais intuitivo, com uma área de inscrição simplificada, utilizando stepper e progress bar. Para os professores, a reorganização dos formulários tornou o processo de criação de cursos mais claro, oferecendo uma visão mais objetiva do esforço necessário.

 

Superando desafios

O projeto enfrentou desafios devido à atuação majoritariamente assíncrona, o que dificultava a validação iterativa das soluções. Para manter o progresso sem gerar gargalos, foi necessário adaptar a comunicação e os processos. Vídeos detalhados foram gravados com apontamentos e trocados entre a equipe de design, engenheiros de software e professores da universidade. Essa abordagem garantiu que todos os envolvidos, mesmo à distância, pudessem revisar e validar as propostas, mantendo o projeto fluindo de maneira eficiente.

DESIGN

Por ser uma Prova de Conceito (POC) de média fidelidade, o design foi simplificado, focando apenas nas informações essenciais para os usuários. As exigências de acessibilidade foram respeitadas, com especial atenção para usuários com deficiências visuais. Após a aprovação da POC, foram incorporados mais recursos de acessibilidade. Abaixo, você pode ver parte da documentação do desenvolvimento das telas. Devido a um acordo de confidencialidade (NDA), algumas telas não podem ser exibidas.

 

RESULTADOS

Impacto da Reformulação do Sistema BVSeg

+28%

Taxa de inscrição

+28%

Bounce rate

Ganho de eficiência de gestão

Para os professores

Impressões Qualitativas:

Usuários relataram uma experiência de uso mais fluida e organizada, com melhorias perceptíveis na navegação e no tempo gasto para realizar tarefas simples como inscrição e monitoramento de progresso.

A modernização trouxe uma
experiência aprimorada para os
usuários, encurtando o tempo de
cadastro de novos cursos e
melhorando a qualidade dos dados.

EQUIPE

Bruno da Silva

UX/UI Desginer

Karina Cardenas

UX/UI Desginer

Estudo de casO

Fechar

DATAVIZ AIRBNB

O desafio consistiu em desenvolver um protótipo de dashboard de visualização de dados para a Cluster Design, focado na análise de reservas, receitas e devoluções do Airbnb.

O projeto foi desenvolvido para ser responsivo, com versões para desktop e mobile, e foi entregue em 48 horas.

A proposta central era transformar um conjunto limitado de dados em uma interface intuitiva e visualmente acessível, que pudesse ser facilmente navegada por diferentes stakeholders.

HIGHLIGHTS

/2023

Resultados e Impactos:

Embora o uso final do protótipo não tenha sido divulgado, a entrega dentro do prazo foi bem-sucedida, com um protótipo navegável que atendeu aos requisitos de alta fidelidade e responsividade. O projeto destacou a minha capacidade de trabalhar com prazos curtos e exigências de alto nível, entregando uma solução clara e funcional para a Cluster Design. Apesar da natureza do projeto de curto prazo, ele demonstrou como uma boa estruturação e priorização dos dados pode ajudar a transformar informações complexas em decisões estratégicas.

Impressões QualitativaS:

 

O feedback inicial do cliente foi extremamente positivo, especialmente em relação à criatividade e simplicidade na apresentação dos dados. A abordagem minimalista foi elogiada por não sobrecarregar o usuário com informações desnecessárias e por facilitar a navegação intuitiva entre diferentes visualizações. Houve também um destaque para a atenção dada à identidade visual do Airbnb, garantindo que o design fosse alinhado à marca e fácil de compreender.

planejamento

Devido ao prazo de 48 horas, o planejamento foi focado em:

  • Entendimento escopo
  • Definição
  • Divisão de tarefas.

Execução do Projeto:​

  • Análise do wireframe
  • Design das telas para desktop
  • Adaptação da UI para mobile
  • Prototipação

Tecnologias e Ferramentas:​

  • Figma
  • Adobe Illustrator
  • Google Fonts
  • Inspirações em Dataviz

INTRODUÇÃO

Contexto e Desafio

A Cluster Design me procurou com um pedido urgente: desenvolver um protótipo de visualização de dados para desktop e mobile em apenas 48 horas. A solução precisava apresentar informações chave sobre reservas, receitas e devoluções do Airbnb, permitindo que stakeholders pudessem tomar decisões com base nos insights apresentados.

 

No entanto, poucos dados foram fornecidos, e o maior desafio era criar uma interface que fosse clara, eficiente e responsiva. O cliente esperava uma solução de alta fidelidade que seguisse a identidade visual do Airbnb e seguisse as melhores práticas de Dataviz.

ESTRATÉGIA

Abordagem Estratégica

Mobile-First? Adaptabilidade ao Contexto

Embora a solicitação inicial mencionasse uma abordagem mobile-first, optei por iniciar o design com o foco no desktop, onde a densidade de dados e a visualização seriam mais complexas de resolver. Após estabelecer uma base sólida no desktop, adaptei a interface para mobile, garantindo que a navegação e a experiência de usuário fossem tão fluídas quanto no desktop.

 

Isso permitiu otimizar o processo de design, sem sacrificar a clareza visual ou a usabilidade nas diferentes plataformas.

PROCESSO

Wireframe e Estrutura

O primeiro passo foi analisar o wireframe fornecido e entender os componentes principais do dashboard. Identifiquei os seguintes elementos chave:

  • Indicadores principais: Quantidade de reservas, receita total e devoluções.
  • Gráficos de linha: Para visualização da evolução das reservas e receitas.
  • Tabela de classificação: Top 30 cidades e países em termos de receita e reservas.

Com isso em mente, iniciei a criação do layout, cuidando para manter a simplicidade visual, mas sem comprometer a riqueza de informações.

Componentes de UI

  • Cards informativos para destacar as métricas principais, permitindo uma visão geral rápida.
  • Gráficos de linha intuitivos e fáceis de interpretar, mostrando a evolução das reservas e receitas ao longo do tempo.
  • Tabela interativa, onde o usuário poderia alternar entre cidades e países e filtrar as informações conforme necessário.

Ferramentas Utilizadas

Usei o Figma como ferramenta principal para esboçar e prototipar as telas de alta fidelidade. Ao mesmo tempo, pesquisei paletas de cores e tipografia alinhadas à identidade visual do Airbnb, mantendo consistência e clareza nas informações.

IMPLEMENTAÇÃO

Dado o prazo curto, foquei em soluções rápidas e eficientes para entregar um resultado de alta qualidade. Algumas das melhorias e decisões-chave tomadas incluem:

Design responsivo

Garantindo que o layout se adaptasse perfeitamente tanto em telas grandes (desktop) quanto em pequenas (mobile), mantendo a experiência de uso consistente.

Hierarquia visual

Priorizei os dados mais importantes usando contraste, tamanhos de fonte e espaçamento adequados, garantindo que o usuário pudesse absorver as informações rapidamente.

Gráficos simplificados

Usei gráficos de linha com interatividade mínima para facilitar a leitura dos dados ao longo do tempo, sem sobrecarregar o usuário com muitas opções de interação.

DESKTOP

Na versão desktop, mantive um layout de painel claro e organizado, onde as principais métricas estavam sempre visíveis na parte superior (indicadores de receita e reservas). Abaixo, os gráficos e a tabela proporcionavam uma visão detalhada e filtrada das cidades e países com maior desempenho.

 

O foco foi garantir que o usuário pudesse obter insights rapidamente, mesmo com um grande volume de dados.

MOBILE

Adaptar o layout do dashboard para o mobile foi um desafio, dada a limitação de espaço para visualização de grandes volumes de dados. Minha solução foi:

  • Scroll horizontal: Para as tabelas e gráficos, permitindo que o usuário percorresse as informações de forma natural, sem sobrecarregar a tela inicial.
  • Simplificação dos elementos: Mantive apenas as informações mais relevantes na tela inicial, com a possibilidade de expandir dados conforme a necessidade.

CONCLUSÃO

Dado o prazo curto, foquei em soluções rápidas e eficientes para entregar um resultado de alta qualidade. Algumas das melhorias e decisões-chave tomadas incluem:

Resultado Final

Apesar do prazo apertado de 48 horas, consegui entregar um protótipo navegável de alta fidelidade tanto para desktop quanto para mobile, alinhado às expectativas da Cluster Design e às melhores práticas de UI e Dataviz. O feedback inicial foi extremamente positivo, destacando a clareza do design e a intuitividade da navegação.

 

Este projeto me permitiu reforçar minhas habilidades em UI Design responsivo, além de testar meus conhecimentos em visualização de dados, mesmo em situações de alta pressão.

 

Considerações

Trabalhar nesse desafio foi uma experiência intensa, mas gratificante. Com base no escopo e no prazo, fui capaz de estruturar soluções simples, claras e eficientes para transformar dados complexos em insights visualmente acessíveis. Esse case foi uma adição valiosa ao meu portfólio, demonstrando minha capacidade de trabalhar com projetos rápidos e orientados a resultados.

 

Aprendizados

  • A importância de adaptar a abordagem de design ao contexto do projeto, mesmo quando o cliente solicita “mobile-first”.
  • Como entregar um protótipo de alta qualidade em prazos curtos, priorizando clareza e eficiência.
  • A necessidade de manter o design simples e acessível, sem comprometer a funcionalidade e a interatividade.

Estudo de casO

Fechar

BTTECH

O desafio consistiu em desenvolver um protótipo de dashboard de visualização de dados para a Cluster Design, focado na análise de reservas, receitas e devoluções do Airbnb.

O projeto foi desenvolvido para ser responsivo, com versões para desktop e mobile, e foi entregue em 48 horas.

A proposta central era transformar um conjunto limitado de dados em uma interface intuitiva e visualmente acessível, que pudesse ser facilmente navegada por diferentes stakeholders.

HIGHLIGHTS

/2023

Resultados e Impactos:

Embora o uso final do protótipo não tenha sido divulgado, a entrega dentro do prazo foi bem-sucedida, com um protótipo navegável que atendeu aos requisitos de alta fidelidade e responsividade. O projeto destacou a minha capacidade de trabalhar com prazos curtos e exigências de alto nível, entregando uma solução clara e funcional para a Cluster Design. Apesar da natureza do projeto de curto prazo, ele demonstrou como uma boa estruturação e priorização dos dados pode ajudar a transformar informações complexas em decisões estratégicas.

Impressões QualitativaS:

 

O feedback inicial do cliente foi extremamente positivo, especialmente em relação à criatividade e simplicidade na apresentação dos dados. A abordagem minimalista foi elogiada por não sobrecarregar o usuário com informações desnecessárias e por facilitar a navegação intuitiva entre diferentes visualizações. Houve também um destaque para a atenção dada à identidade visual do Airbnb, garantindo que o design fosse alinhado à marca e fácil de compreender.

planejamento

Devido ao prazo de 48 horas, o planejamento foi focado em:

  • Entendimento escopo
  • Definição
  • Divisão de tarefas.

Execução do Projeto:​

  • Análise do wireframe
  • Design das telas para desktop
  • Adaptação da UI para mobile
  • Prototipação

Tecnologias e Ferramentas:​

  • Figma
  • Adobe Illustrator
  • Google Fonts
  • Inspirações em Dataviz

INTRODUÇÃO

Contexto e Desafio

A Cluster Design me procurou com um pedido urgente: desenvolver um protótipo de visualização de dados para desktop e mobile em apenas 48 horas. A solução precisava apresentar informações chave sobre reservas, receitas e devoluções do Airbnb, permitindo que stakeholders pudessem tomar decisões com base nos insights apresentados.

 

No entanto, poucos dados foram fornecidos, e o maior desafio era criar uma interface que fosse clara, eficiente e responsiva. O cliente esperava uma solução de alta fidelidade que seguisse a identidade visual do Airbnb e seguisse as melhores práticas de Dataviz.

ESTRATÉGIA

Abordagem Estratégica

Mobile-First? Adaptabilidade ao Contexto

Embora a solicitação inicial mencionasse uma abordagem mobile-first, optei por iniciar o design com o foco no desktop, onde a densidade de dados e a visualização seriam mais complexas de resolver. Após estabelecer uma base sólida no desktop, adaptei a interface para mobile, garantindo que a navegação e a experiência de usuário fossem tão fluídas quanto no desktop.

 

Isso permitiu otimizar o processo de design, sem sacrificar a clareza visual ou a usabilidade nas diferentes plataformas.

PROCESSO

Wireframe e Estrutura

O primeiro passo foi analisar o wireframe fornecido e entender os componentes principais do dashboard. Identifiquei os seguintes elementos chave:

  • Indicadores principais: Quantidade de reservas, receita total e devoluções.
  • Gráficos de linha: Para visualização da evolução das reservas e receitas.
  • Tabela de classificação: Top 30 cidades e países em termos de receita e reservas.

Com isso em mente, iniciei a criação do layout, cuidando para manter a simplicidade visual, mas sem comprometer a riqueza de informações.

Componentes de UI

  • Cards informativos para destacar as métricas principais, permitindo uma visão geral rápida.
  • Gráficos de linha intuitivos e fáceis de interpretar, mostrando a evolução das reservas e receitas ao longo do tempo.
  • Tabela interativa, onde o usuário poderia alternar entre cidades e países e filtrar as informações conforme necessário.

Ferramentas Utilizadas

Usei o Figma como ferramenta principal para esboçar e prototipar as telas de alta fidelidade. Ao mesmo tempo, pesquisei paletas de cores e tipografia alinhadas à identidade visual do Airbnb, mantendo consistência e clareza nas informações.

IMPLEMENTAÇÃO

Dado o prazo curto, foquei em soluções rápidas e eficientes para entregar um resultado de alta qualidade. Algumas das melhorias e decisões-chave tomadas incluem:

Design responsivo

Garantindo que o layout se adaptasse perfeitamente tanto em telas grandes (desktop) quanto em pequenas (mobile), mantendo a experiência de uso consistente.

Hierarquia visual

Priorizei os dados mais importantes usando contraste, tamanhos de fonte e espaçamento adequados, garantindo que o usuário pudesse absorver as informações rapidamente.

Gráficos simplificados

Usei gráficos de linha com interatividade mínima para facilitar a leitura dos dados ao longo do tempo, sem sobrecarregar o usuário com muitas opções de interação.

DESKTOP

Na versão desktop, mantive um layout de painel claro e organizado, onde as principais métricas estavam sempre visíveis na parte superior (indicadores de receita e reservas). Abaixo, os gráficos e a tabela proporcionavam uma visão detalhada e filtrada das cidades e países com maior desempenho.

 

O foco foi garantir que o usuário pudesse obter insights rapidamente, mesmo com um grande volume de dados.

MOBILE

Adaptar o layout do dashboard para o mobile foi um desafio, dada a limitação de espaço para visualização de grandes volumes de dados. Minha solução foi:

  • Scroll horizontal: Para as tabelas e gráficos, permitindo que o usuário percorresse as informações de forma natural, sem sobrecarregar a tela inicial.
  • Simplificação dos elementos: Mantive apenas as informações mais relevantes na tela inicial, com a possibilidade de expandir dados conforme a necessidade.

CONCLUSÃO

Dado o prazo curto, foquei em soluções rápidas e eficientes para entregar um resultado de alta qualidade. Algumas das melhorias e decisões-chave tomadas incluem:

Resultado Final

Apesar do prazo apertado de 48 horas, consegui entregar um protótipo navegável de alta fidelidade tanto para desktop quanto para mobile, alinhado às expectativas da Cluster Design e às melhores práticas de UI e Dataviz. O feedback inicial foi extremamente positivo, destacando a clareza do design e a intuitividade da navegação.

 

Este projeto me permitiu reforçar minhas habilidades em UI Design responsivo, além de testar meus conhecimentos em visualização de dados, mesmo em situações de alta pressão.

 

Considerações

Trabalhar nesse desafio foi uma experiência intensa, mas gratificante. Com base no escopo e no prazo, fui capaz de estruturar soluções simples, claras e eficientes para transformar dados complexos em insights visualmente acessíveis. Esse case foi uma adição valiosa ao meu portfólio, demonstrando minha capacidade de trabalhar com projetos rápidos e orientados a resultados.

 

Aprendizados

  • A importância de adaptar a abordagem de design ao contexto do projeto, mesmo quando o cliente solicita “mobile-first”.
  • Como entregar um protótipo de alta qualidade em prazos curtos, priorizando clareza e eficiência.
  • A necessidade de manter o design simples e acessível, sem comprometer a funcionalidade e a interatividade.