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

Problem

In 2018, Thumbtack set out to create the best app for homeowners to contact local pros —  skilled, quality professionals such as electricians, plumbers, house cleaners, and handymen who can help fix, maintain and improve their home.

Based on research, we knew there was not an existing experience that customers were fully satisfied with to find and hire a pro. We researched, strategized, designed and built an end-to-end app experience to help homeowners around the U.S. seamlessly find and hire pros, with a focus on increasing contact and conversation rates by 15% on the previous experience.

Solution

Show customers a list of local pros and allow them to choose who to contact—a new experience internally referred to as ‘Instant Results’.

Results

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

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 ✅

Process

Research

We lacked deep understanding in what customers need, want and expect. I worked with a researcher on a study plan to understand:

• What are their current frustrations? 

• What are their pain points?

• What do they want and need?

Key takeaways

After conducting interviews with 10 customers and synthesizing the learnings, we found that it was difficult for most customers to…

• Search for what they need

• Evaluate and compare pros

• Navigate between categories

Design sprint

I led a 4 day design sprint with 2 Product Designers, a Researcher, and a Content Designer. Design leadership and key cross-functional stakeholders were involved.

We began by plotting the customer journey and identifying key questions:

• 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?

STRATEGY

We created a strategy to build the Instant Results app experience for iOS and Android, while incorporating learnings from the web MVP. Together with stakeholders, we decided to scope the sprint output to what we could reasonably build in the next 6 months.

GUIDING PRINCIPLES

During the sprint it was helpful to write a set of guiding principles that we could reference throughout the project:

• 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.

Sketches

Now that we had reviewed research and aligned on a strategy, we began the design phase. I sketched out the end to end flow for customers before translating them into wireframes in Figma.

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 can we showcase pros on the list without it being overwhelming? From the research, we knew that customers value images of pros, so I designed simple rows that are easy to scan. Each row highlights the pro’s photo/logo and key details such as reviews and pricing. Additionally, customers need a way to refine the list of results and narrow in on what they’re looking for, so we added filters to support this.

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: Profile sections with descriptions of services and photos | Questionnaire about job details | Confirmation

Future: Sharing profiles

UI DESIGNS

Once we were aligned on the flow, I transformed the wireframes into high fidelity polished visual designs. 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.

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 narrow what they’re looking for and update their location, if needed.

Core elements: Recommendations | Search

Future: Personalized recommendations

Finding a pro

The search bar is visible at the top of the page without being distracting, allowing customers to easily change the category or location any time. Prominent blue filters encourage customers to engage with them and add details about their project.

Large photos allow customers to see the pro’s headshot or logo, which is an important factor for determining professionalism. Tags such as “In high demand” help customers evaluate pros as they scroll through the list.

Core elements: Filters | Search | Demand tags

Future: Saving pros | Sharing pros

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

Search

I mapped out the various states for search and considered all the edge cases, which was also a collaborative process with eng.

V1: Add location to the search bar in global nav. Customers will understand where they are on Thumbtack and be able to easily navigate across categories.

Future: Search can include content such as related keywords, pros, cost pages, related categories, and recent searches. 

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

Brand

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

Core elements: Logos | Typography | Colors | Photography | Illustration

Design System

During the design process I collected components and mapped out both existing and new elements.

Core elements/Component details and standards for: Icons  | Spacing | Sizing | Color

Accessibility: Color contrast ratios should pass the standards for WCAG AA 2.1 compliance.

Reflections

What went well

Design influence - The design sprint set a strong future vision and shaped the roadmap for at least 2 quarters

Career growth - I was promoted to Design Lead shortly after this project, and then moved into a Design Manager role.  

What I would improve

Planning timeline - We didn’t account for the amount of design and eng time required to develop a more robust design system for iOS and Android.