The wireframes
Grey boxes, no colour yet, but every region labelled and every choice explained. Each screen a new hire touches is here, whether or not it sits in the menu.
What this deck covers
The full employee onboarding experience, every employee story in the requirements: pre-board, your journey, induction, compliance, people, buddy, the learning plan, your skills, the six-month assessment, updates, and the hand-off into your development plan.
What it does not cover, on purpose
The manager, HR admin and BU head views. Those are different people with different needs, and they get their own decks. This one stays about the new hire.
Privacy (US 9.1): a new hire only ever sees their own journey and their own assessment. Nothing about anyone else.
ⓣ one-tapⓢ select-card◐ slider/segment⌨ type (exception)★ the one focus♥ encouraging floor (always present)
Pre-board · before day one
Stage 0. A warm welcome and the shape of things before you even start.
Welcome pagebefore day 0
Arrives by email link after the offer. The goal is simple: turn up on day one feeling like you are arriving, not guessing.
Header · greeting · stage
"You start Monday. Here is the shape of your first six months."
Butterfly progress appears hereone facet already lit
Your six months, at a glance
Welcome · Settle · Grow · Reflect · Onward (a gentle preview, nothing to do)
What day one looks like
where to be, when, what to bring. No paperwork; that lives in the HRIS.
Why it is built this way
1Endowed progress. The butterfly starts with one facet already lit, so you are never at zero.
2People before tasks. You meet your manager and buddy by name before day one.
3No admin. Operational onboarding stays in the HRIS; this is only belonging.
Today
Your daily home. What is due now across everything, led by one thing. Covers US 2.1 (due now), 2.2 induction, 2.3 compliance, 2.4 add-own, 3.3 people.
Behind / laggingdesigned first
A few days away, a compliance item overdue. The screen holds you, never scolds. Compliance still must get done, but framed as a kind, tiny next step.
Header · greeting · stage
"Welcome back, Rachel."
Butterfly progress appears herestill shows growth, never failing
1♥ Benny · the encouraging floor
"No stress. Let us do one small thing, you will feel better for it."
2★ The one thing today
An easy re-entry win
Not the scariest overdue thing. A small win first, to rebuild momentum.
ⓣ one tap
Due this week
Company values, the 3-min version
3Data privacy, "let us clear this, 2 min"
+ add your own · see the rest of the week
4How you are doing (pulse)
"How is the week? It is okay if it has been a lot."
ⓢ three taps, never a text box
5Your people
"Arjun is around if you want a hand"
Why it is built this way
1The encouraging floor. A warm, forward line is always here; kindest when you are behind. Held, not judged. ♥ rule
2Focus is an easy re-entry. Not the scariest overdue item, a small win first (endowed progress).
3Overdue is kind and actionable. It stays visible, but 'let us clear this, 2 min', warm amber, one-tap launch. Never a red scolding.
4The pulse checks in gently when someone is struggling. Three taps, no typing.
5Buddy offered as support, not pressure. Relatedness as a lifeline.
On trackdefault
A normal day, three weeks in. One meaningful thing, a short feed, the butterfly growing.
Header · greeting · stage
"Good morning, Rachel. Settle · Month 1."
Butterfly progress appears hereday 24 / 180
1♥ Benny · the encouraging floor
"You are settling in nicely. Here is today."
2★ The one thing today
This week’s buddy check-in with Arjun
A relaxed 20 minutes. Bring anything, or nothing.
ⓣ one tap
3Due this week · one feed
Company values, the 3-min version
Client landscape primer, from Deepa
+ add your own (chip) · see next week
4Where you are + see my journey
stage spine · the butterfly is tappable
Why it is built this way
1The encouraging floor is here even on a good day, a light, positive line.
2One primary action. The focus card is the only loud thing; everything else is quiet.
3One unified feed, this week only. Every row is a tap target; see next week expands so density stays calm.
4See my journey sits on the progress strip and the tappable butterfly, no extra chrome.
First dayempty ≠ blank
Day one. Pre-filled and warm; the buddy is being assigned; almost nothing to do, on purpose.
Header · greeting · stage
"Welcome, Rachel. Today is the day."
Butterfly progress appears hereone facet lit
1♥ Benny · the encouraging floor
"Just one gentle thing today. That is genuinely all."
2★ The one thing today
Say hi to Arjun, your buddy
Fifteen minutes, no agenda. A friendly face who has been where you are.
ⓣ one tap
3A gentle start
Read Deepa's welcome note
Add a photo, so people know you
Empty, not blank
buddy: "being assigned soon" · people: "your manager will suggest people"
Why it is built this way
1The encouraging floor: today is just one gentle thing, and that is genuinely all.
2One easy first win lights the first facet (the Apple rings moment).
3A couple of tiny things, and pending items read as reassurance, never a blank.
All caught upcalm
Nothing due this week. We reward the caught-up state warmly and never invent busywork.
Header · greeting · stage
"You are all set for this week. Breathe."
Butterfly progress appears hereday 30 / 180
1♥ Benny · the encouraging floor
"Nothing due right now. Genuinely, take the win."
2Calm state · no busywork
optional, no pressure: "want a head start?" or a look-ahead
What is coming · your people
Why it is built this way
1The floor still speaks: calm is celebrated, not treated as empty.
2Get-ahead is optional (autonomy), never manufactured busywork.
Supporting screens · drill-ins from Today
The small views you open from the feed, where the details and states live. Not menu items.
Content viewerUS 2.2 · 3.4
Open an induction piece, or a manager orientation item that is clearly attributed to them.
Breadcrumb · back to Today
Content · video / text / link
Mark complete
ⓣ autosaves, on to the next
Why it is built this way
1One tap to complete, autosaves, then offers the next.
2Manager orientation sits beside HR content, always attributed.
3HR mandatory content cannot be altered.
ComplianceUS 2.3
The one place things are truly required. Painless, honest, and provable.
Compliance item
due Fri · from your join date If overdue
kind and clear: "let us clear this, 2 min". Never a red scolding.
Proof · attestation
completion recorded for audit (US 1.4)
Why it is built this way
1Due dates are relative to your join date.
2Proof recorded for audit; status is icon + text + date, never colour alone.
3Overdue is handled kindly, with a two-minute next step.
People, mark metUS 3.3
Who to meet, chosen by your manager, marked off as you go.
People your manager suggested
Priya, Design Lead
nominated by Deepa
Sam, Engineering partner
met
Why it is built this way
2Your manager sees who is still pending (their screen, not yours).
3Faces make it human, not a checklist.
Add a taskUS 2.4
Your own to-dos, kept in the same place.
Add your own task
quick-add chips first · type only if you need to
Your tasks
visible to you and your manager
Why it is built this way
1Chips first, typing only if needed.
2Complete or delete freely.
3Visible to you and your manager, so they can help.
My Journey
The whole six months in one place. Where you are, what you have done, what is ahead. Covers US 2.1.
Settle activeearly
The current chapter opens into its streams; later chapters are visible but locked. This is where 'see my journey' lands.
The whole six months
Welcome ✓ · Settle now · Grow / Reflect / Onward locked
The butterfly lives here, full sizeyour progress at a glance
Settle · your streams, with progress
Coming later · locked
Grow (learning) · Reflect (assessment) · Onward · each shown as "opens Month X"
Why it is built this way
1The butterfly is the hero here, full size, always your progress at a glance.
2Per-stream progress shows the shape of settling in.
3Future stages are visible but honestly locked, so you know what is coming.
Grow activemid
Months on, the learning plan is live and Settle now reads as done.
Halfway
Welcome ✓ Settle ✓ · Grow now · Reflect / Onward locked
Butterfly, roughly half filledviolet wing complete
Grow · your learning plan by skill
Why it is built this way
1The plan appears grouped by skill category.
2The butterfly is roughly half filled, the violet wing complete.
3Momentum is visible without any pressure.
Completearrival
Month six. The butterfly finishes and onboarding becomes a beginning.
Onward · a real arrival
all five stages complete
Butterfly fully assembledfully you
Where you landed
"3 strengths, 2 growth areas" flow into your Career Planner
Why it is built this way
1A genuine arrival moment, not a quiet end.
2The outcome flows into the Career Planner.
3The full butterfly is the reward for six months.
Learning
Switches on at Grow. An AI plan from your role skills, in weekly bites, shaped by your manager. Covers US 4.1 receive, 4.4 complete.
Locked (during Settle)opens Month 3
Honest and calm: it is not time yet, so there is a warm look-ahead and nothing to do.
Learning · not open yet
"Your learning plan opens in Month 3, built around your role."
Meanwhile
a gentle preview of what is coming, nothing to do yet
Why it is built this way
1Never a broken or empty plan; a real waiting state.
2Sets the expectation so Grow does not arrive from nowhere.
Active planlive
Each item shows the skill it builds and when; your manager's reasons are visible.
Header · greeting · stage
"This week of learning. Grouped by skill."
Butterfly progress appears hereday 96 / 180
Technical / functional
Design systems foundations
builds: Accessible Design Behavioural · Leadership
Influence without authority
From Deepa
"bumped Accessibility up, Checkout needs it this quarter"
Why it is built this way
1Learning tied to your actual role skills, which is the whole point of Mosaix.
2Tap to open, tap to complete; progress feeds the butterfly.
3The manager's priority note explains the 'why', building trust.
Behind / no frameworkedge
Two gentle edges: falling behind, and the skills framework not being ready.
Behind
"Pick one small unit, no rush." Same encouraging floor.
No framework yet
"Your plan is being prepared." A first-class waiting state, not an error.
Why it is built this way
1Learning is never a guilt machine; the tone matches the rest.
2If the framework is not defined, we say so kindly (a known dependency).
My Skills
Your skill picture, always building. The state (where you are), not an event. Feeds from learning and the assessment.
Taking shapeearly
Before much has happened, a quiet, encouraging view of skills starting to build.
My Skills · taking shape
"As you learn, your skills fill in here."
Why it is built this way
1No pressure, no scores; just a sense of growth.
2Answers the new-hire worry of 'how am I doing' long before the formal review.
Your picturelive
As learning and the assessment feed in, your level per skill is here whenever you want it.
My Skills · your picture
where you are across your role skills, any time
Why it is built this way
1Read-only and calm; tap any skill for detail.
2The same skill language as learning and the assessment, so it all lines up.
Assessment
Switches on at Reflect (Month 6). Your light self-assessment, then your outcome. The event, not the state. Covers US 5.1 self, 5.5 outcome.
Locked (before Month 6)opens Month 6
Honest and calm: not time yet, so a gentle heads-up and nothing to do.
Assessment · not open yet
"Your six-month check-in opens at Month 6."
Meanwhile
nothing to do; a calm heads-up that it is coming
Why it is built this way
1Never opens early; the timing is respected.
2No looming countdown; a calm note is enough.
Self-assessmentMonth 6
A short, low-pressure self-rating on your role skills, plus a brief reflection.
Self-assessment · Month 6
"Rate yourself, honestly. A few minutes."
Rate a skill · pick a level
Basic · Developing · Proficient · Advanced · Expert · N/A
ⓢ tap a level, no typing
A short reflection
◐ slider or prompt first, typing optional
Why it is built this way
1Tap a level, never type a grade. N/A is allowed.
2The reflection starts as a slider or prompt; typing is optional.
3Deliberately a few minutes, not a form.
Outcomereleased
You see where you landed, released as a growth moment.
Your outcome, once released
shown as growth, not a score dump
Skills · you vs your manager
Strengths & growth areas
flows into your Career Planner
Why it is built this way
1Your self-rating sits next to your manager's, with context.
2Strengths and growth areas are clear, not a raw grid.
3A doorway into the Career Planner closes the loop.
Updates
Notes and reminders in one calm place. Covers US 8.1.
Your updatespaced
Reminders and warm social notes, paced so they support rather than nag.
Updates · paced, gentle
in-app and email, never a red-dot pile
A new learning unit is ready
Compliance due Friday, a gentle nudge
Why it is built this way
1Paced digest, not event-spam. A soft count, never an anxious red badge.
2Carries the encouraging-floor tone: due reminders are gentle.
3A quiet reason to come back, not a pressure device.
Transition · the pay-off
After Month 6, the outcome flows forward and onboarding closes. Covers US 7.1.
Hand-off to Career PlannerUS 7.1
The six months become the start of your development, not a dead end.
Onward · the hand-off
onboarding closes, development begins
Butterfly fully assembledthe pay-off
Where you landed
3 strengths, 2 growth areas
Flows onward
seeds your IDP · Career Planner proposes next steps · onboarding closes
Why it is built this way
1The full butterfly is the reward, earned over six months.
2The assessment seeds your IDP; Career Planner proposes next steps.
3Onboarding closes on a high, and hands you forward.