Codespec
Optimizing a GenAI user experience
I employed informal interviewing, user-centered design thinking, AI-powered prototyping, and usability testing to transform a confusing content authoring flow into a guided collaboration experience between computer science instructors and GenAI.
View Live Site
Note: This is a functional prototype built with HTML, CSS, and JavaScript to demonstrate the user interface and flow.
Codespec is an online programming practice environment where learners of all levels can solve each problem 5 ways.
The Problem(s)
Codespec offers instructors a way to create problems with the help of generative AI, but the process was confusing to them. Key issues included:
A. Lack of context in the problem creation flow: "What step am I on?"
B. Mismatch between which content the user needed to provide vs GenAI: "Can't I just provide a theme and have GenAI create the title/instructions?"
C. Non-linear/unclear steps in the workflow: "Where do I go next?"
The Goals
I transformed these painpoints into "how might we" questions:
A. How might we convey the whole problem author process to instructors, and tell them where they're at as they progress?
B. How might we reduce content authoring burden on instructors without sacrificing pedagogical quality?
C. How might we connect each step of the authoring flow more seamlessly?
The Impact
I redesigned the process of creating problems with GenAI for greater intuitiveness and more iterative collaboration with the artificial intelligence model.
And the real kicker? It only took me 6 hours to go from a concept to a polished prototype that looked and felt like the production website because I used Claude Code.
Instead of spending 16+ hours deep in the trenches of Figma, as I've done for other similar projects, I used prompt engineering techniques to achieve the user journey and interaction patterns I envisioned.
Before
After
How I Made It Happen
Collect and Synthesize V1 Feedback
In order to improve upon the first version of the workflow, I had to understand its strengths and weaknesses. So I interviewed a researcher who had used it, asking non-leading, open-ended questions.
I also clicked through the workflow myself with mindset of a user who was brand new to the platform.
Define Personas
Armed with a list of painpoints, I drafted personas in which to ground my design.
Despite differences in programming knowledge, both user types are open to leveraging GenAI tools and would like to maximize output while minimizing time investment.
Define Responsibilities
The researcher I first interviewed was dissatisfied with the GenAI authoring experience. They wanted a more collaborative flow where they provided basic context (e.g., difficulty, theme, programming concepts) and GenAI took a pass at the rest.
I responded by breaking the parts of a problem down into separate pieces, and determining which were more appropriate for users to specify vs GenAI.
Keep the Human-in-the-Loop
While the researcher wanted GenAI to take a first pass at writing the problem, they still wanted to retain control throughout the process to ensure pedagogical quality.
So I mapped a user journey that reflected a prompt-generate-review cycle, keeping the author in the driver's seat at all times.
Sketch Wireframes
With this flow in mind, I sketched out each screen. I imagined a linear wizard-like experience, where each step focused on a few key pieces about the problem.
I wanted the interface to feel approachable and clean, so authors could focus on the content rather than trying understand how to use the system.
Prototype with Claude Code
To bring the design to life, I collaborated with Claude in small, specific, example-rich steps.
I stated my end goal up front, but emphasized the importance of working incrementally:
"Using HTML, CSS, and JavaScript, I want to prototype a wizard flow for authoring programming practice problems with GenAI. The interface should look and feel like Codespec's production website (https://www.codespec.org). Let's create the prototype step by step.
Start by retrieving Codespec's stylesheet and JavaScript files, and saving them to a folder on my computer. Link to them from an index.html file in the same folder. You can create boilerplate HTML structure (head, body, main) but nothing else yet."
Debug Claude's Output
Most of Claude's output was readily usable, but as I tested it I found a few things that needed adjustment.
For example, Claude gave all links href values of "#"" by default, which created unexpected behavior when you clicked on them. I needed to find a way to "deactivate" elements I didn't need to be clickable in the prototype.
Communicate System Status
As the steps of the authoring flow came together, I wanted to signal to the user when Codespec and ChatGPT were "thinking" (e.g., creating the instructions, solution, tests, etc).
I did so visually and verbally, by animating the Codespec logo and displaying brief, clear text about what was happening.
Validate the Redesign
Once the prototype was complete, I went back to the researcher I first interviewed and asked them to click through it. Along the way I prompted them to share their first impressions of each step.
Qualitative feedback indicated the redesign met the primary goals of:
A. more clearly showing instructors where they're at in the overall creation flow
B. balancing efficiency and quality control in the GenAI-powered authoring process
C. more clearly guiding instructors to the appropriate next step
The Result
Using informal interviewing, user-centered design thinking, AI-powered prototyping, and usability testing, I transformed a confusing content authoring flow into a guided collaboration experience between computer science instructors and GenAI.
Note: This is a functional prototype built with HTML, CSS, and JavaScript to demonstrate the user interface and flow.