Redesigning the Pro Trial Buy Flow

Crunchbase’s self-serve flow drives 80% of ARR, and at its center was a 3-step modal. But only 11% of users who opened it from an upsell reached the summary step, compared with 43% on the Select Product page. The modal saved the most decision-critical information (price, the monthly option, what Pro includes) for the last step, asking users who were mostly still exploring to commit before they understood what they were buying.

The flow also defaults to annual, and even with pricing on screen, users lacked the surrounding context to understand what they were paying for.

Starting a trial used to take a lot of clicks. A user clicked an upsell button, which opened a modal. Inside that modal, they clicked another button that took them to the product selection page, where comparing plans could lead to decision fatigue. From there, they still had to click yet another button to reach the buy page and start a trial.

I identified the drop-off across those steps and pitched updating the upsell flows in a roadmap meeting with my PM, showing leadership every one of those steps. Senior leadership agreed it was too much, and I got the green light to run an experiment.

My biggest concern with moving to a modal buy flow was fitting an entire buy page into a modal. The trade-off was worth it: users stay on the page they clicked from, instead of being pulled into a disruptive new page.

That experiment became the 3-step modal described in The Opportunity. It removed the page-hopping, but it still saved price and the monthly option for the last step, so users were asked to commit before they could see what they were buying. This project is phase 2: keeping the modal, and fixing what it held back.

Looking at that modal, three things were holding it back:

Our Director of Pricing & Packaging proposed combining payment and summary, taking the flow from three steps to two. Fewer steps is usually a good instinct, but I had a concern about who was arriving in the modal. We looked at the funnel together, using tracking events our data analytics team had set up:

That gap told us who was in the modal: mostly people still exploring. We estimated roughly 25% high intent, 35% medium and 40% low. Even with a wider modal, combining steps would put card fields, pricing, and the confirm button all on one screen.

To decide with evidence rather than opinion, I suggested we test both. I used AI to help draft the testing script, the tasks and questions to ask, then reviewed and tightened it and ran both versions on UserTesting with about 20 people each.

Ease of use was close. The real gap was entering a card: with 2 steps, the card fields had less room. People also called out the stepper.

Decision: I shared the results with our director, and we moved forward with 3 steps, front-loading price and plan context instead of saving it for the end.

The redesigned modal keeps a persistent context panel on the left side of every step, showing what’s included in Pro and a live summary of the user’s selected plan.

It also widened the modal from 624px to 980px and reduced its height from 983px to 678px, eliminating scroll and giving room for pricing and plan context to live above the fold.

Step 1: Account

• Price and plan choice, up front. Pricing, what Pro includes, and the annual or monthly choice now live on step 1 instead of step 3, so users pick their plan before they’ve invested any effort in the flow. Seeing both options clearly from the start was meant to lift trial starts and trial-to-paid conversion rate (TPCR).
• A smaller header. The oversized banner is gone, which frees up room for the context panel.

Step 2: Payment Method

• The plan stays in view. The selected plan and its terms stay visible while users enter payment details, so someone filling out card details never loses sight of what they agreed to on step 1.

Step 3: Summary

• Confirm, don’t decide. Billing cycle is already chosen on step 1, so the summary no longer asks for a new decision. It confirms today’s total of $0 and what will be charged after the trial. Lower-priority details, like the itemized auto-applied promo code line and the promo code field, are hidden so the totals stay front and center.
• Cutting what users didn’t use. We removed the seat count and the “Talk with Sales” link. Very few users had ever used them to buy multiple seats here; people buying for a team usually went to the pricing page instead. Dropping them kept the summary focused on the one thing it needs to do: confirm the trial.

Once a user selects their plan in step 1, that selection becomes read-only in steps 2 and 3, shown in a grey summary panel. Getting this small element right mattered: it’s the only reminder of what someone is paying for while they’re entering payment details.

I designed eight variants (A through H) and evaluated them with simulated user testing, scoring each from 1 to 5 on three criteria:

The three highest scorers:

The scores split on price clarity: F, G, and H, the only variants that lead with the full $588 charge, all scored 5, while the ones that lead with $49/month or the discount scored 3 or 4.

Variant H scored highest at 14 out of 15, the only panel to lead with the annual charge, show the monthly equivalent, and stay scannable: $588/year with $49/month, the first-year discount, and the renewal rate, with “cancel anytime during trial” underneath. The final design keeps that structure, leading with the yearly price and renewal rate, as shown in Step 2: Payment Method.