WORK | WANDSPIRIT

Wandspirit

Vancouver-based guided adventure company. They offer day hikes,
rock climbing, multi-day trips and more.

Web Design Front-end Development UX / Interaction Design Travel

CLIENT

Wandspirit Travel

YEAR

2026

TIMELINE

2 weeks

SCOPE

Startup Launch Kit

OUTCOME

+40% revenue post-launch

01 THE PROBLEM

A brand that outgrew Instagram.

With 2,100+ Instagram followers, consistent weekly bookings, and a growing range of experiences, the brand had real momentum. But all of their operations lived inside Instagram stories and a WhatsApp group, meaning anyone who found them through a friend, a Google search, or word of mouth hit a wall immediately.

Most critically, hikes were running at 60–70% capacity despite genuine demand. With a maximum of 8 spots per trip and no public booking infrastructure, empty seats were the norm. Every unfilled spot was direct lost revenue. The goal was to build a digital home base that matched the energy and quality of what Wandspirit actually delivers on the trail.

02 MY ROLE

One person, full stack

Solo front-end developer and web designer. I handled everything: brand analysis, design decisions, HTML/CSS/JS build, mobile responsiveness, interactive calendar feature, and deployment via Docker and Cloudflare.

LOGO SYSTEM

03 PROCESS

Instagram grid to interactive website

Starting from a brand that already had strong visual identity and community, the challenge was translating that energy into a functional web experience — without losing what made it feel like Wandspirit.

Brand Analysis

Studied the existing Instagram presence: colour usage, typography, tone of voice, content patterns, and audience. Extracted a design direction from what was already working rather than starting from scratch.

Days 1–2

Site Architecture

Mapped out the full page structure and user flow. Identified the calendar as the highest-impact feature and designed the information hierarchy around reducing booking friction.

Days 3–5

Design System

Defined the colour variables (gold, black, off-white, stone), typography hierarchy (Bebas Neue for display, DM Sans for body), spacing system, and reusable component patterns before writing a single line of layout code.

Days 6–8

Build & Interaction

Built section by section in HTML, CSS, and JavaScript including a custom interactive calendar with dynamic event filtering, detail panel, and mobile-first responsive layout.

Days 9–12

Deployment

Containerised the site with Docker using an nginx base image, connected to Cloudflare for CDN and HTTPS, and deployed to a live URL.

Days 13–15

04 THE WORK

What we built

A five-section homepage, a dedicated experiences page, and a fully interactive calendar — all built from scratch in HTML, CSS, and JavaScript. Every design decision was rooted in the brand's existing visual language, and every feature was chosen to solve a specific friction point in the booking flow.

COLOUR SYSTEM

#FEC200

#CD9700

#F6F5F2

#FFF

#0E0E0C

TYPOGRAPHY

Bebas Neue

Display / Headlines
600 weight

Cormorant Garamond

Accent / Key words
300 italic

DM Sans — Body and UI text at 15px/1.7

Body / Taglines
400 regular

VISUALS

HERO — DESKTOP

HERO — MOBILE

MOBILE

EXPERIENCES GRID

CALENDAR — DESKTOP

MOBILE

EXPERIENCES PAGE

05 THE RESULT

Numbers that matter.

Brand work is hard to measure — unless you set up the right benchmarks before you start. With Meridian, we tracked three things: website conversion rate, investor meeting close rate, and MRR growth. All three moved.

+40%

Revenue growth within 60 days of the
new site going live

3.2x

Increase in demo booking rate from
the new homepage

$2M

Seed round closed within 6 weeks of
the rebrand launch

The site also won a Framer Community Spotlight, which drove an additional wave of inbound traffic in the first month — proving that when the design is genuinely good, it markets itself.