top of page
The challenge
Creating a responsive website for kids that addresses race, inclusivity, and bias comes with several design, UX, and content challenges. Kids have short attention spans, so teaching complex topics like racism and bias without making it feel like a lecture was difficult. Designing for different age groups and reading levels was the main focus. A 5-year-old processes information very differently from a 10-year-old, the website needed cater to varying comprehension levels while keeping a cohesive design.
Designing for different age groups and reading levels was the main focus. A 5-year-old processes information very differently from a 10-year-old, the website needed to cater to varying comprehension levels while keeping a cohesive design. Illustrating diversity can unintentionally fall into stereotypes. Looking at the research overview, on challenge in designing a kid-friendly website that promotes inclusivity is ensuring visual representation is diverse and authentic without unintentionally reinforcing stereotypes or tokenism. Showing kids of all backgrounds in everyday scenarios was essential.
Overall the design approach needed to prioritize engagement, inclusivity, and emotional connection while ensuring usability for young users. Keeping the learning playful giving scenarios where kids make decisions and learn about different cultures.
An empathy-driven playful learning
Since I needed to engage a diverse group of kids, and tweens a simple, minimal, and touch-friendly navigation was used to avoid frustration. Because our future is so technologically advanced the design was developed with a mobile-first experience in mind. A mobile-first was prioritized, optimizing navigation and interactions based on individual devices.
Learning is most effective when it is engaging, interactive, and rooted in empathy. By incorporating play into the learning process, we create experiences that foster curiosity, collaboration, and emotional intelligence.
Our user flow diagram maps out intuitive interactions that guide learners seamlessly through playful, yet purpose-driven activities. This structured yet flexible approach ensures a smooth learning journey, helping individuals connect with different perspectives while developing problem-solving skills. Whether through storytelling, role-playing, or hands-on experiences, empathy-driven playful learning nurtures both cognitive and emotional growth, making education more impactful and memorable.
Wireframes and prototypes
By defining the workflow first, I was able to develop more detailed wireframes that align with the user needs, ensuring a structured and intuitive experience.
-
Welcome and onboarding
-
Eductional stories and lessons
-
Gamified learning and activities
-
Self social learning
-
Parent and educator dashboard
-
Accessibility and support module
To bring the concept together, I developed detailed wireframes and interactive prototypes using Photoshop and Figma, that focus on intuitive navigation and user engagement. These tools allowed me to craft visually compelling layouts while ensuring an intuitive and user-friendly experience. The wireframes served as the blueprint, outlining key interactions and guaranteeing a seamless learning flow.
Discovery
The wireframes served as the foundation, mapping out key interactions, while Figma's prototyping capabilities enabled real-time testing and iteration. Visual design is always important for i.am.You campaign, so a lot of care was taken in sweating the details of this design.
Feedback revealed areas needing improvement, such as simplifying instructions, enhancing touch-friendly interactions, and ensuring diverse representation in avatars and storytelling elements. Additionally, accessibility testing helped refine features like voice narration, dyslexia-friendly fonts, and color contrast adjustments. These findings guided the next iteration, focusing on refining the experience to be more intuitive inclusive, and engaging for all users.
Pixel perfection
Reinforcing the importance of designing for diverse audiences, ensuring accessibility for all users, regardless of ability or background. By prioritizing intuitive navigation, clear messaging, and inclusive visuals, we established a user experience that resonates with a boarder community. These principles will continue to guide our approach to future social good initiatives.
Optimizing the experience
To create a more seamless and engaging user journey, we focused on refining key aspects of the website. Enhancing navigation, improving interactive elements, and expanding inclusive design choices, ensured that every user could engage with the platform. Accessibility was also a top priority. Our key refinements included:
-
Refining navigation
-
Improving engagement elements
-
Expanding inclusive design options
-
Enhancing accessibility features
Fine-tuned the navigation, interactions, and content structure to create a smoother, more intuitive journey. Subtle animations were added to create smooth transitions, enhancing interactivity without distracting from the core content.
.png)
To create a deeper emotional connection, I structured the content around compelling real-life impact stories, engaging visuals, and clear messaging. Concise, scannable text ensures accessibility, while strong visual hierarchy and typography guide users through key messages.
Takeaways and future vision
By optimizing the website for engagement and ease of use, I recognized the potential for digital platforms to drive real-world change. This insight will shape future projects by ensuring that social good platforms remain adaptable, scalable, and equipped with data-driven strategies to maximize their long-term impact.
i.am.You emphasized the power of storytelling in digital experiences. Through user research and community engagement, we learned that people connect deeply with authentic, relatable content. We aim to integrate more human-centered design strategies, leveraging real stories to create meaningful interactions and inspire action.
Project overview
Title: i.am You (Social good) Website, App Client: Google Certification
Industry: Empathy-Driven Design (Kids)
Duration: November 25, 2022 - January 18, 2023
Role(s): UX/UI, Branding, Graphics, Visual Design
Tool(s): Adobe Creative Suite, Adobe XD, Paper & Pencil, Research, Testing & Iteration, Slack
​
bottom of page