Checkout: Grid Page Progress Bar
Hypothesis
Add a progression bar to the top of the grid page, below the hero section. The steps shown would include: 1- Enter Zip Code, 2- Select Plan, 3- Enter Details, 4- Confirm Order. The user would be on Step 2 upon landing on the Grid Page, Step 1 would already be checked off as they would have had to enter their zip code upon landing on the page. Because we saw success with adding a progression bar on the Mobile Checkout page (E19) , and have seen competitors add progression bars to their plan selection pages (Pulse Power, Just Energy). Progress bars play on an individual’s ‘need to complete’ in order to make ourselves feel better. It works to visually define the end goal and effectively ‘dangles the carrot’ for the user, enticing them to take up the challenge. The idea is that adding a progress bar will make users feel as if they are in the middle of a task that is not complete, motivating them to move to the next step and selecting a plan, and checking out.
Test Results
Key Learning
Problem: The first screen of the checkout must immediately communicate value — if it doesn't, users bounce before scrolling.
What worked: Add a progression bar to the top of the grid page, below the hero section. The steps shown would include: 1- Enter Zip Code, 2- Select Plan, 3- Enter Details, 4- Confirm Order. The user would be on Step 2 upon landing on the Grid Page, Step 1 would already be checked off as they would have had to enter their zip code upon landing on the page. Because we saw success with adding a progression bar on the Mobile Checkout page (E19) , and have seen competitors add progression bars to their plan selection pages (Pulse Power, Just Energy). Progress bars play on an individual’s ‘need to complete’ in order to make ourselves feel better. It works to visually define the end goal and effectively ‘dangles the carrot’ for the user, enticing them to take up the challenge. The idea is that adding a progress bar will make users feel as if they are in the middle of a task that is not complete, motivating them to move to the next step and selecting a plan, and checking out. (+5.3% lift)
Takeaway: A meaningful improvement that compounds with other optimizations. Every field removed or simplified reduces friction — continue testing inline validation, progress indicators, and smart defaults.
How to Apply This to Your Site
This experiment demonstrated that checkout: grid page progress bar can produce a +5.3% improvement in conversions. The test was run on a checkout page in the energy & utilities industry. With 33,413 visitors in the sample, this is a robust result.
Before you test: Consider that form tests typically require large sample sizes to detect small effects. This test ran for 55 days — plan for at least that long.
This result reached 95% statistical confidence, meaning there is a very low probability the observed effect was due to chance. Results at this confidence level are generally considered reliable for making business decisions.
What Was Tested
Add a progression bar to the top of the grid page, below the hero section. The steps shown would include: 1- Enter Zip Code, 2- Select Plan, 3- Enter Details, 4- Confirm Order. The user would be on Step 2 upon landing on the Grid Page, Step 1 would already be checked off as they would have had to enter their zip code upon landing on the page. Because we saw success with adding a progression bar on the Mobile Checkout page (E19) , and have seen competitors add progression bars to their plan selection pages (Pulse Power, Just Energy). Progress bars play on an individual’s ‘need to complete’ in order to make ourselves feel better. It works to visually define the end goal and effectively ‘dangles the carrot’ for the user, enticing them to take up the challenge. The idea is that adding a progress bar will make users feel as if they are in the middle of a task that is not complete, motivating them to move to the next step and selecting a plan, and checking out.
Methodology
Build On These Learnings
Save your own experiments, spot winning patterns across your test history, and stop repeating what's already been tried.
Related Experiments
Checkout: Remove Coupon Fields
Problem: Coupon and promo code fields on checkouts can distract users — they leave to hunt for codes, reducing completion rates.
Listing: Icon Labels
Problem: Visual elements on the listing aren't doing enough to communicate value, build trust, or guide users toward the next step.
Checkout: Remove Coupon Fields
Problem: Coupon and promo code fields on checkouts can distract users — they leave to hunt for codes, reducing completion rates.
Checkout: Fewer Form Fields
Context: Each additional form field adds friction to the checkout, increasing the chance users abandon before completing their submission.