Hong Kong Association of Athletics Affiliates | Standard Chartered Hong Kong Marathon Website UX&UI Design & App Development

Project Overview

The Standard Chartered Hong Kong Marathon (SCHKM) is one of Hong Kong’s most iconic and largest annual sporting events, attracting tens of thousands of runners and members of the public each year. Beyond race day, the event involves extensive pre- and post-race operations, including runner registration, information dissemination, participant support, runner’s pack distribution, and post-event engagement. These critical processes rely heavily on a stable, efficient, and easily managed digital platform across multiple user touchpoints.

DigiSalad was commissioned to deliver a comprehensive digital upgrade for SCHKM, including a full revamp of the official website, alongside the design and development of a dedicated mobile application to support the race participation. Together, the website and mobile app provide runners with timely event information, registration support, and post-event engagement, while enabling organisers to manage large volumes of content and participant data efficiently.

By integrating the website and mobile app into a unified digital ecosystem, the solution ensures consistent information delivery, seamless user journeys, and operational flexibility throughout different stages of the event, supporting the scale and complexity of one of Hong Kong’s largest annual sporting events.

Challenges

The original official website of the Standard Chartered Hong Kong Marathon was no longer aligned with modern digital behaviours or user experience expectations. The homepage was text-heavy, lacked clear visual hierarchy and navigational guidance, and featured small typography with low-visibility call-to-action elements, making it difficult for users to identify key information or begin their journey.

Visually, the interface was constrained by rigid grid-based layouts and fixed image sizes, resulting in a dated and inflexible presentation. Key pages such as the Runner’s Guide and important announcements relied on minimal interaction cues with insufficient contrast and scale. The event photo gallery, although categorised by year, required multiple layers of navigation and displayed images in small thumbnails, reducing browsing efficiency and intuitiveness.

Beyond front-end experience issues, the platform lacked a comprehensive content management system (CMS). Content updates were handled manually, causing event information, announcements, and user-related content to be fragmented across the site and limiting scalability, data integration, and experience optimization.

At the same time, the SCHKM relied solely on its website as the primary digital touchpoint, without a dedicated mobile application. As smartphones became the dominant access point for users, this desktop-first setup restricted real-time access, convenience, and engagement across key moments of the event journey.

Starting in 2021, the project initiated a mobile-first digital transformation. We designed and developed a dedicated mobile application for the SCHKM, enabling real-time participation, live tracking, and instant access to race updates and official announcements—establishing a scalable foundation for subsequent experience design and execution.

Website Features 

UX & UI Design Enhancement ｜Content Structure Optimisation

The revamped website is built around clarity, readability, and efficient browsing, achieved through the seamless integration of UX and UI design, navigation structure, and content presentation. The interface is structured to help users quickly understand content priorities and locate key information such as race information, runner-related content, important notices, and event highlights, even when navigating information-rich pages.

A strong visual and informational hierarchy is established through refined typography, balanced white space, and modular layout design. Content is organised into clearly defined sections and structured layouts, allowing different types of information to be presented in the most appropriate format. On content-heavy pages such as “Race Information” and “Course Map”, key details—including schedules, locations, important notes, and arrangements—are systematically organised, enabling users to scan, compare, and absorb information efficiently without the fatigue of long-form text.

Navigation is supported by a consolidated menu positioned within the header, allowing users to access all major content categories through a single interaction. Clear visual indicators are used for expandable sections, helping users understand content depth and navigate through multi-layered information with confidence.

From a UI and visual design perspective, the website incorporates subtle motion graphics and controlled animation to enhance interaction flow. Smooth transitions between sections create a natural browsing rhythm, while flowing banners positioned within the mid and lower areas of the page are used to showcase event slogans and key messages without interrupting content readability. Geometric layout principles and consistent visual language are applied across pages, reinforcing a modern and cohesive design system.

A centrally positioned countdown timer on the homepage serves as a key visual anchor, clearly highlighting the upcoming marathon date. Its scale, placement, and visual weight are carefully balanced within the layout to draw attention without overpowering other primary content.

Overall, the website combines structured content organisation, intuitive navigation, and contemporary UI design to accommodate large volumes of information while maintaining high readability and ease of use. The result is a confident, user-friendly browsing experience suitable for users of different age groups and digital habits.

Mobile App Features 2026

End-to-End Mobile Experience Upgrade 

The mobile application serves as a key digital extension of the SCHKM, designed to support both runner experience and event operations. DigiSalad carefully considered how runners interact with information at different stages of the event and how mobile technology could streamline processes and improve operational efficiency.

The application allows runners to manage personal profiles, access race information, and remain connected before, during, and after the event. A core feature is the Runner’s pack collection arrangement, which enables runners to select their preferred collection date and time slot directly within the app. This helps runners plan ahead while assisting organisers in managing crowd flow and optimising on-site distribution.

To enhance engagement, the app supports race result sharing, allowing runners to easily share achievements with friends and family. A merchant reward programme is also integrated, enabling runners to redeem e-coupons through the app and extend the event experience beyond race day.

On the interactive side, the Cheering Banner feature allows supporters to create personalized encouragement messages that scroll across the screen when the phone is held horizontally, transforming mobile devices into digital cheering boards and adding vibrancy to the race-day atmosphere.

Overall, the mobile application balances practical functionality with interactive design, reflecting DigiSalad’s ability to align user experience with real-world operational needs.

Mobile App Features 2023 - 2026

Run Anytime, Anywhere

Both international and local runners are able to register and participate in the virtual run. Runners can choose their own path to satisfy the required distance. Each runner can take on a maximum of five attempts, each of them can be finished within 24 hours. More importantly, users may pause the run to take a break any time after the start time. They can also capture all the special moments in the run on the mobile phone camera and share them on social media.

Leaderboard 

There is a real-time leaderboard to show the current top 10 participants, including their time and distance, and other users will be encouraged to challenge them and break the record with the remaining attempts

E-certificate

After the completion, the runners can submit their best record to the system and or it will select the best record from the valid attempts and issue an e-certificate to the runners. They can view their e-certificate in the mobile app and receive it from email attachment.

Physical Marathon

After the pandemic, the physical Marathon came back. The app is enhanced and integrated with the membership system, which means all qualified participants can login the app through their simple verification flow. 

They can collect the runner’s pack by showing their own QR code. Before the competition, runners can even upload their RAT test results and vaccination record in the app so as to speed up the pre-registration process. What’s more, they can redeem their exclusive rewards by using the in-app coupons on the event day, and simplify the whole process.

DigiSalad’s Solution

Widget-based Centralized Content Management System

To address limitations in the legacy backend system, DigiSalad developed a widget-based, centralized Content Management System (CMS) tailored to the operational needs of the SCHKM. This centralized CMS allows administrators to manage both website and mobile app content within a single platform, ensuring consistency across digital touchpoints. The system enables administrators to control content—including text, images, page structures, and functional components—through an intuitive interface, without reliance on technical support for daily updates.

Administrators can freely add, remove, or rearrange content modules and adjust displayed content according to different event stages. For example, runner-related information can be prominently displayed during registration and pre-race periods, then hidden or modified after the event concludes. This level of flexibility ensures content remains aligned with the event timeline and operational requirements across both the website and app.

The modular, centralized CMS significantly improves backend efficiency, reduces maintenance costs, and provides a stable foundation for future scalability, supporting the long-term development of a large-scale annual event.

Social Platform Integration and QR Code Linking 

As part of the overall digital solution, DigiSalad integrated official social platform content into the revamped website. A dedicated section on the homepage displays synchronised updates from the event’s official Facebook page, allowing users to view real-time announcements and key highlights while browsing the website, or seamlessly access the official social platform for further engagement.

This integration streamlines content management for organisers by allowing information published on Facebook to be reflected directly on the website, ensuring consistency across channels while reducing duplicated update efforts.

In addition, DigiSalad introduced a QR code-based mobile application download feature, which was not available on the previous platform. When users browse the website on a desktop or tablet, they can simply scan the on-screen QR code with their mobile devices to access the app download page instantly. This design caters to modern mobile-first usage habits, eliminating the need to switch devices or manually search for the application, and significantly improving download convenience and adoption.

Data Integration and Migration
Given the scale of participant data and operational complexity, DigiSalad implemented comprehensive data management and reporting capabilities within the content management system, while also handling the secure migration of legacy website data to the new platform.

Data collected from both the official website and mobile application—including identification details, Runner’s pack collection time slots, T-shirt sizes, and other registration information—can be consolidated into structured reports for centralised review by event administrators. This integrated reporting mechanism is especially critical for Runner’s pack distribution, enabling accurate planning, reducing manual processing, and minimising operational risks.

The data migration process was carefully planned to ensure historical data was fully preserved and transferred without disrupting user experience. This stable foundation supports ongoing data analysis, informed decision-making, and long-term event management efficiency.

Conclusion

Through the integration of a website revamp, mobile application development, a flexible content management system, and comprehensive data management solutions, DigiSalad delivered a cohesive and forward-looking digital ecosystem for the SCHKM.

The solution not only enhanced information accessibility and engagement for runners and general users through the official website and mobile app, but also effectively supported the organiser’s operational needs across large-scale event planning and execution.

This project demonstrates DigiSalad’s expertise in CMS platform management and UX & UI design, system architecture planning, and digital solutions for major events. By establishing a stable, scalable, and future-ready platform, DigiSalad provided a solid digital foundation to support the long-term growth and continued evolution of the SCHKM.