Design system
from Zero to One
09.2021
Jahez
Saudi Arabia
Context
When we started two years ago, Jahez's product surfaces were inconsistent — components, spacing, colour usage, and interaction patterns all drifted from screen to screen.
There was no shared design language, no component library, no documentation, and no governance. Every new feature was built either from scratch or by copying and modifying an existing screen, which compounded the drift over time.
Designers were re-solving solved problems, engineers were re-implementing near-identical components, and the look-and-feel of the app reflected that fragmentation. We made the call to build a design system from the ground up, and I led it end-to-end.
What we did
Built the foundation from scratch
Tokens, components, documentation, and the Figma library architecture — none of it was inherited. Every primitive was a design decision I owned, from naming conventions to the semantic layer of the token system.
Led a cross-functional team
Coordinated designers, engineers, and one PM across the design-to-code pipeline so the system shipped in both Figma and production — not just as a design artifact that engineering ignored, but as a real, adopted dependency.
Designed the governance model
Contribution paths, review criteria, versioning, and approval flow — so the system could scale without becoming a bottleneck or drifting back into inconsistency. This is the part most design systems fail on; I treated it as a first-class design problem.
Drove the adoption strategy
Balanced top-down standards with bottom-up buy-in — identifying early-adopter teams, running migration sprints, and making the system the path of least resistance rather than forcing compliance.
Owned the DesignOps work
Naming conventions, file structure, handoff rituals, and the day-to-day maintenance that keeps a design system trustworthy once it's in use. This is invisible work that makes everything else possible
Educated the team.
Training sessions, documentation, and hands-on support — turning the system from something I built into something the team uses independently and confidently.
v1 · Initial
Photo/Video Slideshow
Dynamic hero with auto-rotating media every 15s. Visual impact over browsability.
Context
Since The current Jahez app design offers a seamless experience to order food, but it is becoming increasingly challenging to introduce new verticals.
v1 · Initial
Photo/Video Slideshow
Dynamic hero with auto-rotating media every 15s. Visual impact over browsability.
Framing the problem
When we started design the colors system we have noticed that colors we design is not the same as what we see by our eys. Lemme show you this test bellow to understand me better
Framing the problem
When we started design the colors system we have noticed that colors we design is not the same as what we see by our eys. Lemme show you this test bellow to understand me better
