Cover image for Trip Approve – Onboarding

User Experience

Trip Approve – Onboarding

Designing a seamless onboarding experience for a B2B travel approval platform.

RoleProduct DesignerYear2021Duration6 WeeksTeamProduct Manager, 2 Engineers
SaaSB2BOnboardingUX DesignFigma
Onboarding screens showing checklist, csv upload, and access rights

Trip Approve — designing a smooth user onboarding experience

Self-service for SMEs, guided setup for enterprise

Estimated reading time: 2 minutes

Project brief

Engineer an onboarding experience that SMEs can self-serve, while allowing a more manual, assisted path for larger organisations managed by tripapprove. focus on managers and employees for this iteration.

The problem

  • Existing flow involved long sequences, unclear redirections after email verification, and low-impact ui copy.
  • Early configuration screens felt overwhelming (settings/terms too soon).
  • Approval rights and high-risk flows needed clearer guidance.

Objectives

  • Primary: easy self-service onboarding for an SME office manager.
  • Secondary: straightforward assisted onboarding for large organisations (tripapprove-managed).

The solution

  1. Two clear paths — SME self-service vs enterprise assisted (request demo / guided setup).
  2. Checklist-led onboarding — manager & employee checklists with direct navigation (skip "pointer overlays"; send users straight to the target screen).
  3. Faster first-run — minimal initial fields (name + email / SSO); defer non-critical details.
  4. Data import options — csv template upload and "connect system" placeholder for future integrations.
  5. Copy & email polish — branded verification email; redirect back after verify; clearer CTA text.
  6. UI clarity — larger inputs/buttons; readable left-panel content; progress indicators.

Design approach

Research

6 interviews; 55 survey responses; 5-competitor review (sign-up, trials, ui copy, guidance). key needs: time-efficient onboarding, simple language, SSO, basic-first data entry, on-screen guidance.

Synthesis

Affinity maps, empathy maps, personas (manager/employee), 'how might we' prompts (make set-up easy, intuitive, skippable).

Prototyping & tests

Sketches → mid-fi → hi-fi in figma; moderated/unmoderated tests (useberry); iterated checklist behaviour, label clarity, and page copy.

Manager flow (summary)

  • Sign up/sign in (3 screens) with benefits panel
  • Checklist appears → add business units → add users & invites (manual or csv) → approval rights → high-risk rights → done
  • Direct navigation from checklist to target page (no hamburger detour)

Employee flow (summary)

  • Sign up/sign in (3 screens); choose "set up an account"
  • Checklist: profile, additional travellers, travel preferences (flight, accommodation, vehicle) → done

Outcomes

  • Clearer sign-up with redirect after verification; improved email copy.
  • Reduced perceived effort via minimal initial fields and checklist guidance.
  • CSV upload path defined for managers; preferences retained for delegated bookings.
  • Improved readability on landing/left panels; simplified access-rights steps.

Client feedback

"Early feedback welcomed the quick set-up, checklist approach, and clarified preferences for delegated bookings. Approval-rights and certain fields were flagged for refinement and were iterated accordingly."

Accessibility & style

  • WCAG 2.0 AA considerations (perceivable, operable, understandable, robust).
  • Retained tripapprove's steel blue primary; added complementary palette; consistent iconography.
  • Larger tap targets, visible focus, and clear headings in sentence case.

Reflection & next steps

  • What worked: Checklist-led flow; defer-non-critical; csv/SSO expectations captured.
  • Challenges: Long sequences; early tests showed users disliking overlay-guided navigation.
  • Next: Unify approval-rights ux; refine info architecture; finalise email templates; expand enterprise assisted path details.

Interactive prototypes

Want to streamline B2B onboarding?

I can walk through the research artefacts, test scripts, and the implementation-ready ui patterns for SME vs enterprise.

Contact me