My Role: Lead Visual Design + UX + Brand
Team: Grant Gaudet (Lead Engineer), Jeremy Sutherland (Art Direction), Tim Cosgrove (Engineer), AJ Mariano (Production)
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 NDA AGREEMENT.
DESIGN A NEW RESPONSIVE WEBSITE FOR GLOBAL PRESS & PUBLIC RELATIONS THAT TELLS THE PINTEREST STORY, HOLDS ARCHIVE & UP TO DATE NEWS OF THE COMPANY, PRODUCTS AND INVESTOR RELATIONS INFORMATION IN ADDITION TO SHOWCASING NEW INSIGHTS EFFICIENTLY.
BRIEF SUMMARY HIGHLIGHTS
Design a efficient, dynamic, engaging site that is on-brand.
Guide press to the right source of information.
Spend less time uploading content (site is more efficient/user friendly and 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 , Engineering.
Merge and migrate old blog content (1500 pages internationally) after site creation that follows design directive of 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.
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 ability to write an auto-fill tweet or post when someone shares out
Potential drop-down menus to toggle between subpages (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 categorized 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 an development option, and open tags create a black hole that makes streamlining articles for users to access difficult. We surveyed the editors whom 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 efficient 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 lie 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. I was asked to return to the team to design another site, however I declined the offer in favor of my relocation to Berlin.