Making it easier to organize
boards on Pinterest
Overview
Pinterest is a web and mobile application for discovering and sharing visual content and saving it into virtual boards.
In November 2017, Pinterest introduced Sections to help users organize their pins within boards - categories could be grouped into a single board as sections.
Pinterest’s Sections’ flow of grouping boards into a new or existing board is a time-consuming and unintuitive process. Our team wants this organization to be an enjoyable experience for users, especially those with many pins and boards in their profile.
PROJECT TYPE
Concept project of two UX Designers.
CHALLENGE
Help Pinterest’s users organize their content easily, where they can benefit from the new functions of Pinterest (Sections).
PROPOSED SOLUTION
An intuitive workflow to embed and existing board (Origin board) as a section into another board (Destination board).
MY ROLE
• Product and User Research - user interviews, contextual inquiries.
• Interaction Design - Ideation, wireframing, prototyping.
• Visual Design.
2 weeks
DURATION
Sketch, Figma.
MAIN TOOLS
Research
PINTEREST USER GROUPS
Active Pinterest Savvy – Uses Pinterest for several purposes, knows all the features and functionality.
Occasional User – Comes to Pinterest rarely for specific searches, with limited interface knowledge.
Companies & Businesses – Advertise their brand, attract and engage broader audiences, promote their products.
PERSONA
For this redesign, we focused on the Active Pinterest Savvy.
USABILITY TESTING
We performed a round of interviews and (remote) usability testing (((USING???))) to ten Pinterest users to understand how they interact with the recently released feature, identify every possible pain point, and make changes based on the results.
Our thoughts after usability testing
MAIN PAIN POINTS
Difficult to know where to start - The way to re-organize a whole board is from the inside; by editing pins one by one 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.
CONSIDERATIONS
→ Find a faster way to move a whole board directly from the users’ home feed or within the board.
→ Come up with a shorter user flow.
→ Design intuitive interactions.
→ Merge the different flows into a simple one. If more than one, there should be consistency among them.
“It should be easier to group the boards I already have; I just don’t find a way to do something so basic.”
— Marcela C.
Proposed solution
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 the 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.
USER FLOW
Comparing the current and proposed flow
Organize boards moving them into another board as a Section.
The Design Process
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 solves the problem of the users.
1. SKETCHES - IDEATING THE POSSIBLE SOLUTIONS
Here's where the design phase started. We 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 paper sketches, we quick-tested. That allowed us to modify some interactions, and the design evolved 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 a few modifications to provide a more explicit message (flow and changes below).
3. IMPLEMENTING THE VISUALS - HI-FI 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 that change.
4. PROTOTYPE AND LAST MODIFICATIONS
With the visual details added, the mockup was ready. I created the clickable prototype, and we conducted the last usability test. The feedback gave us another opportunity to refine our design.
Final Thoughts
Our users found this design more intuitive than the original solution from Pinterest from 2018.
They also thought that this method would encourage them to organize better their large number of boards, which would improve their experience on Pinterest.
We managed to offer a faster and easier solution designed from the natural reaction of the users.
Learnings & Next Steps
Working with a designer specialized in 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.
The next natural step would be to work on the version of this flow for mobile and digitalize the Drag-n-Drop proposed solution.
Additional Notes
Some of the photos used in the mockup are part of my 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 were not hired by Pinterest; this is only a concept project to demonstrate 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 we started developing in February 2018, which confirms that our approach was adequate and the feature necessary. The “Drag and Drop” feature was also implemented.