Azure Arc Icon Family

As a Visual Designer for Azure Framework, I supported a wide variety of teams across the Portal.

Azure Arc wanted a unified style across their family of icons so that they would be easily identifiable within a list. I worked with a large group of stakeholders to understand the mission and goal of this project. I wanted to keep these icons still within Azure branding but also feel like they belonged together.

Goal: Create a visually unified icon family

Role: Visual designer, Project Manager

 
Arc-Header-Image.jpg
Arc-icon-process.jpg

Exploration & Iterations

I brainstormed ideas with my immediate team and then presented to the stakeholders for review. With lots of project leads involved, it took a lot of teamwork to come up with a design system that worked for everyone. I enjoyed managing the project as a visual designer.

arc-process.jpg
 
 

In Screen Designs

The team wanted to make sure that the icons would be distinguishable from the standard resources in a list grid view. I mocked up various scenarios to help facilitate solutions in our review meetings.

Azure-Arc-Working-File.jpg
 

Tested & Iterated

The set of icons was put into a study to make sure users could easily identify each icon separately. The team found that the Virtual Machine icon was not distinguishable from the Arc Virtual Machine icon.

3/5 said it was probably ok for the icons to look similar, that they could use the type column to differentiate. However, 2/5 participants were adamant that the icons were not easy enough to tell apart.

 
image003.png
The icon doesn’t clearly give me an indication of on-prem.

I created several new iterations and met with the team again to understand how we could visually separate these two icons. The following constraints were established:

  • The VM icon should stay consistent. It doesn’t make sense to not continue that visual metaphor.

  • If we are looking for a strong color change, it has to apply for any color blind user as well.

  • The arc platform needed to stay - otherwise we would have to change the other icons as well.

arc vm2.png