Designing an MVP and building its scalable Design System.
As the first designer at inLoop, I designed the product UI for launch and built an accessible design system from scratch.
Role
First Designer
Team
First designer + technical founder
Timeline
2025
Company
inLoop
The Result
Design system built from scratch
Designed the product UI and built an accessible design system as the first designer at inLoop. Every token, component, and pattern was an original decision with accessibility built in from day one.
Zero
Starting Point
No existing system or patterns
WCAG AA
Accessibility
Built in from day one
First
Role
Every decision was original
Cross-fn
Collaboration
Design + engineering
The Product
A CRM for non-profit fundraising.
inLoop is a CRM built for non-profits to track their fundraising efforts. The technical founder had already built working functionality, but the product needed a modern UI designed around what existed. As the first designer, there was no design system, no component library, and no established patterns. I needed to design a product UI that worked with the existing functionality while building the system that would scale the product beyond launch.
Design Requirements:
- 1Create a modern UI for the MVP launch
- 2Create a scalable design system
- 3Follow WCAG accessibility standards
The technical founder's existing screens that I used as a starting point for the UI redesign.
UI Design
Designing the product screens for launch
The technical founder had already built the core functionality, so my job was to design a modern UI around what existed. Working closely with him, I designed the core screens for the MVP: dashboard, contacts list, contact detail, and fundraising views. Each screen revealed which spacing values, color pairings, and component patterns would recur. The design system was extracted from real product needs, not theoretical ones.
Contacts screen with highlighted design changes.
Assorted screens after updating the UI Design.
Design System
Extracting patterns into a scalable system
Built a semantic color token system with explicit contrast ratio documentation. The system wasn't just accessible by coincidence. Accessibility shaped the entire token architecture: which colors could pair, which font sizes worked at which weights, and how interactive states communicated to all users.
Reflection
What I learned
Building a design system from scratch taught me that the hardest part isn't the components. It's the decisions behind them. Every token, every spacing value, every color pairing is a decision that will be inherited by everyone who uses the system. That responsibility shapes how you think about design.
Designing the product first and extracting the system from real decisions produces a more useful design system than building one in the abstract.
Design systems are communication tools between design and engineering. The documentation matters as much as the components.
First designer judgment means every decision sets a precedent. Document the "why," not just the "what."
Next Case Study