Tata Consultancy Services enriches the London Marathon experience with Adobe XD

Close up photo of the legs of people running.

By Rajashree Jathar

Posted on 10-27-2021

Over the last few years, the world’s largest marathons have made innovative use of technology — from generating fundraising opportunities for charities to making more inclusive and personalized experiences. Now, as the world continues to deal with the impact of the COVID-19 pandemic, the mechanism of marathons, through the agency of cutting-edge technology, is evolving even further. The future, thus, is hybrid, blending traditional races with virtual participation.

At Tata Consultancy Services (TCS) — a global IT services, consulting, and business solutions organization — we have a long-standing association with major marathons around the world. We have sponsored events in New York, Chicago, London, Amsterdam, Singapore, Canberra and Mumbai. Our TCS Interactive Team at Mumbai has designed and built award-winning apps that have engaged participants and spectators since 2012. Being sponsors of the Virgin Money London Marathon since 2016, we aimed to create new designs for the Official Virgin Money London Marathon App powered by TCS last year. Even though major sporting events like the Olympics and Wimbledon got canceled or delayed due to the pandemic, London Marathon Events Ltd was determined to provide an opportunity for the mass field to take part in a marathon, coming up with a concept to create a virtual marathon. Runners would complete the 26.2 miles on the course of their choice anywhere in the world between 00:00 – 23:59:59 BST on the same day that the elite-only event took place in central London. This was a late decision, made when it became clear it would not be possible to stage the mass event on its transitional route from Greenwich to Westminster. As a result, the entire app needed a redesign with the aid of seamless collaboration between team members. To make it possible, we turned to Adobe XD, which enabled us to create quick prototypes and share them with our key stakeholders.

https://blog.adobe.com/en/promotions/products/creative-cloud/xd.html

The challenges of designing apps for global marathons

Marathons take place at different times throughout the year, and our team usually works on multiple marathons simultaneously. Each app reflects the distinct personality of that particular race. The biggest challenge is to improve the existing designs, sustain the freshness of the experience, and bring in new features for participants and spectators, all the while juggling extremely tight deadlines.

Initially, we used Adobe Photoshop to design the apps. This took an entire week to manually extract and share all necessary assets with the developers, for both Android and iOS. To show our designs to the client, we would traditionally schedule a call with the event organizer, share our screen, and then walk them through a PDF, specifying page numbers and commenting on the functionality to explain the user flow. Static screenshots would be shared back and forth to try to ensure everyone was on the same page.

When we were planning the app for the virtual Virgin Money London Marathon, we conducted interviews with runners, spectators, the organizers, the marketing team, the designers, and the developers. The app needed to be a one-stop solution for runners to do everything, from registering and logging their 26.2 miles to posting their finish line selfie. Participants would also get a digital medal and certificate through the app. It also needed to provide all the information spectators might seek, such as connecting with loved ones, tracking their progress in the virtual marathon, donating to their chosen cause, and looking up the overall results of the race. We also included exclusive audio commentary featuring famous experts.

As the app was to be used by runners around the world, we needed to ensure it was easy to understand and had intuitive navigation and consistent design language. With the Virgin Money London Marathon being the world’s largest annual one-day fundraising event, we were looking for ways to enhance the user engagement beyond the 24-hour window.

Screen shot of the TCS app.

Transforming the workflow with Adobe XD

We have used XD ever since our Mumbai design team won the first and second place in an Adobe Creative Jam (2017). It encouraged us to transition the whole company to XD and explore new features such as adding animations and micro-interactions to make our apps stand out. Our team of about a dozen designers and developers would not have been able to pull off the app for the first ever virtual Virgin Money London Marathon without XD. We employed it in every stage of the process — from brainstorming to basic information architecture — wireframing to interactive prototypes and finished UI designs for the app.

The new workflow meant that we could share assets instantly, just by sending over a link to developers and other stakeholders, so that they could easily review them and comment in real time. Multiple users could work on the same file, while live updates helped everyone stay informed about changes and see what everyone was working on.

We iterated on the prototype and moved elements around until the app hit the balance between easy-to-use and visually stunning. All of this had to be done remotely — our offices were closed and our teams relied on XD’s Coediting feature to stay connected and improve collaboration.

Saving valuable time with a design system built in XD

We initiated a work-in-progress design system which greatly boosted our efficiency and productivity. By building templates with commonly used creative components in XD, designers can avoid recreating standard design elements. These templates act as starting points to build effective prototypes. They are tailored to each app and speed up the design process by enabling designers to experiment more freely.

When the design is finished, designers don’t need to create a document to capture fonts, colors, dimensions, images, and other elements anymore. They simply auto-generate design specs in XD and share them via a link with the development team. This means the design systems team is able to keep track of everyone on the individual projects and connect the lines between UX/UI designers, developers, and project managers.

XD helped us bring all feedback into one place, which enabled us to review everything collaboratively and significantly improve the communication. The immense amount of time we saved with XD was used to push each other’s creativity and figure out which features could be improved further and what we could add to enrich the experience. This was crucial as we are constantly upgrading our apps to innovate and match the latest trends.

A digital transformation: Hybrid marathons are the future

As a result, we managed to deliver the app for the virtual Virgin Money London Marathon — the largest remote marathon in the world — in less than 30 days without compromising on the experience. It was downloaded more than 100,000 times and received an average user rating of 4.5.

The 2020 event saw elite runners race on a bio-secure closed-loop circuit around St James’s Park. In total, 38,000 runners from all corners of the world participated remotely via the app on a course of their choice. It won many accolades, most notably an official Guinness World Record for ‘The most users to run a remote marathon in 24 hours’. Other awards include ‘The Best Virtual Event’ in the UK Sport Industrys Awards 2020. The Virgin Money London Marathon has redefined the way we look at marathons and paved the way for other virtual marathons in 2021.

Marathons saw another model emerging for 2021 — the hybrid model. This enables runners to take part in person or remotely from anywhere in the world. This significantly increases the number of people who can participate. Not only does this make the events more accessible with a longer time period to complete the marathon distance but it also reduces the environmental impact. Runners who would normally travel to a marathon are now able to participate from any location. It saves massively on travel and reduces their individual carbon footprint. TCS Interactive has again envisioned a new app to support this hybrid model — consolidating data from timing partner for physical runners and GPS-based timing for Virtual Runners.

The ambitions for the 2021 Virgin Money London Marathon, which took place on Sunday, October 3, were even bigger. The goal was to have 35,000 runners take part in person and another 23,000 virtually, making it the largest marathon to ever be staged anywhere in the world. Digital technology will play a larger role than ever before, and we are working hard on enriching the running experience even further. That’s not all — following this year’s race, TATA Consultancy services (TCS) will take over as title sponsor of the London Marathon 2022, marking a new era of hybrid participation in its 40-year history.