Lighthouse App

Conduzi o projeto com metodologia ágil e foco em escalabilidade — componentização e melhores práticas para mobile e web — entregando um produto robusto e preparado para crescer. Tão decisiva quanto o design foi a gestão de expectativas: reuniões semanais de alinhamento com Operações, TI e gerência para apresentar avanços, coletar feedback e negociar prazos, mantendo o escopo do MVP firme até a entrega.I led the project with an agile methodology and a focus on scalability — componentization and best practices for mobile and web — delivering a robust product ready to grow. As decisive as the design was managing expectations: weekly alignment meetings with Operations, IT and management to present progress, gather feedback and negotiate deadlines, holding the MVP scope steady through delivery.

1. No papel principalIn the leading role Lead Product Designer Discovery, arquitetura da informação, design system mobile e protótipo navegável de ponta a ponta.Discovery, information architecture, the mobile design system, and an end-to-end navigable prototype.
2. Em cena comSharing the stage with Operações · TI · GerênciaOperations · IT · Management Reuniões semanais de alinhamento para apresentar avanços, coletar feedback e negociar prazos.Weekly alignment meetings to present progress, gather feedback, and negotiate deadlines.
3. Em dois métodosIn two methods Ágil & ComponentizaçãoAgile & Componentization Processo focado em escalabilidade, com ênfase em melhores práticas para interfaces mobile e web.A process focused on scalability, emphasizing best practices for mobile and web interfaces.
4. Com a deixaOn the cue Decisão mais ágilFaster decisions Agilizar a tomada de decisão e criar um canal de comunicação eficiente entre as equipes.Accelerate decision-making and build an efficient communication channel between teams.

O projeto começou com sessões de Design Thinking que reuniram stakeholders e usuários-chave de Operações, TI e gerência para mapear os desafios do legado e as necessidades reais em campo. Cada achado da pesquisa resultou em uma decisão de design concreta, que orientou o escopo do MVP no corredor norte.The project opened with Design Thinking sessions that brought together stakeholders and key users from Operations, IT, and management to map the legacy's challenges and real field needs. Each research finding resulted in a concrete design decision, which guided the MVP's scope on the northern corridor.

1. A decisão é móvelDecisions are mobileMobile-first, sem concessão A tela de 414 px virou o palco principal; o painel web ficou como apoio de configuração. O dado vai até o gestor — no pátio ou em trânsito —, não o contrário.The 414 px screen became the main stage; the web panel stayed as a configuration aid. Data travels to the manager — in the yard or in transit — not the other way around.
2. Densidade exige hierarquiaDensity demands hierarchyO card como átomo Um único componente de card, em variações de densidade, organiza o feed. O crítico salta primeiro; o detalhe se revela sob demanda — do feed ao Detalhamento.A single card component, in density variations, organizes the feed. The critical surfaces first; detail is revealed on demand — from the feed to the Detail view.
3. Cada perfil, sua visãoEach profile, its viewCódigo de cor & componentização Uma faixa de prioridade por cor dá leitura instantânea de status, e a componentização adapta a densidade a cada nível de permissão sem fragmentar a interface.A priority color stripe gives instant status reading, and componentization adapts density to each permission level without fragmenting the interface.

O coração do MVP é a biblioteca. O card tem 8 formatos de densidade, multiplicados pelo código de cor — mas a biblioteca completa vai muito além: passa de 170 componentes, com gráficos, tabelas, formulários e ícones, cada um com seus estados. Foi essa componentização que deu consistência entre telas, perfis de permissão e contextos de dado — e o que permitiu construir um protótipo de ponta a ponta com um só designer. The heart of the MVP is the library. The card has 8 density formats, multiplied by the color code — but the full library goes far beyond: over 170 components, with charts, tables, forms and icons, each with its states. This componentization gave consistency across screens, permission profiles and data contexts — and is what made it possible to build an end-to-end prototype with a single designer.

Board do design system — toque para examinar ampliadoDesign system board — tap to examine enlarged

• ✶ Figma Design system mobile próprio, componentes e protótipo navegável de ponta a pontaIn-house mobile design system, components, and an end-to-end navigable prototype
• ✧ Miro Design Thinking, mapeamento de fluxos e síntese da pesquisa com stakeholdersDesign Thinking, flow mapping, and synthesis of stakeholder research
• ⚙ Ágil & ScrumAgile & Scrum Ciclos curtos, reuniões semanais de alinhamento e handoff documentado para o devShort cycles, weekly alignment meetings, and a documented handoff to dev

1. Para a p. 04For p. 04

   Onde se imaginou um único card capaz de servir a todos os contextos de produção... — A realidade pediu oito variações modulares, cada uma afinada para um tipo de dado. A componentização foi o que tornou o produto escalável e preparado para outros corredores.

   Where we imagined a single card able to serve every production context... — Reality demanded eight modular variations, each tuned to a data type. Componentization is what made the product scalable and ready for other corridors.

2. Para a p. 11For p. 11

   Onde se subestimou o custo de prazos apertados e agendas conflitantes... — A gestão de relacionamento e expectativas mostrou-se tão decisiva quanto o design. Reuniões semanais de alinhamento mantiveram o escopo do MVP firme até a entrega.

   Where we underestimated the cost of tight deadlines and conflicting schedules... — Managing relationships and expectations proved as decisive as design itself. Weekly alignment meetings kept the MVP scope steady through delivery.

Materiais complementares que não pertencem ao fluxo principal, mas ampliam a leitura do processo: o recorte do escopo do MVP — o que entrou e o que ficou de fora — e o mockup de apresentação do aplicativo. Toque para examinar ampliado; o índice à esquerda navega entre as pranchas. Complementary materials that sit outside the main flow but broaden the read of the process: the MVP scope cut — what made it in and what stayed out — and the app's presentation mockup. Tap to examine enlarged; the index on the left moves between plates.

Escopo do MVP — o corte do que entra e do que fica de foraMVP scope — the cut of what's in and what's out Mockup de apresentação — login, feed & detalhamentoPresentation mockup — login, feed & detail