Building a unified
Design System
Helping areeba scale faster by building a unified design system from scratch
Client
areeba
Timeline
6 Months
role
Product Design Lead
project
Asterisk* Design System
TL;DR
I built Asterisk, a scalable and flexible design system that eliminated inconsistencies and sped up delivery. It’s now the foundation for all areeba products, enabling faster shipping and white-label flexibility.
Summary
I led the creation of Asterisk, areeba’s first-ever design system. It helped unify UI across platforms, reduced design inconsistencies, and accelerated developer handoff. The system is now used by all product teams and supports white-label scalability.
Problem Framing
Designs across products were inconsistent. Teams reused outdated files or duplicated work, causing UI drift, misalignment with branding, and friction with developers. With the introduction of new apps and white-label offerings, scaling was becoming unsustainable.
• No documentation or component library
• Duplicate efforts across teams
• Developer handoffs often required manual fixes
Role & Team
As Product Design Lead, I:\
- Led the design system initiative from planning to rollout
- Worked with designers, frontend engineers, and the brand team
- Conducted training and adoption workshops internally
Approach
- Audited existing design files across products
- Created a visual language using atomic design principles
- Used Figma tokens and variants for flexibility
- Documented usage and built scalable naming conventions
- Mapped UI to development needs across web and mobile
Challenges
- Legacy inconsistencies made component standardization difficult
- Developers needed specific naming rules for better mapping
- Design maturity varied across teams, so onboarding needed flexibility
Solution
- A modular, token-based system for layout, color, and typography
- Scalable components for cards, lists, forms, modals, and nav patterns
- Theme customization for white-label use cases
- Integrated documentation directly in Figma with examples
Results & Impact
- 100% adoption across internal product teams
- Faster design-dev handoff and reduced QA friction
- System used in 4+ areeba products, including partner apps
What I’d Do Differently
I would establish a rule that no new products or features are built without a live, approved version of the design system. Early in the rollout, teams still shipped components outside the system, which led to rework. A stricter “design system first” approach would’ve accelerated adoption and consistency.
Phone number
+961 3 139 572
© 2025 Johnny Bou Malhab. All Rights Reserved
Building a unified
Design System
Helping areeba scale faster by building a unified design system from scratch
Client
areeba
Timeline
6 Months
role
Product Design Lead
project
Asterisk* Design System
TL;DR
I built Asterisk, a scalable and flexible design system that eliminated inconsistencies and sped up delivery. It’s now the foundation for all areeba products, enabling faster shipping and white-label flexibility.
Summary
I led the creation of Asterisk, areeba’s first-ever design system. It helped unify UI across platforms, reduced design inconsistencies, and accelerated developer handoff. The system is now used by all product teams and supports white-label scalability.
Problem Framing
Designs across products were inconsistent. Teams reused outdated files or duplicated work, causing UI drift, misalignment with branding, and friction with developers. With the introduction of new apps and white-label offerings, scaling was becoming unsustainable.
• No documentation or component library
• Duplicate efforts across teams
• Developer handoffs often required manual fixes
Role & Team
As Product Design Lead, I:\
- Led the design system initiative from planning to rollout
- Worked with designers, frontend engineers, and the brand team
- Conducted training and adoption workshops internally
Approach
- Audited existing design files across products
- Created a visual language using atomic design principles
- Used Figma tokens and variants for flexibility
- Documented usage and built scalable naming conventions
- Mapped UI to development needs across web and mobile
Challenges
- Legacy inconsistencies made component standardization difficult
- Developers needed specific naming rules for better mapping
- Design maturity varied across teams, so onboarding needed flexibility
Solution
- A modular, token-based system for layout, color, and typography
- Scalable components for cards, lists, forms, modals, and nav patterns
- Theme customization for white-label use cases
- Integrated documentation directly in Figma with examples
Results & Impact
- 100% adoption across internal product teams
- Faster design-dev handoff and reduced QA friction
- System used in 4+ areeba products, including partner apps
What I’d Do Differently
I would establish a rule that no new products or features are built without a live, approved version of the design system. Early in the rollout, teams still shipped components outside the system, which led to rework. A stricter “design system first” approach would’ve accelerated adoption and consistency.
Phone number
+961 3 139 572
© 2025 Johnny Bou Malhab. All Rights Reserved
Building a unified
Design System
Helping areeba scale faster by building a unified design system from scratch
Client
areeba
Timeline
6 Months
role
Product Design Lead
project
Asterisk* Design System
TL;DR
I built Asterisk, a scalable and flexible design system that eliminated inconsistencies and sped up delivery. It’s now the foundation for all areeba products, enabling faster shipping and white-label flexibility.
Summary
I led the creation of Asterisk, areeba’s first-ever design system. It helped unify UI across platforms, reduced design inconsistencies, and accelerated developer handoff. The system is now used by all product teams and supports white-label scalability.
Problem Framing
Designs across products were inconsistent. Teams reused outdated files or duplicated work, causing UI drift, misalignment with branding, and friction with developers. With the introduction of new apps and white-label offerings, scaling was becoming unsustainable.
• No documentation or component library
• Duplicate efforts across teams
• Developer handoffs often required manual fixes
Role & Team
As Product Design Lead, I:\
- Led the design system initiative from planning to rollout
- Worked with designers, frontend engineers, and the brand team
- Conducted training and adoption workshops internally
Approach
- Audited existing design files across products
- Created a visual language using atomic design principles
- Used Figma tokens and variants for flexibility
- Documented usage and built scalable naming conventions
- Mapped UI to development needs across web and mobile
Challenges
- Legacy inconsistencies made component standardization difficult
- Developers needed specific naming rules for better mapping
- Design maturity varied across teams, so onboarding needed flexibility
Solution
- A modular, token-based system for layout, color, and typography
- Scalable components for cards, lists, forms, modals, and nav patterns
- Theme customization for white-label use cases
- Integrated documentation directly in Figma with examples
Results & Impact
- 100% adoption across internal product teams
- Faster design-dev handoff and reduced QA friction
- System used in 4+ areeba products, including partner apps
What I’d Do Differently
I would establish a rule that no new products or features are built without a live, approved version of the design system. Early in the rollout, teams still shipped components outside the system, which led to rework. A stricter “design system first” approach would’ve accelerated adoption and consistency.
johnny@monochrome.digital
Phone number
+961 3 139 572
© 2025 Johnny Bou Malhab. All Rights Reserved