Building playful systems to teach tech skills to 2+ million learners.

Role: Senior Product Designer, Design Engineering, Art Direction
Company: Codédex
Timeline: 2024 - present
Platform: Desktop and mobile web

Since 2024, I've led design and co-led product strategy at Codédex, an early-stage startup that makes learning to code feel as fun and easy as playing an RPG.

As the first design hire on a team of <10, I've focused on building foundational, scalable systems—design systems for rapid shipping, content systems for quality learning experiences, and AI systems to address critical bottlenecks.

Together, we've transformed a scrappy MVP with just 150K users into an learning platform loved by a community of 2 million (and counting).

Go to Codédex
Site audit

Codédex before Design

Before I joined, Codédex was built without a dedicated designer and was pieced together by our founder, engineers, volunteers, and Fiverr artists.

My first task was a site audit of major UX issues and design debt:

  • No design system: Engineers built everything without one, slowing development and creating inconsistencies
  • Accessibility issues: Without a considered color system, there was often poor contrast and unreadable text across Light/Dark modes
  • Navigation problems: Courses were buried in confusing, nested dropdown menus. Within a course, it wasn't always intuitive how to progress forward.
  • Inconsistent art styles: Pixel artwork was sourced from many places, with no unified art direction
  • Lack of critical features: There was no way to check if your code was correct, due to how hard it was scale manually written test cases
Codédex's original landing page
The course landing page. In the global nav, links to courses were nested in confusing dropdown menus.
The course Learning Environment.
Areas of our website such as our on-platform community (OPC) were designed by volunteers, who didn't have a design system to reference. Accordingly, these pages ended up adding to design debt.
Design Systems

Creating a bespoke, pixel art inspired design system

My first contribution was Codédex's first design system. The goal was to nip our design debt in the bud, ship faster, and create a base for a playful design language that compliments high-quality learning, rather than competes with it.

This foundational work reduced design-related bug reports, eliminated accessibility issues related to Light/Dark modes, and now lets our 2 engineers ship small features with minimal design review.

Plus, Codédex's gamified look-and-feel is frequently cited in rave reviews from learners on Product Hunt and Trustpilot!

For typography, I paired Pixel Grid, a versatile pixel font with multiple styles, with Mulish for body text. To narrow down to the right pairing, I created a series of sample mockups (like the one above) to test different configurations.
I created a palette from tried-and-true Tailwind CSS colors and created semantic color tokens that allow us to easily design and build between light and dark modes.
When designing unique components, I like making things easy for engineers. I built these pixel buttons in Figma, AND prototyped them myself in code using crazy CSS hacks (see my demo in Codepen!).
We reuse this pixel art style border across different elements in our design system, including Course cards, content containers, modals, and more.
These design system elements made it easier to revamp critical parts of the platform, like the user dashboard. It's also made designing between Light / Dark modes a no-brainer.
Content Systems

Building flexible containers for learning content

Interactive coding courses are our bread and butter, and high-quality learning experiences are what drive paid-user retention for Club subscriptions.

My job was to make the core learning experience to be as easy-to-use (and fun!) as possible–while enabling curriculum developers to rapidly release new content.

Over several phases, I standardized design patterns across the course experience to prioritize simple and clear navigation, modular components, mobile-friendliness, and learner motivation–all while cutting development time.

This work has scaled our course library from 17 to 26 in two years, and gave us flexible building blocks for rapid feature experimentation.

In fall 2024, we revamped our high visibility course landing pages. Previously, these pages were built separately in the codebase and had to be updated one by one...eek!
In spring 2025, I led a major overhaul of course navigation—including a consistent and intuitive placement of "Back" and "Next" buttons across all content types, and a simplified header that conveyed site architecture and lesson progress.
Though our core learning loop is best experienced on desktop, I made sure our mobile web navigation followed mobile app best practices such as progressive disclosure and thumb-zone ergonomic layouts, so that complex flows–like code exercises—could still be easy to complete.
To keep momentum going after a "Chapter", we show immersive "Cutscenes" with the player's avatar, sound effects, and XP/badges earned. I designed a reusable template that scales across all courses, with ability to customize copy.
To improve paid retention, we now show recommended learning paths (e.g. Data Science, Web Development) after completing a course–with the goal of increasing the % of learners who start a second course after a first one within 30 days.
We've also been able to reuse these patterns to quickly ship similar features such as Challenge Packs, Daily Code Challenges, and Builds (an on-platform code editor),
AI Systems

Leveraging AI for personalized, contextual code feedback

As a small, resource-conscious team, we have experimented a lot with AI features. One of our most successful applications focused on addressing two recurring pain points from user interviews and bug reports: no way to check answers, and no real-time help when stuck.

In 2025, I scoped and designed an embedded LLM-powered system that reads the lesson context and the learner's code to evaluate correctness—integrated with an AI companion offering hints, feedback, and step-by-step guidance in a chat interface.

Since beta-testing this feature in spring 2025, we've rolled it out to 10+ courses and dramatically cut dropoff and bug reports tied to answer-checking and lesson help.

When you answer incorrectly, you can get an AI-generated hint specific to your code. To add learning value, we prompt the system to avoid giving the answer directly, and instead offer friendly, guiding feedback.
To account for AI error, I designed around possible false negatives, where a correct answer was evaluated as wrong. We built a way to report false negatives and let the learner keep learning. During beta testing, this allowed engineers to refine the model's accuracy to over 97%.
I combined code evaluation with our existing AI chat bot into one integrated help system. Any hints get saved to the chat log, where learners can ask follow-ups or get more suggestions.
As a resource-minded team, costs of AI usage were a big consideration while scoping this feature, given potential the volume it could create. I saw an opportunity to manage our costs–while upselling Club subscriptions within the feature–by limiting the chat bot to 5 responses per day for free users.
Art Direction

Worldbuilding through art and storytelling

We think of gamification beyond just XP, streaks, and badges. Inspired by fantasy role-playing games, we want learners to feel like they're stepping into an immersive, open world full of new adventures and exciting challenges.

Playing the role of an art director, I've unified our artwork into a cohesive vision. I created moodboards, led team brainstorming workshops to draft an internal "Story Bible", and directed contract artists to bring the world of Codédex to life.

Creating a product heavy in pixel art comes with unique challenges—especially in art of restraint. While I reserve pixel art for smaller flourishes within in-product flows, I dial it up for high-touch marketing surfaces where telling the story about Codédex matters the most.

Our new landing page launched in summer 2025, featuring animated landscape pixel art by MeeNa Ko (Moaw) (and parallax effect prototyped in by me in HTML, CSS, and JavaScript). Aesthetically, I wanted us to evoke Studio Ghibli, Pokémon, and cozy farming sims like Stardew Valley in a post-apocalyptic, Solarpunk world.
I also worked with MeeNa to create a series of pixel art banners for our 5 most popular courses: (in order) Python, HTML, CSS, JavaScript, and SQL. Inspired by video game tropes, I wanted to establish each course as a distinct "land" in the world of Codédex. This work also set the tone and visual language for future pixel artists.
This initial worldbuilding culminated in our v1.0 launch video created by the team at Flavor TV, which heavily borrows from our current in-product artwork.
We're continuing to add features that immerse learners into the world of Codédex. In December 2025, I worked with Azuna Pixels on spritesheets for a character customizer embedded into onboarding, just like playing an RPG game.

Thank you for coming along this adventure!

I couldn't have done this without my incredible teammates, our founder/CEO Sonny, and our community of learners.

To close out, here's some Codédex fanart I drew for one of our community Monthly Challenges. Can you guess which anime I used as a reference? Hint: it's a shounen!

See more projects