Skyline Mountain Guides

Skyline Mountain Guides

Skyline Mountain Guides

A modern, scalable web experience and CMS solution for a premier mountaineering guide service.

A modern, scalable web experience and CMS solution for a premier mountaineering guide service.

DURATION

DURATION

3 Months

3 Months

My Role

My Role

UX/UI Designer

UX/UI Designer

Framer Developer

Framer Developer

Tools

Tools

Figma

Figma

Framer / CMS

Framer / CMS

Abobe Illustrator

Abobe Illustrator

Abobe Photoshop

Abobe Photoshop

Flybook

Flybook

React

React

WordPress

WordPress

Website Design

Website Design

CMS

CMS

Content Strategy

Content Strategy

PROJECT OVERVIEW

Skyline Mountain Guides needed a complete redesign of their outdated WordPress site. I led the rebuild in Framer, introducing a robust CMS, scalable trip templates, and integrated real-time booking via Flybook.

Skyline Mountain Guides needed a complete redesign of their outdated WordPress site. I led the rebuild in Framer, introducing a robust CMS, scalable trip templates, and integrated real-time booking via Flybook.

Impact at a glance

665%

increase in completed bookings.

Days

Minutes

Trip creation time reduced from days to minutes.

68

Scaled trip offerings from 3 → 68 (and counting).

85%

85% reduction in support emails.

The Challenge

The existing WordPress site was inflexible, not scalable, and booking was difficult to find. Trip creation required manual layout each time.

The existing WordPress site was inflexible, not scalable, and booking was difficult to find. Trip creation required manual layout each time.

An easier way to manage content

Seamless booking with real-time availability

A scalable trip architecture

A site that visually reflects their high-touch, premium service

Design Solution Overview
Design Solution

Before

Problem

Lacked visual hierarchy, clear CTAs, and storytelling. Trips were hard to browse, and users had to dig to find the right experience, hurting engagement and conversion.

After

Solution

Rebuilt with full-bleed imagery, dynamic trip filtering, and streamlined booking flows. Users can now discover and commit to adventures with ease.

Problem

There was no way to browse or filter trips directly. Users had to dig through unrelated pages, slowing down discovery and booking momentum.

Solution

Built an interactive category selector that updates the carousel live, making exploration seamless and reducing friction to conversion.

Solution

Built an interactive category selector that updates the carousel live, making exploration seamless and reducing friction to conversion.

Before

Problem

Trip details were minimal, and users had to contact the company to learn more or book. This caused confusion about what was offered and when, leading to drop-off.

After

Solution

CMS-driven trip pages that clearly outline each offering, (pricing, itinerary, availability). Users can make informed decisions faster, the company can scale listings with ease.

Full Case study reading time: 8 minutes

Full Case study reading time: 8 minutes

The Problem

Skyline’s original site wasn’t keeping up with the demand.

Skyline’s original site wasn’t keeping up with the demand.

Skyline Mountain Guides was expanding rapidly. But their existing website was outdated, hard to update, and lacked the flexibility to support their growing catalog of high-end trips. The booking experience wasn’t aligned with the brand’s premium feel or user expectations.

Skyline Mountain Guides was expanding rapidly. But their existing website was outdated, hard to update, and lacked the flexibility to support their growing catalog of high-end trips. The booking experience wasn’t aligned with the brand’s premium feel or user expectations.

Modern, scalable web experience that could grow with them and convert visitors into booked trips.

Static site limited scalability

  • The old site only supported 3 trip offerings

  • Adding new trips required custom dev time manual page creation

Booking experience was disconnected

  • Users were booking trips though support emails

  • No clear pathways for fildering or browsing difffernt types of trips

Customer confusion led to admin overhead

  • Repetitive questions were flooding their inbox

  • 85% of support emails were from users unclear about trip logistics or booking steps

no support for business growth

  • Admin had no flexibility to test promotions, manage abandoned carts, or track performance

  • No way to elegantly show groups vs. private trips

Understanding the Users

A closer look at users distinct goals, tech comfort levels, and motivations:

A closer look at users distinct goals, tech comfort levels, and motivations:

Key User Personas

Weekend Warrior

Weekend Warrior

Wants a high-adventure experience, quick trip comparison, and easy mobile checkout.

Mountaineering Novice

Mountaineering Novice

Needs guidance, gear info, and reassurance. Typically browses multiple formats before booking.

Returning Client

Returning Client

Knows the guides and favorites. Wants faster filtering and trusted Flybook checkout.

Accessibility + Cognitive Load Considerations

  1. Bold, clear calls to action and smart defaults

  1. Direct, no-nonsense trip overview content

  1. Navigation and trip taxonomy built around location, format, and type for fast filtering

Shaping the Design Objective

Framer

Framer

A modern, mobile-first website aligned with the brand’s Pacific Northwest aesthetic

A modern, mobile-first website aligned with the brand’s Pacific Northwest aesthetic

CMS

CMS

A scalable CMS that allowed them to manage 60+ trips with ease

A scalable CMS that allowed them to manage 60+ trips with ease

Flybook

Flybook

Booking powered by quality booking software, with deep-linking to specific offerings

Booking powered by quality booking software, with deep-linking to specific offerings

Future Expansion

Future Expansion

A content model that allowed for future expansion: guides, gear lists, shop, etc.

A content model that allowed for future expansion: guides, gear lists, shop, etc.

Design Goal

Design Goal

How can the website reflect Skyline's premium brand while remaining approachable, educational, and performance-ready?

How can the website reflect Skyline's premium brand while remaining approachable, educational, and performance-ready?

  • Showcase the scale and wonder of Skyline's guided trips

  • Support discoverability and filtering for over 30+ trips

  • Keep the booking process simple and consistent

  • Highlight Skyline's values of safety, fun, and inclusivity

  • Be easy for non-technical staff to update via Framer CMS

My Approach

I kicked off with a heuristic audit to identify usability gaps and found 3 key problem insights

I kicked off with a heuristic audit to identify usability gaps and found 3 key problem insights

Heuristic Evaluation

No CMS structure → every trip was hard-coded

No CMS structure → every trip was hard-coded

Admins had to manually update content, making it impossible to scale their offerings. It also meant users couldn’t filter or browse trips in any meaningful way.

Admins had to manually update content, making it impossible to scale their offerings. It also meant users couldn’t filter or browse trips in any meaningful way.

No filtering system or structure for types/regions/formats

No filtering system or structure for types/regions/formats

Users dropped off without finding the trip they wanted, or emailed the team with repetitive questions.

Users dropped off without finding the trip they wanted, or emailed the team with repetitive questions.

Weak visual identity for a premium brand

Weak visual identity for a premium brand

The booking journey felt disjointed and untrustworthy—especially for high-ticket custom trips.

The booking journey felt disjointed and untrustworthy—especially for high-ticket custom trips.

Secondary Research

To solve, I analyzed high-performing patterns from sites that excelled in addressing similar usability problems

To solve, I analyzed high-performing patterns from sites that excelled in addressing similar usability problems

Competetor Analysis

Beautiful, cinematic homepage with immersive full-width video and photography immediately communicates brand prestige and adventure.

Beautiful, cinematic homepage with immersive full-width video and photography immediately communicates brand prestige and adventure.

Thoughtfully designed UI with consistent typography, iconography, and page structure makes for a clear, seamless browsing experience.

Thoughtfully designed UI with consistent typography, iconography, and page structure makes for a clear, seamless browsing experience.

Comprehensive descriptions, packing lists, and FAQs build trust and help users feel prepared and confident in their booking decisions.

Comprehensive descriptions, packing lists, and FAQs build trust and help users feel prepared and confident in their booking decisions.

Rapid Ideation

Insights from landscape research guided concept sketching, shaping landing navigation and trip pages.

Insights from landscape research guided concept sketching, shaping landing navigation and trip pages.

Using the Crazy 8s method, I rapidly ideated on key problem areas using insights gained form high performing usability patterns found in landscape research. The strongest sketches informed the site’s core navigation and onboarding flow.

Rapid Sketching

User Flow

Old Trip Discovery & Booking Flow (3 Trips, 0% Direct Bookings)

Old Trip Discovery & Booking Flow (3 Trips, 0% Direct Bookings)

Original trip discovery flow

Skyline’s old site only listed 3 trips with no categories or filters. Users couldn’t easily explore options, and booking required filling out a generic contact form, slowing down conversion and creating friction.

Skyline’s old site only listed 3 trips with no categories or filters. Users couldn’t easily explore options, and booking required filling out a generic contact form, slowing down conversion and creating friction.

New signup user flow

New flow supports 68+ trips and scalable discovery. introduced a scalable trip library powered by CMS and Flybook integration. Users can now explore, filter, and book directly online or inquire instantly with one click.

New flow supports 68+ trips and scalable discovery. introduced a scalable trip library powered by CMS and Flybook integration. Users can now explore, filter, and book directly online or inquire instantly with one click.

Wireframes

Sketches and userflow shaped wireframes architecture

Sketches and userflow shaped wireframes architecture

lo-med fidelity wireframes

Reusable CMS layout blocks for trip detail pages

Problem

Skyline wanted a way to add or remove trips over time without needing to manually design each new page from scratch. With complex offerings across regions, trip types, and formats, consistency and flexibility were key.

Skyline wanted a way to add or remove trips over time without needing to manually design each new page from scratch. With complex offerings across regions, trip types, and formats, consistency and flexibility were key.

Solution

I created a reusable CMS-driven wireframe system for trip pages, including modules for trip overview, details, itinerary, FAQs, and a booking panel with pricing, dates, and a persistent Book Now / Inquire button. This modular setup ensured consistency, scalability, and ease of updates across all trip types.

I created a reusable CMS-driven wireframe system for trip pages, including modules for trip overview, details, itinerary, FAQs, and a booking panel with pricing, dates, and a persistent Book Now / Inquire button. This modular setup ensured consistency, scalability, and ease of updates across all trip types.

Custom Built Trip Filtering System

Problem

With dozens of trips offered across multiple formats, locations, and activity types, users had no clear way to browse or narrow options, leading to overwhelm and drop-off.

With dozens of trips offered across multiple formats, locations, and activity types, users had no clear way to browse or narrow options, leading to overwhelm and drop-off.

Solution

I introduced a flexible filtering system that lets users sort trips by format, location, and type, making it easier to discover relevant trips fast and stay engaged.

I introduced a flexible filtering system that lets users sort trips by format, location, and type, making it easier to discover relevant trips fast and stay engaged.

Design system Foundations

Designed to reflect Skyline’s expertise and brand values while guiding users clearly toward booking their next adventure.

Designed to reflect Skyline’s expertise and brand values while guiding users clearly toward booking their next adventure.

Setting the Tone: Bold, Elevated, and Natural

Atomic Design System

High Fidenlity Wireframes

Designing for clarity, efficiency, and booking confidence.

Designing for clarity, efficiency, and booking confidence.

Immediate trip comprehension (skill level, duration, elevation gain)

Immediate trip comprehension (skill level, duration, elevation gain)

Fast path to booking (CTA visibility across all devices)

Fast path to booking (CTA visibility across all devices)

Long-form storytelling (itinerary, gear list, images, FAQs)

Long-form storytelling (itinerary, gear list, images, FAQs)

Scalable CMS structure that allows the team to add new trips in minutes

Scalable CMS structure that allows the team to add new trips in minutes

Usability Testing Insights
Usability Testing

Identifying Friction and Streamlining the Handoff to Flybook

Identifying Friction and Streamlining the Handoff to Flybook

Booking Flow Breakdown

Problem

Each trip in Flybook was split into separate entries for private and group formats, but our site presented them as one trip. This disconnect forced users to start their booking over after landing in Flybook, disrupting momentum and increasing drop-off.

Each trip in Flybook was split into separate entries for private and group formats, but our site presented them as one trip. This disconnect forced users to start their booking over after landing in Flybook, disrupting momentum and increasing drop-off.

The "Book Now" button redirected to Flybook’s general trip list, not the specific trip the user was reading about.

Solution

A custom built React code component was required to dynamically detect which Flybook URLs (private, group, or both) exist for a trip and shows the appropriate button options. If only one exists, it opens directly. If both exist, a modal prompts users to choose.

A custom built React code component was required to dynamically detect which Flybook URLs (private, group, or both) exist for a trip and shows the appropriate button options. If only one exists, it opens directly. If both exist, a modal prompts users to choose.

This fix aligned our design with user expectations and helped ensure smoother transitions into booking, increasing clarity and trust.

Outcomes & Reflection

Small-group testing showed the elimination of onboarding drop-offs, indicating the flow better accommodates users’ cognitive load and supports successful task completion.

Small-group testing showed the elimination of onboarding drop-offs, indicating the flow better accommodates users’ cognitive load and supports successful task completion.

Outcomes

What Changed

What Changed

A flexible, high-end experience, with CMS and custom React components, a fast, scalable platform that aligned with the brand and unlocked advanced functionality without compromising design.

A flexible, high-end experience, with CMS and custom React components, a fast, scalable platform that aligned with the brand and unlocked advanced functionality without compromising design.

How It Was Solved

How It Was Solved

Built custom code components to dynamically display trip data and booking options, integrated Flybook links for clarity, and enhanced Framers CMS so non-technical team members could still manage content.

Built custom code components to dynamically display trip data and booking options, integrated Flybook links for clarity, and enhanced Framers CMS so non-technical team members could still manage content.

User Results

User Results

Users can now instantly filter trips, clearly understand booking types, and move through the site with confidence. Booking is faster, easier, and more intuitive.

Users can now instantly filter trips, clearly understand booking types, and move through the site with confidence. Booking is faster, easier, and more intuitive.

Company Benefit

Company Benefit

The team can manage trips in-house with less admin work. Bookings are more seamless, and the digital experience finally reflects the premium quality of their services.

The team can manage trips in-house with less admin work. Bookings are more seamless, and the digital experience finally reflects the premium quality of their services.

Reflection

This project stretched my ability to bridge design with technical constraints. Framer’s CMS had many limitations due to its still-growing product, so I leaned into custom code components to bring our vision to life. The tradeoff was a slightly steeper learning curve for the client, requiring more documentation and walkthroughs to help them confidently input data into the custom CMS fields. But in the end, the added flexibility delivered a more powerful and seamless experience.

This project stretched my ability to bridge design with technical constraints. Framer’s CMS had many limitations due to its still-growing product, so I leaned into custom code components to bring our vision to life. The tradeoff was a slightly steeper learning curve for the client, requiring more documentation and walkthroughs to help them confidently input data into the custom CMS fields. But in the end, the added flexibility delivered a more powerful and seamless experience.