Google Primer Brand
Googl
Primer Brand
Google Primer Brand
Google
Primer Brand
Branding, Marketing, Social
Branding, Marketing, Social
Primer is a free mobile app for users all over the world to learn about business & marketing topics. As a previously independent product Primer became more integrated within Google as part of the Grow with Google program. The brand would need to adopt a refreshed look to pair Primer's personality with the larger Google brand.
Roles
Roles
Branding, Social, Emails, Stores, Web, Logo
Logo
Logo
Brand Elements
Logo
Old Primer Logo
One of the most influential updates for the Primer brand would be the redesign of the product icon/logo. The previous Primer logo was designed for a much older version of the app based on a concept that had long been left behind. It didn't communicate the function of the app clearly to users and would need to be rethought. We would undergo a process of competitive audit, Google brand audit, concepting, and pressure testing that lead to the new Primer brand logo.
Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!
One of the most influential updates for the Primer brand would be the redesign of the product icon/logo. The previous Primer logo was designed for a much older version of the app based on a concept that had long been left behind. It didn't communicate the function of the app clearly to users and would need to be rethought. We would undergo a process of competitive audit, Google brand audit, concepting, and pressure testing that lead to the new Primer brand logo.
Final 2 Concepts
Final 2 Concepts
Final 2 Concepts
The Primer flag, reimagined.
This logo option takes the flag from our current logo and repositions it conceptually and functionally. The previous Primer flag is used to symbolize a starting point, whereas this stylistic tweak allows us to repurpose the flag to metaphorically connote “goals”. The way the flag rests at the point in the P where the slope meets the stem implies that it’s sitting atop a pedestal, or a goal to reach for. Regardless of our user’s circumstance and place in their learning journey, they have goals that Primer can help them reach.
Notecards
This logo concept represents the essence of Primer: To learn something new to achieve your goals. The positioning of the two cards creates a sense of movement, and visualizes content in a form that could be perceived as notecards or notebooks and hints at the interactive nature of the app. The subtle implied motion gives it a playfulness that follows the tone of the rest of the app. The combinations of hard angles, rounded and hard edges, and bold color make the icon blend within the larger brand.
Primer Logo 2.0
Primer Logo 2.0
While a simple concept the new product icon communicates the spirit of primer effectively. Notecards are a common symbol for learning, the offset communicates swipeability and action, and the slight offset makes them feel jumbled and animated. It quickly demonstrates the need, function, and personality of the app in a plain image.
Knowing the issues surrounding the previous logo, we needed to take time to create a new concept for our brand that would be futureproof for and allow for more integration within Grow with Google if necessary. The final concept is a literal approach that uses the core learning device (swipeable cards) to communicate the idea of learning to prospective users.
The concept of the product should be clear from its icon. Avoid complicated designs or confusing metaphors.
Google Material Brand Standards
Blending into the Google family
Blending into the Google family
We had a unique challenge when creating this logo in that instead of pairing our brand with a new look and feel, or an individual brand asthetic, we had to match the Google brand of over 700+ products while maintaining as much of our personality as possible. To do this we took a look at a selection of other product icons in the Google family and applied those principles to our new design. Not all product icons are executed the same, but the similarities are clear. Hard angles, a combination of hard angles and round chapes. Bold colors and high contrast.
Primer Look & Feel
Brand Elements
Brand Elements
Brand Elements
Merging Primer with the Google standards would be a delicate process. One that sees Primer fit within the larger brand guidelines but without losing it's essence. We started by auditing other Google products and took a look inward at our brand to identify areas where we could come together, elements that were best preserved, and areas of overall improvement. This research process was backed by user study, material standards, and best practices for mobile apps.
Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!
Color
Color
Re-Applying Color
Applying Color
The original Primer app used a series of teals, cyans, and greens to color code lesson content into macro groups. This was a functional aspect of the color that also became key to Primer's outward appearance. This system was baked into lesson coding but also illustration coloring. This would be something we would aim to maintain but with colors tweaked using Google primary colors.
The original Primer app used a series of teals, cyans, and greens to color code lesson content into macro groups. This was a functional aspect of the color that also became key to Primer's outward appearance. This system was baked into lesson coding but also illustration coloring. This would be something we would aim to maintain but with colors tweaked using Google primary colors.
Skin Tones & Illustration
Skin Tones
One key update to the Primer palette and color system would be the addition of realistic skin tones for illustrations existing outside of lessons. Our marketing materials use these illustrations to promote the product and offered up a great opportunity to take a slightly more realistic approach while keeping the lesson illustrations more fantastical and whimsical in nature.
One key update to the Primer palette and color system would be the addition of realistic skin tones for illustrations existing outside of lessons. Our marketing materials use these illustrations to promote the product and offered up a great opportunity to take a slightly more realistic approach while keeping the lesson illustrations more fantastical and whimsical in nature.
Typography
Typography
Google Sans
GT Walsheim
A combination of GT Walsheim and Google Sans. GT Walsheim is a bit more light hearted and easy to read in large chunks but Google Sans works perfectly for UI, Titles, Subtitles, and marketing materials.
A combination of GT Walsheim and Google Sans. GT Walsheim is a bit more light hearted and easy to read in large chunks but Google Sans works perfectly for UI, Titles, Subtitles, and marketing materials.
Iconography
Iconography
Using icons from Google material meant a simple upgrade from the previous style of solid icons to the most recent hybrid solid/stroke icons.
Website
Website
App & Play Store Redesign
Stores
Stores
Stores
App Store and Play Store updates are a regular occurance for and app that's constantly making improvements and releasing feature updates. As a second wave of Primer's branding initiative, we pushed for a redesign of the app and play store screens. We drew inspiration from user feedback, testing, and internal goals for improvement on the designs. The screens would become more straight forward, simplified, and follow similar patterns that drive the app experience.
Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!
Before
After
See the rebrand updates in detail.
Marketing
Marketing Materials
Marketing
Marketing
Once we rethought our base elements it was time to apply them to our marketing materials such as emails, social, our website, and any other type of cross promotions used to represent our app.
Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!
Emails
Emails
Before
After
Credits
Credits
Credits
Credits
This project couldn't have been accomplished solo, here's all the key players.
Graduated with top portfolio nominations and a Bachelor of Fine Arts degree in Communication Design.