Kids for Code site
Link: kids4code.org
3…2…1…liftoff!
In early 2024, I started building a new website for Kids for Code, the coding education nonprofit I joined a few years ago on a whim—mostly because a friend asked me to. I was really surprised by how much I enjoyed it! I ended up really enjoying the feeling of satisfaction from teaching others, and I've stayed on for the past 3 years.
Going into this site redesign, my main goal was to help drive enrollment, especially for some of our smaller classes, like C++ 1 or Intro to UI Design, with a secondary goal of polishing our online presence for a more cohesive and professional look that still maintained a kid-friendly and playful spirit.
The Eagle has landed
The first thing visitors see when they visit kids4code.org is the landing page. First impressions are really important, so I went through a bunch of different iterations before settling on the one you see today.
This is the one I eventually settled on.
Below, you can see a few stats about our programs and organization as a whole: students taught, number of teachers, courses offered, average parent satisfaction (from student surveys).
What's your love language? I think you mean design language…
As part of this overhaul of our site, I developed a comprehensive design system which are currently in use in places like our social media and internal documents. You'll see it throughout this case study.
The main course(s)
Let's take a look at arguably the second most important page, the Courses page listing all of our class offerings.
Ok, that was a very long screenshot. Let's chat a little.
We have separate, semi-independent teams for Python, C++, Java, etc. I assigned each one of these teams a separate color, which they now use for all their newly produced class slides and color-codes them across the entire site.
Course pages
Each course has their own dedicated page with some unique graphics/decorations unique to their team.
For example, each course has their own background & icons. The thick white border around each icon was meant to represent a sticker (I was inspired by the amazing Sketch website for this—unfortunately they've redesigned since then though).
Room for improvement?
I'm pretty proud of what I've achieved here! This is the website I'm arguably proudest about (well as of March 2024 … so far). With that said, no one—and no design—is perfect, so let's talk about a few areas where things could be improved.
Dark mode support: currently there is no dark mode support. Adding this would be great for the eyes of everyone viewing at 1AM on a Sunday.
Less white space: Less is more, but I think it would be good to reduce some of the whitespace and replace them with some colorful illustrations/graphics, or just little moments of whimsy to add some playfulness to the site.
That's all from me for now! You can use the button below to return home.