Building a multi-site experience for London Marathon Events

DEPT® kicked off the project with workshops, competitor research, stakeholder interviews, and analysis of sitemaps, data and use of technology. This Discovery phase was key to gaining a deep understanding of LME’s technical infrastructure, how the business is set up operationally, and how it engages users. The project was kicked off with the London Marathon website; the first to be designed and built on the multi-site platform.

Personas for the London Marathon were created to replicate the needs of each user, falling into one of the following categories: Participants; Charities; Sponsors; Spectators/Fans; Residents, and Internal Users. Flushing out motivations, triggers and requirements allowed us to pinpoint pain points in performance and unleash opportunities to engage its diverse user base. 

To put our thought process into action, we defined the functional specification and created a blueprint outlining the system’s architecture, mapping customers journeys and third-party integrations. Once we had all of the requirements identified, our teams crafted a detailed project plan and began putting the pieces together. 

The new London Marathon website was built on Sitecore Experience Platform 9.3, providing the building blocks for a complex, bespoke solution. We wanted to deliver a solution to not only meets the needs of the organisation today, but one that will evolve with the organisation in the future:

• A multi-site structure was built in the Microsoft .NET framework. DEPT® developers followed Sitecore Helix practices and conventions, based on modular architecture (a.k.a. package design), to manage associated websites effectively within one solution. The London Marathon website was standardised so that subsequent websites can easily be rolled out with a recognisable look and feel carried out throughout. This simplifies content delivery and website management while maintaining different domains. Furthermore, as a central hub controls each website, all data is captured and stored in one spot making it easier to digest and react to analytics.

• Configuring a headless CMS means LME has the flexibility to change how the website looks, where content is placed, and how it appears on different devices, all without needing any development support. The codebase is in a separate application, therefore content managers and developers can work simultaneously while the website is live without interfering with each other. It’s a quicker-to-market solution and more manageable for content-heavy organisations. With goals to expand content creation to engage audiences outside of peak seasons, a headless solution is perfect for LME’s needs.

• Sitecore’s powerful personalisation capabilities take customer experiences to the next level. With such a mix of diverse users visiting the websites for various reasons, we wanted to create a relevant online experience for all, ensuring users find the information they need, whether it’s related to a media enquiry or entry deadlines. We used a JavaScript Services (JSS) front-end approach, to enable the decoupling of the front-end to create a headless solution that can support Sitecore’s personalisation capabilities.

• The website components were built within the React front-end framework. The library of JSS components presents the content, while the technical framework behind it captures data from user interactions to fuel an adaptive personalisation strategy; learning from common search enquiries and behavioural patterns to create a dynamic user experience. We’re thinking ahead, as this will enable LME to not only capture online interactions, but can also feed into mobile apps, retail kiosks, wearable devices, chatbots, connected home devices, and many other channels.

Accessibility was a top priority throughout the website design and development. The final solution excels AA levels of accessibility, and ensures the digital experience is optimised for all users. The inclusive website is accommodating for people with permanent disabilities, as well as situational limitations. 

When designing the website, DEPT®’s creative team pulled brand concepts created a couple of months prior, as part of the London Marathon brand refresh, which introduced new brand patterns and secondary colour palettes. We turned to online generators to test colours; how they display in foreground and background with variations of font sizes. Taking into account the spectrum of colour blindness, ratios were set to improve colour contrast sitewide in line with high accessibility standards. Newer technologies, such as CSS grid and CSS/HTML features, were used to create reusable components that are accessible and can be held within a responsive design. This includes four different types of carousels. 

In the code, DEPT® developers adhered to a set of semantic markup rules to help screen readers and assistive technology software to interpret the content. All existing content was optimised and a new process was put in place; as content is added in the CMS, LME can add key information such as Alt tags to images and subtitles or captions to videos or motion graphics. The coding techniques used enables users to skip links, sectioning and tab control, allowing users to jump past decorative elements for more streamlined navigation.

DEPT® built a website for the London Marathon that gives LME more control over its digital presence. The Sitecore Experience Platform provides far more than just content management; it has the functionality to alter the website design to reflect campaigns and key messages, all while providing key user insights. The website tightens communications with charity partners, giving them access to edit key details on the website and visibility into analytics associated with their digital advertising. Ultimately, the website has improved the digital experience for all visitors with advanced personalisation and accessibility.

We created a platform for the future. As the organisation looks to explore emerging technology, it has access to all of the Sitecore updates without needing to re-platform. We’ve used common terminology for solution architecture, making Sitecore implementations more discoverable for current and future developers, decreasing the cost to alter the solution, helping to reduce technical debt, and adding more value to customers. The website is hosted on Sitecore Managed Cloud to provide the best practice Sitecore infrastructure on Azure.

DEPT®’s partnership with LME will continue, with the releases of further  individual event websites. Plans are also in place to update its registration system, which will be a robust solution integrated into the Sitecore built.