London Marathon Events
A brand refresh for the world’s greatest marathon
London Marathon Events (LME) organises world-leading mass participation events in running, cycling and swimming that inspire more than 200,000 participants every year. As part of a major branding and digital improvement project, LME turned to Dept to refresh the branding for the company and all its events to create a distinct personality that embodies its core values, and to develop a technical solution to centralise its digital touchpoints.
London Marathon Events’ branding has evolved organically over time, as new events were added to its portfolio, participant numbers increased, and sponsors and partners came on board. Its brand presence was cyclical, running in peaks and troughs throughout the year in line with its event calendar. There was a need to connect the dots across this cycle to develop a stronger presence throughout the whole year, and not just in the lead-up to its events.
LME brings remarkable people together and celebrates personal achievements that defy all odds. In the first phase of work, the brand refresh for the London Marathon, LME’s flagship event, our team took inspiration from this joint sense of achievement shared among its community.
The London Marathon, the most prestigious of LME’s events, is just the beginning of our work with LME. Our team became inspired by all of the events and activities organised by London Marathon Events and aspired to visually communicate the vibrancy of the company and its vision and work.
Fresh visual branding
The London Marathon interacts with millions of diverse people. We selected a photography style that captures their inspiring moments, from the intensity of crossing the finish line to the journey of past, present an future athletes. The London Marathon is not just for elite athletes; its community comprises people of all abilities from all corners of the world. Their stories are told through authentic images that put people and emotion at the heart of the message, allowing onlookers to not only visualise the events, but also share in the emotion of the experience.
Colour is a big part of LME’s branding for the London Marathon. The distinctive red colour remains core to London Marathon, while a vibrant and versatile secondary palette has been introduced. Bringing high-energy, these secondary colours are to be used sparingly and are best placed in pairs for full effect. Gradients were also recommended to bring themes together in a natural and well-balanced way.
Custom patterns were created, giving depth to the London Marathon brand with exciting visual elements. Dept designers digitally stitched a unique set of geometric designs to represent the ground the athletes run on, the landmarks they see en-route, and the thousands of steps they take to the finish line. For example, lines were placed at a 26.2 degree angle, which exactly matches the mileage of the London Marathon.
Recreating brand guidelines
To blend creative components and ensure the longevity of the design, Dept created an in-depth design rulebook. It includes all of the dimensions and ratios for website images with how-to information. A ‘cutout’ approach is one of our recommendations, easily achieved by selecting an impactful photo from the storage library, removing the background and replacing it with one of the custom patterns.
An artistic representation of the marathon experience
A dynamic brand, designed for the future
Dept’s creative team worked with LME to design a dynamic, scalable and future-ready brand for the London Marathon.
The introduction of statement patterns, a vivid colour palette, clear typefaces and a branded photography style has revived the London Marathon’s identity and achieved coherence across its entire brand estate.
The London Marathon branding was the launchpad for Dept’s partnership with LME. Our design, UX and development teams are now involved in plans to create seven new websites for the parent organisation and each of its events: London Marathon Events; The Vitality Big Half; the Vitality London 10,000; the Vitality Westminster Mile; the Standard Chartered Great City Race; RideLondon, and Children with Cancer UK Swim Serpentine. Keep your eyes peeled for the sleek digital implementation of this visual brand identity.
London Marathon Events
Building a multi-site Sitecore experience
London Marathon Events (LME) organises world-leading mass participation events in running, cycling and swimming that inspire more than 200,000 participants every year. Its portfolio of world-class events includes the Virgin Money London Marathon, the world’s greatest marathon, and RideLondon, the world’s greatest festival of cycling. Previously, each of these events had its own website and LME recognised the need to develop a centralised approach to its content management. LME appointed Dept to build a bespoke technical solution to consolidate the organisation’s digital estate.
A deep dive into the organisation
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.
A Sitecore solution
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.
- 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.
Winning the race with technology
A scalable solution
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.
Van Gogh Museum
Step into the extraordinary
More and more individuals are shifting towards digital channels to accomplish any and everything. Seeing this shift, the Van Gogh Museum understood that it needed to elevate its digital presence and ensure it was accessible to everyone. So they asked Dept to turn their existing website into a work of art.
Designing a new website worthy of Van Gogh’s art
The iconic Van Gogh Museum in Amsterdam, dedicated to displaying the works of Vincent van Gogh, is one of the most important museums in the Netherlands. With over 200 paintings, 400 drawings, and 700 letters by the artist, it’s the largest Van Gogh collection in the world. To meet the demands of the digital world, the museum has partnered with Dept for the last two years. Together, we have created a new visual identity for the museum and developed the Unravel Van Gogh mobile app. But it was time to take it up a notch and design a new website worthy of Van Gogh’s art.
When you think of Van Gogh, colourful sceneries come to mind. So this was our starting point. We wanted the website to resonate with the user and leave an impression while, at the same time, being modest and simple in appearance. So, to kick off our design process, we started with an analysis which would enable us to make concrete recommendations for the museum’s future website. We researched the user journey and delved into any challenges they may face while browsing the current website, paying special attention to any difficulties those with a disability may encounter.
Behind the brushstrokes
To ensure the content stood out and that the design did not compete with the work of Van Gogh or other work featured on the website but instead complimented it, we kept the design clean and minimalistic, giving it a timeless feel. We embraced the museum’s new identity, which was designed by Studio Dumbar (part of Dept) in 2018, by using similar colours and typography. We assigned each page to a different colour which was adapted to the work of art displayed on it, a feat rarely done amongst the white backgrounds of various museum websites. We also implemented subtle interaction animations and transitions to make the website feel light and engage the user.
The museum website not only aims to inspire and entice visitors but also educate and delight them. However, the old story format didn’t promote users to read the content in its entirety. So we updated the website’s story format by simplifying the layout while making it more snappy and interactive as the user scrolls down. This made the articles more appealing to read, especially for users coming from social channels. It also enabled editors to create and post content in a much quicker fashion.
Revealing the details of Van Gogh’s paintings digitally
The museum’s new website embarks in a voyage of discovery and inspiration, helping guide art lovers to the world of Vincent van Gogh. Ensuring users all around the world are inspired by how Van Gogh influenced art’s history and can connect with the museum in a desirable digital manner.
Using the power of technology for a good cause
What do you get when you bring digital and tech together with a good cause? A digital marketplace where donors are linked to African farmers, who shovel life back into the barren soil.
The climate is one of the major concerns of this generation. Realising this, Justdiggit trains people in areas of drought to dig half-moon circles in which rainwater is collected. This process of ‘greening’ ensures that the land will be fertile again within a year, something that is vitally important for the local population and which, on a larger scale, the whole world can benefit from.
Climate change is one of the major concerns of this generation
Spreading the knowledge
Justdiggit focusses on spreading their knowledge all the while empowering locals to organise and carry out the work themselves under the guidance of fundi’s, the local rangers. In order to have a lasting and positive effect on the climate, Justdiggit needs to fertilise as many hectares of land as possible, something it simply cannot do by itself. They believe that empowering the local population is a sustainable solution.
Justdiggit asked Dept how technology could help them achieve their goals. As we’re committed to making a change, the agency is a breeding ground for social and sustainable initiatives. So within Dept, a team was put together to give a helping hand.
In a strategy and design sprint, the team designed a platform where farmers who want to dig holes in a qualifying area are linked to people who want to sponsor them. Research showed that many of the farmers in African villages are well connected. They completely skipped landlines and ADSL and take care of a lot of business mobile. For example, over 40% of the population of Tanzania does their banking via M-Pesa, which amounts to 95 million mobile money transactions per month.
People in the West can easily donate money through Ideal and in the background, a system automatically connects the donations to all the farmers who are allowed to dig in a qualifying area. Once a hole has been dug, it is captured with a photograph. The donor receives the photo and the transaction overview. It is a fair system and a perfect example of cutting out the middleman, where Justdiggit is purely the facilitator.
The marketplace/app works as follows:
- People in the West can easily donate money through Ideal.
- In the background, a system automatically connects the donations to all the farmers who are allowed to dig in a qualifying area.
- Once a hole has been dug, it is captured with a photograph. This photo is approved by a fundi, who acts as a kind of overseer, and then the transaction is made.
- The donor receives the photo and the transaction overview. Digging a hole costs €3,64, of which €2,02 goes to the farmer (55%). The rest of the money goes to the purchase of seeds (27%) , the salary of the fundi (5%), transaction costs (5%) and the protection of project areas against overgrazing by cattle (8%). It is a fair system and a perfect example of cutting out the middleman, where Justdiggit is purely the facilitator.
The most important quantitative goals of the platform in 2019 were to raise the average donation height. Our prognosis was that the combination of complete transparency of the chain and higher engagement by use of messenger and/or the platform would make this happen.
This worked out: the particular donations via the platform is now €34,35 per benefactor; that’s almost three times than the regular online donation to Justdiggit before the launch of the tool. This was far above expectations, especially when you keep in mind there’s been no paid media involved.