Write the Code
Learning Platform
A self-paced coding education platform redesigned to reduce learner drop-off, improve comprehension, and make structured programming education accessible to beginners.
01 — Overview
A platform built to make code learnable
Write the Code is a structured online learning platform targeting absolute beginners who want to build real programming skills. The platform delivers a 12-week self-study curriculum with lessons, projects, and progress tracking — designed to take learners from zero to building functional applications.
As the Product Designer, I led the end-to-end design process: from discovery and user research through to high-fidelity UI and handoff — ensuring every design decision was grounded in learner needs and pedagogical best practice.
02 — The Problem
Beginners were quitting before they ever wrote a line
Early analytics and informal feedback revealed that over 70% of new learners dropped off within the first two weeks. The existing experience presented learners with walls of text, no clear sense of progress, and no connection between lessons and real-world outcomes.
"I kept starting and stopping. I didn't know if I was making progress or how far I had to go. It felt like revision with no end in sight."
The product lacked the motivational scaffolding that beginners need — clear milestones, immediate feedback loops, and a visible learning journey that reinforces momentum. This was a structural UX problem, not a content problem.
03 — Research
Understanding the learner's mental model
I conducted a mixed-methods research phase to understand who our learners were, what motivated them, where they got stuck, and what comparable products got right or wrong.
User Interviews
8 semi-structured interviews with beginner programmers aged 18–35. Focused on motivation, prior experiences, and pain points.
Competitor Analysis
Heuristic evaluation of 5 competitor platforms (Codecademy, freeCodeCamp, Scrimba, The Odin Project, Coursera) across 10 UX dimensions.
Survey
62-response survey distributed to online beginner communities to validate qualitative themes at scale.
Analytics Review
Session data and funnel analysis from the existing platform to identify where and when learners were dropping off.
Key findings
04 — Design Process
From insight to interface
I followed a double diamond design process, diverging broadly in discovery and research before converging on a focused design direction — then diverging again in ideation before refining to a high-fidelity solution.
DISCOVER
Define learner personas and journey maps
Synthesised research into two primary personas — the Career Switcher and the Curious Hobbyist — and mapped their end-to-end experience from first visit to project completion, identifying key moments of friction and delight.
DEFINE
Establish design principles and information architecture
Defined four core design principles — Clarity, Momentum, Feedback, and Accessibility — then restructured the content hierarchy and navigation to reflect the learner's mental model rather than the content creator's taxonomy.
DEVELOP
Wireframes, prototyping and usability testing
Created low-fidelity wireframes for 12 core screens, built a clickable prototype and ran two rounds of moderated usability testing with 9 participants each. Iterated between rounds based on identified usability issues and task success rates.
DELIVER
High-fidelity UI, design system and handoff
Produced high-fidelity screens for web and mobile breakpoints, built a reusable component library within Figma, and documented interactions, edge cases, and design decisions for the development team using structured handoff notes.
05 — Key Design Decisions
Every choice made for a reason
Below are the most significant design decisions made during the project, and the rationale behind each one.
Navigation
Visual curriculum roadmap as the homepage
Rather than a generic dashboard, the home view shows the learner's full 12-week roadmap — completed, current, and upcoming. This directly addresses the "I don't know how far I have to go" finding from research.
Feedback
Inline quick-check questions after every concept
Each concept page ends with a 1–2 question comprehension check before the learner can proceed. This creates a low-stakes feedback loop and prevents passive reading without understanding.
Tone
Real-world analogies baked into lesson structure
Lessons follow a fixed template: analogy → concept → code example → practice. This scaffolding was derived from research showing analogies significantly reduce cognitive load for beginners.
Motivation
Project milestones at the end of each phase
Every 3–4 weeks, learners complete a real project (e.g. Grade Calculator, Expense Tracker) that applies everything covered. These function as portfolio pieces and phase completions — creating tangible achievement markers.
06 — Challenges & Constraints
What we had to work around
No design project is without constraints. Below are the primary challenges encountered and how they were resolved.
CHALLENGES
- Limited engineering capacity meant complex interactions had to be deprioritised in favour of core flows.
- Diverse learner backgrounds (ages 17–52) made it difficult to design for a single mental model.
- Existing content structure was heavily siloed, requiring significant IA restructuring without disrupting published material.
- No design system existed — components had to be built from scratch alongside live design work.
HOW WE ADDRESSED THEM
- Prioritised interaction design by impact: roadmap, progress indicators, and quick-checks came first as they drove the most retention.
- Designed for the lowest-confidence learner persona, with progressive disclosure for more advanced users.
- Proposed a phased migration approach — new IA applied to new content first, legacy content migrated in batches.
- Built the component library in parallel, starting with atoms (buttons, inputs, tags) and composing upwards.
07 — Outcomes
The results spoke for themselves
Following a staged rollout to a cohort of 200 beta learners over six weeks, the redesigned platform demonstrated significant improvements across all tracked metrics.
68%
Reduction in week-one drop-off rate
3×
Increase in lesson completion rate
4.7
Average SUS usability score (out of 5)
89%
Of testers said they felt "confident to continue"
"For the first time I actually felt like I knew what I was doing. The roadmap made me realise how much I'd already learned."
08 — Accessibility & Inclusive Design
Designed for everyone from the start
Accessibility was not retrofitted — it was built into the design process from the first wireframe. The platform was designed to meet WCAG 2.1 AA standards as a baseline.
Colour Contrast
All text and interactive elements meet a minimum 4.5:1 contrast ratio. Critical UI elements meet 7:1 for enhanced accessibility.
Keyboard Navigation
All interactive components were tested for full keyboard navigability. Focus states are clearly visible and never suppressed.
Screen Reader Support
Semantic HTML and ARIA labels documented in handoff. Progress indicators include descriptive text alternatives beyond visual cues.
Cognitive Load
Lessons use progressive disclosure — complex concepts are gated behind comprehension of simpler ones. No wall-of-text layouts.
09 — What I Learned
Reflections from the project
This project challenged me to design for a deeply human problem — not just a usability problem. Here are my key personal learnings.
Motivation is a design problem
Learner drop-off is not always a content or difficulty problem. Often it's a design problem — the interface fails to sustain momentum. Visible progress is a feature, not a nice-to-have.
Build the design system early
Retrofitting a component library after screens are designed creates significant rework. Even a minimal token system from week one pays dividends throughout the project.
Test with your actual users, not stand-ins
Testing with true beginners (not designers or developers roleplaying beginners) surfaced issues that internal reviews completely missed. Proximity to the product creates blind spots.
Handoff documentation is a design deliverable
The quality of engineering implementation is heavily influenced by the quality of your handoff. Annotated specs, decision logs, and edge-case documentation are as important as the screens themselves.
10 — My Role & Responsibilities
What I owned on this project
Your Name
Product Designer
Other Projects
HealthProSuite
Hospital management system — patient care, appointments, billing and operational dashboards.
Mother of Mercy Hospital
Hospital website redesign focused on patient accessibility, trust, and digital wayfinding.
Atrizult Consulting
Corporate website showcasing consulting services with a focus on conversion and authority.