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

P-logo-old

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.

GooglePrimer-Horizontal-Color

Final 2 Concepts

Final 2 Concepts

Final 2 Concepts

plogo-3
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.

p-logo-new
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.

Logoinphone-min-1
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. 

gmail_2020q4_24dp
p-logo-new
weather_24dp
chat_2020q4_24dp
mug4-min
GooglePrimer-Horizontal-White

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

Color-Old
Color-New

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.

skintones

Typography

Typography

AaBbCc

Google Sans

AaBbCc-2

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.

type-screens

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.

gprimer-icons
Primer-App-Mock-2

Website

Website

Website_Ex_Large_1440-2021Homepage-min-2

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!

Store-screens-1

Before

store-screens-2

After

Store-Screen-1-min
Store-Screen-2-min
Store-Screen-3-min
Store-Screen-4-min
Store-Screen-5-min
Store-Screen-6-min

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

Q42019_Emails_DESKTOP_v4Email-1

Before

Email-1

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.

Design Lead

Aliza Adam

Product Lead

Justin Cegnar

Marketing Lead

Carol Teixeira

Product Manager

Kayla Wellbery

Illustrator

Gwendal Le Bec

Senior Copywriter

Jenny Nelson

View