Refreshing Microsoft Azure spot illustration system
At the end of 2023 and the beginning of 2024, I created Microsoft's Azure 3d isometric spot and spot hero illustration system. As the Azure brand evolved the spot illustration system needed to be able to live in product and on the website and align with the hero and icon systems of the Azure brand. The new visual brand system and brand identity will be implemented across Azures in product, website, and marketing content. Included in the system is a Figma component library, Illustrator libraries full of pre-built spot and spot hero illustrations along with an object library and a how-to-build section for net new asset creation. I also created both the content and visual design for the brand guidelines for the system. The illustrations in this system are the cornerstone of Azure's spot-and-spot hero illustrations. The system abstractly conveys concepts like security, avatars, servers, finance, and accessibility. I created the system to be ownable, simple, engaging, and easily understandable to users.
Illustration Ecosystem
Icon
Spot Illustration
Spot Hero Illustration
Hero Illustration
The Azure spot illustration system is showcased at the informative level. The system is less detailed than the hero illustration system and more detailed than the icon system.
Azure Spot Illustration Evolution
2023
2024
Throughout the process of creating the Azure system, I did concept development, creative strategy, and art direction in tandem with the day-to-day design and illustration work. Within the system, illustrations live on four different background colors and have a consistent line weight. There are two levels of detail one simpler treatment for spot illustrations and one detailed treatment for spot hero illustrations. To ensure productivity within the system for the Azure product and marketing teams I created a Figma component library of the illustrations that are organized by category. I also mentored two mid-level designers on how to create new illustrations in the system by leveraging the object library that I built in Illustrator with hundreds of premade objects that can be built up to represent any story that they are trying to tell for the Azure brand.
I created a weekly PowerPoint presentation to present to leadership to show my progress, explain creative decision-making, and receive buy-in on the system.
One of the biggest breakthroughs that I made was the use of complementary gradients that can work on four different backgrounds without washing out colors on any of the four backgrounds. Before making this discovery I was finding it difficult to get the gradient treatments to work well together as each object in the illustration needed to have a gradient treatment. I was able to wrangle the gradients to work together and complement each other.
Spot and Spot hero Illustrations
Avatar Spot System
Server Spot System
Security Spot System
Object Libraries
Figma Component Library
Guidelines
In conclusion, this is what my creative director had to say in a recommendation on my LinkedIn that I felt summed up the project well "It was an absolute pleasure working with Nicholas. With a methodical and disciplined approach, he quickly understood the challenges of a large and complex system. He came well prepared for every meeting, and clearly articulated the pros and cons of various approaches, resulting in a functional and creative library of illustration assets." From building and evolving brand illustration systems for Facebook, Atlassian, Lyft, Amplitude, and now Microsoft this was the largest and most complex system that I have ever worked on. In this role, I used my experience in art direction, creative strategy, content design, illustration, visual design, concept development, design thinking, Figma component libraries, Illustrator templates and toolkits, and building brand guidelines. I'm excited to see the illustrations out in the wild and to see how the system evolves.