Imagine Learning
Role: Senior Product Designer & Developer
Projects: Student features, Educator Products, Component Libray, Front End Coding support, Pendo Design
What is Imagine Learning?
Imagine Learning creates digital educational programs that transform how students learn and how educators teach. I worked across their entire ecosystem, designing for both K-12 students and the educators who guide them.
My Role?
I worked on a suite of products aimed at two core user groups: K-12 students who use our software to learn, and educators/administrators who use it to track progress and tailor instruction.
I've designed products for both audiences, built a component library to ensure consistency, and even supporting front-end coding to bring these designs to life. I also helped integrate an analytics tool (Pendo) to gather data on how our products were used, which informed continuous improvements.
Student-First Initiatives
Student Helper
When students get stuck on challenging math problems, frustration can derail learning. I designed Imagine Math Helps to step in at exactly those crucial moments.
This interactive panel appears precisely when a student struggles, offering targeted guidance through a blend of step-by-step instructions, engaging videos, clear diagrams, and interactive examples. By providing support at the moment of confusion, students maintain momentum and build confidence in their problem-solving abilities.
Checkout my interactive example below!
Pop Quiz! Can you solve these questions below?
Empowering Educators with Insights
Bridging the Distance
One of the flagship features I worked on was the Grades Dashboard for educators, which was all about helping teachers who might be far away from their students (like in distance learning scenarios) stay connected to student progress and needs.
Product: Educator Grades Dashboard
Teachers often found it difficult to support students remotely with the tools they had. They wanted to know how each student was doing, without having to wait for test days or sift through raw data. The question was: how do we give teachers a clear, real-time picture of class performance, in a way that’s easy to act on?
The challenge for educators
I designed the Standards Dashboard to transform complex student performance data into clear, actionable insights. Teachers can now instantly see how their class is performing against educational standards (like Common Core), with visual indicators highlighting areas where students might be falling behind. When the system detects a knowledge gap like difficulty with "multiplying two-digit numbers" it not only alerts the teacher but suggests specific resources to address that exact challenge.
The Solution for educators
Checkout my interactive Dashboard below!
Reports Dashboard
Our Standards Dashboard transforms raw data into actionable insights. With real-time analytics and visual reports, educators and administrators can effortlessly track progress, benchmark against standards, and identify areas for continuous improvement. The dashboard is your go-to tool for ensuring that every educational outcome is aligned with best practices and future-ready standards.
Reports Dashboard: Making Data Meaningful
Real-Time Analytics: Daily updates on student activity, lesson completion, and assessment performance
Benchmarking and Goals: Tools for schools to set measurable targets and monitor progress toward them
Drill-down Capability: Every chart allows educators to dig deeper—from district-wide trends down to individual student journeys
Data Driven Design Decisions
How'd we use the data?
To continuously improve our products, I helped integrate Pendo analytics into Imagine Learning. This gave us valuable insights into how people actually used our tools—which features they loved, where they got stuck, and what they might be missing.
We tracked key user journeys like how teachers accessed reports or where students struggled with specific learning modules. This data directly informed our design improvements, ensuring we built based on actual usage patterns rather than assumptions.
What'd We use it for?
Pendo also allowed us to create in-app guides for users. I designed a series of tooltips and modals that would appear contextually for teachers. For example, if a teacher had never used the “Assign Homework” feature, the first time they navigated to the content library, a short tooltip would pop up saying, “Want to assign this to your class? Click the Assign button and set a due date.” These guides were written in a friendly, encouraging tone and could be dismissed easily. They helped onboard teachers to new features without them having to read a manual or attend training.
Onboarding
Using these insights, I designed a series of friendly, contextual guides that appear at just the right moment. When a teacher navigates to a feature they haven't used beforelike assigning homework a gentle tooltip offers simple guidance: "Want to assign this to your class? Click the Assign button and set a due date."
These unobtrusive helpers eliminated the need for lengthy training sessions or manual-reading, making new feature adoption natural and intuitive.
In App Product messaging
To keep both students and educators informed about updates, events, and new features, I designed an Information Center that delivers timely messages directly within the product.
Carousel Cards for new Product Releases
New School Year, New Products!
Key Features
New features deserve special attention. I created an engaging, swipeable carousel with smooth background transitions that showcase new capabilities. As users explore each card, subtle gradient shifts create an immersive, delightful experience that encourages feature discovery. Combining CSS animations and real-time JavaScript interpolation, this feature enhances engagement with smooth, immersive color shifts that elevate the Products overall experience.
Explore the Interactive Information Center
Click the Resource Center Icon
Key Features
A seamless, scroll-responsive carousel where the background fluidly transitions through soft gradients as users explore each feature card. Combining CSS animations and real-time JavaScript interpolation, this feature enhances engagement with smooth, immersive color shifts that elevate the browsing experience.
Building for Consistency: The "All for One" Initiative
Design System
Components
Behind every great product experience is a thoughtful design system. I maintained and evolved our component library, ensuring that every button, chart, and interaction felt like part of the same cohesive family.
Beyond just creating the components, I regularly updated documentation and conducted workshops to help team members embrace and correctly implement the system. This effort created a multiplier effect—every hour invested in the design system saved countless hours in future design and development work while delivering a more consistent experience for our users.
Interactive Design System
Explore an Interactive Design System experience made specifically for my case study
Find your way Home
Houses, Apartments, Condos. Check out more of my work in my Zillow Case Study.
Dive into the world of VR
Dive Into the world of VR
Explores some code
Explore some code and creative projects I put together in my free time.
