Role
UX & Visual Designer
Tools
Figma, Framer
Origin Story
So many platforms say “Everyone can code!” but then hit you with walls of text, dry links, and zero color. Original freeCodeCamp homepage? Stuck in that loop.
The goal: Give it a serious glow-up for Gen Z. Think:
What Was Broken?
How I Fixed It!
Hero Section = Animated Carousel
Multiple slides, each telling a part of the freeCodeCamp story (Learn to Code, Build Projects and Get Certified).
Slides auto-animate every 5 seconds (you control with swipe/click if you want).
Each slide pops with color + custom illustrations.
Friendly headlines, no tech jargon.
Colors That Spark Joy
Bright, contrast-heavy palette.
Real color logic—sections and buttons pop, but don’t burn your eyes.
Each icon and illustration matches the vibe (no clip-art cringe).
Motion That's Actually Useful
Animations guide you—cards bounce in, carousels glide, stats flip.
FAQ expands with soft animation (not jump scares).
Everything’s smooth, nothing’s extra.
Clear Journey, Zero Confusion
"Get Started" and "Browse Curriculum" are always up-front.
Certification options as bold, clickable cards—each with its own custom icon.
Impact stats and alumni stories showcase actual success (complete with photos, real titles).
Gen Z Proofing
Mobile-first. Looks great everywhere.
Easy to scan, not a novel to read.
Accessibility = required. Colors and motion work for everyone.
Social vibes: Community, alumni wins, global reach—front and center.
Quick Compare
Feature
Old
Glow-Up
First Impressions
Static, neutral, confusing
Animated, bold, bright, personal
Navigation
Lots of links everywhere
Minimal, easy, custom icons, big buttons
Storytelling
Wall-of-text, slow onboarding
Multi-slide carousel, snappy copy
Certification Cards
Text links, basic icons
Color, illustrations, animated
Testimonials
Text-only, small, easy to miss
Photo cards, animated reveals, real career wins
Accessibility
Basic, hit-or-miss
High contrast, reduced motion supported
The Results
Try It Yourself
The Takeaway
Design for Gen Z means actually caring how things look, move, and make you feel. Coding isn’t supposed to be cold or overwhelming—it should be your launch pad.
This redesign proves it: FreeCodeCamp is now bold, bright, mobile, inclusive, and built for your goals.
“Not just a learning site. A whole mood.”
— Nitin Bobade, Lead UX Designer