Evolução do Projeto Eir com foco na experiência do usuário

Processo de Design

Com o framework de Design Thinking de cinco fases do Stanford’s Hasso Plattner
Institute como base, refinei cada etapa da jornada do usuário:

Revolucionando a Experiência de Onboarding da Eir

Onboarding não é apenas uma introdução; é uma jornada de usuário transformadora que estabelece confiança, empoderamento e engajamento. Para a Eir, isso foi redefinido como um ponto de entrada de alto valor onde os usuários são calorosamente recebidos, informados e apoiados. Cada interação, seja para serviços financeiros, configurações de conta ou faturamento, é projetada para ser intuitiva e impactante, preparando o terreno para uma experiência empoderadora e centrada no usuário.

Ilustrações para Preencher Lacunas
Em áreas subutilizadas, incorporei ilustrações direcionadas, criando uma estética coesa e fluxo visual em toda a interface. Isso não apenas aprimorou a usabilidade, mas também transmitiu a identidade da marca de forma consistente e envolvente.

Abordando Desafios de Sistemas Legados

Navegar por sistemas legados exigiu planejamento meticuloso para garantir transições suaves, manipulação segura de dados e acesso ininterrupto ao usuário. Nossa solução foi um fluxo de registro robusto, porém flexível, oferecendo aos usuários a escolha de registro por email ou celular, proporcionando acessibilidade aprimorada e liberdade ao usuário.

User Flow Otimizado

Desenvolver o mapa de user flow me permitiu identificar potenciais pontos de atrito, como becos sem saída e loops redundantes, garantindo uma jornada fluida. Após o lançamento, monitoramento e testes contínuos permitiram otimização contínua para manter a experiência do usuário relevante e envolvente.

Centro de Notificações: Empoderando o Controle do Usuário

O Centro de Notificações dentro da plataforma Eir foi projetado para aprimorar o controle do usuário com opções simplificadas. Ao introduzir visualizações seletivas de notificações (“Todas”, “Não lidas”, “Não vistas”) e simplificar ações como “Marcar todas como lidas”, o Centro de Notificações se tornou um ponto central para navegação fácil e engajamento oportuno.

Fluxo de Portabilidade Simplificado

Para aprimorar a experiência do usuário durante a portabilidade de número, projetei um processo simplificado de três etapas focando em validação, input de informações essenciais e agendamento. Cada etapa é intuitiva, segura e amigável ao usuário, permitindo que os usuários façam a transição perfeitamente, abordando as demandas de segurança de dados e integridade do sistema.

Workshop: Card Sorting

Para aprimorar a experiência de navegação, um workshop foi conduzido utilizando a técnica de Card Sorting. Neste workshop, um conjunto de cartões representando várias funcionalidades de nossa plataforma SaaS foi preparado. O workshop reuniu equipes multifuncionais, incluindo membros de marketing, design e desenvolvimento, para colaborativamente organizar esses cartões em grupos ou categorias lógicas que fizessem sentido para eles.

Os participantes foram encorajados a organizar os cartões em grupos baseados na lógica que consideravam mais adequada. Este processo foi fundamental na formação da estrutura de navegação do aplicativo. Durante o workshop, discussões animadas foram incentivadas entre os participantes. Eles foram solicitados a articular o raciocínio por trás de seus agrupamentos de cartões, e insights valiosos foram registrados. Posteriormente, uma análise aprofundada dos dados coletados foi conduzida para identificar padrões e tendências emergentes. Esta análise servirá como base para informar o design da navegação do aplicativo.

Navegação Inferior

Com base nesses insights de nosso workshop de Card Sorting, chegamos a um mapa de site refinado que inclui elementos de navegação principais: ‘Fatura’, ‘Serviços’, ‘Início’, ‘Ofertas’ e ‘Ajuda’. Essas escolhas representam a sabedoria coletiva de nossas equipes multifuncionais, incluindo membros de marketing, design e desenvolvimento, que colaborativamente organizaram esses elementos em grupos lógicos que ressoaram com nossa abordagem centrada no usuário.

As discussões do workshop foram animadas, enquanto deliberávamos sobre a colocação de cada elemento dentro da UI. Os participantes expressaram suas opiniões sobre o melhor posicionamento, com frases como ‘Serviços deve ser fácil de encontrar, é isso que nossos clientes precisam!’ enfatizando a perspectiva centrada no usuário. ‘Fatura no menu é muito importante para nossos clientes’ validou ainda mais a decisão.

O debate continuou com considerações sobre ‘Início’, o coração do aplicativo, e ‘Ajuda’, a mão guia sempre confiável para os usuários. ‘Ofertas’ apresentou uma oportunidade empolgante, com nossa equipe ponderando o local ideal para exibir essas promoções. ‘Pense no que você clicaria primeiro; é Fatura para mim!’ capturou a essência de nossas deliberações cuidadosas.

‘Serviços – onde você espera vê-lo? Compartilhe seus pensamentos’ gerou insights valiosos, enquanto ‘Fatura ou Início? Vamos decidir qual vem primeiro!’ refletiu nosso compromisso com uma experiência focada no usuário. ‘Ajuda é essencial; qual é seu lugar no menu?’ resumiu a importância do suporte acessível.

Na Eir, como provedora líder de telecomunicações e banda larga, a segurança de dados para nossos clientes é uma preocupação primordial. Dado o cenário tecnológico em constante evolução, embarquei em um desafio: condensar a jornada do usuário para portabilidade de número em apenas três etapas essenciais. Este processo simplificado garante uma transição fluida e segura para nossos usuários.

Como parte desse esforço, estamos introduzindo uma nova funcionalidade chamada ‘Registrar’. Esta funcionalidade é projetada para segregar usuários com bancos de dados distintos, abordando certas limitações temporárias de forma inteligente.

No contexto da funcionalidade ‘Registrar’, apresentaremos uma série de mockups mostrando três etapas cruciais para facilitar o processo de portabilidade para nossos usuários:

Esses mockups e etapas ressaltam nosso compromisso em entregar uma experiência segura e amigável ao usuário, superando desafios temporários. Eles representam nossa dedicação em fornecer serviços de primeira linha aos nossos valiosos clientes.

Construindo um Design System Escalável com Material UI dos Tokens à Produção

Na Eir, liderei a criação de um design system abrangente partindo do zero, utilizando Material UI como framework base. Meu objetivo não era apenas criar uma biblioteca de componentes visualmente atraentes, mas estabelecer uma fonte única da verdade que eliminasse a lacuna entre design e engenharia, garantindo consistência, escalabilidade e manutenibilidade de longo prazo em uma plataforma que atende milhões de usuários.

Principais Resultados e Abordagem Técnica:

• Arquitetura Baseada em Tokens: Implementei um sistema rigoroso de tokens de design para cores, tipografia, espaçamento e breakpoints. Isso significava que as decisões de design não eram apenas especificações visuais, mas variáveis codificadas reutilizáveis que podiam ser atualizadas globalmente. Um ótimo exemplo da resiliência desse sistema veio anos depois, quando a marca atualizou sua paleta de cores primárias — a equipe de engenharia simplesmente alterou os valores dos tokens, e toda a interface refletiu a nova identidade sem uma única linha de código de UI ter sido reescrita.
• Princípios de Atomic Design: Estruturei a biblioteca de componentes seguindo a metodologia do atomic design, dividindo a UI em átomos (botões, campos de entrada), moléculas (barras de busca, grupos de campos), organismos (cabeçalhos, rodapés) e templates. Isso criou uma hierarquia clara e tornou o sistema intuitivo tanto para designers quanto para desenvolvedores entenderem e expandirem.
• Fluxo Figma-para-Código: Ao acoplar estreitamente a biblioteca de componentes no Figma com a implementação em React no Material UI, estabeleci um processo de handoff contínuo. Os componentes no Figma foram nomeados e organizados de forma idêntica às suas contrapartes no código, e criei documentação detalhada para estados, props e diretrizes de uso de cada componente. Isso reduziu o atrito entre design e desenvolvimento em cerca de 40%.
• Acessibilidade Incorporada: A acessibilidade não foi uma reflexão tardia — foi integrada a cada componente desde o início. Garanti que todos os componentes atendessem aos padrões WCAG 2.1 AA para contraste de cores, navegação por teclado e compatibilidade com leitores de tela. O design system tornou-se o mecanismo de garantia de acessibilidade, assegurando que qualquer nova funcionalidade construída com esses componentes fosse inerentemente mais acessível.
• Governança e Evolução: Estabeleci um modelo leve de governança, incluindo revisões regulares do design system e um processo claro de contribuição para novos componentes. Isso garantiu que o sistema pudesse evoluir junto com o produto sem se tornar caótico. O fato de o mesmo design system ainda ser ativamente utilizado hoje (com apenas atualizações em nível de tokens) é um testemunho de sua solidez estrutural.

Este design system não era apenas sobre consistência visual; foi um investimento estratégico na velocidade de desenvolvimento de produto da Eir. Ele capacitou múltiplas equipes multifuncionais a entregar funcionalidades mais rapidamente, com maior qualidade e com uma experiência de usuário unificada. A arquitetura baseada em tokens também o tornou “preparado para o futuro” — perfeitamente posicionado para suportar tecnologias emergentes como personalização orientada por IA, onde temas dinâmicos e variações de componentes podem ser controlados no nível dos tokens.