Yocale: Building a Design Growth System that Makes Lead Generation Effortless

Animated walkthrough of the Yocale landing page design system
Role:
  • GTM Design
  • Landing Page Design
  • Technical SEO
  • Web Development
Tool:
  • Figma
  • Webflow
  • Claude
  • Ahrefs
Duration:
  • 2025 – 2026
01

Impact

5.15%

Click-through rate

4

Feature release launches

40% ↓

Bounce rate

02

Overview

Yocale

Yocale is a cloud-based platform that helps service-based businesses — like salons and med spas — manage appointments, payments, and client relationships in one place.

Our tagline is Business Made Simple. We believe small businesses are the backbone of the economy, and our job is to give them the tools they need to run effortlessly.

Animated walkthrough of the Yocale homepage showcasing the booking management platform
03

Challenge

Missing Brand Identity

Yocale had no unified visual identity across marketing channels — email, social media, and the website. On top of that, the design and content of the website were outdated and needed optimization for a better user experience.

Screenshot of Yocale's outdated website homepage showing the 'Why Yocale' and 'Our Promise' sections with a tablet mockup of the booking calendar
04

Approach

Build a system

Establish a reusable visual library — colors, typography, components — that keeps branding consistent across every marketing channel and enables fast delivery.

Design for success

Design and develop web pages for product GTM launches and SEO optimization.

05

Visual Identity

Yocale brand color palette: coral #F37063, navy #034796, a coral-to-blue gradient, and a light pink-to-blue gradient, each with hex codes Yocale typography: General Sans typeface shown in regular weight for headings and bold weight for the 'abc123' sample Yocale logo wordmark and icon mark in coral with a starburst accent
06

Feature Launches

Yocale invoicing interface showing an itemized receipt with services, subtotal, tax, and total, alongside a staff member holding a barcode scanner and product
01

Invoicing

Yocale integrated payments landing page showing 'Integrated Payments & Point of Sale Made Simple' messaging, adoption statistics, and a suite of supported payment devices
02

Integrated Payments

Yocale 'Buy Now, Pay Later' promotional banner showing a phone displaying Affirm, Klarna, and Afterpay payment options
03

Buy Now Pay Later

Yocale gift card management interface showing preset values and a digital gift card balance, with a salon stylist cutting a client's hair in the background
04

Gift Card

07

Landing Pages

Animated walkthrough of Yocale landing page designs

Conversion Funnel

High-converting landing pages follow a proven formula. Every section moves the visitor one step closer to becoming a lead:

  1. Hook — Lead with awareness and the primary value proposition
  2. Core Value — Show how the product solves their specific problem
  3. Social Proof — Remove objections and build desire through credibility
  4. Call to Action — Drive the conversion
08

Web Development

Screenshot of the redesigned Yocale blog layout from 2024 showing structured categories and improved navigation
Screenshot of the original Yocale blog layout from 2023 showing all posts on a single page with no category structure
Before After

Redesign to solve SEO issues

The site had orphan pages in the blog section — the original layout was dumping the latest 100 posts onto a single page while the archive had far more. I restructured the blog with proper categories so every post is indexed and discoverable.

Screen recording of the Figma and Webflow MCP Bridge App automating web component creation from designs, showing tool call logs and element builder execution

AI is taking our job

Figma and Webflow each have an MCP that enables certain web component automation (with proper auto-layout), but the current limitation is that they can't automate animations yet.

Screen recording of a Webflow component being built and configured with editable properties for a pricing card, demonstrating reusable web component creation

Webflow Component

Creating reusable web components shortens development time and ensures faster delivery. After all, time is money in the SaaS world.

Screen recording of the Notion to Figma Sync plugin syncing Notion database content into Figma design layers, demonstrating content translation across languages

Notion to Figma

Working with a content writer, we needed a system to test how content worked within the design. I discovered a plugin that syncs a Notion database with Figma (layers need to be named accordingly). With one click, you can localize designs across different content and languages.

Yocale client star ratings and reviews showcasing customer satisfaction across the platform