Background
As the product team continues to expand, the number of design files also increases. This has led to complexity and confusion in both maintenance and searching processes. Therefore, initiated by the design lead at that time, designers came together to discuss the current problems, establish corresponding standards, and create a maintenance rule document.
In the establishment of the Maintenance Rule, the Design lead led all designers in discussing suitable workflows and standards. We were assigned tasks to produce maintenance and specification components. The maintenance rule went through 2 major iterations, and simple surveys and interviews were conducted with collaborative partners both time.
Intro / Problem
The Maintenance Rules mainly include categorizing design files, archiving methods, establishing design file templates, naming rules, annotating screens for different functions, and other specifications. The goal is to assist designers and collaborative partners in better searching and browsing design files.
Why did we want to create a second version? What new problems did we encounter?
- After using the first version of the design file templates for over a year, we observed that the collaborating engineers and PM still frequently encountered difficulties in finding or browsing design files. This led to the need to ask designers for assistance or spend excessive time searching for screens, resulting in decreased work efficiency.
- Therefore, my design partner and I have decided to initiate another task to optimize the design file templates. We hope to gain a deeper understanding of the problems and pain points encountered by our collaborative partners. Through this understanding, we aim to enhance the design file templates and guidelines, enabling everyone to search for design drafts more efficiently.
Research
Who were our research targets? How did we conduct the research?
Although collaborative partners more frequently encounter difficulties in searching, I still want to understand the current situation of designers who are truly using the template. By consolidating the pain points and needs from both sides, I aim to further achieve comprehensive and integrated optimizations.
1. Collaborative Partner Interviews
To gain a deeper understanding of the issues and pain points faced by our collaborative partners, my partner and I conducted in-depth interviews with front-end, back-end, app, testing engineers, and product managers from our respective product lines. We interviewed a total of 20 collaborative partners.
2. Designer Questionnaire Survey
For our designer partners, I wanted to investigate more specific usage details, such as "How often do you use this design maintenance component?" or "How often do you read this guideline?" Therefore, I chose to conduct a questionnaire survey specifically targeting the product designers. The survey was administered to the entire design team, including 4 other designers besides myself.
Results / Problems
Collaborative Partner Interviews Results π¨π»βπ»
Related specs scattered everywhere, making some specs easy to miss and requiring more time to understand.
Unable to identify the contents of a file through the file name and information on the file cover.
There is no centralized place to provide prompt updates on design/development progress to everyone.
Designers Survey Results π¨
Design files are not properly archived, which leads to difficulties for other teammates in finding the files or confusion with incorrect screens.
Design maintenance components are not continuously updated and iterated, causing some components to become unused or inconvenient to use.
The complexity of design file specs makes it difficult for designers to implement them one by one, resulting in some design files remaining chaotic.
Solution
After consolidating the issues from both sides, we prioritize addressing the main problems based on the highest number of responses and the implementation time required.
πΒ For Collaborative Partner
01 ππ» Provide a simple Figma operation tutorial for them.
Through the interviews, we found that many partners had difficulty finding files because they were not familiar with the basic functions of Figma. Therefore, we selected several features that would be most helpful to them, such as search and filter, adding files to favorites, using the find function to search for keywords, etc. These features effectively assist them in quickly finding the desired content.
02 ππ» Centralizing specs and providing a functional catalog for guidance.
Due to the previous practice of documenting specs while working, they were scattered and difficult to locate. To address this, a new guideline centralizes component or section specs and provides clear naming conventions. For complex screens, we would use a plugin to create a functional catalog with clickable links for quick access to relevant specs.
03 ππ»Β Providing a comprehensive index document for design files to collaborators.
Originally, the designers had collaborated on creating an index document listing all design files. However, due to the document not being explicitly shared with everyone and the lack of regular maintenance, it resulted in ineffective utilization for finding files. To address this, we have included the document link in the template, allowing each collaborator to access it at any time. We have also enhanced the document by updating the design status and progress, making it more effectively utilized.
π©Β For Designers
01 ππ»Β Integrating complex rules into the workflow
In the design guidelines, there are some tedious tasks such as changing file names, cover images, updating links, etc. We have integrated these tasks into the existing design review process and set up reminders in advance, ensuring that they are not overlooked and allowing for dedicated time to address them.
02 ππ» Reviewing, cleaning, and optimizing maintenance & spec components
We have converged the number of components and optimized them into more practical versions. For example, there used to be a maintenance component that included arrows in various directions to assist designers in creating flowcharts. However, after conducting surveys, we found that most people preferred using the built-in arrows in Figma directly, as it was faster and allowed for better editing. As a result, we decided to discontinue the use of that component.
Final Step π©
Maximizing Knowledge Exchange through Design Document Sharing for Seamless Onboarding
- We organized an internal design document usage sharing session, where we shared the optimizations and adjustments with our collaborative partners from the product team.
- We also recorded the content of this sharing session and uploaded it to our internal educational training platform as a training video for new onboarding.
- This extends and sustains the benefits of the sharing session, ensuring that new team members can learn how to use the design documents effectively.
Takeaways π‘
Sharing is what really matters.
We discovered that most of the issues faced by our collaborative partners stemmed from a lack of understanding of the basic operations in Figma or unfamiliarity with the existing design team guidelines. Therefore, it became evident that addressing these issues could be achieved by providing basic Figma tutorials and introducing the existing design guidelines. This realization highlighted the importance of sharing foundational knowledge and operational skills rather than solely focusing on optimizing various details.
Want more? Check out my other projects below.
![[Design Ops] Maintenance Rule Iteration](https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/cf0d316c-e97f-4fa4-b1c9-cee53c1b6ff8/Untitled/w=1920,quality=90,fit=scale-down)
