rebrand_illustrations_full.png

VISUAL DESIGN

Rebranding Scribd

 

Role: Lead product designer for developing the brand visual identity across the product UI
Branding Team: Head of Design, Head of Marketing, Principal Marketing Designer, and myself
Platforms: Responsive Web, iOS, Android

The rebrand effort was to develop Scribd's brand towards to connect more with our newly developed target consumer, the educated professional. 

  • The educated professional demographic included: Male 60% / Female 40%, 30 - 45, College/Grad school

There are many elements to a rebrand (consumer definition, messaging, brand language and visual identity). The main piece I covered was defining the brand's visual identity through color, type and iconography throughout the product (while working closely with the lead marketing designer - who helped ensure the visual identity could scale across marketing as well).  

 
 
 

Approach + Developing the Brand's Visual Identity

A visual style guide and UI components are the foundation of Scribd's visual identity. For the rebrand initiative, I worked through multiple rounds of iterations to develop our new visual identity. Throughout each iteration, I explored how to translate our brand identity into these components using strategies involving moodboards, competitive audits, testing UI applications, and getting feedback from stakeholders + design team.  

Throughout each of the components of Scribd's visual identity, I used our mission and brand/design attributes to help communicate & decide the visual direction for the new brand + met with stakeholders throughout each stage to bring in their feedback on how we wanted to develop the Scribd brand. While my marketing counter-part worked to develop the brand + voice, along with the logomark itself -- I collaborated with her + the design team to define the visual Identity including: Color Palette, Typography, Illustration style, Iconography, UI Components

 
 

Typography

Source Sans Pro is used to reinforce Scribd's identity and guarantee excellent readability on all devices. When exploring for type - I looked for a typeface that aligns with and embodies brand attributes. Additionally, it was important for our product (given the density of information tied to books + audiobooks) that we land with one flexible, scalable font family with readable font weights for within the product.

 
 
rebrand_type.png
 
 

Color

The goal of our new color palette was to evoke the brand + design attributes - primarily modern, sophisticated and approachable. Another key component I strove for was versatility of the palette across various use cases including various digital and analog platforms - to determine this versatility I would apply palettes to key screens throughout the product to see how the palette could scale.

One of the biggest challenges + accomplishment was reaching accessibility compliance for color contrast of our palette on all text and call to actions in product and marketing. On web, we had to ensure our color palette met AA compliance for WCAG guidelines. The app contrast was definitely a time-saver: https://usecontrast.com/ for any future designers. 

 
 
rebrand_colorpalette.png
 
 

Iconography + Illustration

Worked as an art director for developing our iconography set with a visual contractor, Thomas Gatewood. I detailed out a general brief with design principles + brand attributes to communicate the vision. Along with the brief, I audited all of our iconography throughout our apps so we could build a scalable icon set that covered our app holistically. The primary driving goal was to built out iconography for Scribd with one cohesive style - and given the density of information on our product, I wanted to create a strong visual impact with our iconography with a 2px standard - so that users could always find key actions throughout our product. A month or so after the rebrand launch, I worked with the contractor to build out an illustration language for Scribd.

 
rebrand_alliconography.png
 
 

Applying to new visual system...

The most time-consuming but worthwhile pieces of the rebrand was working with the three development teams to update our visual identity across the product. Prior to the rebrand, there were no UI components the developers were using for type, color or iconography -- meaning with this initiative I was able to collaborate closely with the development teams to both update our brand end-to-end across the product but also help clean up technical debt, enabling faster collaboration with dev in the future. 

 
rebrand_before.png
rebrand_after.png