Safety Net

In an era where digital literacy is as crucial as traditional literacy, there is a growing and dangerous gap in public knowledge regarding online safety and digital well-being. Misinformation spreads rapidly, leaving communities, and particularly vulnerable groups like children, exposed to risks such as cyberbullying, privacy breaches, and online scams. Recognizing this critical issue within our own community, the challenge was to create a centralized, trustworthy, and accessible resource to combat this lack of information. The goal was to build an educational platform that could distill these complex topics into clear, digestible content suitable for a broad audience, including students, parents, and educators.

My Role

I led the design for this project, taking sole responsibility for the UI/UX and overall visual identity of the Safety Net website. Following the design phase, I transitioned to the development team, where I collaborated on implementing the front-end and helping to translate our shared vision into a functional and responsive platform.

The Process & Solution

Design

The core design goal was to create an online space that felt both trustworthy and approachable. Inspired by the clean and user-centric layout of platforms like "Wondermind," the design needed to be simple and non-intimidating to cater to a broad audience that included students, parents, and educators.

• Information Architecture:
  I chose a minimalist, card-based information architecture. The home page was intentionally simplified to feature only a grid of clearly labeled cards, each leading directly to an educational post. This direct-to-content approach eliminates distractions and allows users, especially children, to easily find and access the information they need.
• Visual Language:
  A friendly and accessible color palette was selected to create a welcoming environment. Fonts were chosen for their high legibility and clarity, ensuring the content was easy to read and understand, which is critical for building trust and effectively communicating important safety information.

Development

The website was developed using Next.js and TypeScript, following a mobile-first philosophy to ensure a seamless and accessible experience on all devices. We chose a static site generation approach, where the educational content was managed via a local JSON like file. This solution provided outstanding performance, enhanced security, and allowed for simple content updates without the overhead of a traditional database, making it ideal for a fast and reliable informational platform.

Technologies Used

Responsibilities

• Implementing the website's primary navigation and overall page structure.
• Building the foundational React components, such as the reusable cards for each post, based on my original Figma designs.
• Ensuring the mobile-first responsive design was correctly implemented in code.
• Connecting the components to the JSON data source to dynamically generate the educational posts.

The Outcome

The Safety Net website was successfully launched and is now live for public access. The project not only earned a high grade for its university submission but, more importantly, proved its real-world value when presented at a local elementary school. The students were highly engaged and participative, demonstrating the platform's effectiveness in making complex digital safety topics accessible and interesting for its target audience. The project achieved its core mission of creating a tangible, helpful resource for the community.