Phoenix Design System:

Icon Tutorial

Introduction

Phoenix is Workfront’s Design System that is used by over 20 designers in three countries and has been in the making for around 2 years. Our team was responsible for creating, maintaining, and evangelizing this design system while we were also working on redesigning Workfront’s Search and Navigation.

Problem

We did not have enough time to create all the icons other designers were requesting from us, which resulted in us missing deadlines because we could not fit all the work into the timeframe we had. We were also having a difficult time getting other designs to contribute to the design system.

Goal

Empower other designers to add their own icons to the Phoenix Design System. 

Our team

My role

I assisted Brooke Bell in maintaining, documenting, and contributing to the Phoenix Design System. During this project, I built out the tutorials and mentored other designers on how to build and contribute icons to Phoenix. 

First, we tried

First, we tried running workshops with small groups of designers. During these workshops, we outlined how to set up artboards in Illustrator, what our design standards were, and how to export the icons correctly.

Outcome

While the designers were extremely involved during the workshops, once they left we continued to get requests for new icons. After pushing back and asking designers to use what we taught them, we found that the designers were still confused and did not have a way to go back and review the material we presented. 

We also found that while we were receiving a lot of requests, some designers didn’t immediately need to build any icons which resulted in them forgetting the process completely. 

"Some designers didn't immediately need to build any icons"

Then we tried

After running the workshops and finding that designers needed more documentation to look at we decided to try something else. What we decided to do was go through the Workshop again, film it, then post the video for designers to review when they needed help.

Outcome

We posted the video and were expecting that to solve the problem, but the requests kept coming in. After interviewing a few designers we found that the videos were too long and that it took designers too long to find answers to their questions.

"It took designers too long to find answers to their questions. "

We needed to break it down

After our first two attempts, we reviewed what we had learned and decided that we needed to break down the process so it was easier to digest. Inspired by WikiHow we decided to build a step by step tutorial that we could send to designers any-time they had a question. 

This is the tutorial we sent out:

Who is responsible for making icons?

Each designer is responsible for making the icons needed in their areas. Marvel is here to review designs and make sure iconography is consistent throughout our application, we are happy to help but we will not make icons for you.

Step 1

First, you will want to find the Illustrator file that contains the grids. You can find this in the DSM under Icons > Icon grids > Download the Illustrator Icon Grid Templates.

Find the icon grids in the DSM

Step 2

Download the file for the artboard(s) you need for your designs.

TIP: If you need multiple sizes, it's best practice to start with the smallest size and scale-up.

Download the icon grids

Step 3

When you open the file you will need to open it > Create a new layer (call it Artwork) > Lock the guides layer.

Create a new layer

Step 4

Design your icon using the downloaded grid on your new layer. Use the image below to learn how to use the guides.

Icon grid explained

Don't forget to follow our design standards:

A. All strokes should have a 1px width.

B. Corners should have a 3px radius.

C. Strokes should have rounded caps.

How to add rounded caps on a stroke

Step 5

Use Pixel Preview to make sure your icon is aligned directly to the grid. This can be found under View > Pixel Preview.

TIP: Right click your artwork and select make pixel perfect to align it perfectly to the grid.

Make icons pixel perfect

Step 6

Prepare for export by making a duplicate art board and outlining all strokes. Do this by selecting the stroke > Object > Path > Outline Stroke.

Unite your shapes by clicking the Unite icon in the Pathfinder options.

Outline strokes

Step 7

Before you export you will want to hide the guide layer.

Finally export the designs as an SVG.

Hide the guide layer and export as SVG

Step 8

The last step is sending your designs to Marvel to be approved and added to the DSM.

Send to Marvel:

  • An SVG for each icon (all sizes need their own SVG)

  • Ai File (Make sure the artwork is not outline so we can make edits, if needed.)

  • The name of each icon so we can put them into the system properly.

Congrats, you did it!

The outcome

After releasing this tutorial we have been able to send it to people when they have questions or ask us to create icons for them. This tutorial has been a part of our process for the last 5 months and designers now feel confident creating their own icons and no longer ask us to do it for them. Designers now send us the files to be approved and we add them to GitLab.

"Designers now feel confident creating their own icons and no longer ask us to do it for them."

What I have learned

Working on a Design System is extremely challenging especially with a small team. Going through this process has taught me that the best way to get designers to contribute to the design system is by breaking down the process so it's clear and easy to digest. Since this project, I have developed tutorials for other components, research tools, and our analytics tool because I have found it to be the best way to speak to and teach our design team.

Enrolling the New Experience

A case study around how our team redesigned Workfront's enrollment experience to prepare for their migration of 350,000 customers to the New Experience.

  • LinkedIn - Black Circle
  • Medium icon
  • Twitter - Black Circle

© 2019 by Alex Barker