Pinterest brand
Refreshing Pinterest’s brand site to an interactive self-guided brand hub
Prompt
Create an unified home for Pinterest’s brand resources for all types of audience with different design skillsets and brand knowledge.
Outcome
We organized Pinterest’s vast content on their brand site and Figma documents into a highly interactive brand site by combining visual storytelling, smart interaction and motion details, and carefully crafted content. We also created a (non-product) interactive design system to help build the CMS.
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 an unified home for Pinterest’s brand resources for all types of audience with different design skillsets and brand knowledge.
Outcome
We organized Pinterest’s vast content on their brand site and Figma documents into a highly interactive brand site by combining visual storytelling, smart interaction and motion details, and carefully crafted content. We also created a (non-product) interactive design system to help build the CMS.
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 · Design Systems · Content
Company: Sanctuary Computer + XXIX
Company: Sanctuary Computer + XXIX
User journey workshop & workshop synthesis
We organized a user joruney workshop where to better understand the challenges different users (from internal collaborator, creative partner to potential employee) face when using the brand site. Aside from challenges, a lot of initial creative ideas and design opportunities were generated.
We organized a user joruney workshop where to better understand the challenges different users (from internal collaborator, creative partner to potential employee) face when using the brand site. Aside from challenges, a lot of initial creative ideas and design opportunities were generated.
Initial creative concepting
We explore different ways to group and navigate content, as well as new opportunities to showcase Pinterest’s brand stories.
Framing content into “Discover”, “Learn”, “Inspire”
We audited and grouped vast amount of brand content into three intuitive sections — Discover (Brief overview), Learn (Brand guidelines), and Inspire (Gallery & blog) — for audiences of various needs.
We audited and grouped vast amount of brand content into three intuitive sections — Discover (Brief overview), Learn (Brand guidelines), and Inspire (Gallery & blog) — for audiences of various needs.
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.
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
Guided search experience
When a user searches on the site, popular search terms are surfaced by default (E.g. Social media, Guideline access). After entering their search word, users will see a list of results sorted by content category. If they cannot find what they need, they can visit the FAQ page, which has a list of Q&As, as well as an email form to contact the brand team.
When a user searches on the site, popular search terms are surfaced by default (E.g. Social media, Guideline access). After entering their search word, users will see a list of results sorted by content category. If they cannot find what they need, they can visit the FAQ page, which has a list of Q&As, as well as an email form to contact the brand team.
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