CASE STUDY

PINTEREST
NEWSROOM

My Role: Lead Visual Design + UX + Brand
Team: Grant Gaudet (Lead Engineer), Jeremy Sutherland (Art Direction), Tim Cosgrove (Engineer), AJ Mariano (Production)

newsroom.pinterest.com / Version 2018-2024

The Pinterest Newsroom website is Pinterest’s main public relations site crafted to showcase the company’s history, products, leadership, news, investor relations information, and the Pinsights editorials, showcase trends and reports from the use of the Pinterest app.

Before the creation of this site, a generic blog existed as a catch-all of inquiries and was not properly suited to the job. Email communication funneled into a large bank of misguided inquiries. The site includes updating all other localized site versions and blogs. We set out to develop a more robust site that added many new components so the stakeholders could effectively create content for their audience.

NOTE: SOME KEY DETAILS AND VISUALS CAN’T BE SHOWN DUE TO AN NDA AGREEMENT.

GOAL: DESIGN A NEW RESPONSIVE WEBSITE FOR GLOBAL PRESS & PUBLIC RELATIONS THAT TELLS THE PINTEREST STORY, HOLDS A NEWS ARCHIVE OF THE COMPANY AND PRODUCTS, INVESTOR RELATIONS INFORMATION, AND SHOWCASES NEWS AND INSIGHTS.

BRIEF SUMMARY HIGHLIGHTS

• Design an efficient, dynamic, engaging site that is on-brand.

• Guide​ ​press​ ​to​ ​the​ ​right​ ​source​ ​of​ ​information.

• Spend​ ​less​ ​time​ ​uploading​ ​content​ ​(the site​ ​is​ ​more​ ​efficient/user-friendly​ ​and​ ​the internal​ ​tools​ ​team

  gets​ ​fewer​ ​requests).

• Create multiple new components to add to the global library for use on other subsites.

• Adhere to budgetary and time constraints that affect multiple stakeholders- PR, Partner Insights, Brand, Pre-IPO, and Engineering.

• Merge and migrate old blog content (1500 pages internationally) after site creation that follows the design directive of the Newsroom site.

• Improve categorization of content with designated tags that are not open-ended.

• Showcase Pinterest story and mission.

• Align and enhance Pinterest brand visual language and color palette.

• ​The front​ ​door​ ​should​ ​be​ ​about​ ​showing our​ ​latest​ ​news​ ​and​ ​updates.

• Need​ ​flexible​ ​templates​​ ​that​ ​can​ ​have​ ​video,​ ​PIN​ ​embeds​ ​code​ ​, and​ ​other​ ​rich​ ​media.
  

PROBLEMS WITH THE OLD SITE

• LEGIBILITY. Tiny, low-contrast text, lists, and forms ran overly long creating scrolling nightmares and hard-to-follow articles.

• HIERARCHY. Unclear navigation and labeling made the blog feel more complex, and unclear where to get desired information.

• CONSISTENCY. Scant conventions existed for layouts, copywriting, and styling; many one-off solutions looked and functioned differently despite serving identical purposes.

• ORGANIZATION. Accrued technical debt introduced bugs and made adding or editing features a chore.

SITE FUNCTIONALITY NEEDS

• Embed​ ​content​ ​including​ ​JPEGs,​ ​GIFs,​ ​video​ ​files,​ ​boards,​ ​Pins,​ ​other​ ​social​ ​widgets​ ​(Tweets, Tumblr​ ​posts,​ ​Instagram​ ​posts),​ ​PDFs

• Ability​ ​to​ ​copy/paste​ ​full​ ​posts​ ​(not​ ​all​ ​pages​ ​broken​ ​into​ ​modules)

• Share​ ​buttons​ ​on​ ​each​ ​piece​ ​of​ ​content​ ​with​ ​the ability​ ​to​ ​write​ ​an​ ​auto-fill​ ​tweet​ ​or​ ​post​ ​when someone​ ​shares​ ​out

• RSS/Subscription

• Potential​ ​drop-down​ ​menus​ ​to​ ​toggle​ ​between​ ​subpages​ ​(for example:​ ​a​ ​stats​ ​section​ ​showing user​ ​metrics​ ​in​ ​the​ ​U.S.,​ ​easily​ ​being​ ​able​ ​to​ ​toggle​ ​to​ ​another​ ​geography point)

The design had to heed the organizational limitations of a 50/50 content grid with few exceptions. We explored some more aspirational directions, which were approved in certain instances- 2/3 grid for long-form content blocks and media modules.

Our Personas and Journey Maps were developed with two main users-
Jeremy, a 30-something tech news writer, and Kiara, a 45-yr old start-up veteran investor.

The personas helped to navigate our information map and the page hierarchy of components. Our daily reviews kept our process very agile, iterating around blockers and future site versions.

EXAMPLE PAIN POINT: How would staff writers/PR team categorize the news posts? We needed to develop a specific number of tags and not have them be open-ended. At the time of design, an open search bar was not a development option, and open tags create a black hole that makes streamlining articles for users to access difficult. We surveyed the editors who provided 17 category tags split between NEWS and PINSIGHTS posts, and DATE/YEAR tags that would be accessed from a drop-down menu. This would also enable the hand migration of the old site to the new one more efficiently and give the opportunity to make corrections on stray posts.

WIREFRAMES + COMPONENTS + COMPS

Working with the Atomic design methodology, we focused on which components we could design and develop to effectively add to the Pinterest global library and design system. We created a hierarchy of component options that we had the stakeholders weigh in on. We tagged components as Existing, New, Watch Outs on the working board. As we knew that more subsites would be created, time and budget helped to steer this in a productive way. The goal again, was to tell the Pinterest story with these key touchpoints for the target user- media, insights, and investor relations.

HIGH PRIORITY NEEDS TURNED INTO COMPONENTS:

• SPECIAL NEWSROOM SITE FOOTER: Streamlining the traffic to the appropriate area highlighting three elements: Press only inquires, Requesting a speaker and RSS feed subscription.

• RSS FEED/ICON FEATURE: Make it quick to access and develop new icon for header.

• LONG-FORM CONTENT MODULE: To better display long articles in effective screen space for best legibility.

• BULLETED LIST AND MULTIPLE COLUMN OPTIONS: Trend reports and insights are dependent on list and columns, previously often disconnected and broken.

• FEATURED NEWS MODULE: Highlighted news article teaser for quick access to new post.

• EMBEDDED PINTEREST BOARD MODULE: This module allows Pinterest app to live as a collection it while staying springboard into the app if the user decides to.
  
  

We introduced a color palette that works hand in hand with the master brand while setting it apart to anchor its purpose in information and insights for press related matters, highlighted by the minty green and coral colors nodding to trends in fashion and finance.

The evergreen pages are designed to get information about the company, highlight products and offer PR related downloadable media packages. The design is clean and simple. Made easy for users who are often working from small laptops, ipads and phones. The homepage highlights the mission statement and has video of recent company wide events that speak to the fun-DIY culture. I conducted a design audit of the global spacing on all the subsites and made recommendations to improve overall consistency and integrity of the responsive design in an era of ever increasing device screens.

We went through stages of rapid prototyping, testing with users to make sure the experience matched the journey maps and closed any loops, as well adjusting CTAs, forms and menus. The engineering team started the build, and I started design audit documents and staff manuals for news posts.

THE MOBILE EXPERIENCE

One of the primary purposes of the Newsroom website was for reading articles, so creating a clean, user-friendly mobile was key. More than just stacking elements into one column for mobile, we considered the best way to navigate and filter content on mobile devices. We optimized the spacing and size of typography for phones, tablets and desktop so that visitors are given the best reading experience no matter what device they choose.

Once the CMS was built, the evergreen pages were created and the blog posts migration began. There were some 1500 post that were approved for migration. The new design brought back to life some very sterile and boring posts which I was happy to see.

I was excited and relieved to have made our launch date for the PR Team. All this was happening in preparation for an IPO announcement. Two highly anticipated subsites are in the works highlighting business and data insights that will utilize global design components that were designed with this project.

POST PROJECT NOTE:
Considering our resources, I’m proud of what we were able to accomplish as we started with three separate internal department stakeholders needing very specific components for this site, and ultimately, restructured our goals by prioritizing for this version launch and what would be added to the global library, future versions, and subsites.

I would like to add more dynamic slide bars that enable the user to access and sign up for key news article notifications. Since this site also adheres to global specifications for alignment, I would want to revisit the design audit to include all subsites so that they can be applied for greater consistency. The new components were designed with robust capabilities and therefore would have liked to continue to develop those further in the coming subsites.