Thumbtack Choosing Experience

Helping customers to confidently choose the right professional

Thumbtack customers post requests for local services and receive up to 5 custom quotes. This design aims to make it easy to compare the quotes and pros, to communicate with and to hire them.

The Challenge

To design, prototype, and scope a new pro evaluation experience that inspires confidence in customers to choose the right pro, mobile first.

My Role

I was responsible to research and explore various solutions in the redesign of our current pro evaluation experience. The goal was to go wide, then build incrementally with focus.

Current Experience

The current interface has a fundamental problem: there's no clarity in what the customers should do next. There are around 10 different buttons and a mix of content that doesn't help at all in the task of choosing and hiring.

Key Objectives

The goal is pretty clear: build a more focused, faster and personalized product experience for customers to increase confidence in hiring the right pro. But how do we achieve that?

Help pros look trustworthy by showcasing their expertise

Guide users through the experience with clear next steps

Help the customer identify which pro is right for him

Design Process

What's the best way to introduce custom quotes and the professional's profile to a customer in a delightful and comprehensive way? Our team explored three different interaction paradigms, each one with a set of pros and cons. Our idea was to generate wireframes and a prototype for each one of them and interview a couple people to understand the tradeoffs of each option.

Learning from user interviews

We learned there are two types of people: the first group cares a lot about the personal message from the pro and how much the quote is customized to their needs. They are trying to connect more with the pro's personality, like photos and bio (emotional behavior). The second group looks at the quote and profile very pragmatically and searchs for statistics and information that will give them a better sense of this pro's expertise (rational behavior).

Interaction Paradigms

What's the best way to introduce the quotes to the customers? I searched for references in other products and came up with three different ways, that the team called Paradigms. The high-fidelity wireframes below were prototyped in Invision and battle-tested in user interviews. All the options had good pros and cons, but the e-commerce model was a clear winner.

80+ wireframes later

A short iteration cycle of wireframing - prototyping - interviewing users was important in order to unlock the right questions and get closer to the best design sooner.

Mobile First

All those learnings and feedback from users drove the design direction. I explored dozens of different designs that got reviewed from everybody in the team and other stakeholders - VPs and the CEO. We decided to go with a hub and spoke navigation to match the different mindsets our users have when going through this moment of the experience.

Media

Through videos, photos and audio, the professional can express his expertise, experience and personality.

PERSONAL MESSAGE

The personal message introduces the professional and explains his price, but it’s also an invitation for the customer to communicate.

COMMUNICATION

Customers often have questions they wanna make about the service and pro’s expertise. Professionals also love to receive messages from customers because it shows them this person is engaged and interested.

READ MORE

User interviews taught us customers have different priorities. By offering a hub and spoke navigation to different profile’s content, we allow them to quickly scan the sections and decide what they want to see first.

REVIEWS

They are definitely the meat of the quote/profile. 10/10 customers want to read reviews when comparing pros. Even though it’s the last section on the screen, you can tap on the shortcut below the pro’s avatar at the top.

GO AHEAD AND HIRE!

The main action on this page is always floating on top of the content at the bottom of the page. Always one tap away from the customer.

Desktop Layout

Now that I had a strong solution for mobile, it was time to adapt that for a desktop experience, where I could take advantage of the screen sizes to show more relevant content. I designed more than 60 different versions with different strenghts and weakenesses. It was super-helpful to have the team engaged in those questions. We narrowed down those options to 3 versions, which I hack-prototyped in html and css in order do run user-interviews. Here are some of those layout explorations:

Pros

  • Strong color contrast highlights the 3 columns.
  • There’s a natural flow of starting on the left side and coming to the right.

Cons

  • Dark theme is out of brand.
  • The pieces looks disconnected.

Pros

  • 2 columns are better than 3: it makes the interface less overwhelming.
  • The Hire Box on the right has all the relevant information related to the Hire action, it uses the e-commerce affordance.

Cons

  • Communicating with the pros is harder: the chat area is hidden.
  • This interface suggests the user should hire on the spot, which is not really the way our customers do it.

Pros

  • There’s a column dedicated to chatting - it’s easy to jump in and start a conversation.
  • The sticky action bar on the bottom is always visible, reminding the user of what to do next.

Cons

  • The action bar on the bottom looks like an ad or a banner.
  • The chat message on the right side looks like every other text in the interface - some special treatment could help higlight its importance.

The Final Solution (so far)

This is a glance of the final design so far - both mobile and desktop versions. The next steps are to build this out and start running A/B tests to understand how it performs and impacts the business.