Centralizando
a Gestão de Instalações
da Bosch
Design de um sistema unificado para aumentar a eficiência operacional
Visão geral
Como designer de interface no projeto DiOS da Bosch, minha tarefa foi unificar sistemas de gestão dispersos e pouco eficientes em uma plataforma web centralizada.
O resultado foi uma interface fácil de usar, com um mapa interativo que facilitou o gerenciamento de todo o campus, tornando os processos operacionais mais simples. Foram redesenhados 6 fluxos, com mais de 30 telas.
Produto
Sistema web
Meu papel
UI/UX Designer
Time
2 UI/UX Designers, 1 PO, 3 Devs e 1 supervisão UX
Workflow
Discovery
Design
Delivery
Stakeholders e User interviews
Desk research
User flows
Benchmarking
Lo-fi wireframes
Prototypes & usability tests
Techinical constraints
Concepts & UI design
Handoff
Discovery
O processo teve início com uma série de entrevistas aprofundadas com stakeholders da Bosch e com potenciais usuários do sistema, a fim de entender suas necessidades e expectativas em relação à plataforma. Durante essas conversas, o principal insight que emergiu foi a necessidade de desenvolver uma solução extremamente intuitiva e clara, uma vez que o sistema seria utilizado por pessoas sem conhecimento técnico. Esse ponto foi crucial, pois indicou que a simplicidade e a facilidade de uso seriam fundamentais para o sucesso da ferramenta.
Com esse entendimento em mente, realizamos um benchmarking detalhado, estudando soluções no mercado, suas abordagens de design e as melhores práticas adotadas por empresas de diferentes setores. A partir dessa análise, ficou claro que a solução precisaria ser altamente visual, com interfaces gráficas e interativas que facilitassem a interação do usuário com a plataforma, sem sobrecarregar ou confundir. Isso orientou o design da interface, garantindo que fosse acessível e eficiente para todos os tipos de usuários, independentemente de seu nível de conhecimento técnico.
Ineficiência operacional
Sem uma visão precisa do consumo em tempo real, era impossível otimizar o uso de energia, o que gerava desperdício.
Objetivo
Desenvolver uma solução digital que unificasse e simplificasse a gestão para todos os níveis e perfis de usuários, desde gestores até colaboradores.
Fragmentação de sistemas
O controle de ar condicionado, iluminação, sensores e câmeras era realizado em plataformas distintas, sem uma visão integrada.
Ineficiência operacional
A equipe de manutenção enfrentava dificuldades para identificar problemas rapidamente, e a gestão era reativa, em vez de proativa.
Definição e ideação
A concepção de utilizar um mapa interativo como elemento central de navegação surgiu como a alternativa mais eficaz para atender à expectativa de intuitividade identificada nas pesquisas. Através desse recurso, seria possível oferecer ao usuário uma visão global do campus de forma simples e direta, facilitando a compreensão do sistema e o acesso rápido às principais funcionalidades.
Partindo dessa premissa, estruturamos diagramas de fluxo que representavam as tarefas mais relevantes para cada perfil de usuário. Exemplos disso incluem cenários como “gestor ajusta a temperatura de um andar” ou “colaborador reporta uma luz queimada”. Esses fluxos detalhados não apenas ajudaram a validar se a navegação seria clara e objetiva, como também foram fundamentais para definir prioridades no desenvolvimento. Dessa forma, conseguimos alinhar as necessidades práticas do dia a dia com a proposta de valor da solução, garantindo que as funcionalidades críticas fossem entregues primeiro, sempre mantendo o foco na experiência do usuário.
Design do mapa
O Desafio do Mapa Isométrico: O principal obstáculo de UI foi o desenvolvimento do mapa do campus em estilo isométrico. Esse elemento não poderia ser apenas funcional, oferecendo recursos de interação e controle, mas também precisava ser visualmente claro e de fácil reconhecimento por qualquer colaborador, independentemente do seu nível de familiaridade com a tecnologia. A representação deveria transmitir de forma imediata a estrutura física do espaço, permitindo que o usuário identificasse setores, prédios e andares com naturalidade. Esse equilíbrio entre usabilidade e fidelidade visual foi um ponto-chave para garantir que o mapa se tornasse o núcleo da experiência da plataforma.
1
A etapa inicial foi identificar e catalogar todos os prédios e estruturas essenciais que precisariam ser representados no sistema.
3
O primeiro passo foi identificar todos os prédios e estruturas relevantes.
2
Com base na planta, vetorizamos a silhueta de cada edifício e estrutura reconhecível.
4
A partir do Google Maps e de fotografias do local, foi possível levantar e extrair as principais características visuais da área.
5
Incluir a climatização em tempo real também se mostrou um fator essencial para os colaboradores. As condições climáticas muitas vezes dificultavam o trabalho dos técnicos, que precisavam se deslocar e até subir em prédios para realizar reparos. Com a integração dessas informações diretamente no sistema, foi possível reduzir a necessidade de saídas em situações desfavoráveis, trazendo mais segurança e eficiência para a equipe. Essa funcionalidade tornou o processo de manutenção muito mais ágil e prático, permitindo que decisões fossem tomadas de forma remota e com maior precisão.
Design System
Para assegurar consistência visual em todos os fluxos e painéis de controle do sistema, desenvolvemos um style guide completo, que serviu como referência central para a equipe. Esse guia definiu padrões de cores, tipografia, espaçamento, hierarquia de informação e boas práticas de uso dos elementos visuais, garantindo uniformidade na experiência do usuário.
Além disso, criamos um repositório inicial de componentes reutilizáveis — como botões, cards, ícones, campos de formulário e outros elementos básicos de interface. Esse acervo permitiu maior agilidade no desenvolvimento e facilitou a manutenção do projeto, já que qualquer ajuste em um componente era automaticamente refletido em todo o sistema. Essa abordagem não apenas otimizou o trabalho da equipe de design e desenvolvimento, como também estabeleceu uma base sólida para a evolução futura da plataforma, aproximando-se de um design system escalável.
A Solução: Um Painel de Controle Inteligente
A solução final resultou em uma plataforma web unificada, capaz de oferecer uma visão completa e integrada (360º) de todo o campus da Bosch. O sistema foi construído sobre dois pilares principais, que se complementam para atender tanto às necessidades operacionais do dia a dia quanto às demandas estratégicas de gestão:
Mapa Interativo: Funciona como o núcleo da navegação, permitindo que qualquer usuário explore visualmente o campus. Através dele, é possível clicar em prédios, andares ou salas específicas e acessar de forma imediata os controles e o status dos equipamentos de cada local. Essa abordagem visual simplifica a interação, tornando a experiência mais intuitiva para diferentes perfis de usuários.
Dashboards de Monitoramento: Voltados especialmente para gestores e equipes técnicas, oferecem uma visão clara e consolidada do consumo de energia em tempo real, além do status detalhado de todos os equipamentos. Esses painéis possibilitam identificar rapidamente falhas, acompanhar métricas de desempenho e embasar decisões de forma orientada por dados, promovendo eficiência e redução de desperdícios.
Com esses dois pilares, a plataforma unifica o controle, amplia a transparência operacional e cria um ambiente digital que favorece tanto a praticidade no uso cotidiano quanto a gestão estratégica do campus.
Resultados
Apesar de não ter tido acesso às métricas pós-lançamento, o projeto foi entregue com sucesso e recebeu feedback muito positivo da equipe da Bosch durante os testes de usabilidade. A navegação pelo mapa foi destacada como especialmente intuitiva e clara, atingindo um dos principais objetivos do projeto. Além disso, a centralização de todas as informações em um único local foi reconhecida como um avanço significativo para a eficiência da equipe de gestão, facilitando a tomada de decisões e o acompanhamento das operações de forma mais ágil e organizada.
Aprendizados
Este projeto reforçou para mim a importância de transformar informações técnicas complexas em representações visuais claras, que sejam imediatamente compreensíveis e funcionais para o usuário final.
O êxito do mapa isométrico demonstrou como uma metáfora visual bem construída pode potencializar a usabilidade e tornar produtos digitais mais intuitivos, facilitando a interação mesmo para usuários sem experiência técnica. Essa experiência reforçou meu entendimento de que design eficaz vai além da estética, sendo uma ferramenta estratégica para conectar tecnologia e pessoas.
