Onboarding
Ecowave Flip Card
Day-one onboarding built as five flip cards, with the wrap-up locked until every card is opened.
Concept project — self-directed, built to a fictional client brief
- Articulate Storyline 360
- Figma
- Screens
- 7
- Cards
- 5
- Completion gate
- All 5
- Seat time
- ~5 min
The brief
First-day onboarding is a pile of unrelated facts — culture, tools, who to call, what's expected — and a linear module makes the learner sit through all of it in an order that suits nobody. The content genuinely has no natural sequence, so the design shouldn't impose one.
Learning objectives
- Describe EcoWave's company culture and how it shows up in daily work.
- Locate and access the tools needed to start work.
- Identify who to contact for common first-week questions.
- State what's expected during the first week.
Design decisions
Learner-chosen order
Five cards on one screen, opened in any order — "Click the cards on the left to see more information!" Because none of the five topics depends on another, forcing a sequence would only add friction. The learner starts wherever their question is.
Free order, but full coverage
A boolean variable per card, and the conclusion stays shut until all five are true. Free navigation and complete coverage are usually a trade-off; five variables buy both.
One screen, no scrolling
Cards on the left, content revealed on the right, everything inside one screen. Nothing collapses out of view, so the learner can always see how much is left — which is what makes an unordered menu feel finishable rather than open-ended.
Restrained visual system
One teal accent, rotated diamond cards, photography in the lower half and the label in the upper. A repeated card shape means the fifth card needs no explaining.
Walkthrough
Welcome
"Welcome to Employee Onboarding Essentials at EcoWave Solutions!"
The five cards
Company Culture · Tools to Get Started · Essential Contacts · First Week Expectations · Onboarding Success Path — opened in any order.
Conclusion
Unlocks once all five cards have been viewed.
Build notes
- Five boolean variables tracking card views, with a conditional gate on the conclusion.
- Flip-card reveal on a single screen — no scrolling, no layer stack.
- Custom rotated-diamond card shapes and states designed in Figma.
Assessment
None, deliberately. This is reference content for someone's first day, not a competency check — testing recall of a phone list would only add anxiety to a nervous morning. The completion gate confirms coverage; that's the appropriate bar here.