Figma Collaboration

Designing a process for how Design, Product, & Development teams work and collaborate in FIgma.

Project Details

  • Leadership, Process Design, DesignOps

    Primary Practice Area
  • 2022

    Year
  • Head of UX & Product Design

    My Role

Organization Details

  • Global Talent Network

    Industry
  • $200MM+

    Yearly Revenue
  • 1000+

    Employees

Background

When I took over Andela's design organization, my first order of business was to ensure our design system is scalable, and to ensure all the associated design processes are scalable as well. One of the most critical roadblocks to scalability, was how we worked and collaborated in Figma. I needed to create a comprehensive set of operating processes & documents to catalyze how Design, Product, & Development work in, and facilitate collaboration through, Figma.

Project Overview

The Challenge

From a business perspective, I needed to create a DesignOps process that would cut down on design errors & reduce hand-off time; increase design & product development velocity; and, ensure the existing design system could scale to new products & beyond.

From a user/employee perspective, I needed to ensure new employees are able to quickly ramp-up when they join the team; ensure existing team members have no roadblocks when using the design system; ensure smooth collaboration between design, product, & development; and, ultimately, to ensure a fantastic employee experience across all business units.

The Solution

The solution was to define an easy, repeatable, scalable process for Design, Product, & Development to work & collaborate in Figma, along with an expansive set of documentation to facilitate the objectives.

The Design Process

My design process for this initiative was no different than designing an internal/external product. I utilized a traditional design thinking workflow to proceed through solving the DesignOps problem.

For Whom I Designed

New Andela Designers

New-hire designers joining the Andela team.

Existing Andela Designers

Candidate users are job seekers whom engage Robert Half to connect them with clients looking to hire new talent.

Andela Product Team

Candidate users are job seekers whom engage Robert Half to connect them with clients looking to hire new talent.

Andela Development Team

Candidate users are job seekers whom engage Robert Half to connect them with clients looking to hire new talent.

Understanding What The Team Wants & Needs, & Uncovering Problems In The System.

Designing a research strategy

With my business & user/employee objectives in full view, I needed to design a research strategy to not only uncover roadblocks in Andela's DesignOps program, but to also uncover what problems each team were having in using Figma, using the design system, and when collaborating between business units.

To uncover these roadblocks and problems, I conducted employee interviews, business unit focus groups, surveys, & collaborative design thinking sessions.

Synthesized Research Data

Designers - Top Insights

  • Have trouble breaking bad design habits, and breaking troubled processes carried over from previous organizations.
  • Don't know all the standard Figma plugins they need to accomplish their most common tasks.
  • Don't have a consistent process to organize their design projects.
  • Want to see, and be inspired by their peers work.
  • Don't always know how to properly hand-off to Development, or collaborate with Product.

Product Owners - Top Insights

  • Don't know where to find the user stories in each design iteration.
  • Have trouble with permissions and accessing the right designs.
  • Don't always know the best methods for collaborating with the design team.
  • Need a crash course on how to navigate Figma, and the design system.
  • Want to be able to link journeys and individual screens to their user stories.

Developers - Top Insights

  • Need a crash course on how to access designs in Figma.
  • Stuggle with the existing hand-off process.
  • Want consistent hand-off documentation.
  • Want the right permissions to access designs, user journeys, & prototypes.
  • Want a better process to engage with Design QA.

Key user insights

The insights from user research were high-value; the data helped generate a firm understanding of the issues each team was consistently faced with. It also elucidated a set of 6 core problems that needed to be solved, in order to get each team on the same page, and moving in the right direction.

Key Problems To Solve

How might we ensure the design system is organized, so Design, Product, & Development have the file structure, team structure, project structure, and organizational directives needed to collaborate and be efficient at-scale?

How might we ensure all teams have a collective definition of specs, and know how specs are documented & accessed?

Going one step beyond specs, how might we ensure the efficient and effective hand-off between design & development?

How might we ensure teams are structured properly in Figma, and in a way that promotes collaboration?

How might we ensure the proper access & permissions are granted to the right employees, and the right teams, at the right times?

How might we ensure all teams have access to plugins and Figma resources?

Establishing Structure For Files, Projects, & Collaboration

Setting the standard for file structure, project flow, and collaboration

At the outset, I knew I needed to get Figma organized. I established a set of principles to A) set the stage for cross-business-unit collaboration, and B) set the direction for clear patterns of organization. To bring these principles into daily action, I set standards on how files should be organized, how projects should be structured, how figma projects should flow from beginning to end, and how teams should properly collaborate in Figma.

Creating A Process To Document Specs

Documentation is everything

The Design System, our products, and our ability to collaborate are only as good as the documentation that supports them. File structures and project flows can't be part of a scalable process without documentation to ensure it's repeatable and replicable.

In order to achieve velocity, scalability, and strong team collaboration, I needed to make sure everything was documented, and documented properly. I developed a clear understanding of how to document the design and product specs within Figma.

Setting The Right Team Structure

Simplifying teams in Figma

After going through several iterations of team structures in Figma, I arrived at an excellent final solution. Instead of structuring teams by business unit, district, or physical team, I found that organizing Figma teams by product was the clearest, simplest way to do it. This helped set the stage for the first working governance model.

Understanding Roles & Permissions

Clearing up the confusion with clear governance

Through my research, I found out just how bad the confusion was, surrounding roles and permissions in Figma. Employees needed access to teams, projects, and files that they couldn't find, couldn't join, or couldn't access. This meant sometimes Product Owners couldn't collaborate with Designers, Designers couldn't hand-off to Developers, and Developers didn't have access to comments from Product Owners & Designers. Further, sharing files to stakeholders and C-level leadership was a complete nightmare.

As an integral part of the ever-evolving Epic Design system, I established a governance model, with a clear overarching hierarchy for roles, along with clear guidance on how to gain the proper permission for each level of need.

Perfecting Hand-off

Hand-off done right

My research showed hand-off was the single most frustrating aspect of employee experience. Quantitatively speaking, it was also the biggest bottleneck in our Product Development process. Now that we had structure and organization in Figma, a clear definition & process for specs, a logical team structure, and a strong governance process, hand-off could now be perfected.

I worked with my peers in Development to create comprehensive hand-off documentation and tutorials, which detailed the proper way it should be executed. We housed the documentation in our Zenkit documentation wiki, and within our standard documentation in Figma, itself.

Ensuring Access To The Right Resources

Organizing plugins & resources

I uncovered in the research that the team members often didn't have the right plugins installed, and didn't know which ones they needed to begin with. I included, in the documentation, a list of all the plugins, their links, and a brief how-to for each plugin.

Additionally, I made sure the team had access to all the Figma help resources, compiled a list of internal help contacts for Figma, and started building an Andela help repository for the most common Figma issues.

Outcomes

Reduction in Hand-off Time
60%
Design & Development was able to achieve a significantly better hand-off process that greatly impacted hand-off time and overall product development velocity.
Team Velocity
2x
Achieved a 2x increase in product development velocity.
Reduction In Errors
95%
Between Design, Product, & Development, as an average, the new processes and documentation cut down on overall errors by 95%
Collaboration
100%
While we didn't have a formal measure of team collaboration, it was an overwhelming agreement that it felt like we increased our ability to collaborate exponentially, and were operating at 100%.
eNPS
+15
Achieved an eNPS increase of 15 across Design, Product, & Development. Along with other employee experience initiatives, this resulted in an eNPS of 82 (as rated by the Design, Product, & Development teams).