In the Azure Arc Center, the user can find an overview of all their hybrid cloud resources and services that they are able to use together with Azure Arc. They are able to extend their Azure cloud management tools on-premises. Essentially making a portal that they are able to view all their resources in one location. There is a push to modernize the on-premise datacenters, as well as streamline the whole experience. The team was getting ready to launch these products and came to me with a need for icons and illustrations that communicated function and service.
Role: Visual Designer, Project Manager
Client: Microsoft | Azure
Timeline: 3 months
Tools:
Design Challenge
How can we create a family of icons that brings clarity, as well as delight for the user?
Design Process
Inspiration
Service Icon
I had worked with part of this team previously to design the overarching Service icon for Azure Arc. The metaphor I used to create these iterations was the idea of bridging a gap or bringing elements together. Azure Arc allows the user to bring Azure to their on-premises devices. Therefore, this service icon should highlight that capability in some way.
Ambiguity
Once I identified that there was some confusion within the product team, I realized I would need to step into a project manager role. The first thing I did was sit down with the team to understand the scope of icons needed. There were quite a few stakeholders involved – as each product lead needed their own icon. I wanted to make sure there was a clear process in place as we moved forward. Through this discuss, I left with clear goals to move onto iterations and ideation.
Goals:
Brand alignment: the icons should reference parents products when applicable
Metaphor alignment: the icons should use familiar metaphors whenever possible
Guideline alignment: the family should reference the Azure icon guidelines
Arc Distinguishable: the Arc icons needed to be distinguishable from their regular counterparts
Guidelines
A key role in this project was as the lead designer. I was the one with the knowledge on the icon guidelines and I needed to make sure these icons fit together as a family but also were cohesive with existing icons. My team had created a design system that consisted of colors, general shapes, and redlines to work within. This system gave us the freedom to explore but the constraints were in place to support consistency.
Trial & Error
Once the team was onboard with the icons and their metaphors, we focused on how to distinguish the Arc icons. I played with colors, gradients, badges, and shapes. I drew from the Azure Arc service icon for inspiration. I then narrowed them down with my team before presenting to the Arc team. I was careful to not present anything I wasn’t completely happy with because I knew the stakeholders were a bit fidgety and I didn’t want them to latch on to something that wouldn’t work in the long run.
Accessibility
It was also important to test accessibility for these icons as well. I was relying heavily on color to make them distinguishable, but factoring in color blindness could make that pointless. This is why the stakeholders leaned toward adding a badge or some sort of defining shape to make it clear that it was an Arc icon.
Iterations
After a lot of iterations and discussion, I presented these two family sets to the stakeholders. The platform idea worked well for visible distinction. The option was to either leave the resource icons (Kubernetes, Virtual Machine, Machines) the same color, or apply a gradient across the whole family.
Mockups
I also created a few mockups for the team to visualize how these icons would look in the portal. The big concern was would the Arc icons be distinguishable against their counterparts. By putting them in the scenario, the stakeholders were able to make a decision.
Testing
User Testing & Research
The team wanted to check the accessibility and discoverability of the icons. We worked with researchers to put the icons in front of five participants and get some constructive feedback. Focusing on the Virtual Machine icon, we asked probing questions about the differentiation between the Arc VM icon and the regular VM icon.
“It’s good to have an icon differentiate, I won’t look at it except for a quick glance. So far it looks ok, but there are things that could be further done here. The icon doesn’t clearly give me an indication of on-prem. If it can be more information, it’s better. The icon should differentiate on-prem or public. ”
Results
There was mixed feedback on whether to change the Arc Virtual Machine icon to make it more distinguishable from the Azure Virtual Machine icon.
Even though all the participants struggled to differentiate the icons, 3/5 said it was probably ok for the icons to look similar, they could use the type column to differentiate. However, 2/5 participants were adamant that the icons were not easy enough to tell apart, especially at a quick glance.
Implementation
I created several new iterations and met with the team again to facilitate a conversation of next steps. Out of this discussion with the stakeholders, the following constraints were established:
The VM icon should stay consistent. It doesn’t make sense to disrupt 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.
While the research was neutral, we wanted to explore all options before launching the whole family. It was decided that the designs be implemented as is. There is enough supporting text with the icons, that the user is still able to understand what they are looking for.
A strong icon is capable of expressing its function to a certain point. These icons became a strong family that illustrates both its parent resource as well as its own identity. This can be a large ask for a tiny icon, but after working with this team for a while, I am proud of what was accomplished.