Onboarding self-service tool
We were scaling fast, but onboarding was still stuck in the stone age, running on a single anxiety-provoking spreadsheet. The tool we built broke the bottleneck and gave us a clear path to full client self-service.
COMPANY
Simpology (fintech, white-label mortgage products)
ROLE
Lead UX/UI Designer
DURATION
26 weeks
TEAM
FE Dev, BE Dev, QA, PM, UX
PROBLEM
Configuration and branding setup caused onboarding delays, high operational cost, client frustration and lost revenue.
SOLUTION
Launch a self-service tool to streamline onboarding.
IMPACT
- 35% operational cost saving
- 50% time-to-launch reduced
- 81% client satisfaction score during onboarding
My role & influence
- Reframed onboarding as a business bottleneck
- Prioritised high-impact, low-effort solutions with product and engineering
- Drove a phased delivery plan to manage risk under tight constraints
- Designed Phase 1 (Form Editor) with scalable UX patterns
- Scoped Phase 2 (Canvas Editor) to expand client autonomy
Customisation is what sets us apart
Onboarding new clients at Simpology required manually setting up a metadata spreadsheet with thousands of rows, used to configure a dynamic form builder.
As the client base grew, this process became a major liability:
- 30% tickets were related to onboarding new clients
- $500K in operational cost per year
- 6+ month launch delay causing $480K lost in revenue annually
- Constant strain on support, devs and client teams
bookmarkCustomisation that set us apart also made it hard to scale.
Workshop showed a bottleneck
I kicked off with a 3-hour cross-functional onboarding workshop including Support, AMs, Engineers and PM. We mapped the actual onboarding flow and surfaced pain points:
- Branding was blocked by design and dev dependencies
- Configuration relied on fragile spreadsheet no one fully understood
- No preview or validation existed at any stage, leading to avoidable rework
- Process was slow and repetitive
To dig deeper, I mapped the two biggest sources of friction separately:
Branding flow
Configuration flow
The detailed view confirmed that manual processes, technical dependencies and a lack of visibility were slowing every launch.
Problem statement
Configuration and branding setup caused onboarding delays, high operational cost, client frustration and lost revenue.
Client, User & Business needs
Client needs
Lender
- Fast, smooth onboarding
- Accurate setup matching brand and processes
User needs
Account manager
- Intuitive, no-tech-skill tool
- Quick setup
- No repetitive tasks
- Live preview to reduce errors
- Built-in error checks
Business needs
Simpology
- Lower operational cost
- Reduce opportunity cost from delays
- Scale without growing headcount
bookmarkHow might we streamline configuration and branding setup?
Success metrics
- 80% reduction in operational effort during onboarding
- Time to launch cut from 6 months to 1 month
- 90% CSAT during onboarding
Concepts explored
I explored three product directions to solve onboarding at scale. Each concept was evaluated against user needs, technical feasibility, impact and effort required.
Option 1: Canvas editor
Needs met
- Intuitive tool that requires no technical skills
- Quick application of branding
- Minimise repetitive tasks
- Live preview to reduce guesswork
- Built-in checks to prevent rework
Key challenges
- Highest front‑end engineering complexity
- Requires performant, sandboxed rendering of live UI
- Longer QA testing
High impact
- ~90% reduction in support tickets
- ~80% faster time‑to‑launch
- Significant lift in client satisfaction
High effort
- UX/UI, PM, BA, 2 FE, 2 BE, 2 QA engineers (40-50 weeks Dev work, 30 weeks Design, 30 weeks QA)
Option 2: Form Editor
Needs met
- Quick application of branding
- Minimise repetitive tasks
- Built-in checks to prevent rework - met 50%
Key challenges
- Client continues to depend on internal teams
- No live preview, leading to errors and rework
- User still needs JavaScript knowledge
Medium impact
- ~50% reduction in support tickets
- ~45% faster time‑to‑launch
Low effort
- UX/UI, BA, 1 FE, 1 BE, 1 QA engineers (20 weeks Dev work, 4 weeks Design, 4 weeks QA)
Option 3: Guided wizard
Needs met
- Intuitive tool that requires no technical skills
- Quick application of branding
- Minimise repetitive tasks
- Live preview to reduce guesswork
- Built-in checks to prevent rework
Key challenges
- Doesn’t cover every configuration scenario
- Impossible to complete setup only with this tool
Low impact
- 20% reduction in setup time
- Improves time-to-value and client satisfaction
Medium effort
- UX/UI, BA, 1 FE, 1 BE, 1 QA engineers (30 weeks Dev work, 6 weeks Design, 6 weeks QA)
Constraints
- 24 weeks to reduce onboarding-related support load
- Only 1 FE and 1 BE engineer (part-time), 1 QA
- The team has minimal familiarity with the metadata schema, risk of unexpected issues.
Tradeoffs
I facilitated a tradeoff workshop with Product and Engineering to align on direction and clarify which path delivered the most value within our constraints.
With just 24 weeks and limited resources, we needed a pragmatic solution that delivered the most impact.
| Criteria | Canvas Editor | Form Editor | Guided Wizard |
|---|---|---|---|
| User needs met | 100% | 65% | 30% |
| Impact | High | Medium | Low |
| Effort | High | Low | Medium |
| Risk | High | Low | Medium |
Form Editor (option 2) was the most strategic choice because it:
- Addressed 65% of the most common onboarding needs
- Significantly reduced internal team time spent on repetitive setup
- Had the lowest build effort and learning curve
- Established reusable components and mental models for future iterations
bookmarkForm Editor served as a stepping stone toward the Canvas Editor.
Splitting Branding and Configuration
To move faster, reduce risk and complexity, I proposed to split the problem into two distinct product tracks:
A. Branding setup
B. Configuration setup
A. Branding setup
Strategy
I designed every part of the branding tool with the future Canvas Editor in mind.
- The "Style Generator" served as the early version of what would become the "Brand Base".
- The colour picker, validation logic, contrast checks and fallback behaviour were all built as modular components, intentionally designed to be reused.
bookmarkThis allowed us to validate complex styling patterns early.
Key design decisions
| User need | Design decision |
|---|---|
| Fast, non-technical first-time setup | Auto-generate full theme by mapping 3 input colours to 91 style variables |
| Easy palette revisions | Added interactive colour picker with immediate visual feedback |
| Upload brand assets | Logo, favicon and contact info with inline guidance |
| Reduce errors and rework | Built-in validation, fallbacks for missing values and contact format checks |
| Live preview | Live preview via colour swatches and instant publish |
User testing and revisions
I ran an informal usability testing with a Support Specialist and Account Manager. Revisions included:
- Increase discoverability of the styles generator button
- Support legacy variables upload
- Added contrast check
"Wizard" → "Generate styles"
Legacy variables view is an alternative view to the form fields, I placed them under the toggle to avoid conflicts.
Financial services must meet WCAG Level AA. That includes making sure all text, big and small, is accessible.
Final solution - Branding
Explore a full interactive Prototype
Impact
- 100% of branding completed independently
- 94% operational cost savings on branding
- 3-5% reduced time to launch
- Improved satisfaction, confirmed by stakeholder feedback.
Learnings
- Big impact from a simple tool
- Don’t underestimate the support your team needs
This tool seemed simple, but it unlocked massive value. It reminded me that the most powerful solutions aren’t always the most complex ones.
I set the direction and scoped the work, but I underestimated how much day-to-day support the team would need. Now, I stay more involved during delivery to keep momentum and make sure we stay aligned.
B. Configuration setup
Strategy
The configuration tool was also built as a foundation for the future Canvas Editor.
- Versioning, draft autosave and confirmation steps were designed as a reusable mental model for editing and publishing.
- The properties and option list editors were modular by design, ready to plug into the canvas workflow.
Key design decisions
| User need | Design decision |
|---|---|
| Quickly locate a field | Mirrored the metadata structure with hierarchical sections and subsections |
| Quickly locate a property | Grouped 53 properties into 5 categories (e.g. Display, Content) for easy scanning |
| Avoid repetitive tasks | Enabled syncing for modals reused across the app |
| Prevent user errors | Made the 'Current' version read-only and added a confirmation step before publishing changes |
| No technical skills required | Allowed users to manage option lists without writing code |
| Live preview to reduce guesswork | Deferred full live preview, but introduced publish-step preview as a workaround |
User testing and revisions
I conducted a quick, informal usability session with two internal stakeholders: Account Manager and a Support Specialist. Revisions included:
- Show default value & Reset to default
- Version comparison came from collaboration
During testing, a developer suggested expanding the publish confirmation step into a full version comparison. It aligned with user needs and was feasible to add to scope.
Final solution
Impact
- 45% drop in support tickets
- 40% faster time-to-launch
- 70% eliminated cross-team dependencies
- Positive feedback from stakeholders
Learnings
Bringing engineers in early helped us catch blind spots and find smarter, lower-effort ways to deliver key features.
Form Editor impact
While we didn’t hit every stretch goal, Form Editor (Phase 1) made real progress by cutting onboarding time in half, reducing support load by 35% and laying the groundwork for full self-service in Phase 2.
| Metric | Target | Outcome |
|---|---|---|
| Operational cost saving | 80% | 35% |
| Time to launch reduced | 1 month | 3-4 months (50% faster) |
| Client satisfaction score (CSAT) during onboarding | 90% | 81% |
Measuring CSAT
I used a 5-point Likert scale that would appear once a week after user completes a task. The tool got 81% satisfaction, showing strong positive feedback from internal users, which is above average for fintech benchmarks, 78–79%.
Strong foundation & clear gaps
Form Editor made meaningful progress, but it didn't fully solve the problem:
- Clients still relied heavily on internal teams
- Operational costs were reduced, but not to target levels
- Onboarding delays were shortened, but not eliminated
Building momentum for full self-service
Once Form Editor cut onboarding time by 50%, I pitched a scalable self-service vision to leadership.
Canvas Editor extends the impact of Form Editor by:- Enabling real-time, client-led configuration
- Eliminating back-and-forth during setup
- Reducing internal onboarding load
- Strengthening product differentiation
Design tradeoffs
| Decision | Tradeoff | Rationale |
|---|---|---|
| Made setup tool brand-agnostic | Added styling work | Avoided confusion from client branding overrides, kept setup UI stable and clear |
| Draggable, context-aware panel | Added UI complexity | Prioritises form visibility and avoids overlaying editable content |
| Separated style & settings modals | More modals to manage | Clear behaviour/appearance split, improves discoverability, enables nested IA and signals shared styles. May revisit if users experience friction jumping between modals |
| Showed visible & conditional fields | Preview isn’t a perfect snapshot | Maintains clean WYSIWYG expectations while surfacing logic clearly, marking conditional fields |
| Modal sync by default | Removed manual sync | Ensures consistency, avoids user errors, lowers cognitive load |
Cross-functional prioritisation
To reduce delivery risk and build momentum, I led early reviews with cross-functional leads to align on priorities and technical constraints. We scoped Phase 2 and made strategic tradeoffs to stay within our timeline:
Deferred functionality:
- Undo/Redo, too complex for MVP, low usage expected, supported by versioning
- Drag-and-drop, high efforts to change metadata schema, nice to have
- AI suggestions, high effort, not critical to core flows
- Mobile editing, usage data showed strong desktop preference
Iterating on Form Editor
Reused successful patterns from Form Editor:
- Brand generator
- Versioning
- Option editor
- Legacy branding support
- Publish confirmation and comparing versions
Prototype
What's next
Canvas Editor is in the design phase. So far I’ve:
- Mapped key flows Figma link
- Outlined reusable components
- Validated technical tradeoffs
Next, I’ll prototype and test core flows with internal and client users to validate the mental model, confirm usability and ensure it scales without developer involvement.
Canvas Editor gives clients full ownership, removes developer bottlenecks and accelerates onboarding. It marks a major shift in how the business scales.