How We built Condor DS and cut production costs 50%
Building 4Sale's design system, a product that serves products, to unify web, iOS, and Android, speed up delivery, and cut production costs in half.
TL;DR
4Sale's UI was inconsistent and slow to build on. I led design on Condor DS, a shared system of tokens and components that cut production costs in half and brought web, iOS, and Android under one roof.
Context
By 2022, 4Sale was growing fast. But every new feature meant developers rebuilding the same buttons, inputs, and layouts from scratch, and designers kept solving problems we'd already solved. Design quality depended entirely on how much dev time we had.
The problem
A UI audit and developer feedback both pointed to the same thing:
- Inconsistency: Buttons, inputs, and typography varied across pages, eroding trust.
- Slow Velocity: Developers kept rebuilding the same elements from scratch.
- Fragmented UX: Web, iOS, and Android felt like three different products.
Left unsolved, this meant lost user trust, wasted engineering hours, and delayed market launches.
Approach
1. Discovery and alignment
Before creating UI components, we laid the groundwork:
- Benchmarking: Studied industry standard systems like Material Design, Carbon, and Atlassian.
- UI Audit: Cataloged existing screens to scope the exact variance in colors, fonts, and components.
- Decision Point: Evaluated patching the existing UI kit, but recognized it would not scale across three distinct codebases.
2. Establishing core pillars
We set four core pillars to guide every design and engineering decision:
- Consistency: One clear pattern across all platforms.
- Efficiency: Reusable blocks to eliminate repetitive work.
- Scalability: Built to support new product features seamlessly.
- Collaboration: Shared language between design and engineering.
The solution
Condor DS is built on Brad Frost's Atomic Design methodology, atoms like buttons and colour, up to full pages. It shipped as three things:
- Visual guidelines. Typography, colour, and spacing tokens.
- Component library. Reusable components for web, iOS, and Android.
- Documentation. Keeping design and engineering aligned on usage.
It didn't stop at launch. Condor runs on a defined process: research, document, handoff, UAT, publish, iterate, so it stays current as the product grows.
Impact
50%
Lower production cost
3
Platforms unified
Faster
Delivery, feature after feature
- For Designers: Faster testing, easier onboarding, and less repeat work.
- For Developers: Less UAT and code maintenance, and focus on logic instead of UI.
- For the Business: Real cost savings, faster market entry, and one consistent brand experience.
“Nady played a pivotal role in leading the design system, showcasing exceptional skill in creating a cohesive and scalable framework that streamlined our processes and elevated our design standards.”
Somayia Samy
Lead product design, MaxAB, managed Mohamed at 4Sale
Reflection
Condor was never a one-time build. Two years in, it's still evolving, with better documentation, a full token implementation, and a motion system underway. The real lesson: a design system isn't finished at launch, it pays off in how well it's maintained after.