Context
Skillpilot is a French skills-based LMS. Training organisations use it to manage programs, sessions, learners and attendance, and each client applies its own brand.
In 2024 I designed the Style Guide, the components and the redesign of the admin space, starting from a PowerPoint full of change requests. Everything was delivered in Figma, with a prototype.
Problem
For admins
- A menu with everything at the same level.
- Learner invitations set up again for every session.
- Repeated content and fields nobody used.
- A learner's status scattered across several screens.
For the business
- Change requests in a PowerPoint the devs found hard to follow.
- No visual system, so every screen started from scratch.
- Built in Angular, with the Nebular library.
- Skillpilot's brand without losing each client's customisation.
How do we make the LMS consistent and lighter for the people who run training, without losing each client's brand?
Where it started
- More than 15 menu items, with “Templates” listed twice.
- English and French on the same screen, and translation keys instead of labels (“ADD_FRAMEWORK_FROM_XLS”).
- Empty lists showing only “No Rows To Show”.
Solution
Style Guide with tokens
Colours, type and icons as Figma variables.
Nebular components
The same library the team already used in code.
Client branding
A colour picker swaps only the main colour.
Sessions by status
Draft, active and ended, each with its own actions.
3-step forms
Create programs and sessions in short steps.
Learner view
A full profile, with status shown on the avatar.
The Design System
A palette built from Skillpilot's brand, with tokens as Figma variables. When the client changes, only the main colour changes.
Colours
Brand
States
Neutrals
Typography and icons
Sofia Sans in 3 weights and Bootstrap Icons, the icon set the code already used.
Components
Built on Nebular, using the same names as the code.
Process
1. The product from all three sides
I created learner and teacher accounts in the demo to see where the admin's settings show up. That's why I started with the Style Guide and the components, which serve all three areas.
2. References
Without access to other LMS admin panels, I looked at Moodle, Descomplica, EBAC and Alura from the learner side. The admin flow came from the product itself, validated with the client.
3. Navigation map
Before any screens, I mapped the admin in FigJam. The map exposed the hierarchy problem, and we reorganised the pages.
4. 15 questions for the client
With the screens ready, I settled the business rules in a round of 15 questions. Some of the decisions:
| Question | Decision |
|---|---|
| Do invitations move to the template? | Yes, set up once for every session. |
| Is the “skill validation method” used? | No, so the field was removed. |
| Does “Session content” stay in General information? | No, the program structure already shows it. |
| Where does the schedule live? | Inside the session, next to the program tree. |
| Can an ended session be edited? | No, it's read-only. |
5. Handoff
With no contact with the devs, each screen was tagged with the PowerPoint slide it answers, and the main flow got a prototype. There was no testing with end users: validation was done with the founder and the COO.
Final UI
One session in three states
Home screen, before and after
Creating a program in 3 steps
Result: less cognitive load
There are no post-launch metrics, so the gain shows in the decisions:
| Before | After |
|---|---|
| Invitations set up in every session | Once, in the template |
| Unused fields and repeated content | Removed |
| A menu with everything at the same level | Items grouped by topic |
| One long form on a single page | 3 short steps |
| Learner status across several screens | Status on the avatar |
| A different look on every screen | Shared components and tokens |
Signals from the client
- Approved the visual direction and asked for the screen redesign.
- The 15 questions became documented decisions.
What I learned
- Validating the map before the screens saved rework.
- Next time, I'd talk to a few admins and a dev before settling the decisions.
My role
Sole designer on the project: analysis, navigation map, Style Guide, components, 18 screens and 9 modals, prototype and handoff. I worked with the founder and the COO, who brought the business rules and approved each delivery.