Designer on a team that was in charge of creating the new illustration style that would be used across all Microsoft Cloud + AI products.
Sirca started with an idea. A new navigation app that allowed users the ability to easily search for and plan stops along their route, without disrupting the directions to their final destination. Our task was to create an elegant yet simple navigation brand from start to finish; while also fully defining and designing their app, website, and technology. The messaging was simple: to give people the flexibility to make a stop, for whatever they need, along the way.
Client
Microsoft
Role
Illustration
PROBLEM STATEMENT
Illustration used across Microsoft's Cloud + AI products was stylistically and tonally inconsistent. A new illustration style that used a singular voice and consistent visual elements was needed to align with the release of the Fluent Design System and a cross company push for brand consistency.
** Unless otherwise noted, the illustrations shown below are my contributions to this project. This project continued past my participation. **
EXPLORATIONS ROUND 1
Three main groups of illustration are being used across Cloud + AI products: 1. Informational - break down complex topics; 2. Spot - small areas in product; and 3. Hero - large, decorative and detailed.
In the first exploration round, we were tasked to explore a style and show how it could span across these types. The style had to align with the core principles of fluent design (light, depth, motion, material, and scale), show growth across the groups and use the business voice of the product. I used flatter shapes and color in the informational illustration group to help keep the main focus on understanding. The amount of detail and decorative elements were added and scaled towards the hero illustration group while keeping a consistent growth of depth and material feel throughout.
Informational Illustration Exploration
Spot Illustration Exploration
Hero Illustration Exploration
EXPLORATION ROUND 2 - EMPTY STATE FOCUS
In the next exploration round, we decided it would be best to narrow our focus on one group; spot illustrations and allow this style to inform and expand to the other groups. Each illustrator on the team was given the same product screens and assigned a specific metaphor style. I was given the abstract style appraoch and explored how to create meaning with simple shapes and the different ways it could used across product screens.
EXPLORATION ROUND 3 - STYLING
We decided to take a literal metaphor approach with pops of humor and humanistic elements to add delight and relatability to the products business voice. The next step was to explore visual stylings. To do this all team members took the same illustration and used it to explore different styling approaches. This process was great to see how a base illustration can express different voices depending on elements that were added and how colors and lines were being used.
Original Image (created by Sofia Ibarra)
Explorations
FINAL STYLE DIRECTION
Two of my above explorations along with two of my teammates were chosen to explore further by the product GM. This meant we tested the styles in brand colors and added new elements such as acrylic material and depth. During this exploration process, we tweaked and finalized how the elements would be used. We held cross product team evaluations and the illustration below, done by team member Sofia Ibarra, was chosen as the north star for future illustrations. While in the end my illustration style was not chosen, the explorations and work done from the beginning built upon each other and helped reach this final style.
** This illustration was done by Sofia Ibarra **
LEARNINGS AND BARRIERS
We learned a lot in this process of creating something entirely new. Before exploring style we had to focus on developing the best way to use and scale illustration in all of the 30+ business facing products. Illustrations had to make sense with users experience and not distract from the product goals. After first illustrating in an isometric grid, we realized it was too time consuming for the amount of illustrations that were needed and it wasn't sustainable or usable across all products.
We had to be flexible in our approach to exploring as well as be comfortable scraping avenues that we liked but didn’t align with business needs. It was a good lesson in not getting personally attached to your work. The illustration team was split up after finalizing the style direction and my time was allocated towards other projects.