Purchase Flow Redesign

Web App
Project Overview
The purchase flow experience was outdated and needed an improvement in usability and utility. With the change in plan offers to our customers, we needed to reevaluate the overall purchasing experience.

The solution:
A designed experience that:
- Provides the benefits, costs and features of each plan wherever the user is in the product
- Helps the user make an informed purchase decision
My Contributions
My Role: Lead Product Designer

My time on this project involved leading UX strategy and process in which I used user data and stakeholder goals to create a more user-friendly, exploratory design. I created the initial designs, the user flow and content, tested the current and proposed experience and suggested iterations based off of the results.

Team: 1 Product Designer, 5 Engineers, 2 Product Managers
The initial purchase flow experience was, simply put, broken.

In order to purchase, you had to somehow know to access the admin console that was hidden in the product switcher menu (below). Once in the system console, then you had to click on the upgrade button specifically within the Subscriptions page.

Clicking upgrade opened up a separate page outside of the product with the next highest plan already selected. You could compare plans which would open a short modal that you had to scroll through to compare.

The process was inaccessible, tedious and all the adjectives that a company does not want you to associate with purchasing their product. The initial flow had created so many barriers for our purchasing customers - we needed to help them purchase our product!

In turn, the solution I designed with the Self-Serve team was significantly more smooth, smart and part of a continuous flow in-product.
Examining the current purchase experience

Improved Flow design

As you can see in the above flow diagrams, I designed a more efficient and seamless purchase flow that offered the following new improvements: 

1. I reduced the total user actions from 8 to 4 in the updated purchase flow reducing the clunkiness and friction that previously existed.
‍
2. I contained the purchase flow within the product only (compared to the original which went from the product to a separate web-based customer portal and then back to the product).

Surface chat-facing CTAs

Without any prior chat-facing CTAs, customers and non-admin customers were less likely to examine plan offerings and the included functionalities. By adding these touch points on the chat-facing side of the product, we encouraged the user to more frequently interact with the plans and become more familiar with them. With greater eyes on plan offerings, there were 40% more trial requests and many more upgrades as well.

Introduce plans modal

Part of this flow redesign included the addition of the plans upgrade modal that is accessible from both the admin’s system console as well as the chat-facing workspace. This works hand-in-hand with more in-context trial requests and upgrades by increasing access to plan options and information.

‍
Check out the prototype
View prototype
Linkedin