PREDICTION MARKETS PLATFORM
Building a complete design system for a prediction markets platform. 40 component sets, 14 user flows, and a custom Rive animation system built for speed and developer confidence.
THE CHALLENGE
Stackit needed a full design system from scratch. The platform had to handle complex prediction markets while staying intuitive for casual sports fans. Every component needed to cover real-world states, sizes, and edge cases before a single screen was assembled.
THE APPROACH
I built components first, screens second. Each component was documented with states and usage guidelines before being assembled into user flows. This gave developers complete specifications upfront instead of discovering edge cases mid-build.
The system included 40 component sets with 154 total variants. Buttons alone had 72 variants covering state, size, and context. The documentation took longer upfront but cut back-and-forth during implementation.
PROCESS
Before touching Figma, I mapped the decision logic — signup, age verification, geofencing — as a flowchart. Then I used AI-assisted prototyping to test in minutes whether the flow actually worked. When something was missing, I updated the diagram and rebuilt. That caught gaps before they became development rework.
Eleven screens, zero color, full flow logic, including edge cases like age verification and geofencing rules. This gave engineering something to build against while the design system was still being defined.
THE PLEXUS
The concept came from a conversation with a neuroscience advisor on the team. Could navigation feel like exploring a neural network instead of scrolling a list? A circular menu surrounds a central point, showing categories like trending markets and favorite leagues. Behind it, pulsing nodes hint at more. Tap one, and it surfaces markets personalized to what you follow.
What's embedded here is the animation layer. The full interaction, tap to zoom, card load, runs in the source file, built and waiting to be wired to a live feed.
THE SYSTEM
3 months
Rapid delivery from concept to build
Zero design debt
Components defined before assembly
Fast execution
Clear specs enabled first-time builds
THE IMPACT
Component sets
Total variations
Complete flows
Built entire UI system with specs so precise developers executed QUICKLY AND CONFIDENTLY. I'd work with him again without hesitation.
— Georges Rahbani
Engineering Director, Stackit
REFLECTION
Engineering didn't need a finished color palette to start building, they needed the logic. So wireframes came first, then components, then color. Everything evolved in parallel instead of in sequence.
I use AI to generate more directions than I could explore alone, then decide which one is right. The judgment part never changes. Only how fast I get there.