The LVL Design System
Designing the product and system together
LVL was built as a data-driven wellbeing platform with the intention to scale from day one. As I designed the product, I built the design system in parallel — treating it as core infrastructure rather than a future improvement. Consistency, accessibility, and clarity were foundational requirements, not afterthoughts.
My role
Lead Product Designer
User research, discovery, prototyping, UI design
Built and maintained the design system (English & Arabic)
Designed data visualizations to improve engagement
Platform
Web & Mobile
Timeline
2 years
Establishing shared rules early
Before scaling features, I defined the foundations that would govern every design decision — color, typography, spacing, and interaction states. These rules replaced ad-hoc choices with a shared visual language, making it easier to expand the product without fragmenting the experience.
Structuring the system using atomic design
To keep the system flexible and scalable, I structured it using an atomic design approach — starting with foundational elements and progressively building up to more complex components and patterns. This made it easier to reason about changes, reuse components consistently, and evolve the system as the product grew.
Atomic design provided a shared mental model for the system, helping both designers and developers understand how individual pieces fit into the larger whole.
Turning foundations into reusable patterns
With foundations in place, I translated them into reusable components and patterns that supported the full range of product flows. Each component was designed with clear states and predictable behavior, allowing new features to be built quickly without rethinking core interactions.
Designing RTL as a first-class system
The design system was built to support both English (LTR) and Arabic (RTL) experiences from the start. Rather than treating RTL as a flipped variant, I designed mirrored components, layouts, and typographic rules that preserved hierarchy, readability, and interaction logic across both directions.
This ensured true parity between languages and avoided costly redesigns as the platform expanded.
A system that scaled with the platform
As LVL grew from an early-stage product to a platform used by over 200,000 users, the design system scaled alongside it. It supported faster feature delivery, consistent data visualization, and bilingual parity without increasing cognitive load or design debt.
The system became a stable foundation that allowed the product to evolve without losing clarity.
