O Desafio
Em uma era onde a alfabetização digital é tão crucial quanto a tradicional, existe uma perigosa e crescente falha no conhecimento público sobre segurança e bem-estar digital. A desinformação se espalha rapidamente, deixando comunidades e grupos mais vulneráveis, como crianças e idosos, expostos a riscos como cyberbullying, vazamentos de dados pessoais e golpes online. Reconhecendo esse problema, o desafio era criar um recurso confiável e acessível para combater a falta de informação. O objetivo era construir uma plataforma digital onde poderíamos distribuir esses tópicos complexos em um conteúdo claro e fácil de entender para uma ampla audiência, incluindo estudantes, pais e educadores.
Meu Papel
Como líder de design neste projeto, me responsabilizei pela interface e experiência do usuário, além da identidade visual geral. Após a fase de design, colaborei com o time de desenvolvimento na implementação do front-end, ajudando a transformar nossa visão em uma plataforma funcional e responsiva.
O Processo & A Solução
Design
O objetivo principal do projeto era criar um espaço online que transmitisse confiança e acessibilidade. Me inspirei no layout limpo e centrado no usuário de plataformas como a "Wondermind", com um design simples e não intimidante para atrair a atenção do público-alvo, que inclui alunos, pais e educadores.
- Arquitetura das informações:
Optei por um layout minimalista, com posts organizados em cards. A página inicial foi intencionalmente simplificada, exibindo apenas os cards com conteúdo educacional. Essa abordagem direta facilita a localização do material pelos usuários. - Linguagem Visual:
Para criar um ambiente acolhedor, foi selecionada uma paleta de cores amigável e acessível. A escolha das fontes priorizou alta legibilidade e clareza, elementos cruciais para facilitar a leitura e a compreensão do conteúdo. Este cuidado é fundamental para construir confiança e comunicar efetivamente as informações de segurança.
Desenvolvimento
O site foi desenvolvido usando Next.js e Typescript, seguindo o modelo mobile first para garantir uma experiência perfeita e acessível em qualquer dispositivo. Escolhemos criar o site de forma estática, onde os conteúdos dos posts ficam guardados em um arquivo que funciona como um JSON. Essa solução garante melhor performance e segurança sem precisar de um banco de dados.
Tecnologias Usadas
Responsabilidades
- Implementar a navegação principal do site e estrutura básica das páginas.
- Construir os componentes React fundamentais, como os cards reutilizáveis para cada post, como no design original no Figma.
- Garantir que o design responsivo e mobile first fosse implementado corretamente no código.
- Conectar o front com os dados estáticos dos posts.
O Resultado
O projeto Safety Net foi entregue com sucesso e publicado via Vercel, ele não só garantiu uma boa nota para a disciplina no qual foi apresentado, mas também demonstrou sua eficácia no mundo real ao ser muito bem recebido em uma escola de ensino fundamental em Alagoas. A participação ativa dos estudantes evidenciou a capacidade da plataforma de tornar conteúdos complexos interessantes para o público-alvo.
Tenho um orgulho especial deste projeto, não apenas pelo seu resultado visual, mas principalmente pelo impacto direto que gerou na comunidade. Ele serve como um testemunho da minha capacidade de converter uma demanda social premente, como a lacuna na acessibilidade a informações de segurança, em uma solução digital que se destaca pela simplicidade, estética e facilidade de uso.
