Sistema de Notificação IoT

Processo de Design

Pesquisa

• Realizada uma auditoria abrangente do sistema de notificações existente, identificando questões chave relacionadas com branding, acessibilidade e usabilidade.
  
  

• Analisadas as melhores práticas para design de e-mails, explorando o uso de emojis para adicionar valor sem comprometer o profissionalismo. Após uma avaliação cuidadosa, os emojis foram incluídos seletivamente onde melhoraram a clareza e a relevância.
  
  

• Colaborado com equipas dos Produtos, Engenharia e P&D para documentar todos os tipos de notificações existentes e futuras, garantindo que a estrutura pudesse acomodar requisitos diversificados.

Desenvolvimento de Estrutura

Concebidos componentes modulares no Figma com uma abordagem mobile-first, assegurando que atualizações nos designs móveis se refletissem automaticamente nas variantes para desktop, para maior eficiência. Estruturados os componentes hierarquicamente, marcando elementos individuais como não publicados enquanto apenas a molécula final do template estava pronta para a biblioteca.

Publicada uma biblioteca reutilizável de modelos organizados em Alertas, Onboarding e Sumários, permitindo uma mensagem consistente em todas as campanhas.

Integradas propriedades dinâmicas, como alternâncias booleanas e opções de seleção, para permitir rápida personalização e geração de conteúdo otimizada.

Garantido que as linhas de assunto fossem consistentes e agregassem valor sempre que possível.

Wireframes e Protótipos

Criados componentes individuais para cada tipo de notificação, aproveitando sistemas de design existentes onde aplicável e introduzindo designs únicos para casos de uso especializados.

Aproveitados plugins do Figma como “Text Counts” para validar limites de caracteres SMS e acomodar dados variáveis como nomes de equipamentos e localizações dentro da restrição de 160 caracteres.

Conectados componentes a um template raiz, que serviu como a estrutura principal para notificações. Isto assegurou flexibilidade enquanto mantinha a integridade estrutural.

Fórmulas de Conteúdo

Desenvolvidas fórmulas de conteúdo padronizadas adaptadas a casos de uso específicos, incluindo emails de Alertas e Resolvido. Estes templates usavam placeholders dinâmicos para detalhes como timestamps, limites e passos acionáveis.

Design Visual

Empregado um layout em padrão F para priorizar informações críticas mantendo uma aparência profissional e limpa. Ajustados elementos de layout para chamar a atenção a áreas críticas, como CTAs acionáveis e detalhes urgentes, melhorando a capacidade do usuário de tomar decisões informadas.

Otimizado contraste de cores, alturas de linha e tamanhos de fonte para atender aos padrões de acessibilidade AA, garantindo legibilidade para todos os usuários. Também utilizei a biblioteca de ícones existente para consistência, permitindo aos usuários distinguir rapidamente entre múltiplas notificações.

Detalhes Técnicos

Proposta uma mudança de domínio para no-reply@versahub.com, melhorando a identidade da marca e a confiança.

Recomendada a certificação BIMI para aumentar a credibilidade e sinalizar autenticidade para os usuários.

Adicionada uma mensagem de rodapé esclarecendo que a caixa de entrada não era monitorada, estabelecendo expectativas claras para o usuário e minimizando possíveis frustrações.

Iterações

Revisada a estratégia de notificações para abordar preocupações dos usuários sobre alertas repetidos. Enquanto alertas horários foram inicialmente considerados para problemas persistentes, a solução final incluiu uma alternância de usuário para controlar a frequência de notificações.

Para SMS, avaliou-se a inclusão de imagens OpenGraph para aumentar o engajamento, mas optou-se por alertas apenas de texto para evitar informações redundantes ou excessivas. Conteúdo de SMS refinado iterativamente, equilibrando brevidade e clareza, e eliminadas informações redundantes para garantir que os detalhes essenciais destacassem.

Incorporados timestamps, detalhes da unidade afetada, e campos de sala em alertas de equipamentos para melhorar o contexto e a ação.

Colaboração

Defendida a utilização do Microsoft Loop para alinhar equipas multifuncionais (Produto, Engenharia, P&D), facilitando colaboração e acompanhamento de requisitos. Arquivos Figma organizados com status claro, marcando componentes como “Pronto para Desenvolvimento” ou “Resolvido” para manter clareza durante transferências.