Porch Edit Pro Profile

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

The Edit Pro Profile experience was not integrated with the rest of Porch.com, was not usable on mobile and was built on a different code base. Because of this, it was in desperate need of a redesign. We also wanted to educate pros on why filling out their profile would be beneficial to their business and our hope was that this would also increase engagement.

Edit Pro Profile Empty@2x@2xEdit Pro Profile Empty@2x@2x

Research

I worked closely with product and engineering to define requirements and began to do some competitive analysis of other integrated edit profile experiences to see what others did that worked well, and what didn’t. From there I started sketching out ideas and talking through ideas with my product manager and lead developer. 

UI

After a sketching and a few whiteboarding sessions we landed on a direction we thought would work well. We chose to have an experience that included inline editing, as this would allow pros to see what the content would look like to a homeowner as they completed each section. For the engagement and education piece, we decided that having a completeness meter paired with a clear call to action and explanation of benefit to the pro, would keep profile completeness top of mind. I created a few variations, had a few more discussions and landed on the design below that we felt was the best solution and on brand.

Edit Pro Profile Intermediate@2xEdit Pro Profile Intermediate@2x

User Testing

I worked closely with product and our UX researcher to set up user testing, both in person and online using usertesting.com. We had users run through our InVision app prototype and took notes on feedback and user reactions. Using feedback from our testing sessions, we made a few tweaks and moved on to development of version 1 of the Edit Pro Profile experience. 

Edit Pro Profile User Testing@2xEdit Pro Profile User Testing@2x
Edit Pro Profile Mobile @2xEdit Pro Profile Mobile @2x