A clearer entry point
Removed redundant lesson teasers and rebuilt the homepage around orientation, module discovery, and a confident place to start.
Agentic AI
Course Redesign
Making a developer-oriented course more approachable without losing the concepts that make it useful.
UX / CONTENT STRATEGY / AGENT DIRECTION
VIEW THE COURSEBEFOREAFTER
01 / BRIEF
THE PROJECT
A UX redesign built with the same agentic tools the course teaches.
The original course offered a practical introduction to agents, tools, context, and web-building workflows. It worked—but it assumed the learner already felt at home around developer language and interfaces.
I redesigned the course for true beginners and non-coders. My role combined UX and content strategy, visual design, instructional thinking, and direction of Codex as an analysis and implementation partner.
02 / SYSTEM
What changed—and why it mattered
Plain language, real concepts
Reworked definitions, prompts, and lesson framing so beginners could understand agents without flattening the technical ideas.
One visual learning system
Unified editorial reading surfaces with dark workbench patterns for simulations, quizzes, traces, and technical examples.
Safer agent-assisted iteration
Used scoped changes, protected originals, targeted agent reviews, validation checks, and written handoffs to keep the work reviewable.
03 / EVIDENCE
BEFORE / AFTER
Design decisions you can see.
01
Homepage
From lesson sampler to course entry point
The redesign replaces a passive, centered introduction with an editorial hero, clearer course framing, and a more direct path into the module system.
02
Module page
A stronger reading hierarchy
Typography, spacing, callouts, and technical surfaces were reorganized to help new learners distinguish explanation from action.
03
Simulation
Making the agent loop visible
The simulation was reframed as a focused workbench: clearer steps, stronger contrast, and less decorative noise around the core interaction.
04
Quiz pattern
Feedback that feels part of the course
Quiz components gained a consistent dark treatment, more readable code-heavy prompts, and clearer feedback states.
04 / PROCESS
HUMAN × AGENT
Direction, not delegation without judgment.
01CONSTRAIN
Define scope, protect originals, and tell the agent what it may inspect or change.
02ANALYZE
Use targeted read-only reviews for redundancy, readability, typography, and risk.
03DECIDE
Review findings, reject noise, and choose the design response that serves the learner.
04IMPLEMENT + VERIFY
Make scoped edits, preview in browser, inspect behavior, and document the result.
ONE CONCRETE EXAMPLE ↓
AGENT TASK
Scan the homepage for content that repeats material already taught in the modules.
AGENT FINDING
Lesson teasers made the homepage behave like a second, shallower version of the course.
MY DECISION
Remove the teasers and refocus the page on orientation, module discovery, and a clear place to begin.
RESULT
A simpler entry path with less cognitive load and a more confident first impression.
05 / DOCUMENT
THE RECEIPTS
The redesign left a system behind.
STYLE GUIDE → SKILL
REUSABLE ACROSS PROJECTS
FROM DOCUMENTATION TO A WORKING TOOL
I turned the visual system into a reusable agent skill.
Instead of leaving the style guide as a project-specific reference, I translated its typography, color, spacing, and component rules into instructions an agent could load and apply in future projects. This made the system portable and repeatable—while keeping final design decisions and quality control in human hands.
06 / REFLECTIONAgentic tools move quickly.
WHAT I LEARNED
Agentic tools move quickly.
Judgment still sets the direction.
01Clear constraints make agent-assisted work safer, easier to review, and easier to continue.
02Beginner-friendly design is often an act of subtraction—not simplification for its own sake.
03Local fixes protect a pilot, but repeated patterns should eventually become shared components.
04AI can surface options and problems. The designer still decides what matters to the learner.
07 / EXPLORECompare the experience
SEE THE WORK IN CONTEXT
Compare the experience
before and after.
Explore both versions to see how the redesign changed the course’s structure, language, and learning experience—not just its visual style.
01 / REDESIGNED COURSE
Start with the finished experience.
See the beginner-focused course as it exists now, including its revised lessons, interactive tools, visual system, and clearer paths through technical ideas.
EXPLORE THE REDESIGN02 / ORIGINAL COURSE
Then review the starting point.
Open the original course to compare the earlier structure and presentation directly with the redesign decisions documented in this case study.
VIEW THE ORIGINAL