Audience + Problem
The audience for this website consists of two key user groups: Children K-5 (ages 4-10) and their accompanying parents. I wanted the website to be accessible and engaging for children browsing alone, but also have access to more detailed information if their parents are present.
The main challenge was creating a site that could capture and retain a young user’s attention without any engineering support. Responsive design was especially important, since children often browse using smaller devices like phones and tablets. I also had to balance this project alongside my regular day-to-day responsibilities.
Role
UX/UI Designer
Tools
Adobe CC, Invision, Sketch
Goals
Although no specific goals were outlined for the project beyond “a refresh,” my research helped me define clear objectives. I aimed to make the new site responsive, easier to navigate, and more visually engaging for children.
Discovery + Research
With those goals in mind, I began by reviewing similar websites targeted at children, alongside a close analysis of the current site to understand what worked and what didn’t.
"Competitor" Analysis - I use competitor loosely here. Most of what I found related to the government was dead links and sites that were clearly afterthoughts tacked onto bigger websites. I found more success studying websites of children-adjacent topics like animals for their strengths and weaknesses.
Current Site Analysis - Reviewing the existing site helped me understand its content offerings and structure. While there were some thoughtful elements on individual pages, the overall experience lacked clarity and cohesion.
Findings
No modern children’s government websites stood out as examples
Vibrant, eye-catching colors were essential
Interactivity played a major role in maintaining attention
The previous site lacked logical information architecture
All links were displayed on the homepage with no guided flow
Pages with minimal content looked the same as content-rich ones
Design
I started the design phase by addressing the structural issues identified in the research, focusing on reorganizing the navigation system. Early wireframes explored solutions to the clunky sidebar-style menu used previously.
The original homepage for the Student Connection site
I also took a creative detour to explore logotype and favicon ideas, initially intending to apply the agency’s brand guidelines. However, the agency’s branding proved too restrictive for a child-focused palette, so I instead expanded on the existing color scheme to create something more playful and appropriate for the audience.
That first wireframe evolved into a high-fidelity version that I used to explore the capabilities of our chosen no-code website builder.
I spent a lot of time iterating within the builder testing layouts, adjusting content, and identifying constraints. While I wasn’t able to integrate the logotype into the navigation as planned, the favicon worked successfully.
Page structure continued to evolve throughout this process. I consolidated content where appropriate and split longer sections for better readability. I emphasized choice-based navigation so users could explore the site in ways that made sense to them. Staying loosely aligned with my wireframes allowed me to take advantage of built-in tools within the website builder, resulting in unique yet cohesive pages that supported the site’s overall visual identity.
Release
After a brief internal testing phase, the new Student Connection website was published. Feedback from previous users praised the updated layout and clearer presentation. Early data suggests that the interactive quizzes have been especially popular with young visitors.
I also used the website builder’s SEO tools and implemented a redirect from the previous site to the new one. I’m hopeful that continued usage and data collection will guide even more targeted improvements in future iterations.
Learn More About My Work