Online learning sounds simple, right up until it isn't
Pre-recorded lessons. Live lectures with specific times. Assignments. Attendance tracking. And that little "wait, when is my class again?" panic that shows up the moment things pile up. The mindbodygreen Health Coach Certification is a 20-week, cohort-based program with real-time participation, so students needed one place to keep their entire experience from turning into a chaotic Google Drive folder.
As Lead Product Designer, I designed and built the student dashboard from the ground up: the central hub where students track progress, open lessons, manage coursework, and join live lectures, all while the experience juggles both self-paced and scheduled learning behind the scenes. No existing foundation to tweak. Just a blank canvas and a clear mission: turn potential chaos into something structured, intuitive, and actually motivating to come back to.
02 · Discovery
Part LMS, part scheduler, part progress tracker, all in one place
This was never just a content library. It was a lot of things trying to live under one roof: recorded lessons you watch whenever, live lectures that happen at a fixed time, assignments with deadlines, and participation requirements that quietly count toward certification. Toss all of that on one screen with equal weight and the experience gets overwhelming fast.
Before the redesign The existing course experience
The starting point: a flat course outline where a 3-minute intro lesson, a writing assignment, a downloadable syllabus, and a 220-lesson module all sat at the same visual weight. Comprehensive, technically. But it answered "what exists?" and left students to work out "what should I do?" entirely on their own.
The dashboard wasn't only a place to learn. It was a retention and growth tool. If students stayed oriented and felt momentum, they finished the program and discovered the next one, which is exactly how lifetime value grows (without ever feeling sold to mid-lesson).
The thing I realized early
If everything on the dashboard looked equally important, then nothing would feel actionable. That sounds obvious written down, but it reframed the entire project. I shifted the experience from "here is all your stuff" to "here is what you should do next." Hierarchy first, action second, everything else after that. Suddenly a dense pile of features felt like a guided path instead of a to-do graveyard.
20
Week, cohort-based program
2
Learning modes: self-paced and scheduled
3
Content types: live, recorded, due-dated
4
Key moments the UI responds to
The reframe: From "here's everything" to "here's your next step"
Designing the moments, not just the screen
Because there was no framework to inherit, I got to define what a student dashboard should actually do. So I mapped how students would enter, navigate, and return over a 20-week stretch, then traced the moments where the experience needed to behave differently. A first visit needs orientation. A returning session needs continuity. An upcoming live class needs urgency. A looming deadline needs a clear, calm nudge. Same dashboard, four very different jobs.
Key moments: One dashboard, four states it has to nail
💡Key insight: dashboards rarely fail because they look bad. They fail because they don't guide behavior. Without clear structure, users are left to figure things out themselves, which is exactly where hesitation and drop-off live. The opportunity wasn't to design a prettier dashboard. It was to define a system that helps people move forward.
⚖️
Everything weighed the same
Lessons, lectures, and assignments all competed for attention equally. When nothing is prioritized, the user has to do the prioritizing, every single time they log in.
⏰
Time-sensitive stuff hid in plain sight
Live lectures happen at a fixed time and deadlines don't wait. But on a flat layout, "happening in 10 minutes" looked identical to "available whenever."
😮💨
Progress could feel like pressure
In a 20-week program, a progress tracker can quietly become a guilt machine. Log in, see everything you haven't done, feel behind, log off. Not great for finishing.
🧭
No obvious next step
Opening the dashboard answered "what exists?" but not "what should I do right now?" That gap is where momentum goes to die.
Three content types, one dashboard
The hard part was that the dashboard had to flex across genuinely different kinds of content, each with its own sense of time and its own right action.
Live lectures
Fixed times, real-time participation, attendance that counts. These need urgency cues and a "join now" moment that's impossible to miss.
Recorded lessons
Self-paced and watch-whenever. These need resume patterns and progress indicators so continuity carries across sessions.
Due-dated coursework
Assignments with deadlines. These need timing surfaced clearly and prioritized visually, so students stay on track without feeling chased.
From findings to a brief
I turned every finding into a job the interface had to do. That mapping became the brief, and it gave me the principles I'd hold every later decision against.
Synthesis: What discovery surfaced → what the design had to do
03 · Process
Stop asking "what should we show?" Start asking "what now?"
That reframe was the whole unlock. The dashboard wasn't just a place to display content. It needed to be a navigation system and a state-aware system at the same time: not only showing content, but showing the right state of that content at the right time. Every decision after that got held against three principles.
Clarity
The next step should be obvious without anyone having to hunt for it. If a student has to decode the screen, the screen hasn't finished its job.
Motivation
Progress should create a sense of "I'm moving," not "I'm failing a checklist." Encouraging beats punitive, especially across 20 weeks.
Continuity
The experience should feel responsive to where the student is in their journey, so returning always feels like picking up, never like starting over.
1
Step 01
Map how students enter, navigate, and return
Before any pixels, I traced the full loop of a 20-week student: first login, daily check-ins, the scramble before a live class, the slow grind of self-paced modules. Then I aligned that loop with the product goals around engagement and retention so the dashboard served both the student and the business.
This is where it clicked. The dashboard had to be navigation and state at once. I shifted the core question from "what should we display?" to "what does the user need to do right now?" and let that drive the layout, the hierarchy, and which action got the spotlight.
Interaction designSystems thinking
3
Step 03
Design the states for each key moment
I mapped the moments (first visit, returning session, upcoming live class, nearing a deadline) and designed how the experience should respond to each. Make the next step obvious, make timing and urgency clear, and make the whole thing feel like it knows where you are in the program. When two directions both seemed reasonable, like how to draw progress or what the dashboard should lead with, I stopped trusting my gut and put the variants in front of students instead (more on that in Testing).
PrototypingStates & logicIteration
4
Step 04
Build the UI patterns from scratch
With no existing components to lean on, I created the interaction patterns, layout structure, and a flexible component system from zero. Reusable pieces that could flex across live, recorded, and due-dated content, and keep scaling as the product grew.
The solution was a fully custom, state-driven dashboard built from the ground up: UX strategy on top of a scalable UI foundation that adapts to whatever the student is in the middle of. The screens below are the real thing, each one tucked into a scrollable browser viewport. Tap the tabs to switch states, scroll inside to explore, and click any screen to zoom in.
From rough concept to finished product
The dashboard didn't arrive fully formed. It started as a teal-branded concept and got sharper with each pass: status started doing more work, the layout reflowed around priority, and the whole thing eventually grew into a calmer, mindbodygreen-branded system. Step through the iterations below.
Iteration Watch the dashboard evolve
student-dashboard / explorations
Real screens · scroll inside to explore
Concept v1: the countdown hero, a welcome-and-progress card, and a full list of every week. The bones were here, but content still competed for attention.
Each pass pushed the same idea further: let state and priority drive the layout. By the final design, the brand had shifted to mindbodygreen, the palette calmed down, and the busiest moments (a live session about to start) had a single obvious action.
The live session, in two states
Live lectures were the most time-sensitive thing in the whole program, so the hero had to react to them. The same module shows two scheduled time options with countdowns when a session is still upcoming, then flips to a bright Join Now the moment it goes live. Same component, different state, zero guesswork about what to do.
Final design State-aware live session
app.mindbodygreen.com / certification / dashboard
Real screen · scroll inside to explore
Upcoming: the next live session shows two time options, each with a countdown, so students can pick the slot that fits and register ahead.
Notice the supporting pieces too: a "Continue" action that drops you back into the current week, a 2/20 segmented progress strip, and quiet links to the student community forum and a teaching assistant. Helpful context, none of it shouting over the one thing that matters right now.
Every week and lesson wears its state
State-awareness ran all the way down. Each week shows whether it's completed, missed, or in progress, with a progress bar to match. Drill into a week and every item tells you exactly what to do: rewatch, get started, download, or take the quiz. Switch between the views below.
Final design Weeks & lessons, state by state
app.mindbodygreen.com / certification / progress
Real screens · scroll inside to explore
All weeks: every week wears its state (completed, missed, in progress) with a progress bar, so the full 20-week arc is readable at a glance.
Because every surface speaks the same state language, students build one mental model and trust it everywhere. A "missed week" reads the same on the overview as it does in the sidebar, and a deadline is surfaced early instead of discovered late.
And it all had to work on a phone
A 20-week program lives in people's pockets, so the mobile layout mattered as much as the desktop one. The tricky part on a small screen is the secondary stuff: progress, notifications, and support links all want room they don't have. I explored a few ways to handle it, and the prototypes below are the real mobile screens. Tap the tabs to switch, scroll inside each phone, and tap to zoom.
Mobile prototype Three ways to handle the top of the screen
Tab bar: a compact Outline / Live Q&A / Material row keeps the main areas one tap away, with progress and support links always in view. Everything surfaced, nothing buried.
The drawer idea earned its own quick check, because a collapse only helps if opening it feels obvious. Toggle it open and closed.
Mobile prototype The info drawer, open and closed
Collapsed: the default. Progress up top, the drawer quietly closed, and the week's lessons get the spotlight.
Browsing all 20 weeks on a phone raised its own question: how much header to keep when someone is in scan-the-whole-program mode. I compared keeping the quick-nav header against stripping it back.
Mobile prototype Scanning all 20 weeks
With the quick-nav header: progress and shortcuts ride along above the full week list, handy when you want to jump back out.
Across every one of these, the same rule held that ran through the desktop work: let state and priority drive the layout, and give the secondary stuff a home without letting it shout over the next step.
Making progress feel like momentum
Progress tracking is one of those things that either motivates people or quietly stresses them out. In a 20-week program, the last thing I wanted was for students to log in and feel like they were falling behind every time. So I made a deliberate choice: emphasize what's been accomplished and what's next, instead of dumping every undone thing on the screen. Same underlying data, completely different feeling. Flip between the two framings below and watch the bar (and the vibe) change.
It's a subtle shift, but it changes everything. The punitive version leads with the gap and a wall of red. The encouraging version, the one that shipped, leads with the wins, points to the single next step, and keeps the deadline visible without making it feel like a threat. Supportive, not a checklist you're constantly failing.
A system, not a static hub
To make the whole thing feel alive, I built a strong layer of visual feedback and interaction states: progress bars, completion markers, hover and active states, urgency cues. None of it is just polish. Each piece helps students stay oriented and engaged across very different kinds of content. By designing both the UX and UI from the ground up, the dashboard became a scalable foundation that adapts to class types, responds to behavior, and quietly drives ongoing engagement. Instead of a static hub, it works as an active guide through the learning journey, clearly, confidently, and with a real sense of momentum.
The trap · Content-heavy default
"Here is all your stuff"
A flat hub that shows everything with equal weight. Comprehensive, technically. Also the fastest path to a student feeling lost and quietly drifting away.
Puts the work of prioritizing on the user, every visit.
The build · Action-oriented system
"Here is what you should do next"
A state-aware system that surfaces the right action at the right time and keeps progress feeling like momentum across the full 20 weeks.
Guides behavior, builds momentum, and scales with the product.
05 · Testing
When I wasn't sure, I let students decide
A couple of decisions were real close calls, the kind where two options both look reasonable on paper and taste alone is a terrible tiebreaker. Rather than argue it out, I built the competing versions, put them in front of real students, and watched how each one read. Both tests stayed qualitative: I paid attention to what felt clearer, what felt motivating, and where people hesitated. Their reactions, not my preferences, picked the winners.
Test 01 · How should progress show up?
Progress is the emotional core of a long program, so the way it's drawn matters more than it looks like it should. I tested a classic percentage bar against a segmented strip that breaks the 20 weeks into individual blocks. Toggle between them and see which one you'd rather open to.
A/B test 01 Percentage bar vs segmented strip
student-dashboard / test · progress-display
Real screens · scroll inside to explore
Variant A: a single percentage bar (My Progress, 25%). Familiar and clean, but a bar is abstract. It tells you how far along you are, not what you've actually done.
✓
Winner: the segmented strip.Shipped Students found the blocks easier to read at a glance and a lot more motivating. Seeing "2 of 20" as discrete, fillable squares felt like measurable progress they could chip away at, where a lone percentage felt vague and easy to ignore. It became the course-progress strip in the final design.
Test 02 · What should the dashboard lead with?
The top of the dashboard is the most valuable real estate on the screen, so whatever claims it sets the tone for everything below. I tested leading with the live session, the most time-sensitive thing in the program, against leading with the welcome-and-progress card. Flip between the two layouts.
A/B test 02 Lead with the live session vs lead with progress
student-dashboard / test · top-of-page-layout
Real screens · scroll inside to explore
Variant A: lead with the live session. The countdown hero takes the left, with the welcome and progress card sitting to its right.
✓
Winner: lead with the live session.Shipped Students reacted most to the time-sensitive moment. With the upcoming session and its countdown out front, people felt on top of the one thing they could miss, while progress stayed perfectly glanceable on the right. Leading with progress, by contrast, quietly buried the urgent stuff. The final design keeps the live session front and center.
🧪What both tests drove home: the same information can win or lose purely on how it's framed and where it sits. Concrete beat abstract for progress, and urgent beat everything for placement. Testing turned two judgment calls into decisions I could stand behind, because students made them, not me.
06 · Results
Chaos, turned into something you want to return to
The dashboard took a genuinely messy mix of live, recorded, and due-dated learning and gave it structure, hierarchy, and a pulse. Because the experience surfaces the next step and frames progress as momentum, students spend less energy figuring out what to do and more energy actually doing it, which is exactly what a multi-week certification needs to get people across the finish line.
↑
Engagement and lesson completion, with a clear next step on every visit.
Prioritization moved from student to interface
↑
Live lecture attendance, thanks to unmissable timing and urgency cues.
↑
Retention and lifetime value, with course discovery built in as invitation, not a hard sell.
Finish the program, find the next one
🌿This one stuck with me: a dashboard's real job isn't to display content, it's to guide behavior. The biggest wins didn't come from showing more. They came from showing the right thing at the right time and making people feel like they were making progress.
What the work left behind
Built
A state-driven component system
Flexible UI patterns that flex across live, recorded, and due-dated content. New scenarios inherit consistent behavior instead of getting designed from scratch.
Defined
The UX and UI from zero
Core interaction patterns, layout structure, and reusable components, all established for a product that had no existing foundation to build on.
Designed
An encouraging progress model
A progress system tuned for the long haul, framed around momentum and accomplishment rather than everything left undone.
Enabled
A foundation for growth
A scalable base the product can keep building on, with course discovery woven in to support retention and lifetime value over time.
07 · Takeaways
What I'd carry into every project
→
Guide behavior, don't just display content
The dashboard had all the right content from day one. The win came from deciding what deserved a student's attention first. A great dashboard answers "what now?" before it answers "what exists?"
→
Progress should feel like momentum
In a long program, the same data can motivate or demoralize depending entirely on how you frame it. Leading with wins instead of gaps was a small design choice that did a lot of emotional heavy lifting.
→
When it's greenfield, design the system
Building from scratch meant I wasn't just designing screens, I was defining patterns. Investing in a flexible, state-aware system early is what let the experience flex across content types and keep scaling with the product.