Porch Service Area Tool

ROLE – UI/UX DESIGN

Porch is a website that is dedicated to connecting homeowners with the best home service professionals. Porch pros sign up for a Pro membership in order to grow their online presence and to receive quality job leads. With their membership professionals gain access to their Pro Profile where they can showcase their best work and experience, anayltics on their search and site ranking and the ability to purchase ZIP codes in their service area. 

The Problem

Pro service areas were a pain-point for both pros and homeowners. It was unclear to homeowners where a pro worked and as a result, pros were receiving bad leads. The service area helps homeowners locate a professional who works in their area and see any projects they have completed nearby. A pro job lead generates when a homeowner requests a job that a pro provides in a specific service area either through the lead generation form or directly from a pro profile. Pros needed the ability to say which zip codes, cities and counties they could work in due to travel and sometimes licensing constraints. 

Service Area Mobile @2xService Area Mobile @2x

Research

With over half of our pros using their phone to access Porch, they needed an intuitive tool that was also easy to use on both desktop and mobile. With that in mind we decideded to take a mobile first approach to this project. I worked closely with product and engineering to define requirements and began to do some competitive analysis of other map experiences to see what others did that worked well, and what didn’t. After some initial sketches and whiteboarding sessions, we decided that to make version 1 of this tool as easy as possible, we would focus on allowing pros to select and deselect ZIP codes from their prepopulated service area. 

UI

With a good idea of the direction we wanted to move forward with for the service area tool, I began wireframing and laying things out in Sketch. Once we agreed on the wireframes I began working on the ui deisgn, focusing on making things as easy to understand as possible. After a few iterations we were able to land on a solution we were happy with, and felt pros would understand from the start. The final designs below try to stick with the idea of selected and deselected, utilizing two distinct colors for each. ZIP codes are also grouped by city and county, making bulk add a possibility, as well as adding one at a time. We also tried to take into account the relationship between an Account Manager and a Professional, giving them an easy way to ask for help if they had questions.

Service Area ToolService Area Tool