top of page

GoDaddy

Figma Starter File

An internal Figma plugin and library for file organization

Figma Starter File

An internal Figma plugin and library for file organization.

Shopper Search

Designing and developing themes for the internal Customer Relationship Management tool.

01. The Challenge

Figma is the standard design tool for GoDaddy. However, since adoption of the tool, stakeholders, engineers, and design leads found it difficult to:

  • locate the latest designs for a single project

  • understand project goals, scope, and background

  • find design components or archived designs

image%20147_edited.png

My Role:

Research, UX design

Tools Used:

Figma, JavaScript, Github

image%20147_edited.png

Problem Statement:

How might we organize design files to make them easier to navigate for GoDaddy stakeholders?

02. The Strategy

In order to create the best solution, it was important to first understand:

how designers organize their existing Figma files

how project stakeholders, engineers, and design leads reference Figma

layerBG.png

How do designers organize Figma currently?

It quickly became clear that there was no shared structure for organizing design files. Some designers made a new page for each version of a design, while others placed old versions in an archive page. Latest designs or final designs didn't have a shared name. Some designers labeled projects "current". Others used emojis like a checkmark to signify "done".

image%20147_edited.png

How do stakeholders reference Figma?

Talking with product managers, design leads, peer designers, and engineers helped to clarify what stakeholders were looking to get out of a design file.

image%20147_edited.png

Creating a standard page list

Conversations with the design team helped to shape the framework. I compiled feedback and created recommendations. These were shared using Loom and Slack. An example of an iteration communicated over Slack can be seen below:

The final page structure

The team decided that grouping content with a clear label was the best approach to define and organize design work. Visuals, in the form of emojis, helped stakeholders find what they needed more quickly.

 

We also found that the emojis helped to set expectations for the design work within that page. For example, a checkmark meant that the project was final and ready for development, whereas a construction sign meant that the work was in-progress. 

page-org.png
StructuredPages.png

A shared library for the Readme page

A shared library of project cards allowed designers to provide high-level project details. The cards could also double as a presentation to stakeholders.

cards.png

Creating a starter file Figma plugin

The key to making this successful was easy adoption. A JavaScript plugin allowed designers to add the starter page list to their Figma files with two clicks.

03. The Solution

The plugin and shared card library are available internally to all GoDaddy designers.

bottom of page