Personal and organisational navigation
The top bar follows the person; the side navigation follows the organisation. Neither audience has to dig through the other’s tools.
01The problem
Two audiences, one crowded product.
Learning at work has two audiences who need very different things from the same screens.
Employees want to see what they have to learn, what they’ve finished and what’s next. Managers want that picture for their team.
Administrators run everything behind it: users and groups, job descriptions, roles and what each role must know, courses, reports and integrations. When both live in one product, the risk isn’t missing features. It’s people losing their place.
Before drawing screens, we separated what each audience was actually trying to do.
02Two journeys
What each person is trying to get done.
Mapping the two journeys side by side showed where they meet and where they must stay apart.
Learner
- 01See what’s assigned
- 02Take a course
- 03Prove competence
- 04Know what’s next
Administrator
- 01Set up the organisation
- 02Assign learning to roles
- 03Track completion
- 04Report and act
The learner’s journey is about today. The administrator’s is about everyone, over time.
That split became the backbone of the navigation.
03Structure
Two navigation layers, one clear place.
The structure separates what’s yours from what belongs to the organisation.
My learningMy competenceCourse catalogueMy employees
- Organization
- UsersUser setup · Job descriptions · Notifications
- RolesOverview · Create new roles
- Competence & learning
- Course catalogs
- Reports
- Integrations
- Supports
Two navigation layers do different jobs. The top bar follows the person: their learning, their competence, the course catalogue and, for managers, their employees. The left navigation follows the organisation: users, roles, competence, courses, reports and integrations.
The user list carries the most weight. Each row shows the person, their status, access level, roles, job description and unit, with sortable columns, bulk selection and two clear actions at the top: import users, or create one. Status is a labelled chip, not just a colour.
Navigation and labels read from the project presentation. The user rows in that image are repeated placeholder data.
With the structure settled, the next question was how much to build, and how much to borrow.
04Starting from Ant Design
Building on Ant Design, on Snapper’s terms.
Ant Design gives a data-heavy admin product a lot for free: tables, forms, filters and pickers that engineers already know. The work was deciding, component by component, how far to go from the default.
- 01Adopt
Use the component as is.
Tables, pagination, date pickers and form controls, where people expect standard behavior.
- 02Theme
Keep the component, change the tokens.
Colour, type, radius and spacing tuned to Snapper, so the product doesn’t look like an Ant Design demo.
- 03Extend
Compose framework parts.
A user row with avatar, status chip, access level, roles and job description.
- 04Build
Design what the framework lacks.
Only where learning and competence need it, then documented as a new component.
The working method used for the library. Token values and component counts stay in the private client file.
A themed foundation meant the learner screens could focus on clarity instead of controls.
05The learner experience
Show what matters today.
The learner home answers one question first: what should I do now?
Start with the plan
A greeting and a single line about what’s due set the context before anything else.
Assigned courses come first, each with a progress ring and one action: Continue.
SnapperA
Good morning, Anna
Three courses are due this month.
This year’s plan33 completed, 6 in progress
Assigned to youView all
- Leadership trainingBasics for every manager
- Fire safetyRequired for store staff
RecommendedBrowse
Giving feedback
Time management
Coaching
Leadership training
Basics for every manager in the business.
2 of 5 modules complete, due 30 Nov
- Your role as a leader8 min
- Setting clear goals12 min
- Giving feedback10 min
- Difficult conversations14 min
- Final quiz10 questions
Resume lesson
Progress you can read at a glance
A half-circle gauge shows how far through this year’s plan someone is, with completed, in-progress and not-started counts beside it.
Inside a course, modules show done, current and upcoming states, and a single button resumes where the learner left off.
Good morning, Anna
Three courses are due this month.
Assigned to youView all
- Leadership trainingBasics for every managerContinue
- Fire safetyRequired for store staffContinue
- Customer serviceReturns and complaintsContinue
Recommended for youBrowse
Giving feedback12 min
Time management16 min
Onboarding staff20 min
Data privacy24 min
Coaching28 min
33Completed
6In progress
Notifications
- Fire safety is due Friday2 lessons left
- New course assignedCustomer service
Learning pathsView all
- New store manager6 of 11
- Health and safetyComplete
Live screens redesigned from the Snapper Figma file. Names, courses and values are placeholders.
Courses only matter because roles require them, so competence needed its own view.
06Competence
Make the role’s requirements visible.
People should see what their role requires and where they stand, without asking an administrator.
Store manager
My competence
11 of 18 metRequirements for your role
- Leadership2 of 6
- Health and safetyComplete
- Customer service3 of 4
- Product knowledge1 of 3
Next up
- Giving feedbackLeadership, 10 min
The competence view groups requirements by area, shows tasks completed against tasks required, and marks an area complete in words, not only colour. The same structure sits on desktop, where the learner home places it next to assigned courses and recommendations.
Behind every one of those numbers is an administrator keeping the organisation’s data in order.
07The admin side
Dense, but never lost.
The admin side is where Ant Design’s tables, filters and forms earn their place.
Status as a labelled chip
“Active” is written, not just coloured, so status survives colour blindness and greyscale exports.
Import and create side by side
Bringing existing staff in is a common first task, so importing users is as visible as creating one.
Theme the framework, don’t fight it
Keeping Ant Design’s behavior and changing its tokens kept the build fast and the product recognisably Snapper.
Most of the remaining work wasn’t new screens. It was states.
08Components & states
Draw the edge cases first.
Most of the library work is in states. These are the kinds a dense admin product has to cover.
- Empty list with an import action
- No results for a filter, with a way to clear it
- Row selected and bulk actions shown
- Inactive user, labelled, not just greyed out
- Long names and many roles without breaking the row
Representative states drawn for this page from the confirmed scope. The private component specifications aren’t reproduced here.
Every one of those states had to stay usable for everyone.
09Accessibility
Theming shouldn’t undo the framework’s work.
WCAG 2.2 AA is the target, with APCA as a supplementary readability check. Ant Design brings keyboard support and ARIA; theming must not undo it.
- Keep the framework’s semantics
- Theming changes how a component looks, never its roles, labels or keyboard behavior.
- Re-check contrast after theming
- A brand colour applied to buttons, links or chips is checked again at WCAG thresholds.
- Tables people can navigate
- Real column headers, sortable headers announced as buttons, and selection that works with a keyboard.
- Status in words
- Active and inactive, or step states, are labelled as well as coloured.
- Targets and focus
- Controls meet 24 × 24 px or have enough spacing, with a visible focus ring the theme doesn’t remove.
- Dense data, readable
- Row height, column widths and truncation rules keep long names and many roles legible.
Design targets, not audit results. No formal conformance review is claimed.
And everything had to reach engineering exactly as designed.
10Handoff
Every brief starts with the client’s name.
Handoff for an admin product is mostly about edge cases.
Say which level it is
Adopt, theme, extend or build tells engineers whether to use Ant Design as is, change tokens, compose parts or write something new.
Show the crowded version
Long names, many roles and empty filters are drawn, not just the tidy example row.
States before build
A component is ready when its empty, error, loading and selected states exist.
Keep it Snapper’s
Briefs name the client and library first, so patterns from other clients never leak in.
For AI-assisted work, the brief loads only Snapper’s brand and component references, so Claude or Codex can’t borrow another client’s rules or content.
Looking back, the lesson was less about components than about orientation.
11Outcome & reflection
Knowing where you are is the feature.
- 2
- Audiences served by one product: learners and administrators
- 2
- Platforms for the learner experience: desktop and phone
- 1
- Figma component library, themed on Ant Design
- Jun 2026
- Product UX/UI work completed
- Product UX/UI for Snapper’s learning and competence administration, delivered through Cefalo.
- The Snapper Figma component library, built on Ant Design.
- A documented method for adopting, theming, extending or building components.
No usage, completion or efficiency figures are claimed. Values in the live screens and the admin presentation are placeholders, and the public website is context.
I started by trying to fit a lot of functionality into one product. What mattered more was that nobody ever wondered where they were, whose data they were looking at, or what to do next.
In an admin product, good design is mostly orientation.