Case Study — Ongoing Contract (2022–Present)

How Snappy Kraken Got a B2B Web Experience Built for Advisor Conversions

Contract UI/UX design and development for one of North America’s leading B2B marketing automation platforms for financial advisors — building pages engineered to convert, not just impress.

Client Background

Snappy Kraken is a B2B marketing automation platform purpose-built for financial advisors, registered investment advisors (RIAs), and independent broker-dealers (IBDs). The platform delivers automated marketing campaigns, compliance-approved content, personalized advisor websites, and lead-generation tools to thousands of financial professionals across North America.

As a B2B SaaS company in the highly regulated financial services sector, Snappy Kraken faces a unique challenge: their buyers are analytical, compliance-conscious professionals who evaluate vendors with the same scrutiny they apply to investment decisions. First impressions — including the quality and credibility of the web experience — directly influence whether a financial advisor books a demo or closes the tab.

The platform has grown significantly through strategic acquisitions (including Advisor Websites) and counts some of the most respected financial marketing minds in North America among its team and advisors.

The Problem: A Sophisticated Product Undersold by Its Web Experience

When I came on board as a contract UI/UX Designer and Developer, the core challenge was clear: Snappy Kraken had built a powerful, category-defining product — but certain web surfaces weren’t communicating that sophistication at the level their buyers expected.

Specifically, the gaps were:

• Landing page conversion architecture — pages were informative but not conversion-engineered. They showed features but didn’t guide advisor prospects through a structured decision journey toward booking a demo.
• Visual design inconsistency — as the product grew rapidly, design consistency across web properties had degraded. Different sections used different typographic scales, color applications, and component patterns, subtly eroding the brand’s perceived professionalism.
• Component scalability — the internal team needed to be able to launch new pages and campaign assets quickly. Without a documented component system, every new page became a custom build, slowing velocity and introducing visual drift.
• Mobile experience gaps — financial advisors increasingly research platforms on mobile devices before returning to desktop for final evaluation. Several key pages had mobile experiences that fell short of the desktop quality.

The Approach: Conversion-First Design System

As a contract UI/UX Designer and Developer embedded within the Snappy Kraken team, I operated across three parallel tracks:

Track 1: Conversion-Focused Landing Page Redesign

Every landing page rebuild began with a conversion audit — not a design brief. I mapped each page’s conversion goal (demo booking, trial activation, or advisor onboarding), then reverse-engineered the page structure to guide visitors toward that goal with minimal friction.

Key CRO principles applied to every page:

• Above-the-fold specificity: Value proposition answering who it’s for, what it does, and why it’s different within the first viewport — no scroll required to understand the offer.
• Progressive trust layering: Social proof elements (advisor testimonials, AUM data, compliance logos) placed at the exact scroll positions where skepticism peaks in the buyer journey.
• Objection-aware copy structure: FAQ and feature sections structured to address the specific concerns of compliance-first financial professionals — security, FINRA/SEC compliance, data handling, and integration flexibility.
• CTA hierarchy: Primary and secondary CTAs differentiated by visual weight and placement, with primary CTA copy focused on low-commitment outcomes (“See a Demo” over “Buy Now”) appropriate for a high-consideration B2B purchase.

Track 2: Component Design System

I designed and documented a reusable component library in Figma and Adobe XD, covering:

• Typography scale (display, heading, body, caption — with mobile responsive rules)
• Color token system aligned to brand guidelines and WCAG 2.1 AA contrast standards
• Button and CTA component variants (primary, secondary, ghost, disabled states)
• Card and content module patterns for feature showcases, testimonials, pricing, and advisor results
• Form and input components designed for demo request and trial sign-up flows

This system gave the internal team the ability to ship new campaign pages in hours rather than days, maintaining visual consistency as the platform scaled.

Track 3: Front-End Development

Design work was paired with direct front-end implementation: HTML5, CSS3, and JavaScript builds that translated design specs into pixel-accurate, performant code. This eliminated the typical design-to-dev handoff lag and ensured that subtle UI decisions — hover states, animation timing, spacing nuances — were preserved exactly as designed.

All builds were mobile-first, with responsive breakpoints ensuring the advisor experience was consistent across the desktop workstations where platform evaluation happens and the mobile devices where first impressions are formed.

Tools & Technologies

This engagement used the following design and development stack:

Key Expertise Demonstrated

This engagement required the intersection of several specialized competencies that are rare to find in a single designer-developer:

• B2B SaaS conversion web design: Understanding the nuanced decision journey of a financial professional evaluating a $2K+/year SaaS platform — and designing page architectures that accommodate a 30–90 day sales cycle, not a single-session impulse buy.
• Financial services UX: Familiarity with the compliance, trust, and credibility requirements of the regulated financial advisor market. Design decisions in this sector carry legal implications — placement of disclosures, representation of performance claims, and accessibility compliance are non-negotiable.
• Design system thinking: Building component libraries that scale with a growing product team, not just delivering one-off pages that create technical debt for the next designer.
• Full-stack design-to-code: Executing the complete pipeline from wireframe to shipped front-end, compressing timelines and preserving design intent without a fragmented handoff process.

“When financial advisors evaluate a B2B SaaS platform, the website is the first credibility filter. A page that looks disorganized signals an organization that is disorganized — and advisors won’t risk their practice on that.”

— Joshua Jackai, Jackai Agency

Results & Impact

The ongoing engagement has delivered a continuously improving web infrastructure aligned to Snappy Kraken’s growth objectives. Specific outcomes include:

• Conversion-optimized landing pages structured to increase demo bookings from both organic and paid traffic
• A reusable design system enabling faster campaign page production without visual regression
• Consistent brand execution across multiple web properties, including the Advisor Websites platform (a Snappy Kraken acquisition)
• Fully accessible, mobile-first front-end builds meeting financial services-grade quality standards
• Graphic assets deployed across email marketing, paid social, and in-platform UI

What This Engagement Proves About B2B Web Design

The Snappy Kraken engagement illustrates a core principle of high-value B2B web design: conversion optimization in financial services is not about aggressive tactics — it’s about relentless clarity and earned trust.

A financial advisor evaluating a marketing platform is asking one question above all others: “Can I trust this company to represent my practice professionally?” Every design decision — the spacing, the typography, the social proof placement, the CTA language, the mobile experience — is either answering that question in the affirmative or raising doubt.

This is why B2B web design in regulated industries requires more than aesthetic skill. It requires deep familiarity with the buyer’s world, their compliance requirements, and the specific credibility signals that move a financial professional from consideration to commitment.

Further Reading

Case Study: Advisor Websites UI/UX Redesign →

The Anatomy of a High-Converting B2B Landing Page →

Website Redesign for Conversions: A Complete B2B Guide →