How we organized our Figma files to improve our team's productivity and increase the revenue by 8%

Onboarding flow UX redesign project

Duration: Duration April to August 2024

My responsibilities: Senior product manager, lead UX designer

What

Ovice is virtual office software for remote work customers. However, due to a flawed design system, customers in the US, Japan, and Korea were confused and unable to generate revenue

Previous: Time consuming, misunderstandings

Difficult to find the latest design

Lots of miscommunication

This is because it is hard to find specific Figma files, For example, (a new modal for onboarding), (a bot to help educate new users quick guide on the first screen), (convince users to unsubscribe), etc.

And it created a huge barrier to communication with the engineering and design teams, and negatively impacted the sales and marketing teams

How did you solve the problem?

1. Workflow

We began looking into our existing work process to find a file organization that would fit our workflow.

Brainstorming, pain point and user flow mapping, inspiration gathering, user feedback, and stakeholder wants and needs (we use Figjam's brainstorming page 📓✏️

2. Consider multiple options and gradually refine the solution

3. Iterate - feedback and design updates. Wireframe, lo-fi, mid-fi, high-fi, ...

4. Final design - hand over to development

5. Want to save all considerations and decisions for future reference.

6. Merge the final design into the core file to maintain a comprehensive view of the product

Figma File Structure and Workflow

Step 1: Create a new “work file” and activate the associated component libraries, depending on the products affected by the change

Step 2: From this new working file, lead the entire project. Here, use the various pages to organize the following content, obviously using a lot of pictograms

Cover (image to help users identify the file)
- - - - - - - - - - - - - - - - - - - - -

💻Final (final design specs you can share with developers)

✏️ Ticket detail (Why we started this re-design project, etc)

✏️ Wireframe

Lo-Fi (Date)

High-Fi (Date)

Step 3: Once the feature is finally released, merge the final screens into their respective “Core” files.

why split the “Core” file into so many files?

When considering how to organize the files, I considered two options: one file for each product, with pages outlining its many sections, or one file per product section with pages highlighting the different variations of this section as needed. I chose the latter for the following reasons

Figma's recommended best practice is to keep the files as focused as possible so that they do not get lost in a sea of screens when shared with collaborators

If a section of the product is already complex (multiple states or variants), having a file dedicated to a specific section and detailing its many states and edge cases will provide greater clarity

In terms of performance, Figma performs better with smaller file sizes

Using version history is easier if each file is focused on a subsection of the product

Step 4: Save the entire working file in the Archive folder for future reference. You may consider adding a date to the file name to track the frequent repetition of an issue.

After the organize our Figmafile: Efficiency, effectivity

Easy to search for the latest designs

Easy collaboration with other designers, PMs, engineers, and other departments

Increased productivity, work is now done by 6 pm, even during 2-week sprint periods.

Reduced miscommunication and better communication with other teams in the company. Ended up has helped us increase our revenue by 8% in 6 months

The key takeaway

Organizing Figma files is similar to organizing a real closet. Without proper rules, team members organize in their own ways, which leads to inconsistencies, miscommunication, and wasted time.

However, through research and experimentation, we have found the best way to organize. This allows us to work smoothly when a team member leaves the team, taking over past designs, new designs, and the reasons for design changes.