SaaS
ToolSpend
An AI-powered financial operations SaaS that enables real-time cost visibility and decision-making, to help teams monitor, forecast, and optimize their software and AI spending.
ROLE
UX/UI Designer
INDUSTRY
B2B Fintech
RESPONSIBILITIES
UX Research, UI Design System, Prototyping & Testing
case study focused on optimizing the original Toolspend website to maximize free-trial conversions through frictionless data visualization.
CHALLENGE
The current web experience underdelivers on trust, clarity, and conversion momentum for free-trial
Toolspend is a solid product that solves a real pain that’s growing fast — runaway AI and SaaS costs across teams.
But the site currently reads as a generic dashboard rather than a strategic FinOps controller.
What’s needed is clarity of value, fewer choices early, and social proof that validates the ROI before signup.
OBJECTIVE
The objective was to build immediate clarity and trust to drive free-trial sign-up conversions.
What ToolSpend does
Why it stands out from competitors
Why the platform can be trusted
RESEARCH
Diagnosing the original website through usability testing before design a solution.
To uncover the exact conversion bottlenecks of the original ToolSpend website, I conducted a mixed-methods usability test utilizing Useberry. This allowed me to gather quantitative interaction data and qualitative insights to build a data-driven foundation for the design.
CTA Cannibalization by Badge
The heatmap revealed massive click density on the bright Product Hunt badge, while the primary free-trial signup CTA was completely ignored. Secondary badges must be visually de-prioritized to protect the conversion funnel.
The Comprehension vs. Value Paradox
The user quickly understood what the tool does (scoring clarity at 4/5), but struggled to see why it matters to them (scoring value at 2/5). Product copy must shift from technical features to explicit, personal ROI benefits.
Unaddressed B2B Security Anxieties
Qualitative feedback exposed critical user anxiety regarding team data permissions ("Is it ok to access their data?"). A total lack of visible compliance anchors (SOC2/GDPR) created an immediate psychological barrier to signing up.
Curiosity as a Conversion Driver
The user's primary motivation to continue exploring was purely to see how the dashboard works internally. Replacing static screenshots with an interactive product tour or mini-preview is required to turn this curiosity into a trial signup.
SOLUTION
Reframing ToolSpend from a spend-tracking dashboard into a proactive FinOps decision-making platform.
To achieve this, I reorganized the experience around five key strategic design principles:
Shift messaging from basic features to clear business outcomes.
Establish a clear conversion hierarchy focused directly on accelerating free-trial sign-ups.
Strengthen market differentiation by positioning ToolSpend as a financial operations cockpit rather than another analytics dashboard.
Enhance product understanding by introducing a dedicated, interactive "How It Works" section.
Build early trust across the user journey through prominent social proof and credibility signals.
BEFORE & AFTER
Highlights from feature noise to conversion clarity.
A side-by-side comparison highlighting the structural evolution from the original layout to the optimized design solution, specifically re-engineered to eliminate cognitive friction and accelerate user sign-ups.
Injecting Early Social Proof and Tangible Metrics to Build Platform Trust
Strategic Headline: Shifted the copy framework away from features and onto the core user benefit: reclaiming financial control.
Data-Driven Empathy: Introduced an industry-standard statistics grid (redundant tools, inactive licenses) to help prospects immediately self-identify with the problem.
Inline Social Proof: Positioned an authentic customer quote at the very top of the fold to validate platform credibility organically.
Problem Awareness Architecture Transforming Invisible Waste into Visual Friction
Empathy-Driven Scenarios: Isolated the three most common financial leaks to help B2B tech leaders immediately self-identify with the chaos.
Contextual UI Teasers: Used realistic UI micro-previews (like anomaly spikes and idle GPU warnings) to give physical form to invisible code expenses.
Action-Oriented Framing: Structured headers and micro-copy to focus entirely on accountability and financial control, establishing a high-intent mindset before the pricing or signup fold.
Implementing Role-Based Segmentation to Personalize Product Value
Interactive Persona Filtering: Introduced top tabs to allow different department leads to immediately self-identify and filter out irrelevant noise.
Outcome vs. Feature Split: Clearly categorized data into "Key Benefits" for quick executive scanning and "Features" for deeper technical validation.
Dual Contextual CTAs: Paired a high-contrast primary button ("I'm a Founder") with a secondary explorer button ("See how it works") to capture users at different stages of conversion readiness.
Strengthening Competitive Differentiation by Transforming Data into Actionable UX
High-Impact Positioning Copy: Used aggressive, comparative copywriting to immediately establish ToolSpend's superiority over standard tracking tools.
Interactive UI Previews: Displayed concrete automation cards (like Google AI token optimization) to give the user physical proof of how the platform saves them money.
Persistent Primary CTA: Maintained a high-contrast "Get Started Free" button at the bottom of the content stack to capture intent the moment the user understands the competitive edge.
Satisfying User Curiosity Through High-Fidelity Product Previews
Time-Bound Commitment: Leveraged copy to frame the integration setup as an instant win ("less than 5 minutes"), reducing resistance.
Step-by-Step Micro-Flows: Divided complex platform logic into three scannable steps (Sign up, Connect, Get insights) mapped directly to user expectations.
Transparency Layout: Displayed an un-gated interface mockup to fulfill user demand for product verification and build brand authority early in the scroll.
Quantifying the Value Proposition to Secure Final Funnel Conversion
Time-Bound ROI Framework: Established an explicit 30-day value realization promise to reduce user skepticism before registration.
Simulated Provider Metrics: Showcased familiar cloud and AI integrations (Bedrock, Google) to make the potential savings feel real and immediately applicable.
Hard-Metric Callouts: Placed verified success metrics (34% cost reduction) inside highly scannable grid containers to capture high-speed scrolling recruiters.
Optimizing the Pricing Architecture to Eliminate Final Conversion Friction
Strategic Badge Relocation: Moved Product Hunt social proof to the bottom to validate credibility without cannibalizing upper page actions.
Frictionless Micro-Copy: Embedded explicit reassurance triggers ("Cancel anytime", "Not credit card required") directly around the pricing tier.
Transparent Feature Scoping: Provided clear list packaging to manage expectations regarding service connections, ensuring high-motivation user registration.
Mitigating Security Anxieties Through Trusted Integration Architecture
Trust-Focused Copywriting: Positioned security and seamless execution at the center of the main header to directly address user data-privacy objections.
Familiar Visual Anchors: Utilized recognizable industry logos floating organically around the CTA to provide immediate contextual validation.
Lead-Capture Micro-Copy: Integrated an inbound feedback trigger ("Don't see your AI tool? Let us know.") to catch edge-case users and gather product development data.
NEXT ITERATIONS
Core hypotheses defined to drive the upcoming usability testing.
Task success rate
Can users understand what ToolSpend does?
Value Proposition Clarity
Do users understand the business value?
Time to Comprehension
How quickly can users explain the product?
CTA Discovery Rate
Can users identify the next step?
Free-Trial Sign-Up Intent
Would users consider signing up for a free trial?
Trust Perception Score
Do users perceive the product as credible?
Future roadmap.
Based on these validated insights, the next design phase for ToolSpend requires testing the web design solution, with three specific, strategic optimizations to turn user curiosity into free-trial conversions:
Inject Security Compliance Anchors: Add prominent SOC2, GDPR, or encrypted data-access badges right below the hero layout to address team data-privacy concerns immediately.
Replace Feature Copy with ROI Data: Pivot from technical descriptions to explicit, benefit-driven value propositions (e.g., "Save an average of 23% on corporate OpenAI bills").
Embed an Interactive Product Tour: Satisfy the user's curiosity directly on the landing page by replacing static screenshots with a clickable mini-dashboard preview or an interactive "How it Works" interactive module.
RETROSPECTIVE
Strategic Takeaways
This project reinforced the importance of designing for business understanding rather than feature discovery
One of the key lessons was that prospects evaluating B2B software are not primarily searching for features—they are searching for confidence.
Confidence that the product solves a meaningful problem, integrates with their existing workflows, and delivers measurable business value.
The redesign demonstrated how messaging, information architecture, and trust-building mechanisms can influence perceived value before a user ever interacts with the product itself.
Future iterations would focus on validating these assumptions through usability testing and measuring the impact of the redesigned experience on user understanding, trust perception, and free-trial signup intent.