Omni-Platform Design System | E.Hakimi Portfolio

Training & Adoption

Delivered onboarding sessions to help designers, developers, and QA teams navigate and apply the design system confidently.
Ran hands-on walkthroughs covering component usage, accessibility best practices, and naming conventions.
Built self-serve documentation and starter templates to make adoption straightforward and reduce onboarding time.
Supported teams post-training to ensure consistent implementation and resolve practical challenges.

System Foundation

Built on clear structure and consistent guidelines
Scalable framework designed for long-term growth
Transparent status labelling (Ideation, In Production, Deprecated)

Clarity & Simplicity

Clear naming conventions without over-tokenisation
Easy to understand at first glance, supported by structured documentation
Focused on usability and visual consistency across platforms

Documentation & Depth

Components paired with concise summaries and detailed deep dives
Each element backed by usage notes, accessibility standards, and examples
Designed for quick reference and extended learning when needed

Diagnal Design System

Built for scale, speed, and consistency across OTT platforms

The Diagnal Design System was developed over a 4-month R&D cycle. Our goal was to establish a scalable foundation that supports cross-platform consistency, rapid development, and white-label flexibility. The system evolved through three major iterations before reaching the final, token-based, multi-theme framework used across mobile, web, and TV interfaces.

Explore

Evaluated three structural approaches for building a multi-platform design system: atomic-first, token-driven, and theme-oriented. Each offered distinct strengths and limitations.

Benchmark

Studied design systems from Netflix, Shahid, and Disney+ to understand how leading OTT platforms handle scalability, accessibility, and theming across platforms.

Collaborate

Interviewed cross-functional teams including developers, designers, and product owners to identify pain points and practical needs for scalability.

Define

Established the core design system goals: scalable structure, platform adaptability, branding flexibility, and accessible UI from the ground up.

Test & Improve

Tested the system in real projects, continuously gathered feedback, and refined components and tokens to align with evolving team needs. Scheduled regular updates to keep the system scalable and relevant.