↳ Content
As 17FIT primarily focuses on B2B products with complex settings, many features require user guides and even tutorial videos to help enterprise users understand how to use them. Relying on customer support to convey this information is very time-consuming for a growing company.
17FIT's products span across various devices, including Web, App, PWA, and In-App Browser (Line). With limited design and development resources, there is an urgent need to establish a more consistent design experience.
Moreover, since the backend system framework uses Bootstrap 3.0, many packages are no longer supported. After joining the company, I actively communicated with the management and development teams, gradually promoting the implementation of a Design System.
Expected Benefits
Reduce design and development costs.
Enable all teams to better utilize design system components to create ideas and quickly experiment and iterate.
Free up customer service team's time.
Step 1. Establish design principles based on the company's product vision
As a Product Manager, whether ideating new features or creating new logic, I always prioritize aligning with the company's vision. Therefore, when it comes to product design, I incorporated user experience concepts into the product, thus establishing the initial version of our Design Principles:
Consistency
Consistent with real life: maintain consistency with real-life processes and logic, following the language and concepts users are accustomed to;
Consistent within the interface: all elements and structures should remain consistent, such as design styles, icons, text, and element positions.
Feedback
Control feedback: allow users to clearly perceive their own operations through interface styles and dynamic effects;
Page feedback: after an operation, clearly display the current state through changes in page elements.
Efficiency
Streamline processes: design concise and intuitive operation processes. Less is more;
Clear and precise: use clear and unambiguous language to let users quickly understand and make decisions;
Help users identify: keep interfaces simple and straightforward, allowing users to quickly identify rather than recall, reducing user memory burden.
Controllability
User decision-making: provide operation suggestions or safety tips based on the situation, but cannot replace user decisions;
Controllable results: allow users to freely perform operations, including undo, rollback, and ending current operations.
Establish a workflow for the design phase
Categorize commonly used design components Use Trello for categorization. First, inspect and record all components on each page, and prioritize the most frequently used components. (Trello diagram)
Study other excellent Design Systems
IBM: https://www.carbondesignsystem.com/
HubSpot: https://canvas.hubspot.com/
Material Design: https://material.io/design/introduction
Salesforce: https://www.lightningdesignsystem.com/
Workday: https://design.workday.com/
Zendesk: https://garden.zendesk.com/
Also referred to some UI Frameworks that focus purely on components
Ant Design: https://ant.design/
Components | CodyHouse: https://codyhouse.co/ds/components
Lay the foundation by first establishing a Style Sheet
In addition to Font and Color scheme, we also established basic specifications for Spacing, Shadow, Border Radius …
Create documents to define components
When categorizing components used in the existing system, we discovered that the same component could have different meanings in different contexts. For example, the "OK" button in an Alert might be on the left side on some pages and on the right side on others. Before communicating with the team, we needed to create documents explaining the purpose of each component and list usage scenarios as much as possible.
Taking Input as an example, we established:
Usage time
Break down the Input component into its most basic elements
Label: state the content that needs to be entered
Text: content entered by the user
Input: display states such as error or focus
Placeholder: guiding text for the user
Error message: debugging description text
Icon: serves as an action indicator
Use cases, including: scenarios, maximum and minimum sizes, alignment...
Do's & Don'ts
Design Tokens
We also took this opportunity to introduce Design Tokens, using the Single Source of Truth concept to achieve consistent iteration with front-end development components.
Based on the Style Sheet, we established the following essential tokens:
Color
Typography
font-family
font-weight
font-size
line-height
Space (dimensions, padding, margins, etc)
spacing
border radius
Shadow
Iconography
Reflection
Although the Design System is not yet fully developed and the above items will continue to be updated, this opportunity allowed us to examine the rules and definitions of each component from the ground up, such as Select & Dropdown, Modal & Alert.
Due to the need to communicate ideas and deliverables with the team, sync meetings went from once a week to twice a week. We also kept information in sync with the front-end team at all times.
The front-end development chose to use Storybook, but currently, the synchronization between Figma and Storybook is not very complete. Therefore, Design Tokens play an important role. However, there are also issues like npm package upgrade conflicts that need to be resolved.
Although this project is progressing at a slow pace, it can already satisfy the goal of rapid output for designers and PMs in ideation and communication.
