Case Study: Making Learning Accessible
The Challenge
Most biology courses rely on a static codon table like this one. It’s hard to navigate and even harder to understand. A student using assistive technologies like a screen reader wouldn’t be able to answer a common practice question: Which amino acid comes from CCC?
Project: Codon Widget Prototype
Year: 2025
Audience: Biology students
Role: Designer and developer
Tools: V0, VS Code
Team: Solo for this prototype
The Solution
In an afternoon, I prototyped an interactive codon tool that lets learners type a codon, then highlights the matching cell to see the table’s structure while getting the amino acid.
Outcome
“Translation Tool” widget
Includes a full keyboard path with visible focus, a logical focus order with clear screen reader announcements, and high contrast without color-only cues.
Leads to…
The ability to find amino acid for screen reader users
Better table comprehension for all learners
Next Steps
This was a first prototype made in an afternoon. With continued development, I would…
Fix side-label clipping after selection
Make it mobile-friendly
Refine the style
Add CAPI to wire it into lessons
Try the Prototype!
Can you see what amino acid is made with the codon CUU?