← All projects

CASE STUDY /

03

Personal coaching

Waymark

Waymark

Waymark

Website and design system for a coaching practice. One winding path ties the story together, from the first step to the first conversation.

Website and design system for a coaching practice. One winding path ties the story together, from the first step to the first conversation.

Website and design system for a coaching practice. One winding path ties the story together, from the first step to the first conversation.

SCOPE

Website & design system

ROLE

Design and build

TOOLS

Figma, Framer

Waymark website

Overview

Waymark is a website and design system for a personal life-coaching practice that helps ambitious people move through self-doubt and into meaningful change.

The challenge

Coaching sites often feel either generic or overly salesy. The site needed to feel calm and personal, explain who the coaching is for, and guide people to the one action that matters: booking a free discovery call.

Approach

  • One winding path. The hero line, "Life doesn't move in straight lines.", became the visual idea. A single hand-drawn path runs through the page and connects the story from the first step to the first conversation.

  • Coaching areas as chapters. Mindset and personal growth, career and purpose, and balance and wellbeing are presented as "Different chapters. Different ways forward." so visitors can find themselves quickly.

  • A clear four-step process. Find your starting point, create your compass, practice the possible, make it your own. This reduces the fear of the unknown before a first call.

  • Trust before the ask. Real-feeling stories, field notes and a personal intro come before the final call to action: "Good things start with a conversation."

Design system

Deep forest green, soft lime and warm neutrals; a serif italic for emotional moments paired with a clean sans for reading; rounded image crops and soft cards. I documented colors, type, cards, buttons and the path motif as reusable components.

Scope and build

Full website plus a design system, designed in Figma and built in Framer.

What I learned

A single, simple visual metaphor, used consistently, can tie together a page that would otherwise be a list of sections.

Full film

Watch it in motion.

Watch it in motion.

Watch it in motion.

PRESS PLAY · SOUND ON

Waymark

Create a free website with Framer, the website builder loved by startups, designers and agencies.