Creating a life of your dreams

  • Hackathon
  • iOS
  • User research

Problem: As pinners collect images for inspiration, their boards become an expanding grid of more coaches, chairs, rugs, and lamps. The very reason they started the board gets lost. And so is the ability to see how bring it all to life.

Solution: Vision Board allows pinners to select images from their boards and organize them into one vision. Once the Vision Board is complete, they see an interactive shopping list of the products on the board, featuring the estimated price, alternatives from the range of budgets, and where to buy them.

Impact: This is a three-day-long hackathon project that won an award from 100+ other submissions.

My role: Team lead in collaboration with Product Designer, Creative Director, and Content Designer.

More on Process More on Final Design
desktop application

Research

"I'm decorating my new house. I pin so many things that I like. But what do I do with them? How do I put it all together?"Pinner

Turning inspiration into reality

The Pinterest mission is to inspire people to create the life of their dream. But we often hear that pinners don't know how to go from boards full of saved images to bringing their vision to life. Our team brainstormed ideas that could help solve that problem. We came up with the concept of allowing pinners to collage different pinned images into a vision board. Once the vision board is complete, we would show them a shopping list that would guide them to action.

While testing the concept with users, we've learned that pinners were generally excited about the idea. They wanted a way to add images from their phone to see how their existing furniture fits into the picture. They also wanted to see suggestions of things they could add.

desktop application

User tasks

Based on our research, we've ideantified the following tasks the new vision should support:

  • create a vision board from the existing board
  • add collaborators
  • add images from the board, their phone, and see suggestions
  • re-arrange, re-size, and crop images
  • save and share the board
  • see the shopping list and alternatives from a range of budgets
desktop application

Adding images to the board

We've wireframes three different solutions for how pinner could add images to the board. The first concept was around the ability to drag and drop images to the board. However, drag and dropping can be inefficient when navigating or adding multiple images. So, we decided to proceed towards the concept of selecting images. The second solution was to have different sections stacked on top of each other as part of one scrollable view. The third one utilized an expandable modal with the ability to navigate between different tabs.

two type of jobs
two type of jobs

Displaying shopping list

We've explored different concepts for displaying the shopping list. Concept 1 was designed to look like a standard shopping list. It wasn't as visually attractive as the other two concepts, but it offered a quick and easy way to track the progress, view items, and see the total price. Concept 2 offered a more visual representation of the list. It did not take up too much vertical space, making it easy to access the rest of the sections. However, horizontal scroll made it challenging to see all the items on the list. Concept 3 displayed items in the format of the masonry grid. It took up a lot of vertical space, which drew a lot of attention to the list. However, the list could get long, making it challenging to access the rest of the sections below.

Final Designs

View clickable prototype