Result
Approved designs to live pages in 3 weeks; revenue growth influenced, not attributed
Client
Snappy Kraken, a B2B FinTech SaaS for financial advisors
Scope
Website redesign, pricing page, design system
Stack
Figma, HubSpot CMS, HubL
Picture the buyer: a financial advisor with a 40-minute gap between client meetings, who will have to defend this software spend to a partner next week. The demo is already behind them. Their questions are practical: what does it cost, what changes in the second month, and who fixes it when something breaks. The pricing page they land on offers a three-column grid, nine rows of feature names, and not one sentence aimed at a person who has to explain the number to someone else. So they open another tab and start comparing. The product was fine. The page where the decision gets made was not doing its job.
Nobody loses a software deal during the demo. They lose it on the page that explains the price.
What was actually happening?
The site talked to people who had already decided and ignored the advisor still making up their mind. Its pricing page drew the most visits and had received the least design attention. The marketing team's roadmap was bigger than anything they could build, which set a hard condition: whatever shipped had to be editable by that team afterwards, with no designer on call.
1. What changes when a software homepage is written for the advisor who has not yet decided?
Before: a feature-first homepage. Product capability leads, the reader is never named, and the main action appears four times in four different wordings.
After: an audience-first homepage. The advisor is named in the first screen, and one action repeats in the same words all the way down.
UX and UI analysis, before against after
Before: what the design cost the visitor
Capability first, reader unnamed. The page opened on what the product could do and never said who it was for. A visitor who cannot see themselves in the first screen gets a weak information scent, and the research finds they leave rather than dig. Source: Nielsen Norman Group, 2003.
One action in four costumes. The same call to action appeared four times, each worded differently, so each read as a separate choice. More apparent choices lowers the share of people who commit to any of them. Source: Columbia University and Stanford University, Iyengar and Lepper, Journal of Personality and Social Psychology, 2000.
Written for insiders, hard to scan. About 79% of users scan a page rather than read it. Feature language aimed at people who already know the product gave a scanning advisor nothing to hold onto. Source: Nielsen Norman Group, 1997.
After: what changed and why it works
The advisor named up front. The page states who it serves before it describes what it does. A headline that names its reader is the strongest information scent a page can give. Source: Nielsen Norman Group, 2015.
One action, one wording, everywhere. Repeating the identical call to action on every screen collapses four apparent options into one clear next step, which is when people act. Source: Nielsen Norman Group, 2013.
Built to be scanned. Short headings and one idea per block mean a reader who takes in a fifth of the words still gets the point, which is about how much the research says people read. Source: Nielsen Norman Group, 2008.
2. How should a software pricing page be laid out for a considered purchase?
Before: three plan columns of feature rows, with nothing explaining what actually changes from one tier to the next.
After: one focal action per screen, plan differences stated as sentences, and the likely objection answered right beside the price.
UX and UI analysis, before against after
Before: what the design cost the visitor
Three columns, no explanation. Rows of ticks do not tell a careful buyer what changes between tiers. Research on comparison tables finds that raw attribute grids fail when the reader cannot see which difference matters to them. Source: Nielsen Norman Group, 2017.
The hesitation went unanswered. A page that states a price without addressing the reason someone might pause sends them to a sales call or off the page, and unanswered questions read as something hidden. Source: Nielsen Norman Group, 2016.
Everything on one screen. Every tier, row and button competing at once is the pattern the cognitive load research warns against when a decision carries a price. Source: Nielsen Norman Group, 2013.
After: what changed and why it works
One focal action per screen. Each tier has its own space and its own next step, so the page advances the buyer one decision at a time. Source: Nielsen Norman Group, 2013.
Differences in sentences. What changes between plans is written in plain language next to each tier, which is the format the comparison research recommends for considered purchases. Source: Nielsen Norman Group, 2017.
The objection next to the number. The reason a buyer might hesitate is answered beside the price. Direct disclosure is one of the four factors the credibility research ties to trust. Source: Nielsen Norman Group, 2017.
Before against after, with the measured column
What | Before | After | Measured |
|---|---|---|---|
Build path | Design handed over as static files | Figma to HubSpot CMS with HubL templates | Yes, 3 weeks to production |
Page ownership | Developer required for edits | Marketing team edits inside the design system | Not measured |
Pricing page | Feature table | 1 focal action per screen | Not measured |
Commercial outcome | Not attributed | ARR growth influenced | Influenced, not attributed |
What was built?
Six responsive pages moved from Figma into HubSpot CMS, built on HubL templates.
A design system bound to the CMS, so the marketing team can publish new pages without a designer.
A rebuilt pricing page: one focal action per screen, with the differences between plans written out as plain sentences.
Conversion paths planned around how an advisor decides, rather than around the feature list.
The result
What did the redesign produce?
Six pages went from Figma to production on HubSpot CMS in three weeks. The work contributed to revenue growth in the period that followed; see the limitation below on what that does and does not mean.
The honest limitation
Revenue growth here is influenced rather than attributed. Sales, pricing and the product all changed during the same period, and this page makes no attempt to separate their effects.
Other Projects
Want results like these for your brand?
Book a free call and we will map out what is possible for your project.
Book a call
Demand Designer®
Conversion-focused web design, ad creative and video editing for EOS®-run businesses in the United States.
© Demand Designer 2026. All rights reserved.
EOS® is a registered trademark of EOS Worldwide, LLC. Demand Designer is not affiliated with or endorsed by EOS Worldwide.