top of page
PROBLEM
THE OLD MASTERY BRAND WAS CREATED WITH AN INTERNAL AUDIENCE IN MIND AND WAS NOT FITTING FOR THE GLOBAL AUDIENCE THE EXTERNALIZATION OF SKILLSHOP WOULD BRING ABOUT.
SOLUTION
REFRESH THE MASTERY BRAND WITH EVERYONE IN MIND WHILE STILL PRESERVING THE BUILDING BLOCKS OF THE OLD STYLE IN ORDER TO CONTINUE TO BE ABLE TO USE THE EXISTING ASSET LIBRARY.
MY ROLE: DESIGNER
I TOOK PART IN THE CONCEPTING, TESTING, AND CREATION OF THE STYLE GUIDE FOR THE NEW MASTERY BRAND. ONCE THE STYLE GUIDE WAS FINALIZED, I ALSO OVERLOOKED HOW THE BRAND WAS USED IN ORDER TO ENSURE IT WAS CONSISTENT.
THE CREATIVE TEAM
1x CREATIVE LEAD
5x DESIGNERS
OLD MASTERY BRAND
These are some of the illustrations that were part of the old Mastery brand. Though they worked for an internal audience, some tweaks had to be made in order to fit a global audience.
Another caveat to keep in mind is the team had build a large asset repository, so we still wanted to preserve the illustration foundations in order to continue using it.
Some of the things we tried to move away from in the new brand are:
-
Excessive use of color
-
Decorative use of characters so they don't appear childish
-
Gradients, shadows, and too much detail so as to not outdate the brand
-
Overall, making sure every design decision is intentional
To add to the human feel, we also have a range of expressions that we can swap in in order to fit the course content.
The character’s face and body should move according to the pose to show the range of motion.
Character Guidelines
Consistency is very important when working with characters, and there are multiple ways we ensure that each character’s looks are uniform throughout our courses.
One of them is their unique heights, which can be particularly identified when multiple characters appear in a scene, so we created a height chart to ensure accurate sizing.
We make sure to never change each characters skin or hair color, but we can play with different hairstyles, outfits, and accessories.
In order to make characters feel more human, we try to make their poses as natural as possible, making sure they don’t look stiff or unnatural.
Height Chart
Hands
Hands are really important in our library because they help us quickly pose characters and make scenes feel more human. We've sorted them into different levels of detail depending on how we use them.
Simple Hands
Used on fully detailed character(s) and scenes with background depth. Only 4 fingers are shown and they don't need to be fully defined
Medium Hands
These are not shown with characters, instead they are incorporated in spot illustrations or scenes to add a human element. They have 5 fingers and are depicted with minimal color depth and some defining strokes.
Detailed Hands
Meant to be used in fully detailed hero illustrations where they are more prominent. They have 5 fingers and are shown with full color depth as well as details such as jewelry or painted nails.
Mastery creative foundations
Build from White
White should take the majority of the image.
Gradients and lighter shades can help create an environment without the need of using color.
Use Color Effectively
Create points of focus with color.
Ensure illustrations are legible against color backgrounds.
If all four colors are used, make sure they are balanced and each is given equal weight.
Dark and light tones can be used to show shading and depth, but they should never dominate an image.
Build for Everyone
No text on images
Text can be overlaid over images through code to facilitate translation into multiple languages and enable text-to-speech functionality. Additionally, nondescript text can be depicted using lines or empty rectangles.
No currency signs
Since currency can associate with specific countries or regions, we opt to refrain from its direct usage. Instead, we depict money using nondescript notes and coins.
No language-specific imagery
We refrain from depicting expressions that are exclusive to English, ensuring that the content remains comprehensible across all languages after the course is translated.
No culturally defining imagery
Since our goal is to be as inclusive as possible, we choose not to portray animals, music, sports, weather, or anything that may not resonate universally across all cultures.
Always Resolve Imagery
Ensure that illustrations seamlessly integrate with the surrounding content, avoiding abrupt cutoffs or floating elements.
This can be done by smoothly transitioning through gradients...
...or by incorporating a grounding element like a floor, shadow, or background environment.
...or enclosing within a shape...
Icon
No shadows or details, flat
Low to High Fidelity Image Categories
To prevent overwhelming learners with excessive illustration, we've implemented a fidelity system that adjusts the detail level based on image size.
Each illustration category is allocated a specific quota per course, ensuring a balanced use of high-detail images. By limiting intricate illustrations, we prioritize their role in enhancing content comprehension rather than just decoration.
Our hope is that illustrations remain purposeful tools while still offering occasional moments of delight.
Spot Illustration
Depth, shading and line details, single objects
Scene
1 or 2 characters or multiple objects, no detailed backgrounds
Hero
Fully detailed character(s) and scenes with background depth
Scaling
An image can be resized without sacrificing its intended message. For instance, a hero image can be condensed into an icon while retaining its core message. The key lies in identifying what elements to remove and adjusting them effectively.
Original Hero Illustration
A detailed scene including character(s), an office background,and a whiteboard showing a positive bar graph
Scene
Characters no longer have facial features,clothing flattened to a single color, accents removed,graph is enlarged and simplified.
Spot Illustration
The whiteboard with the bar graph was pulledout since it was the most important element in the original illustration.
Icon
The graph is pulled out since its the main focus
Google's Visual Core Guidelines
Color Palette
Typography
GOOGLE'S BRAND FOUNDATIONS
The Google brand foundations are meant to help create content, imagery, or subrands that are Google-y and fall in line with the overarching Google brand. These were our North Star for this project and helped us navigate the making of a more specific set of guidelines that would be crafted particularly for Mastery.
NEW MASTERY BRAND STYLE GUIDE
Keeping Google's brand foundations top of mind and through lots of concepting and testing, we came up with a brand that was inclusive, airy, inviting and purposeful while still serving moments of delight for the learner.
We consolidated this framework into a comprehensive style guide, encompassing everything from the main goal we were trying to achieve to how to properly create a smooth gradient.
These are some of the key sections that formed the foundational building blocks of the new Mastery brand.
CHARACTERS
Google is for everyone, which is why we focused on having a diverse cast of characters that would be used throughout our courses and collateral.
To align with our new standards, we made sure the usage of characters is intentional and not used as props. The overuse of characters risks distraction, so an alternative to humanize course assets is to use hands instead.
SKILLSHOP
With a fresh new look and feel, the new Mastery brand was implemented to its new home: Skillshop.
Skillshop is a Google training platform that you can use to grow your skills on Google's tools and solutions. The brand can be seen throughout the website navigation as well as the online courses.
Our role as designers was to oversee the use of the brand to make sure it was used properly as well as create assets for courses, making sure they were custom made for the intended space.
WANT TO SEE MORE GOOGLE MASTERY?
Great. Because there is a lot more. Click on the buttons below.
2020 / GOOGLE
GOOGLE MASTERY REBRAND
Google's Mastery team specializes in creating internal e-learning courses for Google sellers focused on product training as well as skillset improvement. As the team prepared to make this content available for an external audience with the launch of Skillshop, the Mastery brand felt in need of a rebrand. I worked alongside a small group of designers develop this new brand that fulfills the needs of reaching a global audience.
bottom of page