Making it easier to organize boards on Pinterest
Pinterest is a web and mobile application for discovering and sharing visual content and save it into virtual boards.
In November 2017, Pinterest introduced Sections to help users organize their pins within the boards. Before that, a common way for users to organize their pins was to create boards by category, but with sections, many of these categories could be grouped into a single board as sections.
Pinterest’s current way to group boards into a new or existing board using sections is a time-consuming and unintuitive process. We want this organization to be an enjoyable experience for users, especially for those who have many pins and boards in their profile.
An intuitive workflow to embed and existing board (Origin board) as a section into another board (Destination board).
Helping people organize their content in a more straightforward way, where they can benefit from the new functions of Pinterest (Sections).
Personal Concept Project.
(Team of 2)
Product research, ideation, wireframes, prototype,
Tools & Tech
Pen and paper, Sketch, Figma, Google Forms.
Pinterest User groups
Active Pinterest Savvy – Using Pinterest for several purposes and knows well how it works.
Occasional User – Coming to Pinterest rarely for specific searches, with limited knowledge of the interface.
Companies & Businesses – Advertising their brand, attracting and engaging broader audiences, promoting their products.
For this redesign, we focused on the Active Pinterest Savvy.
Comparing the current and proposed flow
In the image below we present the flow from Pinterest, as well as the flow of our concept idea, to organize boards moving them into another board as a Section.
Our thoughts about the flow of Pinterest
Difficult to know where to start - The way to re-organize a whole board is from the inside -- editing pins rather than the board itself.
Long process - Many clicks and screens to complete this task.
Confusing flow - There are some moments of confusion during the process, sometimes it is not clear what to do or what to expect.
Multiflow - The presence of the "create new board/section" flow within their flow is disruptive.
“It should be easier to group the boards that I already have; I just don’t find a way to do something so simple.”
1. Edit + Move. Edit board > Move as Section into another board.
Hypothesis: We believe that if we add a feature within the Edit mode of Boards that allows users to move an entire Board as a Section into another Board, we will help them have better control of the organization of their Profile, and thus find their pins with more ease.
2. Drag & Drop. Drag entire board into another board.
Hypothesis: If we give users the capability to drag and drop boards into a different board as Sections, in addition to the benefits of solution 1, we will help them save time and we will help them save time and will reduce frustration because they will complete the task intuitively in seconds.
Goals and Scope
- Design an intuitive and easy-to-find feature, considering the insights and learnings from research.
- Start with only one of the proposed solutions. As the first one is the most similar to the current solution of Pinterest (as of February 2018), we decided to start with that one: Edit + Move.
- Create the interface as close as possible to the Pinterest interface, using the same visual guide and UI.
- Constantly verify that the design reflects the objective and solve the problem of the users.
1. Sketches – Ideating possible solutions
Here’s where the design phase started. I sketched some quick ideas on paper, after the discoveries from research.
We wanted to eliminate as many steps as possible; therefore, we decided that the journey should start by accessing "Edit" directly from the Profile area.
After the pencil sketches we quick-tested our new paper sketches, serving as flat, low-fi prototypes. The design evolved pretty fast at an early stage.
2. Wireframes – Digitalizing the selected concept
Once we found a concept that made sense for most, I created the wireframes and the screen flow.
The 2nd test gave us good results; we made some modifications to provide a more explicit message (flow and changes below).
Click to see the wireframes in detail.
3. visual design – Creating the mockup
We added the visual elements to align our design with Pinterest visual guidelines.
Update: in December 2018, Pinterest changed the characteristic red color into a brighter red.
We decided to keep the old red since our design process started before the change.
4. Prototype and last modifications
With the visual details added, the mockup was ready. I created the clickable prototype, and we conducted a last usability test. The feedback gave us another opportunity to refine our design.
Our four users found this design more intuitive than the original solution from Pinterest (From Feb 2018).
They also thought that this method would encourage them to organize better their large number of boards, which would definitely improve their experience in Pinterest.
We managed to offer a faster and easier solution designed from the natural reaction of the users.
Learnings & Next Steps
Working along with a person dedicated to the research and testing from very early stages (after each design phase) helped the project evolve smoothly; it allowed me to focus on the design using my creativity but with decisions validated by the users.
We’d like to work on the version of this flow for mobile and in digitalizing the Drag-n-Drop proposed solution.
Some of the photos used in the mockup are part of my Food Photography work (which can be found at www.erikacastaneda.net), particularly in the interactive boards of this prototype. The rest are screenshots taken directly from the Pinterest portal and the boards in my Profile.
* We are not working for Pinterest; this is only redesign created to put in practice our design and problem-solving skills.
** Update: In October 2018, Pinterest addressed this problem by adding a “Merge” button in the “Edit board” area; very similar to the design that we started developing in February 2018, which confirms that our approach was effective and the feature, necessary. The “Drag and Drop” feature was also implemented.