Products First Touchpoint

How we designed and built a marketing site that reduced the need for 1-on-1 demos, helped users understand the product faster, and increased self-signups.

Spiffy Marketing Site Design Overview
  • Role Designer & Developer
  • Product Marketing Website
  • Made with Spiffy Team

The new site makes it effortless to understand the product. We can now focus on scaling instead of answering the same questions over and over.

- Michael, Spiffy Co-Founder

The Challenge

The previous Spiffy Checkouts marketing site left users confused about the product's value. Key features and benefits were difficult to find, leading to frustration and an over-reliance on time-intensive 1-on-1 demos.

User pain points:

  • Users couldn't tell how Spiffy Checkouts would solve their specific needs.
  • Poor navigation made finding relevant information a hassle.
  • Lack of detailed product feature pages left potential customers unsure about the product's value.

Our goals:

  • Help users self-serve and reduce the need for 1-on-1 demos.
  • Clearly communicate product benefits with detailed feature pages and testimonials.
  • Drive more signups by simplifying the decision-making process.

Research & Discovery

Data-Informed Insights: We analysed demo feedback, support tickets, and site analytics to identify user pain points. Users frequently asked:

  • "What makes Spiffy different from other checkout tools?"
  • "How can Spiffy fit my specific use case?"
  • "What are the pricing options?"

Feature Expansion: The product had evolved since the old site's launch. Users were missing new features like embedded checkouts and flexible payment plans, so the new site needed to explain them clearly.

Iterative Discovery: Early insights informed wireframe testing and navigation prototypes, then we validated the direction with users.

Old vs New Spiffy Marketing Site

Design & Implementation

Feature-Driven Benefits

We structured the site around user benefits and backed each one with product details, testimonials, and demo videos.

Your Role

Messaging Alignment: Collaborated with co-founders to make the product value easier to understand.

Hands-On Development: Owned the front-end implementation using HTML and CSS so the design held up across devices.

Key Features
  • User Testimonials: Integrated real customer stories across the site to build credibility.
  • Demo Videos: Added targeted demo videos to help users visualize product use cases.
  • Feature Pages: Created dedicated pages with interactive visuals and detailed product information.
  • Transparent Pricing: Designed an intuitive pricing page to simplify decision-making.
Spiffy Marketing features

Impact

Increased Self-Signups

Users were able to make purchasing decisions without requiring 1-on-1 demos.

Reduced Demo Overhead

Reduced time spent on manual demos, freeing up the team for higher-value work.

Improved SEO & Traffic

Higher traffic and better rankings due to more targeted, optimised pages.

Clearer Feature Discovery

Users gained better understanding of product capabilities through clearer feature pages.

Learnings

Benefits-First Approach: Leading with user benefits made the product easier to understand.

User Behaviour Insights: Post-launch behaviour showed where navigation and content could be clearer.

Cross-Team Collaboration: Working closely with stakeholders kept business goals and user needs aligned.

Summary

The new Spiffy Checkouts marketing site helped users understand the product without relying on manual demos. Clearer messaging, feature-led pages, and customer proof increased self-signups and improved product comprehension.

Spiffy Marketing Site Design Overview

Design that makes a difference. Together.

I work with ambitious teams on products that need to be clearer, faster, and easier to use. If that sounds like your project, I'd love to hear about it.