B2B SaaS Mascots: Onboarding, Empty States and 404s
By the Charmotion team · Updated
In a B2B SaaS product, show the mascot where users have nothing to do yet: first-run onboarding, empty states, setup milestones and the 404 page. Keep it off dense working screens, retire it as people become power users, and let them hide it. Ship it light: a still poster first, transparent motion for both themes, and nothing that blocks work.
Key takeaways
- NN/g's empty-state guidelines: show system status, teach, and give a direct path; the button does the work, the mascot sets the tone.
- Apple's HIG advises against motion on frequent interactions, which is the rule for retiring the mascot from daily screens.
- Digital.gov advises against cutesy 404 messages; a calm mascot is fine if the copy is plain and the page returns a real 404.
- GIF and MP4 have a baked-in background, so dark mode needs transparent video, Rive or one export per theme.
- Rive's canvas-lite web runtime (2.44.0) is about 373 KB compressed with brotli, paid once per site; lazy-load it after the page is usable.
Already have a character or logo? See your character in real app screens: splash, onboarding, loading and empty-state screens. It's free, runs in your browser and uploads nothing.
Where does a mascot belong in a B2B product?
On screens where the user is waiting, starting or stuck, not where they are working. A quick map:
| Screen | State | Keep for power users? |
|---|---|---|
| Welcome and first-run tour | wave (2), then idle (0) | No; first run only |
| Setup checklist step done | yes | No; disappears with the checklist |
| Integration connecting, data importing | loading (5) | Yes, while it runs |
| Import or setup complete | success | Yes; it's rare |
| Empty project list (first use) | idle (0) plus a create button | Only while it's empty |
| Everything cleared (no items left) | happy (1) or sleeping (8) | Yes; it's a reward |
| No search results | idle (0) plus "clear filters" | Optional |
| 404 or maintenance | sleeping (8) or idle (0) | Yes |
| Tables, dashboards, editors | None | Never |
| Billing, permissions, security, form errors | None | Never |
For the step-by-step wiring of onboarding and empty-state triggers in SwiftUI, Compose, Flutter and the web, see add a mascot to onboarding and empty states. This guide covers the B2B decisions around it.
What makes a good empty state with a mascot?
Nielsen Norman Group's guidelines for empty states in complex applications give three jobs: communicate system status, provide learning cues, and offer direct pathways to key tasks (NN/g). The mascot can support all three, but it can't do any of them alone.
- Status first. NN/g warns against showing "No records" while content is still loading. Show the loading loop until the query finishes, then the empty state.
- Teach in one sentence. "Projects collect your team's tasks. Create one or import from Jira." The character sits beside it, not instead of it.
- One primary button. The direct path is the most important element on the screen. Put it closer to the eye line than the mascot.
- Match the kind of empty. First use gets a welcome (idle or wave). A user-cleared list gets a small reward (happy). No results gets neutral idle and a way to widen the search. "No permission" gets no mascot at all, just who to ask.
When should the mascot step aside for power users?
As soon as a screen becomes routine. Apple's motion guidance says to "generally avoid adding motion to UI interactions that occur frequently" and to "let people cancel motion" rather than making them wait for it (Apple HIG). Microsoft's Office Assistant, Clippy, is the standing example of a character that kept interrupting people who already knew what they were doing (Wikipedia).
A retirement plan that works in most B2B products:
- Tie onboarding states to onboarding. When the setup checklist is complete or dismissed, its mascot moments go with it.
- Keep only rare moments. Imports finishing, milestones, empty states and the 404 page stay; per-action reactions go.
- Give a setting. A "Show mascot" toggle in user preferences, and a workspace-level default for admins who want a quieter product for everyone.
- Respect system settings. With reduced motion on, show stills (MDN).
Should a 404 page have a mascot?
It can, if the page stays useful. The U.S. Web Design System's 404 template advises: "Avoid funny, cutesy, or whimsical error messages", because users may not appreciate levity when they're trying to reach something important. It also says to let users know what they can do next and to include the main navigation (digital.gov).
A 404 page that works with a mascot:
- a calm sleeping or idle loop, not an error reaction or a joke,
- a plain heading such as "Page not found" and one line on why it might have happened,
- search, a link to the dashboard and the main navigation,
- a real HTTP 404 status from the server. Google treats an error page served with a success code as a soft 404 (Google Search Central).
Keep this page light: a small video or a still is enough. Don't load a full animation runtime on a page whose only job is to send people somewhere else.
How do I handle dark mode?
Pick a format that doesn't carry its own background, or make one export per theme.
- Rive draws on a transparent canvas, so one .riv works on light and dark themes.
- Transparent video: WebM with VP9 alpha for Chrome, Firefox and Edge, and HEVC MOV with alpha for Safari.
- GIF and MP4 have a solid background baked in. On a dark theme, a light box around the character looks broken. Make a version on each theme's surface color and swap them with a
prefers-color-schememedia query or your app's theme class (MDN).
Also check the character itself on dark backgrounds. Dark outlines and navy details can disappear; a soft light card behind the mascot is a cleaner fix than recoloring it.
What performance budget should a SaaS mascot have?
The mascot should never be the reason a screen is slow.
- Runtime cost. Rive's canvas-lite web runtime 2.44.0 is about 373 KB compressed with brotli, and the canvas and webgl2 builds are larger (Rive). That is paid once per app, so it suits a product with many mascot moments more than a single 404 page.
- File cost. One .riv holds every state. In one real Charmotion set of 17 animations, the .riv for all animations was 40 KB (12 KB with brotli), while the MP4s together came to 2.6 MB and the transparent WebMs to 6.1 MB.
- Load order. Render a still poster in the layout, load the runtime after the page is interactive, and swap in the animation when it's ready. Never block onboarding on an animation file.
- Not GIF on the web. web.dev recommends replacing animated GIFs with video for faster loads (web.dev). Keep GIFs for email and docs.
Charmotion delivers that .riv with a mood number input and trigger inputs (paid plans, from $20/month), plus transparent WebM and HEVC MOV for themed pages, and MP4 and GIF for emails and help docs. It is one character in 17 animations; it doesn't add new poses such as pointing at a button, so tooltips still need an arrow.
Frequently asked questions
Should B2B software have a mascot at all?
It can, if the character stays on onboarding, empty states and rare milestones and stays off working screens. Buyers judge B2B tools on competence, so test the tone with real customers, give users a setting to hide it, and never put it on billing, permissions or security screens.
How do I let users turn off a SaaS mascot?
Add a Show mascot toggle in user preferences and a workspace default that admins can set. When it is off, replace each state with nothing or a small static icon, keep all text unchanged, and also switch to stills automatically when the system reduced-motion setting is on.
Is a funny 404 page bad for SEO?
Humor doesn't affect rankings; the status code does. The server must return HTTP 404 for missing pages, or Google may report a soft 404. The bigger risk of a joke is usability: digital.gov advises plain messages, a next step and the main navigation instead of whimsy.
Quick answers from this guide
Sources
- Designing Empty States in Complex Applications: 3 Guidelines, Nielsen Norman Group
- Motion, Apple Human Interface Guidelines
- 404 page template, U.S. Web Design System (digital.gov)
- How HTTP status codes, and network and DNS errors affect Google Search, Google Search Central
- Runtime sizes, Rive
- Replace animated GIFs with video for faster page loads, web.dev
- prefers-color-scheme, MDN Web Docs
- prefers-reduced-motion, MDN Web Docs
- Office Assistant, Wikipedia