Design System
Role and Duty:
• Constructing design guideline
• Constructing modular components and shared component libraries
• Improve the maintainability and expandability of the project
• Achieve the convenience and efficiency of team members' collaboration
Due Date: 2018, 04 ~ 2020, 04
● ● ●
Why Design System
A design system must be constructed since AC supports many gaming devices, in addition to sharing common components and styles on the software interface, the function setting pages of each device also has its own special components and page layouts. This project uses Sketch as a development tool to develop and update the shared component library in a nested structure, allowing team members to maintain smoothly and efficiently under the same logic.
● ● ●
The Challenge
In old project, I found that there are always new hardware types and models continuing to be coming up, meanwhile the software content will also increase simultaneously; In terms of user interface, in addition to the basic common components and styles, the function setting pages of each device also have dedicated components and page layouts.
1.
There Is Only One File
It will cause many subsequent maintenance difficulties putting all the interface content in one file. For example, the files will inevitably be too large and suffering accidentally damaged and cannot be flexibly split to team members for maintenance.
2.
Low Work Efficiency
The old version of the user interface was developed with Photoshop. Not only does it take a few minutes to open the file, but the sharing styles between the files cannot be synchronized. It is very inefficient to modify the same interface details repeatedly, and it also leads to unnecessary overtime.
● ● ●
Solutions
Step 1.
Shared Component Libraries
This is the highest class, a shared component library for all devices, including basic components, color styles, and common page layout.
Step 2.
Device Component Libraries
Different devices have their own function setting pages, therefore related module components and page layouts must be managed and maintained independently. After inheriting various objects of the shared component Library, these various objects combined into composite components at the second level.
Step 3.
Different Models
Different models of the same device, the number of function settings and pages will be a little different, it must be able to make differences after applying the same shared device library.
Step 4.
Share and Synchronize Files
Considering that the file is becoming more complex and requiring multi-person collaboration, We use “Google Drive” and “Backup & Sync” to make collaboration more convenient and efficient between team members. The advantage is that we only need one person responsible for maintaining the shared component Library, team members can synchronize files and apply new style with just one click, there is no need to correct it manually.
Step 5.
Manage all Projects
We use this platform to upload and manage all UI assets of the project, and let the teammates to discuss and leave messages on the platform.
1. Designers upload the completed UI assets to Zeplin and maintain it properly.
2. Product managers can use this platform for product discussion and presentation.
3. Engineers can download and refer to the normalised UI assets more easily and for development.
● ● ●
Verification
Stage 1
The focus was on establishing files linkage structure. Because it has been developed by myself, i would personally verify the correct linkage of all files sharing style. In addition, it’s also important to collect Sketch plug-in to improve the workflow.
Explained the design tools and workflow that the project will use to team members, more importantly, the operating principles of the design system must be taught, so that everyone can fully understand the future work plan.
Stage 2
Due to the expansion of functional requirements, we began to collaborate according to different hardware devices. I continued to maintain the top-level shared style, continuously improve the maintainability and scalability of the project, regularly track the work status of team members, and try to exclude unexpected situations caused by design tools updates.
Current
After a period of time with a new way of work mode, it was verified that the design system can make everyone's job more clear and logical. If any problem occured, it can easily be solved within a short time by following the linkage structure of the design system, which significantly improves the efficiency of collaboration.