Design system
Leveraging extensive experience in design systems, I drove consistency and efficiency across digital products, directly ensuring they met both accessibility (WCAG) and usability requirements. Explore my process and view samples of my work to see how I achieved a unified visual identity and streamlined the development workflow.
My process
Define the product structure and analyse the needs
Evaluate design patterns, understand goals.
Research and Audit
Audit existing product and libraries, and analyse market trends.
Collaboration
Assemble the team, engage with designers, product managers, and developers
Define scope and goals
Set clear objectives aligned with business and user expectations.
System architecture
Define structure, set hierarchy, ensure consistent language, and create an index.
Define rules and establish governance strategy
Brief guidelines and global rules ensure consistent and effective implementation.
Create styles and tokens
Define visual styles using aliases, variables, and keys for consistency and flexibility.
Develop and document components
Build, test, and document atoms, components, variations, and groups.
Publish and link the design
Inform and regroup stakeholders, and create a storybook if needed.
Maintain and improve
Maintain, update, and govern the system; train the team, and keep a change log.
Cases
Stake Design System 'Prime'
Key Highlights:
Design system structure planning
Collaborated on establish core foundations: colour, typography, grid, etc.
Defined and applied naming convention for variables and atoms.
Crafted and maintained building blocks and components.
Ensured all styles and components met WCAG accessibility requirements, including full keyboard navigation support.
Kick Design System 'Neon'
Key Highlights:
Built and managed component and variable libraries.
Planned and executed structural improvements by creating new libraries.
Partnered with Product Design and Engineering to improve usability.
Supported the Brand team with design system implementation during a brand refresh.
South Australia Government Design System
A design system for all South Australian government departments and agencies. The product includes websites, dashboards, and apps.
Key Highlights:
Documented the global guidelines and rules.
Completed the atom and component library.
Refined style usage and naming conventions.
Webjet Car Hire Style Library
This project involved creating a style library based on the Airport Rental design system, aimed at ensuring seamless theme integration between brands like Webjet, Air New Zealand, and Gold Coast Airport..
Key Highlights:
Collaborated with external teams.
Led the project, planning resources and goals.
Conducted UI and style audits on affiliate sites.
Built the library and tested designs across different themes.
Airport Rentals Design System
I developed a comprehensive design system for Airport Rental, based on the newly designed React booking flow.
Key Highlights:
Collaborated to align UX goals with business and technical needs.
Established clear naming conventions.
Built and refined styles, atoms, and components.
Created design tokens for seamless affiliate theme swapping.
Continued development with additional features added to the website.
Motorhome Republic Design System
I developed a comprehensive design system for Motorhome Republic, initiating the migration from a legacy website to a React-based platform.
Key Highlights:
Conducted heuristic evaluation to assess platform strengths and improvement areas.
Audited components by comparing with the "Airport Rental" project to gauge adaptability.
Engaged in collaborative discussions to align UX goals with business and technical perspectives.
Established clear variable and naming conventions.
Built and refined design tokens, atoms, and components.