Course Discovery
Users couldn't find relevant courses. Average time to enroll: 4.2 minutes (target: <1 min)
quilllearn
Designing a learning management experience for a smart pen ecosystem's education vertical
Overview
While working on a cross-platform smart pen ecosystem, education technology was a key enterprise vertical. Clients needed a platform where instructors could manage course materials, learners could interact with smart pen content, and administrators could track engagement across their organization. I was tasked with designing the learning experience end-to-end — from course discovery to progress tracking to admin reporting.
Project name and visual identity have been changed for confidentiality.
A growing product with a fragmented experience
User research revealed three core problems: course discovery was buried behind too many filters, the learning progress view was confusing, and B2B admins had no dashboard to track team engagement. NPS had dropped from 42 to 31 over two quarters, and support tickets about "finding courses" had increased 60%.
Progress Tracking
Learners lost track of where they left off. 34% of started courses were abandoned.
Admin Visibility
B2B managers had no way to see team progress or ROI. Zero dashboard existed.
Understanding the users
I ran a mixed-methods research sprint over 3 weeks to understand pain points from multiple angles.
Spoke with individual learners and B2B admins about their daily workflows and frustrations
Analyzed click patterns on the course catalog — 70% of users never scrolled past the first row
Categorized 200+ tickets — "can't find course" and "lost my progress" were top themes
Reviewed 5 competing platforms (Coursera, LinkedIn Learning, Udemy Business) for UX patterns
Sign up
Browse catalog
Friction
Too many options
Select course
Start learning
Friction
No save progress
Complete
Friction
No certificate visibility
Restructuring the navigation
The existing IA had 6 top-level sections with overlapping content. I simplified to 4 clear areas based on user mental models from card sorting sessions.
Before
Quill Learn — top nav
- Home
- All Courses
- My Courses
- Categories
- Progress
- Certificates
- Settings
- Profile
- Admin
After
Quill Learn — 4 areas
-
DashboardHome + progress + certificates
-
CoursesCatalog + categories + search
-
My LearningActive + completed + saved
-
AdminTeam view + reports
Low-fidelity exploration
I started with rough wireframes to test layout concepts before investing in high-fidelity UI. These were shared with the team in weekly design reviews for early feedback.
Dashboard
Course catalog
Learning progress
High-fidelity screens
The final UI brings together the design system tokens, a clear information hierarchy, and the insights from user research into polished, production-ready screens.
app.quilllearn.io/dashboard
app.quilllearn.io/courses
app.quilllearn.io/learn/digital-note-taking/module-4
app.quilllearn.io/admin/team
app.quilllearn.io/courses/digital-note-taking-fundamentals
app.quilllearn.io/onboarding
app.quilllearn.io/onboarding/topics
app.quilllearn.io/search?q=smart+pen+notes
app.quilllearn.io/certificates/digital-note-taking-fundamentals
app.quilllearn.io/states
app.quilllearn.io/settings
A scalable journey model
Instead of a single linear diagram, I framed the experience as three layers that scale: activation (getting people to value fast), a repeatable learning loop (where most time is spent), and outcomes that connect learners to B2B stakeholders.
The flow below is the canonical path used for prioritization and edge-case reviews (resume, SSO, permissions, exports). "Key moments" are annotated where research showed the highest drop-off or the strongest opportunity to build trust.
- One mental model: learners always land on a clear "continue" surface; admins never hunt in learner UI for team data.
- Composable loop: new courses plug into the same module loop; new orgs inherit the same reporting layer.
- Explicit handoffs: certificate and manager visibility are first-class steps, not an afterthought in a footnote.
END-TO-END
Single canonical path (learner → outcomes → enterprise)
One continuous model for roadmap and handoff discussions: every screen in the case study maps to a step here. Scroll horizontally to see the full product surface area — from identity to admin reporting — without breaking the narrative into disconnected mocks.
Sign up / SSO
Identity
Friction
Onboarding
Role & topics
Dashboard
Continue + recs
Friction
Catalog
Search & filters
Enroll
Seats / policy
Friction
Learn
Video + module
Acquire & activate
Reduce friction to first value: identity, lightweight personalization, then a dashboard that answers "what should I do next?"
Sign up / SSO
Org SSO when provisioned
Friction
Onboarding
Role & topics shape the catalog
Home dashboard
Continue + recommendations
Discover & learn (core loop)
The scalable unit of the product: find a course, enroll, then repeat module-level work until completion. Progress and resume are part of the loop — not a separate "feature path."
Browse catalog
Filters + relevance
Enroll
Org rules / seat checks
Module loop
REPEAT
Learn → save progress → next module
Course complete
Unlocks certificate
Outcomes & enterprise visibility
Proof of skill for the learner; proof of ROI for the org. These steps informed certificate layout, sharing, and admin dashboards as parallel surfaces — not bolt-ons.
Certificate
PDF + verified metadata
Share / profile
LinkedIn, internal feed
Manager & admin reporting
Completion, cohorts, exports
Edge cases & scale: SSO failures, seat limits, and "returning after 90 days" were tested against this model so we could reuse the same progress surfaces and admin signals instead of one-off screens. New verticals (e.g. more courses) extend Phase 02; new enterprise needs extend Phase 03 without rewriting Phase 01.
Key choices that shaped the product
Sidebar navigation or top tabs?
Top tabs. Our research showed users accessed 2-3 sections max per session. A sidebar would waste horizontal space that's better used for content — especially on the learning view where the video player needs maximum width.
Personalized homepage or course catalog first?
Personalized dashboard. Data showed 68% of return visits were to continue an existing course, not browse new ones. The dashboard surfaces in-progress courses immediately, reducing time-to-learning from 4 clicks to 1.
Progress as percentage or module count?
Both. Percentage gives a quick emotional signal (I'm more than halfway!), module count gives concrete orientation (what's next). We tested both in isolation and the combined version performed best in usability tests — users felt more in control.