Design system

With extensive experience in design systems, I ensure consistency and efficiency across digital products. Explore my process and view samples of my work to see how I achieve a unified look and streamline development.

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

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.

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.

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.

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.

Interested in connecting?

Let’s talk about how we can work together to create something amazing.

Interested in connecting?

Let’s talk about how we can work together to create something amazing.

Interested in connecting?

Let’s talk about how we can work together to create something amazing.

liwen1912@gmail.com

liwen1912@gmail.com

liwen1912@gmail.com