Codon Learning Student App

Overview

Post-secondary STEM programs face a significant retention issue, with only 40% of students who enroll graduating in a STEM field. This problem disproportionately affects first-generation college students and minority groups who often feel underprepared by their high school education. To address this, Codon created a research-based teaching and learning platform, which includes a student-facing app, SRLy (pronounced Seer-ly), designed to support high-structure STEM courses. I played a critical role in developing one of SRLy's core features—the Study Path—which I'll discuss below.

responsibilities
User Research
Design Sprint
User Flows
Wireframes
Prototypes
Design mockups
Design system
Tools
Figma
Axure
LucidChart
Zoom
role
This was a client project at Chronos Interactive. As Senior UX/UI designer, I worked closely with the product team at Codon Learning, consisting of: the Product Director, Director of Content, a Genetics Instructor/Advisor, the CEO/Founder, the CTO/Founder.

The Problem

Many students struggle with ineffective study habits, often leading to frustration and dropout when their efforts don’t translate into better grades.

To address this, we wanted to modify Codon's student-facing app to foster productive learning habits, keep students motivated and equip them for success.

Up until this point, the student app primarily existed as an output for the resources, assignments and assessments designed by the instructor in their app. Items were grouped by class session and learning objective to help students stay organized.

Interviews and Market Research

To deepen our understanding of the problem, we conducted in-depth interviews with students, instructors, and discipline-based education researchers (DBERs), speaking with 3-5 individuals from each group.

Additionally, we performed market research on three leading EdTech products from Macmillan Learning, Pearson, and McGraw Hill to analyze (1) what features they use to enhance student learning practices and (2) the effectiveness of those features.

Students
Learn about their preferred study habits
Instructors
How they want their students to prepare
Education Researchers
Most/least effective methods of learning

Key Findings and Feature Goals

AI-driven Adaptive Learning is a common feature in STEM courseware but can stifle critical thinking and problem-solving, especially in biology. It traps students in algorithm-determined drill loops—often with little performance feedback—promoting dependency on a system over self-reliance.
FEATURE GOAL: Promote self-regulated learning
Students often procrastinate studying until right before an exam due to competing priorities like other classes, jobs, and extracurriculars. This cramming approach undermines learning retention.
FEATURE GOAL: Motivate spaced learning habits
Many students take a passive approach to studying, relying on methods like re-reading notes or highlighting text, which create an illusion of understanding but fail to promote deeper learning.
FEATURE GOAL: Provide active practice & feedback

Qualitative KPIs

Based on our research, we decided to develop a study feature based on Self-Regulated Learning (SRL), which, unlike AI-driven Adaptive Learning, empowers students to take control of their learning.

Since we were still in the ideation stage, we used qualitative KPIs based on four SRL best practices; any solution that didn’t meet all four required revision.
Focus
Is the interface intuitive for identifying and prioritizing tasks?
Scaffolding
Does the tool provide appropriate guidance to address learning deficits while still allowing student autonomy (metacognition)?
Feedback
Is feedback timely and does it help students understand their performance?
Repetition
Does the tool encourage repeated practice that reinforces learning?

User Scenarios & Mapping Exercises

Our first step was to determine how the study feature would integrate into the student app, which primarily helps students manage class tasks and resources. We drafted common user scenarios based on information from our student interviews and then performed a series of mapping exercises. We  outlined a typical high-structure course framework and then diagrammed hero journeys within that framework to identify pain points, intervention opportunities, and ways for students to personalize their study habits.
Scenario 1
Ava is a freshman biology student who completes assignments, attends class, and spends many hours studying, but still bombs assignments and tests.

‍She wants to know how she can use her time more effectively to earn a grade matching her efforts.

Design Ideation: Crazy 8's

The mapping exercises helped clarify the problem space, but we were still a bit stuck on how to integrate study practices into the app. Our next step was to run a modified design sprint to get the ideas moving. Using "How Might We" (HMW) prompts based on our KPIs, each team member performed a 'Crazy 8's' rapid sketching exercise to brainstorm solutions. Sketches were shared and refined on a Lucid Chart whiteboard and we used dot voting to highlight impactful ideas.
HMW

Incentivize spaced studying?
HMW

Organize content to facilitate studying?
HMW

Promote metacognition?
HMW

Make self regulation easier for students?

Wireframes

This process led to the creation of The Study Path—a dashboard designed to structure exam prep around instructor-defined learning objectives. By linking learning objectives to homework, readings, and lab activities, the platform helps students pinpoint weaknesses and target their studying effectively. After the sprint, I created the following initial wireframes in Figma.
Homework Taker
As students complete homework in the Codon platform, they flag concepts as 'muddy' or 'clear.' The platform uses this feedback, along with homework performance, to generate topic cards organized by Learning Objectives. These cards form a personalized study guide.
Study Path Dashboard
The Study Path dashboard enables students to identify weaknesses, practice through targeted exercises, and self-test, all while tracking progress visually as cards move from "I Should Review" to "Test Me!" columns.The system automates card movement but allows students to manually adjust based on their confidence, fostering a sense of ownership over their learning.
Home Dashboard Portal
To encourage spaced learning—a critical SRL practice—students could recapture missed homework points by revisiting related Learning Objectives in the Study Path. Progress summaries on the home dashboard, combined with a countdown to test day added gamification elements to motivate consistent engagement, supporting students in building effective, self-directed study habits.

Prototype, Test, Iterate

To refine the Study Path, the Product Director and I conducted iterative testing with students and instructors, typically interviewing five from each group per iteration. Using black-and-white wireframes in the early stages, we tested prototypes via Zoom, with participants sharing their screens as they navigated the Figma designs. This allowed us to gather detailed feedback on how users perceived and interacted with each feature. Over time, as confidence in our solution grew, we transitioned to high-fidelity designs and more sophisticated prototypes to assess the visual and interactive elements. The Product Director led the interviews, while I observed silently off-camera, ensuring an unbiased user experience.
Hi-Fidelity Prototype

Affinity Diagram Documentation

We tracked and organized feedback from our testing using affinity diagrams to help spot themes and prioritize what to focus on next. Blue notes were for instructor feedback and yellow for students.

Overall, users were positive about the Study Path’s premise, but several points stood out for further exploration. Some were minor, like tweaking color schemes or wording, but others touched on more complex functionality. For example, the point recapture system wasn’t the motivational “carrot” we had hoped—some students found it tedious and instructors  worried it emphasized grades over learning.

Visual Design

The visual design of the Study Path and student app focused on being bright, colorful, and approachable, standing out from the typically drab design of other courseware. The student home dashboard, which I had previously designed, used color coding to differentiate item types like topics, learning objectives, pre-class tasks, and homework, ensuring clarity without overwhelming students. This inviting and streamlined approach extended to the Study Path, which initially used "stoplight" colors to indicate progress but shifted to neutral tones after testing revealed that red could discourage students. By incorporating the bright, playful aesthetic of the dashboard, the Study Path encouraged engagement while laying the groundwork for future gamification features.

Design System

A design system for the Study Path wasn’t created before engineering began—scrambling to meet deadlines with prototypes and screen designs meant it fell by the wayside. After the alpha roll-out, I returned to help construct a scalable system. We started with a foundation of design tokens in Figma and from there developed components and patterns that could be easily integrated into screen layouts. These patterns were designed for laptops and tablet screens but we utilized Figma's auto layout feature to make them scalable for mobile in the future. We prioritized accessibility by ensuring proper color contrast, font scaling, and clear icon usage for interactive elements.

Results

Engineering for the Study Path began in early 2022, and by summer, it was ready for large-scale testing. During the alpha phase in the summer semester, 15 instructors and 200 students participated. The beta phase expanded in the fall to 30 college biology courses, reaching approximately 2,000 students. As of 2024, the Codon Platform is used in nearly 500 college courses nationwide and the Study Path has become a key value proposition for the company. A recent study by an instructor at UC Boulder highlighted its impact, showing improved grades for all students who used it and a significant reduction in the learning gap for student groups that had previously been falling behind.