Dealstack is a data-dense private equity platform used by deal and valuation teams to manage complex financial workflows, from cap tables and waterfalls to authentication and document signing flows.
As the product matured, UI inconsistencies, fragmented components and design-to-engineering friction began to slow iteration and increase maintenance costs. The absence of a unified system made scaling the product experience increasingly difficult.
This project focused on designing and engineering a production-aware design system that could support Dealstack's complexity while improving consistency, speed and collaboration across teams.
Challenge
The core challenge was not purely visual, it was systemic. A traditional, Figma-only design system would not be sufficient for a product of this complexity.
No single source of truth for UI decisions
Components designed in isolation rather than as reusable systems
Increasing inconsistency across data-heavy interfaces
High cognitive load from dense financial tables and workflows
Growing friction between design intent and engineering implementation
Objectives
Establish a scalable, unified design system for a complex financial product
Reduce UI inconsistency across core workflows
Align design decisions with real frontend constraints
Speed up iteration for both design and engineering
Create a system resilient to future product growth
Approach
Audit, structure, system — A comprehensive audit of the existing product identified recurring patterns, inconsistencies and edge cases across data tables, financial visualisations, forms, validation-heavy inputs, navigation, actions and layout primitives. Components were grouped by function and behaviour, not just visual appearance, so the system reflected how the product actually works.
Design-first, code-aware thinking — Each element was created with known frontend constraints in mind: multiple data states and edge cases, responsiveness and density variants, and reusability across product contexts. Every component had to answer one question: can this survive real data and real users?
From Figma to code — To validate the system beyond static design, I translated roughly 90% of it into working code, using AI-assisted tooling to prototype production-like components and test logic, states and scalability early. This reduced design-engineering back-and-forth and surfaced edge cases sooner.
Component library
Button system — Primary, secondary, destructive and contextual variants with loading states
Form inputs — Text, number, date and select inputs with inline validation and error messaging
Data tables — Sortable, filterable tables with pagination and density toggles for financial data
Status indicators — Colour-coded badges, progress bars and signal chips for deal and workflow states
Impact
62→85 — System health score
68% — Bundle size reduction
50+ — Components built
~90% — Design-to-code coverage
Learnings
Code validates design — Design systems must be validated in code, not just Figma.
AI accelerates, not replaces — AI accelerates exploration but does not replace design judgment.
Edge cases first — Complex products need systems built for edge cases first.
Quietly effective — The best design systems are predictable, resilient and quietly effective.
Reflection
This project marked my move from traditional product design into design engineering: working between design, systems thinking and real front-end code. It changed how I build products that have to keep growing.
Tools
Figma
Design Tokens
AI-assisted frontend tooling
React
TypeScript
How it came together
From an audit to a system that holds up on real data
Started with an audit — I went through the product and listed every pattern, quirk and edge case that kept coming back.
Grouped by what things do — Components were sorted by behaviour, not by how they look.
Designed with the code in mind — Real data states, density options and reuse were part of the design from the start.
Built most of it myself — I wrote about 90% of the system in code.
Checked it worked — The system health score went from 62 to 85.
From the process
Workflow information architecture for the programme page.
I’m , a Senior Product Designer and Design Engineer. Ten years across fintech, healthtech, commerce and logistics, from user research to production code.
I studied graphic design, led a product design team at Alerzo, and now design and build private capital software at DealStack.
My best ideas come from where products are actually used: market stalls in Lagos and Ibadan, a fund administrator’s spreadsheets, a bank’s support queue. I turn what I find there into clear, calm systems.
Then I help build them. At DealStack I coded about 90% of our design system in React, so what ships is what was designed.
User research
Interviews, field studies, usability and tree testing. I learn from what people do, not only what they say, and turn it into product decisions.
User interviews · Usability testing · Field research · Journey mapping · Analytics
Product design and systems
End-to-end product design for complex B2B and fintech software: clear flows, sound information architecture and design systems that scale.
Interaction design · Information architecture · Design systems · Prototyping · Accessibility (WCAG 2.1)
Design engineering
I prototype and build in React and TypeScript, so designs are tested against real data and what ships matches what was designed.
Recommendations from my LinkedIn profile, from a manager, a fellow designer and the marketers I’ve shipped with.
“Ayodeji’s commitment to excellence is evident in every project he undertakes. He consistently delivers high-quality designs that exceed expectations, making him an invaluable team member.”
“Working alongside Ayo was truly inspiring. His leadership in product design, coupled with his ability to bridge design and engineering, elevates the entire team’s output.”
AAAbdul-Lateef AkinyemiSenior Product Designer
“Ayodeji is an exceptional team player who brings creativity and strategic thinking to every collaboration. His ability to translate complex problems into elegant solutions is remarkable.”
“Ayo is a creative mind who consistently pushes boundaries. His design work is not just visually stunning but strategically sound, always keeping the end user in focus.”
POPromise OsigweMarketing Communications
Beyond the day job.
Mentoring, speaking, and a few companies and products of my own.
Speaking
Tech Rise Africa, to 1,000 people. DSGN Discussions, to 400+. On design leadership, product systems and creative practice.
Companies I’ve founded, and products I build in my own time.
Empocreat (The EOC) builds digital products, brands and experiences with clarity and purpose. I founded it in 2016 and have directed creative strategy for 20+ brand and product projects across fintech, education, consumer tech and e-commerce.
MoveMoni compares exchange rates and fees across international money-transfer providers in real time, so people can see who is cheapest for their route before they send. Users save 3–5% on average on international transfers.
Clariti is a personal finance companion that helps people track spending, budget smarter and take control of their money in one simple app. It started inside MoveMoni and now stands on its own.
A free, educational world map built on the Equal Earth projection. It folds into a globe, shows what Mercator distorts, and lets you compare countries at their real size. Made for classrooms first, after the UN General Assembly voted in September 2026 to encourage equal-area maps.
Cleap turns a product’s code, database, infrastructure and integrations into one live, zoomable map, so people who build products without reading code can still see how everything fits together.
An open benchmark for one question: given a piece of code, how good is a plain-English description of it? Labels are scored on accuracy, specificity and whether someone who can’t read code would actually understand them. It grew out of Cleap and is at the scaffold stage: a seed set of samples and the scoring pipeline, with real model runs still to come.
Workflow information architecture for the programme page.
Token specifications and component anatomy.
