Fixing the Mess of Design Team’s Figma Environment to Start Working 6x Faster and Having Better Design Version Management
In my early days, I found that to find the previous design version of landing pages, it could take more than 30 minutes. Even, I need to recreate the previous design if it couldn’t be found.
CLIENT:
NIAGAHOSTER.CO.ID
ROLE:
UI DESIGNER
PERIOD:
AUG 2020 - JUN 2022
About Niagahoster
Niagahoster is a web hosting service provider company (part of Hostinger) founded in 2013. Headquartered in Yogyakarta, Niagahoster has served more than 29 million customers in 178 countries.
The Situation When I Joined
The Team
When I joined Niagahsoter, the company was having good business growth despite the pandemic situation. So they’re in need of expanding the business which makes the number of design works getting higher to support the business goals.
I came to the UX team along with another UX Designer. After we joined, the team consisted of 1 Team Leader, 1 UX Researcher, 2 UX Designers, 2 UI Designers, and 1 UX Writer. It became my 1st time working as a UI Designer and collaborating with various UX roles in the team. Previously, I always worked as a solo UI Designer whenever I worked with clients on design projects.
The UX team was responsible for handling all the design work for the company’s website and member area (user dashboard). We use a bi-weekly sprint planning to work on the assigned task by the Team Leader based on the agreed target for that quarter.
My Role
My main responsibility was to gather the task requirements, design the high-fidelity design screen for the website & member area, give regular task updates to the stakeholders, and deliver the design to the developer.
My way of collaborating with the other team members depends on the task. If it’s a big product feature, I’ll collaborate with all the stakeholders (Project Manager, Researcher, UX Designer, and UX Writer). Otherwise, I’ll collaborate with the stakeholders who need to be involved based on the task.
Here Comes the Mess Needs to be Fixed
Whichever way I collaborate, I have found certain issues when designing in Figma. Those issues are getting clearer because the UX team size is getting bigger, not long after I joined, with the new UI Designer, UX Designer, UX Writer, and UX Researcher joining. Things definitely need to be changed to prevent any future issues.

Flow of Finding a Design File Before Reorganization
It’s the design management inside the UX Team’s Figma Environment. These two issues are the main source.
1. Too Hard to Find a Specific Design
Frequently, since my arrival on the team, whenever I need to find a previous design version for certain landing pages, I have a difficult time. It’s not as simple as typing the landing page name into Figma’s search bar to find it. I asked my UI Designer colleague, and it took around 30 minutes, sometimes longer, until we found it.
2. Many Unused Designs Still Being Kept
It became more difficult because there were many unused design concepts or deprecated designs still being kept in the same Figma project/folder. Adding more time, just to find the specific design we need for the ongoing task.
Because of the main responsibility to deliver the design requested by the stakeholders, to solve those issues, I agreed with my UI Designer colleague to do the reorganizing process step by step whenever we have spare time after finishing our main work.
We proposed this idea to the team, and they agreed that they also find the same issues whenever they need to look for a certain design. So, we had a green light to do this Figma environment reorganization.
The Long Journey of Reorganizing Began
After some thoughtful discussion, I proposed some solutions to solve the issue. It will be a big effort and will take a long time. So, the execution of the following solutions will be shared equally between me and my UI Designer colleague.
Let’s go to the solutions we applied.
1. Figma’s Project Folder Restructuring

Overview of The New Design Team Project Folder Structrure in Figma
Before, different kinds of design files still didn’t have their dedicated project folder. We reviewed it thoroughly and estimated our future needs for the design works. We came up with creating new project folders to store the design based on its category and purpose.
Here are some of the project folder names and their content:
Design Language System: for any design style guide
Guidelines: for guidance of the team workflow, and on how to use the specific Figma file
Website (New): for all of the new website design with the new style guide
On Progress Task: for all the in-progress design tasks
Website (Old): for all the old website design with the old style guide
Member Area (Old): all member area (user dashboard) design
Order Flow: all designs related to the checkout process on the company’s website & member area
2. Define the Design File Category
There are several categories based on the design inside each file. After putting the category on each file, we put them in each project folder that represents them well.
Here are some of the categories and in what project folder it will be placed:
WEB: website design, can be placed either in “Website (New)” or “Website (Old)” folders
MA: member area design, will be placed in “Member Area” folder
OF: order flow design, will be placed in “Order Flow” folder
DOC: documentation design, will be placed in “Guidelines” folder
*Each design can be added to the On Progress Task as well when it’s still active in the design phase
3. Give Rules on each Folder Project

Overview of The Rules Applied on Each Design Project Folder in Figma
After each design was placed in its respective project folder, we gave the rules and information on each project folder. The rules explained what kind of design can be added to the folder.
4. Apply the New Naming Format for each Design File

The New Naming Format Applied for Each Design File in Figma
To make the search process easier, all the design files were renamed using the new format. This naming format follows each design category. Here is the new naming format.
(Design Category Code) + Design/Task Name
Example: (WEB) Redesign Landing Page About Us
5. Redesign each Design File’s Cover

New Design File Cover Applied
One of the most challenging parts, whenever the UX team searches for a certain design in Figma, is that there is not enough information provided on the design file’s cover to tell about the file’s content.
Whereas the cover is the first thing we see. If it were designed to provide meaningful information, it would make the search process easier.
Based on that, we agreed to add this information to the cover.
Design Category: same as explained in point 2 above
Task Name: based on what design will be worked on. It has a character limitation to give enough space for other information. It will be applied to the design file name as well
Owner: the team member's name who is responsible for the work inside the file
Screenshot: part of a screen capture from the design
6. Archive All Unused Design Files
The last part of this restructuring process was checking all the files stored inside the UX Team Figma environment to find all the unused designs.
We talked with all the team members, confirming whether the files were still needed. We selected all the files that were last edited more than a year ago. Once we got the confirmation, we put all the files in the “Archive” project folder, so we still have the backup if somehow we need it in the future.
Hard Work Paid Off by Having 5x Faster Time to Find a Design and Start the Work Immediately

Flow of Finding a Design File After Reorganization
The whole process took around 5 months to complete. Quite a long because we did it after the main responsibility to design the website & member area screen was finished.
But, as we projected in the ideation phase, this restructuring phase successfully gave us an easier experience in organizing, finding, and versioning the design. Before, only to find the previous design version, the time needed to spend was around 30 minutes because of the unorganized environment inside Figma. After, it only takes under 5 minutes to find the design. With that significant improvement, the design work can start way faster. Not only faster, but we can maintain the design version and quality of the design.
Which also means we can support company business goals by delivering the design and publishing it to LIVE right on schedule.
A long process that paid off in the outcome.