Pinterest brand
Refreshing Pinterest’s brand site to an interactive self-guided brand hub
Prompt
Create a home to tell Pinterest’s approach to their brand in an intuitive and informative manner, as well as inspire a wide array of audiences, and find new ways to showcase the brand.
Outcome
We organized Pinterest’s vast content on their brand site and Figma documents into three intuitive sections — Discover (Brief overview), Learn (Brand guidelines), and Inspire (Gallery & blog) — for audiences of various needs. We also created a highly interactive brand site by combining visual storytelling, smart interaction and motion details, and carefully crafted content.
Role
I was one of three designers on the team, contributing significantly from concept, visual design, prototyping, to creating a robust and well-documented design system. I also audited and consolidated Pinterest brand materials to create a new section explaining Pinterest’s approach to visual narratives.
Create a home to tell Pinterest’s approach to their brand in an intuitive and informative manner, as well as inspire a wide array of audiences, and find new ways to showcase the brand.
Outcome
We organized Pinterest’s vast content on their brand site and Figma documents into three intuitive sections — Discover (Brief overview), Learn (Brand guidelines), and Inspire (Gallery & blog) — for audiences of various needs. We also created a highly interactive brand site by combining visual storytelling, smart interaction and motion details, and carefully crafted content.
Role
I was one of three designers on the team, contributing significantly from concept, visual design, prototyping, to creating a robust and well-documented design system. I also audited and consolidated Pinterest brand materials to create a new section explaining Pinterest’s approach to visual narratives.
Product Design · Visual Design · Content
Company: Sanctuary Computer + XXIX
Company: Sanctuary Computer + XXIX
Bold typography, leveraging hover states to reveal visual moments
The homepage is a manifesto of Pinterest’s brand set in big type and glyph. A boot with a list of topics is shown at the bottom of all pages to guide viewers to different Pinterest’s brand elements.
The homepage is a manifesto of Pinterest’s brand set in big type and glyph. A boot with a list of topics is shown at the bottom of all pages to guide viewers to different Pinterest’s brand elements.
Smart interaction to collapse a large amount of content
On Pinterest’s old brand site, which only hosts guidelines and resources, people often struggle to know where to begin to look since there’s an overwhelming amount of information. We decided to highlight key principles in a series of inset cards while collapsing dense deep-dive content within.
On Pinterest’s old brand site, which only hosts guidelines and resources, people often struggle to know where to begin to look since there’s an overwhelming amount of information. We decided to highlight key principles in a series of inset cards while collapsing dense deep-dive content within.
Storytelling through custom interactive modules
On the typography page, I designed a slider controlling font sizes to introduce the Pinterest typefaces and a module powered by Translation API to highlight the typeface’s support for different languages. On the color page, I designed an interactive color palette that allows viewers to easily browse through the vast brand colors and copy RGB, CMYK, and Hex codes for their project.
On the typography page, I designed a slider controlling font sizes to introduce the Pinterest typefaces and a module powered by Translation API to highlight the typeface’s support for different languages. On the color page, I designed an interactive color palette that allows viewers to easily browse through the vast brand colors and copy RGB, CMYK, and Hex codes for their project.
Grid/List + Filter Toggle
On Inspire landing page and resources pages for viewers who prefer to browse through visuals vs a condensed list, as well as filtering content
On Inspire landing page and resources pages for viewers who prefer to browse through visuals vs a condensed list, as well as filtering content
Design system
Early on in the project, we realized Pinterest's existing product design system was limited for our project. The brand team also feels it is important to differentiate between the brand site and product sites.
We created a robust and well-documented design system to fit the Pinterest brand team’s various editorial needs and for development hand-off. The system was successful such that the brand team is considering introducing it to other projects.
Early on in the project, we realized Pinterest's existing product design system was limited for our project. The brand team also feels it is important to differentiate between the brand site and product sites.
We created a robust and well-documented design system to fit the Pinterest brand team’s various editorial needs and for development hand-off. The system was successful such that the brand team is considering introducing it to other projects.
Title IX Investigations Tracing Colonial History Through Street Names Searching in Trump Tweets Survelliance Apparatus in New Orleans On My Mind: Watching from Afar Interpreting Hong Kong Police’s Narratives Faceless Heritage & Urban Development in Pokfulam Climate Change Weather App Back to Projects