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 been leading design and and co-leading 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

Prior to joining, Codédex was built without a dedicated designer and pieced together by our founder, engineers, occasional volunteers, and Fiverr artists.

My earliest work included 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 building Codédex's first ever 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 and eliminated accessibility issues related to light and dark modes. It has now also enabled our team of 2 engineers to autonomously 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

At Codédex, interactive coding courses are our bread and butter. High-quality learning experiences, from the start to end of a course (and beyond), are what drive paid user retention for Club subscriptions.

Accordingly, the role of Product is 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've standardized design patterns for the entire course experience to prioritize simple and clear navigation, modular components, mobile-friendliness, and learner motivation–while reducing development time.

This work has allowed us to scale our course library from 17 to 26 in two years, and has provided flexible building blocks to rapidly experiment with new product offerings.

In fall 2024, we revamped our high visibility course landing pages. Previously, these course pages were built completely separately in the codebase, and needed to be updated individually with any design updates...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 allow us to scale this to all courses, with the option to customize fun, unique copy for some.
To further improve paid user retention, we've recently experimented with showing recommended learning paths (e.g. Data Science, Web Development, etc) 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. Our most successful uses of AI have focused on where critical user needs meet our own internal bottlenecks.

In 2025, we used AI to address two issues that came up often in user interviews and bug reports: there was no way to check answers in exercises, and it was hard to get real-time help when stuck.

I scoped and designed an embedded LLM-powered system that understands the lesson context and the learner's code to evaluate code correctness. It also integrates with an AI coding companion that offers hints, code feedback, step-by-step guidance, and/or alternate explanations within a chat interface.

Since first beta-testing this system in spring 2025, we've rolled it out to over 10 courses. As a result, we've dramatically reduced drop-off (and bug reports) related to a lack of answer checking and getting stuck on lesson content.

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.
Knowing that AI can sometimes make mistakes, I prioritized accounting for edge cases where a learner's answer was correct, but AI was wrong. We built a way to report false negatives and let the learner keep learning. During beta testing, this allowed engineers to further improve the model's accuracy to over 97%.
At Codédex, I often seek to integrate previously isolated features into a cohesive system. Here, I combined this new answer checking system with an existing AI chat bot feature into an integrated, AI-powered system for getting help. Any hints get stored in the chat log, where you can choose from other suggestions or ask followup questions.
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 taken steps to unify 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 dial down illustration intensity for functional 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 the learner's immersion in the world. In December 2025, I worked with Azuna Pixels who created spritesheets for a character customizer that embeds into the user onboarding process, 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