Responsive Web Design / UX/UI

Lynn Valley Link Trail

A responsive redesign that transforms a text-heavy local trail website into a clearer, more inviting experience for discovering walks, route highlights, and trail-side stops.

This project reimagines Lynn Valley Link as a calmer, more structured digital experience that helps users choose a route quickly, understand what they will find along the way, and feel encouraged to explore in person.

Desktop + Mobile
Concept Redesign
Responsive Website

Lynn Valley Link desktop and mobile mockup

The original experience

From outdated blog to guided trail experience

The original site communicated useful information, but its blog-like structure made route discovery feel buried and harder to scan. The redesign focused on helping users make quicker decisions and feel more motivated to explore Lynn Valley both digitally and physically.

Screenshot of the original Lynn Valley Link website

Weak visual hierarchy

Dense layouts and long-form content made it harder to quickly understand where to go or what to do next.

Route discovery felt buried

The original experience did not support fast comparison between options, which reduced its usefulness for casual planners.

Less engaging for a new audience

The presentation felt more archival than inviting, which worked against the goal of motivating exploration.

Transformation

The redesign reframed the website as a decision-making tool, not just an information archive.

Original Lynn Valley Link website before redesign

Final responsive screens

A calmer, more structured browsing experience across desktop and mobile

Desktop mockup of Lynn Valley Link homepage — Desktop homepage designed as a decision hub for comparing routes, exploring highlights, and orienting users quickly.

Mobile mockup showing Lynn Valley Link route browsing — Mobile browsing optimized for quick route comparison and scanning on the go.

Mobile mockup showing Lynn Valley Link detail screen — Responsive detail view preserving hierarchy and readability on smaller screens.

Process

Early structure and content planning

Early hand-drawn wireframes helped define the core page structure, content hierarchy, and the relationship between route discovery, supporting information, and responsive layout decisions.

From there, the concept evolved into higher-fidelity desktop and mobile screens with a stronger visual rhythm, clearer hierarchy, and a more inviting tone.

What the process focused on

Improving route choice and clarity
Building a stronger mobile-to-desktop hierarchy
Creating a more nature-forward and engaging tone
Documenting type, contrast, and responsive decisions

Hand-drawn wireframe for Lynn Valley Link

Visual system

Typography, colour, and accessibility decisions supported the final interface

Type scale

A consistent hierarchy was established across desktop and mobile to support scanning, page rhythm, and readability.

Colour palette

The interface used a calm, nature-forward palette to align with the trail context while maintaining clarity.

Contrast checks

Colour combinations were evaluated to improve legibility and create a more accessible browsing experience.

Key design decisions

Three decisions shaped the redesign

Homepage as a decision hub

The homepage prioritized route choice and highlights rather than long explanation, helping users decide where to start faster.

Route cards as the main interaction

Route options were treated as the primary content pattern so users could compare choices at a glance.

Responsive clarity across devices

The information hierarchy was designed to translate cleanly from desktop to mobile without losing usability.

Outcome

Final Lynn Valley Link device mockup showcase

A clearer, more inviting digital entry point into Lynn Valley

The final concept transforms Lynn Valley Link into a more navigable and motivating experience, helping users choose a route, understand what they will find, and feel encouraged to explore in person.

← Previous project Next project →