YOOV Design System

UI/UX Design
Web Design
App Design
YOOV Design System

Overview

YOOV is a growing B2B SaaS company that assists clients with digital transformation. They have developed a flexible management system for cross-functional collaboration and intelligent management. YOOV aims to become a leading innovator in centralized management, enhancing management efficiency and resource utilization for business intelligence and innovation.

Role

Product Design Manager

Year

2021 -2023

Tools

Figma, Jira

5

Products

4

Platforms

80+

Components

440+

Icons

+50%

Tickets closing per sprint

Problem

user problem

User Problem

Users face cluttered and inconsistent experiences across different platforms and products, leading to confusion, frustration, and a lack of trust in the brand.

business problem

Business Problem

The company struggles with inefficiencies and increased costs. Teams spend valuable time and resources reinventing design components, resulting in fragmented branding and slower time-to-market.

Plan

As the design team had various projects already in progress, I had to ensure that I could release the first version of the design system with core styles and components quickly. I decided to implement the atomic design methodology for our design system because it is suitable for my team's situation, in which we need to release components in stages, starting with atom-level components and followed by molecules and organisms. I came up with an execution plan as shown below.

YOOV Design System - plan

Limitation

Due to a tight timeline, management did not expect major changes to the website's structure and content. As a result, I had to work with the existing content to design the website. This may limit the ways in which we can present stories and benefits about our products.

Research

Since our products mainly target the B2B market, I researched the design systems of big tech companies that also focus on this market. This included design systems like IBM’s Carbon, Shopify's Polaris, Atlassian, and others. I studied their design principles, structures, and component documentation to identify common patterns suitable for our design system.

Due to a tight timeline in the early phase, I couldn't conduct a thorough analysis of these design systems. Instead, I used them as references during the development of our own design system.

YOOV Design System - references

Define principles

YOOV Design System - design principles

To help the team have a clear concept while designing our products, I have defined a set of principles for the design system in line with the company's branding.

User-centered

Create products and services tailored to users' needs and preferences. Incorporate personalized messaging, intuitive navigation, and accessible design features to ensure users feel seen, heard, and valued.

Clear

Make products and services easy to understand and use. Use simple, straightforward language, avoid clutter, and present information in a logical, organized manner.

Efficient

Create products and services optimized for speed and performance. Minimize load times, reduce the number of steps required to complete a task, and automate repetitive or time-consuming processes.

Consistent

Provide a cohesive visual identity and user experience. Use consistent typography, color schemes, and design elements across all products and services. Ensure the user experience is consistent across all platforms and media.

Scalable

Design products and services that can easily grow and evolve with the brand. Create products that can accommodate new features or functionality and adapt to new platforms or mediums without sacrificing consistency or efficiency.

Structure the system

YOOV has multiple products across different platforms. To ensure consistency in our designs, we use a master library to manage all styles, icons, and general components such as checkboxes and radio buttons. As different products and platforms have distinct characteristics, we have three libraries under the master library. Each of these libraries contains its own set of typography, grids, and components to cater to different usage scenarios.

YOOV Design System

Create configurable and responsive components

Designers can easily and intuitively configure a component's properties in a centralized panel by setting variants, boolean properties, and text properties. This approach saves designers time and provides flexibility without creating unnecessary components in local files.

With well-configured auto-layouts, all components are scalable across all viewports, from mobile to tablet and desktop. This makes it easy for designers to create designs of any size using components.

YOOV Design System

Make components interactive

Designers often need to showcase their designs to various stakeholders. A more realistic prototype can help stakeholders better visualize the concept and idea, especially with detailed micro-interactions. Our design system covers all interactive states of the core components. Whenever designers use these components, the micro-interactions are automatically applied to the prototype, making the product look more dynamic.

Provide component guidelines

While the demand for design resources was increasing, more designers joined the team. Therefore, I decided to allocate resources to add guidelines for the components. This allows new team members to quickly understand how to use the libraries and components, reducing their onboarding time. It also helps them avoid misusing the components, making the review process smoother.

YOOV Design System - guidelines

Develop SOPs

As a product design manager, I consider the design system a product. We need to keep iterating it to add new components and enhance its user experience, especially while developing multiple products in parallel and having new team members. Therefore, I have designed a standard operating procedure (SOP) that outlines the process for updating the design system and handling any bugs that may arise.

When designers request to add a new component to the design system, they need to answer the following questions:

  • Is there an existing component that can achieve the same purpose?
  • Is it reusable?
  • What use cases and scenarios is it suitable for?
  • Is it compatible with existing components?
  • Is it a complicated component in terms of development?
YOOV Design System - sops

Impacts

More efficient design delivery

Designers can deliver approximately 50% more design work per sprint.

More consistent design

Over 90% of product designs implement the design system.

Shorter new designer onboarding time

The onboarding time for new designers has been reduced by ~60%.

Future roadmap

Adapt higher accessibility standards

Accessibility is an essential part of a design system. In the current version of our design system, we tested all our components, and over 98% of them passed the AA color contrast test. However, to deliver more inclusive products, we need to do more to test screen reader compatibility, keyboard accessibility, and focus visibility before each release. As we anticipate a more diverse user base in the future, we must allocate more resources to enhance the accessibility of our product.

Apply design tokens

Our design system includes guidelines for designers to understand how to use styles and components. However, it can be time-consuming for developers to read through these guidelines. To reduce communication and design change costs, it is important to define a set of design tokens that both parties can use. This will create a shared language and a centralized location for design values.

Reduce the gap between design and production

Although the design system is used by the design team to deliver our designs, there is still a gap between design and production. It takes time for the development team to align production with the design system completely. To reduce this gap, we need to design a standard operating procedure (SOP) to synchronize with the development team when there is a design system update. We should also consider using a tool like Storybook to make this process easier.

© 2024 Marcus Kung. All rights reserved. Designed and developed by Marcus Kung marcuskung@outlook.com
Marcus Kung