Designing a corporate LMS where every role has its own world
A token-based HR learning platform for three user roles, from IA and design system to a launch-ready prototype. Delivered in one month, with me as team lead and internal mentor.
In 60 seconds
One LMS, three roles, one month
Task. Design a corporate LMS that brings onboarding, training and competency development into one platform for every role.
Problem. Onboarding was scattered across documents and disconnected tools. New hires got lost, and managers couldn't see anyone's progress.
Solution. A role-first product: Employee, Learning Manager and Admin each get their own dashboard, navigation and content, all built on one token system with light and dark themes.
My part. I led a team of four first-time designers, designed the Employee experience end to end and set the logic for the Learning Manager and Admin flows.
The problem
Every role saw the same interface and felt like an afterthought
Most corporate LMS platforms treat learning as a checklist. In practice that leads to four recurring failures.
Key problems
Fragmented onboarding
Most LMS tools treat onboarding as a folder of documents to read. In Team.UP it became a structured path that adapts to each role.
No role separation
Existing tools put all users into one interface. Employees, managers and admins need different information, yet they end up on the same screens.
Training without visibility
Learning happened, but nobody could track it. Managers had no real-time view of team progress, completion, or skill gaps.
Gamification as an afterthought
In competing tools, points and badges sat on top as decoration, with no link to real learning milestones.
Research
Three competitors, three gaps
We compared SmartExpert, Paradiso and HillelLMS. None of them combined strong LMS features with a calm, focused interface. That gap became our brief.
Competitors
SmartExpert
The gap: functional, but visually outdated. It feels heavy and cluttered.
Our response: a light, approachable interface on soft glass cards.
Paradiso
The gap: too many competing widgets and inconsistent labels. Cognitive overload.
Our response: clarity over decoration. Every element on a screen has to earn its place.
HillelLMS
The gap: no filters or search in long lists, and no clear separation between roles.
Our response: role-first design. Each person sees only what's relevant to their job.
Three principles came out of it and guided every review: clarity over decoration, role-first navigation, one accent color.
Three roles
Who uses it, and what I owned for each role
As team lead, I designed the Employee experience end to end, set the structure and logic for the Learning Manager and Admin flows, and built the shared system that holds all three together.
Contribution by role
Employee
Follows a personal learning path, completes short daily modules and tracks their own skill growth on a dashboard.
Learning Manager
Curates content libraries, assigns training batches and reads team performance trends to spot knowledge gaps.
Admin
Manages integrations, user permissions and security settings, and keeps the platform running as the company grows.
Employee Experience
I designed this experience end to end, from information architecture to final UI: the dashboard, course flows, all lesson types, the Point Shop and the profile.
Learning Manager Experience
I defined the structure, logic and prototype direction for the Learning Manager flow (screen hierarchy, navigation, key interactions), then reviewed the team's screens against that reference and refined them together.
Admin Experience
Same model as Learning Manager: set the interaction logic and prototype reference for the Admin flow, then guided revisions until the execution matched the system.
Design System
I set up the shared Figma environment: naming conventions, file structure and the review process. It let four designers with different levels of experience build one component library and keep one visual language.
What it does
Five capabilities, scoped to three roles
Onboarding, training and testing, a knowledge base, competency management and rewards.
Key decisions
Four decisions behind the product
Decisions
01 · A separate world for each role
Each role gets its own dashboard, menu, profile and settings. An employee never scrolls past admin tools, and an admin isn't buried in course content.
02 · One lesson frame, five lesson types
Breadcrumbs, the module stepper, progress, course structure and an AI assistant card stay in the same place. Only the center changes: text, video, test, assignment or webinar.
03 · Points tied to real learning
Points come only from finished modules and tests. Employees spend them in the Points Shop, and Learning Managers set the rewards.
04 · Calm interface, one accent
Indigo #4648D4 is the only accent color, on soft glass cards. It answers the two competitors that felt heavy or overloaded.
Screens by role
Three roles, walked through
Dashboards and the everyday screens behind them, designed so each role feels like its own product.
Employee
Learns, redeems points and finds resources. Built for someone who wants to get through the workday quickly.
Learning Manager
Runs the operational core: assigns courses, reviews submissions, manages participants and configures the rewards employees redeem.
Admin
Owns the platform itself: organizational structure, role permissions and the subscription.
The design system
One token system for all roles and both themes.
Inter, Indigo #4648D4, glassmorphism cards, and light and dark themes driven by the same color tokens. Changing a token updates every screen that uses it.
How the team worked
Four weeks, five phases
We had no developers and no product manager, so every decision was made inside the four-person team. We moved between research and screens in short loops.
Process phases
Discovery
Competitive analysis (SmartExpert, Paradiso, HillelLMS) via Perplexity, market research, and defining the three roles the whole product would be built around.
Foundation
Information architecture, user flows and the first reference screens, where I set the visual direction (Inter, Indigo, glassmorphism) for the rest of the system.
Parallel Build
We built design tokens and components together, while the Employee, Learning Manager and Admin screens were designed in parallel. Flows were blocked out quickly in Google Stitch, then moved to full-fidelity Figma screens.
Validation
Review cycles against the design system, with prototypes tested end-to-end in Lovable to catch broken flows before polish.
Handoff
Final consistency pass across all three roles, then delivery as a launch-ready prototype.
Outcomes
Three roles, one design system, launch-ready in a month.
“…her work on an LMS platform was exceptionally well thought through — deep feature coverage, strong UX logic, and a presentation approach that was genuinely creative.”
What I'd do next
Test onboarding with new hires
Measure how long the first module takes and where people stop.
Mobile for employees
Short daily modules fit a phone better than a desktop tab.
Contrast audit
Check text on the glass cards against WCAG in both themes.
Real analytics
Replace sample data in the Learning Manager analytics with real events.
