Engineering Masterpiece
Role
Lead Engineering
Duration
3 years
Year
2019
Overview
BaseBox is an enterprise-grade AI SaaS boilerplate that provides end-to-end system templates for rapid product innovation — from authentication to deployment pipelines. The goal was to create a design-forward foundation that teams could adopt in days, not months, reducing redundant groundwork across early-stage product teams.
Project Details
The Problem
Early-stage SaaS teams spend up to 40% of their initial sprint cycles re-building identical foundational systems — auth flows, onboarding, dashboards, billing, and settings. This creates significant time-to-market drag and leaves teams with inconsistent design quality across core product surfaces.
The Goal
Design a cohesive, modular SaaS template system that could be adopted by any team regardless of industry vertical — reducing foundation setup from months to under a week while maintaining design excellence at every touchpoint.
Research Insights
What the research revealed.
Setup Paralysis
8 out of 10 early-stage startups interviewed reported losing 6–12 weeks on foundational setup before touching core product problems.
Design Inconsistency
Teams using component-less templates produced UI with 3× more visual inconsistencies in the first 3 months compared to teams using design systems.
Onboarding Drop-off
60% of SaaS products lose new users in the first onboarding session due to poorly designed empty states and unclear activation flows.
Design Process
How it was built.
Wireframes
Starting with information architecture mapping, I wire-framed all primary surfaces: landing, auth, onboarding, main dashboard, settings, billing, and team management. Each screen was mapped to a user mental model rather than a developer data model.
User Flows
Defined 4 core user journeys: new user activation, team invitation, feature discovery, and subscription management. Each flow was optimized for minimum friction, targeting under 3 taps for primary actions.
Iterations
3 major design iterations based on usability testing with 12 early adopters. Iteration 1 focused on layout hierarchy, Iteration 2 on onboarding clarity, and Iteration 3 on empty state design and progressive disclosure patterns.
Final Solution
The delivered product.
A comprehensive 40+ screen design system with modular components, pre-built user flows, and adaptive dark/light themes. Every surface ships with thoughtful empty states, error handling, and success patterns.
40+ production-ready screens covering all core SaaS surfaces
Unified design token system with dark/light theme support
Fully annotated Figma file with component variants and usage guidelines
Interactive Framer prototype for stakeholder presentations
Design Decisions
Why these choices were made.
Sidebar over Top Navigation
A persistent left sidebar enables faster feature discovery and scales better as products add features — top navigation collapses under complexity while sidebars remain scannable.
Progressive Onboarding over Full Completion
Rather than gating access behind full profile completion, users enter the product immediately with contextual prompts surfaced inline — reducing activation friction while nudging toward completeness.
Token-Based Design System
Using semantic tokens (--color-surface, --color-primary) instead of hard-coded values means teams can retheme the entire product in hours, not days — critical for white-label use cases.
Outcomes
The results.
Setup Time
−78%
Reduction in onboarding setup time for adopting teams
Teams Onboarded
12+
Early-stage teams using BaseBox as their foundation
Screens Delivered
40+
Production-ready design screens across all surfaces
Satisfaction
4.8/5
Average rating from adopting team leads
Reflection & Next Steps
What I learned.
BaseBox taught me how to design for zero-context users — people who arrive at a product without any prior knowledge. The biggest insight was that great empty states are as important as great filled states. In the next iteration, I would invest more in animation and micro-interaction guidelines to give the template a stronger sense of life from day one.
Next Steps
Design a mobile companion app for team management on the go
Create industry-specific variants (fintech, health, edtech)
Build an interactive component library alongside the Figma system