Designing for the home of inspiration
We partnered with Pinterest on an end-to-end redesign of their web navigation tools and information architecture, refreshing outdated designs and improving access to core features.
Redesign Pinterest’s navigation systems and information architecture for all users searching and saving ideas on web.
Project goals
Lead a research-backed UX design process, resulting in an interactive set of designs for testing.
Collaborate with Pinterest’s research team to analyze past learnings and understand their business and audience needs.
Our work
Planning a project, with research in mind
Over a handful of years, Pinterest built a robust set of navigation tools on web. There was a top-line navigation bar that allowed users to search ideas, access their profile, open their home feed, and create something new. Then, there was a secondary set of navigation options, allowing users to edit their settings, open their ‘boards’, and switch accounts.
But, while Pinterest’s design teams tweaked and edited the navigation tools on mobile with each product change, they hadn’t had capacity to do the same on web.
That’s where we came in.
Our Design Director, Brittany Noel Taylor, worked with Pinterest over a six-month period to co-design a research framework to understand the primary needs of Pinterest’s web users, and use these learnings to re-design Pinterest’s navigations tools.
[Image, maybe just a moving GIF of some icons]
Collating past learnings
First, we partnered with the platform’s UX research team to gather relevant existing research…everything from quantitative analyses of navigation entry-point priorities, to past user research interviews, to qualitative feedback on icon comprehension.
Then, we collated this existing research into key learnings, which helped us understand our audience and their needs, and guided the timeline and priorities of the design process.
Image of user diary studies
A three-stage research process
Using past learnings as our foundation, we partnered with the research team at Pinterest to co-design a three-step research process and select a cohort of user participants that best met our goals: a self-led diary study, a set of one-to-one prototype feedback interviews, and a final A|B prototype test.
Initially, we asked participants to undertake a self-led diary study in which they designed their own navigation system. Participants were given a moveable set of icons and entry-points in collaboration tool Miro. They recorded themselves while describing how they would prioritise and structure a navigation system on Pinterest web, and why.
This feedback, paired with quantitative data showing the most frequently used navigation entry-points, helped us understand the most vital navigation elements. Plus, we were able to hear first-hand from our audience how they think about navigation use and structuring.
Designing navigation
Taking existing research learnings and emerging learnings from participant diary studies, we designed a new navigation system for Pinterest on web.
Removing duplicate home feed entry-points
For legacy reasons, Pinterest had two entry-points to the platform’s home feed—an icon, and a piece of text. Early research suggested high comprehension that the Pinterest logo icon would direct people to their home feed, so we removed the duplicate text entry-point.
Grouping actions with spaces, and icons with text
From an information architecture perspective, it made sense to group entry-points to spaces, such as home feed and the explore page, together. Similarly, action entry-points, such as creation or viewing a message or notification, were clustered together. This mirrored thinking we saw in participant diary studies and allowed us to separate text entry-points from icons.
Direct entry-point to ‘boards’
On Pinterest, a ‘board’ is a space where someone saves Pins they find or create. Previously, people on Pinterest would need to click to their profile to access their boards. By adding a direct entry-point to the core feature in the navigation bar we could experiment with engagement with this core feature, and respond to participant feedback heard in diary study research.
Refreshing settings
New features had been added to the Pinterest settings over time. We refreshed the settings information architecture and suggested new language for a few outdated settings options, resulting in a cleaner, easier-to-use experience.
Moving design
One-to-one prototype test sessions
Building on past research, quantitative data analysis and participant diary studies, we developed a strong foundation upon which to create a v1 set of designs. To make sure our designs were fully research-backed, and to integrate participant feedback at each stage of the process, we proposed a series of one-to-one participant interview sessions in which a Pinterest researcher showed a participant a fully interactive design prototype.
This type of research can be time intensive, but it is invaluable. It allowed us to watch participants use the design prototype, see in realtime what works and what doesn’t, and ask clarifying questions.
In these sessions we heard clear preference for the reduced home feed entry-points and the direct entry-point to boards, and saw intuitive interactions with the improved information architecture of the navigation bar and settings drop-down.
Planning an A|B test
To prepare these designs to be shipped into Pinterest’s product, we suggested a large scale A|B test.
This triangulates the qualitative feedback we gathered in the one-to-one testing sessions with a quantitative look at how people on Pinterest react to the new designs, compared to a control group using the old navigation system. For example, it’s important to make sure there’s no decrease in use of any important features.
In the absence of any usage issues emerging from the A|B test data, the refreshed navigation design is ready for people on Pinterest.
“It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.”
— Squarespace