Instant Results

My role: Product Designer on Customer Experience team / Timeframe: April - June 2018

The team: 1 Product Designer, 4 Engineers, 1 PM, 1 Data Scientist, 1 Researcher, 1 Content Designer

Creating the best app for homeowners to find local pros

PROBLEM

It was difficult for homeowners to find and contact available pros for their home projects.

Thumbtack needed to evolve from a slow web-only ‘request a quote’ model to an instant experience to connect homeowners with quality professionals such as electricians and contractors for home projects.

Product Designer | 2 months

1 PD, 1 PM, 4 Eng, 1 UXR, 1 CD

GOAL

Increase contact and conversation rates by 15% compared to the web experience.

SOLUTION

Build a native app for customers to search and contact local pros instantly.

RESULTS

We successfully launched the product to 8 categories within 2 months. Shortly after, we rolled out the experience to 100% of categories.

PROCESS

Research

We lacked deep understanding in what customers need, want and expect. I worked with a researcher on a study plan and conducted interviews with 10 customers.

Key questions

  • What are their current frustrations? 

  • What are their pain points?

  • What do they want and need?

I led a design sprint to create a vision and build alignment with xfn partners

Our strategy was to build a new app experience for iOS and Android, while incorporating learnings from the web MVP. We decided to scope the sprint output to what we could reasonably build in the next 6 months.

We mapped the customer journey on web and discussed:

  • Where are there UX gaps and inefficiencies in the flow that are causing the customer pain points from research?

  • What are areas we want to focus on to bring this product to the next level?

  • Will we build on both Android and iOS? What platform specific possibilities and constraints do we need to be aware of? Do we have a design system for the native apps?

Significant increase in key metrics:

✅ 28% increase in contacts week over week

✅ 16% increase in conversations from the previous MVP

✅ 80% of iOS customers who visit the pro list view a profile, and these customers visit more profiles than web customers

Influence: My work set a strong future vision and shaped the roadmap for several quarters.

Guiding principles

I created principles to reference throughout the project.

Defining the flow

Through sketches and wireframes, I mapped out a high level experience from the moment customers sign up/log in, to ultimately finding a pro to contact.

Signup/login

For new users: People typically discover Thumbtack for the first time through social media ads e.g. Instagram. Then they are directed to download the app and sign up. 

For existing users: They have the option to log in with Facebook, Google or email. If already logged in, they would land on the main ‘Explore’ tab.

Explore > Search

Once a customer opens the app, we’ll surface recommendations and encourage them to browse categories. They can utilize the search feature to type in a specific category and update their location, if needed.

Finding a pro

How might we showcase pros on the list without it being overwhelming? From the research, we knew that:

  • The search bar needed to be prominent and visible, allowing customers to easily change the category or location any time.

  • Customers value images of pros: Large photos allow customers to see the pro’s headshot or logo, which is an important factor for determining professionalism. Each row highlights the pro’s photo/logo and key details such as reviews and pricing.

  • Customers need a way to refine the list of results: To help customers narrow in on what they’re looking for, prominent blue filters allow customers to add details about their project.

  • Tags such as “In high demand” help customers evaluate pros as they scroll through the list.

Once aligned on the flow, I transformed the wireframes into high fidelity polished visual designs.

Once a customer opens the app, we’ll surface recommendations and encourage them to browse categories. 

I created a quick prototype and provided it to eng. During implementation we worked closely together to address error handling and cover all possible edge cases and states.

Search

I prototyped the search experience and mapped out various states and the edge cases, which was a collaborative process with eng. We split implementation into phases:

V1: Add location to the search bar in global nav, allowing customers to easily navigate across categories.

Future: Display metadata such as related keywords, categories, and recent searches. 

I designed the updated search experience for all platforms: Web | Mobile web | Native iOS and Android

Contacting a pro

The profile is formatted to showcase the pro’s skillset and specialties. Pros have the ability to specify services they offer as well as photos.

Core elements: Filter by details

Future: Sharing profiles

Design System

I designed components for our new design system.

  • Defined core components and details for icons, spacing, sizing, and color

  • Ensured accessibility requirements were met, including color contrast ratios which needed to pass the standards for WCAG AA 2.1 compliance.

Brand

I leveraged Thumbtack’s new brand to ensure a cohesive presence throughout the product experience.

Painpoints

  • Search for what they need

  • Evaluate and compare pros

  • Navigate between categories

Connect customers with pros quickly and efficiently

Ensure that homeowners can seamlessly find what they’re looking for, without unnecessary friction.

Straightforward and clear usability

Utilize simple UX patterns that users understand, prioritizing accessibility. 

Brand moments 

Use visual design that is cohesive with the brand and language/tone that is true to Thumbtack’s voice.