FreeCodeCamp
about.
FreeCodeCamp is a platform that helps people from all walks of life learn how to code for free. I joined the team as a volunteer designer because I deeply believe in their mission — and I wanted to help make learning more accessible, more intuitive, and more motivating.
I collaborated closely with the team to make sure our solutions were clear, encouraging, and inclusive. From simplifying the visual hierarchy to giving users more control over their experience, every decision was made with empathy in mind.
challenge.
FreeCodeCamp wanted to improve the user experience on multiple fronts: unify the site’s navigation, improve lesson filtering with accessible tags, and design a streak-tracking feature that would keep users motivated without adding pressure.
The site had inconsistent navigation bars, cluttered UI elements, and no effective way to visually group or highlight related lessons. The tag system, in particular, needed to be functional, clean, and accessible to a global audience—including users with visual impairments or limited tech experience.
Meanwhile, the streak feature needed to encourage learning progress with positive reinforcement—without discouraging users who needed to take breaks.
result.
To tackle these challenges, I broke down each problem into actionable goals and redesigned with user needs front and center.
Navigation Bar: I created a single, unified navbar across the site with a clearer hierarchy. I slightly increased its height for a cleaner feel, added visual breathing room, and made the “Donate” button a primary call to action—bold, visible, and aligned with client priorities. I also split utility actions like language switch and user settings into their own distinct, easy-to-find icons.
Lesson Tags: I designed a hidden accordion tag system that invites users to “Filter by topic,” reducing visual clutter. The tags were styled for readability, made slightly larger for accessibility, and grouped in a scrollable panel. I also included a visual cue showing the filter in use (e.g., “Filtering to only show steps with the tag <p>”), and made the tag links look like buttons to help non-technical users understand their function.
Streak Tracker: I added a friendly, encouraging yellow banner that celebrates streaks without pressuring users. It included a direct link to streak settings so users could opt out or modify how they track their progress—prioritizing mental wellness while still acknowledging achievements.
Throughout the project, I prioritized clean UI, accessibility best practices, and user autonomy—while staying aligned with FreeCodeCamp’s mission to make learning inclusive, intuitive, and empowering.
