Built scalable design foundations for talent mobility platforms
Creative Director, Engineer
Overview
Cobrainer's talent mobility platform was scaling rapidly, but their design-to-development process was breaking down. The team was hacking Google's Material UI to fit their product needs, creating inconsistent components that required constant designer-developer back-and-forth. Each feature took longer to ship, and the small product team couldn't afford this inefficiency.
Context: Cobrainer helps companies retain talent through skill-based job recommendations and reskilling programs—requiring complex data visualization and user workflows that generic UI kits couldn't handle.
The Challenge
Working with a lean team (Creative director + 1 Engineer), I was tasked with creating a scalable design foundation while the creative director focused on finalizing v2.0 cross-platform product screens. The existing MUI-based approach was causing issues, such as:
- Slow development cycles due to constant component customization
- Design debt from inconsistent UI implementations
- Endless spec iterations between design and engineering
System Architecture
Design Tokens Foundation: Established core visual language including color palette, typography scale, spacing system, iconography, shadows, and corner radii—creating the atomic building blocks for all future components.
- 30+ Component Library
- Atomic Components: Buttons, form inputs, cards, alerts, toasts
- Complex Organisms: Job architecture components specific to talent mobility workflows
- Documentation: Complete usage guidelines and implementation specs
Streamlined Hand-off Process: Integrated Tokens Studio with Figma to create developer-ready
specifications that eliminated design-dev miscommunication and reduced iteration cycles.
Key Design Decisions
Custom Over Generic: Rather than forcing MUI components into unnatural shapes, I designed purpose-built components optimized for Cobrainer's talent management workflows.
Systematic Constraints: Consolidated similar component variations into flexible, reusable patterns - prioritizing scalability over design whims.
Developer-Centric: Documentation Created specifications that developers could implement directly without constant clarification, using Tokens Studio to maintain design-code consistency.
Solution & Impact
I built a comprehensive design system that transformed scattered MUI hacks into a cohesive, scalable component library.
Impact:
- Over 40% faster development for new features using system components
- Reduced design-dev iterations from multiple rounds to single handoff
- Improved delivery velocity enabling more features shipped per sprint
- Enhanced visual consistency across the entire platform
- Scalable foundation supporting continued product team growth
What I learned
Generic ≠ Scalable: Material UI looked like a shortcut but became a bottleneck when product needs diverged from Google's patterns. Purpose-built systems require more upfront investment but pay exponential dividends.
Documentation drives adoption: The best components are worthless if developers can't implement them correctly. Clear specs and usage guidelines are as important as the design itself.
Constraints enable creativity: By consolidating component variations into systematic patterns, we actually unlocked faster design iteration—fewer decisions, better focus on user problems.
To keep exploring, go to my other case studies.
