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
Team
Year
2021 -2023
Tools
Figma, Jira
Products
Platforms
Components
Icons
Tickets closing per sprint
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
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.
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.
Define 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.
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.
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.
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?
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.
Marcus Kung