Boards

Overview

Peerspace is an online marketplace that connects professionals and businesses to unique spaces directly from local hosts.

We allow guests to ‘favorite’ spaces they love and keep an eye on it as they plan for their upcoming event. To date, favoriting has been one of the most popularly used feature that has helped users have a better browsing experience on our platform. It also had a positive impact on our conversion rate on sign up and bookings. However, since this feature has been highly used by our guests, we had received feedback that they want to create a collection of options for their team/decision-makers and then have them vote on which ones they like. In this project, I led and designed a series of guest features to minimize friction in the planning experience.

Role

Lead Product Designer

Duration

June 2017 - February 2018

team

Product Manager: Stu S.
Front-End Engineer: Isa H. & Angga P.
Back-End Engineer: Matt W.
Visual Design: Lauren H.
Copywriter: Daniel W.

Milestone

We approached each feature as a milestone and broke down the process.

Discovery & Definition

· Target audience
· Current Experience
· Problem space
· Goals
· How Might We…
· Hypothesis
· Research
· Prioritization

V.1 Boards

· User flow
· Explorations
· Decisions

V.2 Sharing

· User flow
· Explorations
· Decisions

V.3 Vote & Comment

· User flow
· Explorations
· Decisions

Target audience

‘Guest’ is the user booking a space for an activity on Peerspace. A huge segment of our guests are working professionals that book a space for their team meeting or offsite.

Current experience

Through user interview, we have identified the friction point by the extra amount of effort and time it took guests to achieve their goal.

Problem space

Guests spend too much time manually creating a short list of space just to share it with their team to get feedback on which space to book for their activity. However, the feedback from the team are scattered and disorganized.

Goals

User

1. Create a short list of spaces they’re interested in

2. Share collection to decision makers to get feedback all in one place

Business

1. Capture guest intent

2. Capture decision-maker sign-ups

How might we...

How might we create less friction for guests to create a short list of spaces and be able to share it with decision-makers all in one place?

Hypothesis

If the ‘Boards’ feature is created, then this will allow users to create a collection of spaces which they will be able to share easily with their team. This approach will help the team make a decision more efficiently.

Research

Competitive Analysis

Exploring collection makers and collaboration products gave us an insight and findings for how we should approach Boards.

· Products like Airbnb, spaces accommodation for travel, has a feature called Saved List that allow users to create a collection of spaces for a travel planning and share via link and email with other users for feedback.

· Pinterest, on the other hand, allows users to create a board to organize ideas that they find in the web in one space. It also lets users share via email the board they created to other users.

Scoping the MVP

We defined features that would enable us to test our hypothesis and will allow to bring the most value to our users. We broke down the features in milestones to allow our users to ease into the new feature and will enable engineering to properly determine an implementation approach that will allow us to deliver these new technology within our product.

User flow

This shows how the different milestones will ladder up to complete the MVP.

Boards

👩🏻 User story

1. As a team manager, I want to create a collection of spaces so that I can keep track of different space options for my team’s upcoming offsite.
2. After I saved 4-5 spaces, I want to know where I can access my collection of spaces that I created to see my top options.

🔍 Exploration

1. Show how a user can save a space in a new board.
2. Show a page where all of the boards can be found.

🚫 Constraints

Make sure it is a lightweight action and can easily go back to the user origin (search results or listing detail page)

Wireframe user flow

1. Saving a space to a new board

Create a new board

Option A — Modal

Option B — Tooltip

Option C — Page

Chosen approach: Option A — Modal

To make sure that we kept the ‘saving a space’ experience lightweight and not interrupt their browsing experience, we decided to go with a modal instead of a page or just an action of adding. With a modal, we enable them to create a new board with all of the information necessary or add to an existing board. Once they are done, they can continue to go back to the original page that they came from, search results, or listing detail page.

2. Accessing ‘Boards’

Approach

We added a link to the page on navigation so the user knows where to access their boards. We created an overview page of all of the boards created by the user and the actual board page with all of the saved spaces and the map.

Sharing

👩🏻 User story

As a team manager, I want to share my collection of spaces that I put together with my team (v.2) so I can get their feedback on which space to go with (v.3).

🔍 Exploration

1. Show where they can access the sharing function.
2. Show the requirements needed to share out their board to their network.

Wireframe user flow

1. Entry point

Approach

Adding multiple entry points to make sure it is visible and accessible enough for the users. By having it as a modal, we want the users to feel that sharing is a lightweight and quick action to do and can also be easily accessible on multiple pages.

2. Sending an invite

Email address input

Option A — Text separated by comas

Option B — Chip

Chosen approach: Option B — Chip

Inside the modal, there are two input fields which are emails and optional message to include. We include a populated message to explain to the collaborator what they are getting if the user choose to include a message. Users are free to change the message however they like. After sending, we show a confirmation that it has been sent and returns to the previous experience.

Vote & Comment

👩🏻 User story

1. As a team manager, I want to share my collection of spaces that I put together with my team (v.2) so I can get their feedback on which space to go with (v.3).
2. As a user, I don’t want people that I didn’t invite to my board to see comments between people I invited and myself.

🔍 Explorations

1. Show action to vote, number of votes, and comments with number of comments.
2. Show the experience on how to add comments to each space.

🚫 Constraints

1. Make sure it does not change the current space thumbnail component which is used everywhere else.
2. Don’t show user generated comments to non-collaborator on this board.
3. Make sure logged in and logged out view are consistent.

Wireframe user flow

1. Voting on a space

Approach

Added the action to vote, which is ‘thumbs up’ and ‘thumbs down’, on each space on the thumbnails as a quick action. Also will show the number for each collaborator’s vote. Only invited collaborators by the owner of the board can vote and view who voted.

2. Posting a comment

Displaying comments

Option A — Hidden in modal

Option B — Exposed comments

Chosen approach: Option A — Hidden in modal

Because the board page can be viewed publicly by anyone even if they are not invited, we wanted to ensure user generated comments on spaces are not shown. On the thumbnail level, we have a call to action to view comments and number of comments. This will open up a modal of all of the user generated comments that have been made to the space. Only invited collaborators can view this. This can be done by validating their email to the invited list which is made by the owner of the board.

Boards

Feedback System:Toast Redesign

Feedback System:
Toast Redesign