Coastal Trail Challenge
2022
Website designed to promote coastal activities in Hong Kong.
A digital platform designed to support the Coastal Trail Challenge—a campaign promoting healthy, sustainable living through outdoor exploration. The website clearly presents event details and guides users seamlessly toward registration.
Website Objectives
Website Objectives
Website
Objectives
Objectives
Website Objectives
1st
1st
1st
Provide Event Information
Provide Event Information
Provide Event Information
2nd
2nd
2nd
Guides Users to Registration
Guides Users to Registration
Guides Users to Registration
3rd
3rd
3rd
Introduces Hiking Routes
Introduces Hiking Routes
Introduces Hiking Routes
Design Approaches
Design Approaches
Design Approaches
Design Approaches
Energetic & Healthy Visuals
Energetic & Healthy Visuals
Energetic & Healthy Visuals
Simple Information Architecture
Simple Information Architecture
Simple Information Architecture
Prominent and easy-access CTA
Prominent and easy-access CTA
Prominent and easy-access CTA
Challenges
Challenges
Challenges
Challenges
Extensive Amount of Text Information
Extensive Amount of Text Information
Extensive Amount of Text Information
A lot of Events’ Photos from Clients
A lot of Events’ Photos from Clients
A lot of Events’ Photos from Clients
A lot of Sponsorship Logos
A lot of Sponsorship Logos
A lot of Sponsorship Logos
Targets
Targets
Targets
Targets
Weekend Explorer
Weekend Explorer
Weekend Explorer
Loves discovering new hiking and running routes around Hong Kong with family.
Loves discovering new hiking and running routes around Hong Kong with family.
Loves discovering new hiking and running routes around Hong Kong with family.
Trail Running Enthusiast
Trail Running Enthusiast
Trail Running Enthusiast
Passionate outdoor challenges, aims to win trail running competitions.
Passionate outdoor challenges, aims to win trail running competitions.
Passionate outdoor challenges, aims to win trail running competitions.
Typography
Typography
Typography
Proxima Nova
Proxima Nova
Proxima Nova
Proxima Nova
The font family is used to create a modern, clean, and approachable feel, complementing the website’s energetic and sporty vibe. Its versatility ensures clarity and consistency across different sections, enhancing readability while maintaining a sleek, professional look.
The font family is used to create a modern, clean, and approachable feel, complementing the website’s energetic and sporty vibe. Its versatility ensures clarity and consistency across different sections, enhancing readability while maintaining a sleek, professional look.
The font family is used to create a modern, clean, and approachable feel, complementing the website’s energetic and sporty vibe. Its versatility ensures clarity and consistency across different sections, enhancing readability while maintaining a sleek, professional look.
Extra Bold
Extra Bold
Extra Bold
Extra Bold
Bold
Bold
Bold
Bold
Semibold
Semibold
Semibold
Semibold
Regular
Regular
Regular
Regular
Light
Light
Light
Light
Thin
Thin
Thin
Thin
Colours
The colour palette is designed to evoke a sense of energy, vitality, and adventure, creating an upbeat, exciting, and active atmosphere. It balances calming tones with vibrant accents, reflecting the dynamic and joyful spirit of outdoor exploration and healthy living.
Colours
The colour palette is designed to evoke a sense of energy, vitality, and adventure, creating an upbeat, exciting, and active atmosphere. It balances calming tones with vibrant accents, reflecting the dynamic and joyful spirit of outdoor exploration and healthy living.
Colours
The colour palette is designed to evoke a sense of energy, vitality, and adventure, creating an upbeat, exciting, and active atmosphere. It balances calming tones with vibrant accents, reflecting the dynamic and joyful spirit of outdoor exploration and healthy living.
Colours
The colour palette is designed to evoke a sense of energy, vitality, and adventure, creating an upbeat, exciting, and active atmosphere. It balances calming tones with vibrant accents, reflecting the dynamic and joyful spirit of outdoor exploration and healthy living.
Energy
Energy
Energy
Energy
#0076C0
#0076C0
#0076C0
0, 121, 199
0, 121, 199
0, 121, 199
Vitality
Vitality
Vitality
Vitality
#00A9E7
#00A9E7
#00A9E7
0, 167, 229
0, 167, 229
0, 167, 229
Adventure
Adventure
Adventure
Adventure
#F47F20
#F47F20
#F47F20
242, 127, 32
242, 127, 32
242, 127, 32
Wireframe
Wireframe
Wireframe
To Make Things Clear
To Make Things Clear
To Make Things Clear
To Make Things Clear
Sticking to the core of promoting outdoor events, the homepage presents all essential event info right up front: starting with a concise header, a strong hero image, and a short intro. Users are then clearly directed to two paths—Leisure or Racing—based on their interests. Hovering reveals a brief description and a “Learn More” button for easy access.
Sticking to the core of promoting outdoor events, the homepage presents all essential event info right up front: starting with a concise header, a strong hero image, and a short intro. Users are then clearly directed to two paths—Leisure or Racing—based on their interests. Hovering reveals a brief description and a “Learn More” button for easy access.
Sticking to the core of promoting outdoor events, the homepage presents all essential event info right up front: starting with a concise header, a strong hero image, and a short intro. Users are then clearly directed to two paths—Leisure or Racing—based on their interests. Hovering reveals a brief description and a “Learn More” button for easy access.
Desktop
1920px | 6-Coloum
This full-width design ensures a clean, structured look while maximizing visual impact and maintaining consistency.
Desktop
1920px | 6-Coloum
This full-width design ensures a clean, structured look while maximizing visual impact and maintaining consistency.
Desktop
1920px | 6-Coloum
This full-width design ensures a clean, structured look while maximizing visual impact and maintaining consistency.
Hero Image
Comes with basic info.
Hero Image
Comes with basic info.
Hero Image
Comes with basic info.
Desktop 1920px
Desktop 1920px
Information Architecture
Information Architecture
Information Architecture
To Make Journey More Efficient
To Make Journey More Efficient
To Make Journey More Efficient
The ultimate goal of the website is to guide users to register via an external platform supported by our partner, TrailWatch. To ensure visibility, the “Register” button remains fixed in the header and is prominently featured across all primary pages.
The ultimate goal of the website is to guide users to register via an external platform supported by our partner, TrailWatch. To ensure visibility, the “Register” button remains fixed in the header and is prominently featured across all primary pages.
The ultimate goal of the website is to guide users to register via an external platform supported by our partner, TrailWatch. To ensure visibility, the “Register” button remains fixed in the header and is prominently featured across all primary pages.
Ideal User Flow
Ideal User Flow
Ideal User Flow
Explore
Explore
Explore
Explore
The user lands on the Home Page to check out CTC.
The user lands on the Home Page to check out CTC.
The user lands on the Home Page to check out CTC.
Learn
Learn
Learn
Learn
They navigate to either the Leisure or Racing page to explore event details.
They navigate to either the Leisure or Racing page to explore event details.
They navigate to either the Leisure or Racing page to explore event details.
Act
Act
Act
Act
Excited to join, the user clicks the prominent Register CTA button, leading them to TrailWatch to sign up.
Excited to join, the user clicks the prominent Register CTA button, leading them to TrailWatch to sign up.
Excited to join, the user clicks the prominent Register CTA button, leading them to TrailWatch to sign up.
Rather than separating content by Rules and Routes, the site prioritizes Leisure and Racing categories. This approach allows users to quickly identify where they belong and dive directly into relevant information.
Rather than separating content by Rules and Routes, the site prioritizes Leisure and Racing categories. This approach allows users to quickly identify where they belong and dive directly into relevant information.
Rather than separating content by Rules and Routes, the site prioritizes Leisure and Racing categories. This approach allows users to quickly identify where they belong and dive directly into relevant information.
Client's Suggestions
Client's Suggestions
Client's Suggestions
Rules
Rules
Rules
Lesiure
Lesiure
Racing
Racing
Routes
Routes
Routes
Lesiure
Lesiure
Racing
Racing
Price
Price
Price
Lesiure
Lesiure
Racing
Racing
My Suggestions
My Suggestions
My Suggestions
Racing
Racing
Racing
Rules
Rules
Price
Price
Routes
Routes
Leisure
Leisure
Leisure
Rules
Rules
Price
Price
Routes
Routes
To Keep it Engaging & Clutterless
To Keep it Engaging & Clutterless
To Keep it Engaging & Clutterless
Instead of a flat list of route details, the site uses an interactive map. Hovering over a route highlights its section and name, while clicking opens a modal with complete info. For mobile, an accordion design replaces the hover interaction to maintain a clean interface while keeping content accessible and well-structured.
Instead of a flat list of route details, the site uses an interactive map. Hovering over a route highlights its section and name, while clicking opens a modal with complete info. For mobile, an accordion design replaces the hover interaction to maintain a clean interface while keeping content accessible and well-structured.
Instead of a flat list of route details, the site uses an interactive map. Hovering over a route highlights its section and name, while clicking opens a modal with complete info. For mobile, an accordion design replaces the hover interaction to maintain a clean interface while keeping content accessible and well-structured.
Desktop
Desktop
Desktop
Desktop
Hover
Hover
Hover
Click
Click
Click
Laptop
Laptop
Laptop
Laptop
Default
Default
Default
Click
Click
Click
To Maximise Flexibility & Usability
To Maximise Flexibility & Usability
To Maximise Flexibility & Usability
Laptop
Laptop
Laptop
Laptop
Header
Header
Header
A bright orange CTA button for external registration stays fixed at the top right, always visible and easy to spot.
A bright orange CTA button for external registration stays fixed at the top right, always visible and easy to spot.
A bright orange CTA button for external registration stays fixed at the top right, always visible and easy to spot.
Tabs
Tabs
Tabs
Long pages are segmented with top tabs, helping users jump straight to the content they’re interested in.
Long pages are segmented with top tabs, helping users jump straight to the content they’re interested in.
Long pages are segmented with top tabs, helping users jump straight to the content they’re interested in.
Bottom
Buttons
Bottom
Buttons
Bottom
Buttons
Key pages feature “Back to Top,” “Register,” and related links at the bottom, promoting smooth site exploration.
Key pages feature “Back to Top,” “Register,” and related links at the bottom, promoting smooth site exploration.
Key pages feature “Back to Top,” “Register,” and related links at the bottom, promoting smooth site exploration.
Footer
Footer
Footer
A clean footer with logo, contact info, and social media links ensures consistent navigation.
A clean footer with logo, contact info, and social media links ensures consistent navigation.
Results
Results
Results
Since its launch in December 2022, the Coastal Trail Challenge website has become the digital hub for Hong Kong’s annual 65km trail event.
Since its launch in December 2022, the Coastal Trail Challenge website has become the digital hub for Hong Kong’s annual 65km trail event.
Since its launch in December 2022, the Coastal Trail Challenge website has become the digital hub for Hong Kong’s annual 65km trail event.
Since its launch in December 2022, the Coastal Trail Challenge website has become the digital hub for Hong Kong’s annual 65km trail event.
Supporting over 2,600 total participants across three event years, by helping them register, navigate route information, and engage with the event.
Supporting over 2,600 total participants across three event years, by helping them register, navigate route information, and engage with the event.
Supporting over 2,600 total participants across three event years, by helping them register, navigate route information, and engage with the event.
1,200+
1,200+
1,200+
participants in 6mths
(after launching in Dec 2022)
(after launching in Dec 2022)
participants in 6mths
(after launching in Dec 2022)
(after launching in Dec 2022)
participants in 6mths
(after launching in Dec 2022)
(after launching in Dec 2022)
participants in 6mths
(after launching in Dec 2022)
(after launching in Dec 2022)
See Other UX/UI Projects
See Other UX/UI Projects
TUNG WEBSITE
Website design for a ceramic studio.
View
TUNG WEBSITE
Website design for a ceramic studio.
View
TUNG WEBSITE
Website design for a ceramic studio.
View
TUNG WEBSITE
Website design for a ceramic studio.
View
SUSTAINABLE CAMPUS CONSUMER PROGRAMME
A lunchbox borrowing & returning system in universities' campus.
View
SUSTAINABLE CAMPUS CONSUMER PROGRAMME
A lunchbox borrowing & returning system in universities' campus.
View
SUSTAINABLE CAMPUS CONSUMER PROGRAMME
A lunchbox borrowing & returning system in universities' campus.
View
SUSTAINABLE CAMPUS CONSUMER PROGRAMME
A lunchbox borrowing & returning system in universities' campus.
View
CLICKASNAP
Website redesign for a photo-sharing platform.
View
CLICKASNAP
Website redesign for a photo-sharing platform.
View
CLICKASNAP
Website redesign for a photo-sharing platform.
View
CLICKASNAP
Website redesign for a photo-sharing platform.
View