MYDS
MYDS is a comprehensive design system created to establish consistent user experience standards across Malaysian government digital services. The system provides a collection of reusable UI components, design patterns, and guidelines that enable teams to build accessible, responsive, and visually cohesive applications efficiently. MYDS aims to reduce redundancy in UI development efforts, accelerate project timelines, and ensure compliance with government digital standards.
Project Links
Myds Official Website
Frontend Tech Stack
- Typescript
- NextJs
- TailwindCSS
- i18n
- Shadcn UI
- Radix UI
- Fumadocs
- Storybook
Leadership & Developer Advocacy
Core Maintainer
- Stepped up as Core Maintainer following the departure of senior leadership, taking full ownership of the MYDS component library and ensuring seamless, cross-repository stability for enterprise-level government applications.
Nationwide MYDS Integration Workshop
- Led several nationwide technical workshops (Bengkel) as the primary speaker and instructor, training cross-agency Information Technology Officers (PTM) over intensive 2-day sessions on integrating MYDS into React and Next.js environments.
National MYDS Adoption
- Spearheaded strategic government adoption by collaborating closely with Kementerian Digital and other Kementerian in a bengkel to mandate and standardize MYDS usage across the entire Malaysian government ecosystem.
Frontend Mentorship Initiative
- Mentored and onboarded junior engineers, establishing internal best practices for building scalable, accessible UI components and effectively utilizing the internal design system.
Agile UI Integration & Iteration
- Drove cross-functional alignment between design and engineering to deliver a cohesive user experience, executing rapid, agile UI adjustments during UAT/FAT while strategically planning for future roadmap enhancements.
Frontend Contributions
CI/CD and Security Maintainence
- Automated pipelines and release workflows using GitHub Actions and Changesets to execute accessibility tests,
- handle semantic versioning, and publish directly to the NPM registry.
- Proactively resolving critical Next.js build failures triggered by CVE security patches to ensure secure and continuous updates.
Package Development
- Developed React-based components for the @govtechmy/myds-react package.
- Contributed to creating reusable and scalable UI components for MYDS.
Comprehensive Documentation
- Contributed to the development of comprehensive documentation for the MYDS package.
- Detailed Docs on usage instructions for components and hooks
- Icon documentation for seamless integration
Core UI Components
- Designed, implemented, and documented essential UI components : Masthead, Navbar, Footer, Callout, Label, Summary List, Checkbox, Toggle, Theme Toggler & Theme Toggler Hook
- Spinner for consistent loading behavior
Storybook Integration
- Utilized Storybook to develop, test, and document UI components in isolation.
- Ensured consistency and reusability across applications.
UI/UX Consistency
- Contributed to the development and optimization of MYDS, ensuring UI/UX consistency across multiple applications for a cohesive user experience.
Collaborative Development
- Worked closely with both development and design teams to integrate design and functionality.
- Focused on delivering a user-centered experience, aligning design vision with technical feasibility.
Cross-Functional Collaboration
- Collaborated effectively with stakeholders across departments.
- Ensured components adhered to industry standards for scalability, maintainability, and consistency, while meeting accessibility and user interface design guidelines.