WerkSG Design System

The objective of this case study is to establish a design system that improves the efficiency of product designers in WerkSG. This design system has significantly improved consistency of the brand identity being applied in the mobile app of WerkSG.

Client:

WerkSG

Role:

UX Designer

Year:

2023 - 2024

Context

WerkSG is a startup for establishing a freelancing and job-seeking platform based in Singapore, catering to individuals seeking either part-time or full-time employment opportunities, as well as those looking to hire freelancers for various services.


With more features and wireframes are being implemented, product design team in WerkSG needs to establish a comprehensive design system to foster consistency and efficiency in their design process and workflow.

Laptop mockup with the website home page
Laptop mockup with the website home page

Process

We've adopted a collaborative approach, systematic documentation, and continuous iteration, ensuring that the design system meets the needs of the product design team and maintains consistency across all WerkSG products.

  1. We've conducted an audit of existing design elements and patterns across WerkSG products, giving us a comprehensive overview of our current design landscape.

  2. Next, we created a centralised repository of design components, guidelines, and principles, refining them through cross-functional collaboration to ensure practicality and adoption.

  3. We implemented the design system in pilot projects and gathering feedback from designers and developers to improve usability and effectiveness.

Solution

The established design system includes:

  • Component Library: A comprehensive library of reusable UI components (buttons, forms, icons, etc.) that align with WerkSG's brand identity is created. This would allow designers to quickly access and implement consistent elements across the mobile app.

  • Style Guide: Develop a detailed style guide that outlines typography, color palettes, spacing rules, and other visual elements specific to WerkSG's brand. This also ensures consistency in design choices throughout the app.

  • Design System Management: An individual will be responsible for maintaining and updating the design system, ensuring it evolves with the product and remains relevant.

The home page header and footer
The home page header and footer
The footer of the home page
The footer of the home page

Results and Takeaways

The design system's huge success was due in part to its collaborative development process and focus on practical application. The success metrics includes:

  • Established a cohesive brand identity for WerkSG, with 80% of employees reporting improved understanding of design principles that reflect the brand's values.

  • Increased efficiency for the design team, reducing component creation time by 40% and cutting asset maintenance efforts by 50% through reusable elements.

  • Ensured consistency in visual elements across all platforms, with a 10% increase in perceived product quality and a 15% improvement in overall user experience ratings.