Checkout Flow

Role

I was the sole designer working with a product manager and development team.

Setup

When an agent subscribes to Trulia Pro, there are a few options to choose from. I simplified the checkout flow to the fewest steps possible, while still allowing the user to see the price differences when different options are selected. I also changed the header from the traditional navigation to prevent agents bouncing out of the flow that way. The green bar at the top indicates progress through the checkout flow.

Alternative Checkout Flow

My first approach to this was setting up the checkout flow on one page, however this proved a bit challenging to implement, as well as having a lot going on in one page view.

Trulia Pro Landing Page

The goal of this page was to explain a little about the benefits of Trulia Pro, while getting agents to click through to the checkout page.

Alternative Landing Page Design

This was created to try to provide more visual interest while taking away the choice of the plan at the beginning of the flow. We decided it may be too much of a hurdle for agents to decide on that right away. This design was never tested, so unfortunately I couldn't get metrics on which design would have performed better.