TCS APPLICATION DESIGN

My role.

Tools.

Adobe Creative Suite | Figma | Zeplin | TestFlight | Keynote

Employment type

Non-disclosure agreement 🔒

Team

1 Designer (Myself)

8 Front-end developers

4 Back-end developers

2 CMS developers

2 Testers

1 Product Manager

1 Product Delivery Manager

Duration.

2020-2022

UI/UX Designer at Tata Consultancy Service

OVERVIEW

Tata Consultancy Services (TCS) is, a leading global IT services, consulting and business solutions organization. TCS announced the launch of #ThisRun, a worldwide community for runners, reinforcing its long-standing commitment to global marathon and running partnership platforms.

The race app is used at 13 TCS-sponsored endurance running events globally, including the TCS New York City Marathon, TCS Amsterdam Marathon, TCS Lidingöloppet, Tata Mumbai Marathon, Virgin Money London Marathon, Bank of America Chicago Marathon, Standard Chartered Singapore Marathon, and many more.

*Featured in Wall Street Journal, New York Times*

*Won the Sports Industry Award for London Marathon*

*Won the Webby Award for NYC Marathon App*

Get more info at https://www.tcs.com

PROBLEM STATEMENT

How we might help users to build relationships and enhance event experiences through technology and innovation, supporting our belief in sports as a unifying force?

Success Metrics: Content CTR / View counts

Achieving high click-through rates (CTR) and view counts for content within the TCS Marathon Apps, indicating strong engagement and user interaction with the platform.

PROCESS

Started with benchmarking. Concluded with user testing to maximize business impact.

ACHIVEMENT

Designing the interface of TCS sponsored marathon applications, required understanding the existing design and ensuring consistency. I began by exploring the current interface designs. Additionally, I incorporated experimental designs to create a distinctive design for the implementation of new features. With regards to this, low to high-fidelity designs were crafted, prototyped, tested iteratively, and refined based on user feedback. To assess its effectiveness, I conducted testing using TestFlight before the final launch, leading to design optimisation based on the results.

BACKGROUND

The official partners of passion and purpose

TCS keeps showing up and they’re in it for the long haul. With a commitment to innovation, inclusion, sustainability, and belief, TCS is helping build a better future for our sport.

NEW YORK CITY MARATHON CASE STUDY

The TCS NYC Marathon 2021 was the biggest comeback after pandemic with incorporation of an exciting experience, celebrating 50 years of running.

THE OPPORTUNITY

2021 TCS New York City Marathon app lets fans enjoy a hybrid race experience

GOALS

Creating an immersive experience was essential to engage with Runners and Spectators during race week, with the mobile app being the centerpiece of the work.

THE APPROACH

I kicked off the project by applying my design process to the work ahead.

USER RESEARCH

I began by reviewing the TCS New York City Marathon previous years mobile app data to understand where users were spending their time or dropping out of the experience.

FUNCTIONALITY OF THE FEATURE: VIRTUAL RUN 🔒

OTHER KEY FEATURES 🔒

The 2021 TCS NYC Marathon was an interactive digital experience that encouraged runners and spectators from around the globe to interact with race day stats and track their favorite runners during the world's biggest and most popular marathon. 2021 TCS New York City Marathon app lets fans enjoy a hybrid race experience

Tata Consultancy Services’ award-winning app now lets fans track both virtual and in-person runners. Tata Consultancy Service, the title sponsor of the TCS New York City Marathon, and New York Road Runners (NYRR), the world’s premier community running organization, launched the official 2021 TCS New York City Marathon app. For the first time, the new version of the app allowed the fans to simultaneously track runners on the racecourse as well as those who are competing virtually from anywhere in the world.

The 2021 TCS New York City Marathon App is a true hybrid platform that enables in-person and virtual runners, along with their supporters and spectators, to share in the marathon experience.

Utilizing insights from my research, I developed a concept for this year's marathon. Given the introduction of several new features, it was crucial to craft a well-functioning navigation menu. Anticipating the inclusion of both physical runners and virtual participants, I opted to distinguish between them using varying colors and icons, significantly enhancing user tracking. Additionally, features such as Leaderboard and featured bios were implemented for user convenience. Two login interfaces were created—one for physical participants and another utilizing third-party authentication, specifically Strava login, for virtual runners, aligning our marathon with cutting-edge technological standards. Concurrently, I delved into graphical design elements, including selfie frames, AR filters, stickers, and an emoji panel, further enhancing the event's appeal and user engagement.

Site Map

PRODUCT DESIGN ITERATIONS & USER EXPERIENCE 🔒

Low fidelity wireframes

To dig further into the details and collect some qualitative data, I was issued with the interviews with Runners and Spectators where it became clear that Spectators were most interested in tracking their friends’ and family’s location during the Marathon race. Also since the world had faced pandemic and things were still getting under control many runners were still not sure on how to prepare for the marathon or be at the specific location. To ease the whole process the app was introduced with a true hybrid platform that enables in-person and virtual runners, along with their supporters and spectators, to share in the marathon experience.

During the marathon, virtual runners are depicted on the course map in red, while in-person runners are represented in blue. Every 5 kilometers of their respective races, all runners can access their elapsed time and pace.

Moreover, a new feature called Marathon City: 3D Map, utilizing Augmented Reality (AR) technology, offers an unprecedented experience of the marathon course map.

Virtual runners have the option to share their GPS location with two spectators, enabling them to track their progress from anywhere in the world. For other spectators tracking virtual runners, their location on the TCS New York City Marathon course is displayed. For instance, a virtual runner at miles 16 to 18 will appear to be running up First Avenue within the app.

In-person runners' locations and estimated finishing times are calculated based on their training runs and past marathon performances. This advanced tracking system provides spectators with the most accurate opportunities to follow runners live on the course.

Share Tracking: This feature on the Runner Details page allows users to share a link that initiates an automatic app download with a specific runner already selected to be tracked during the race.

Optimized Spectator Guides: The app’s spectator guide helps fans create an itinerary to navigate New York City, so they’re able to see runners on the course. The shareable guide provides a runner’s estimated times of arrival, along with transportation directions and recommended viewing locations along the course.

Cheer Cards: Allows fans to support runners using the app to share messages on social media.

Live Pro Athlete Leader Board and Bios: Closely track the race day leaders in real time, as well as have access to bios, records and images of professional athletes running the race.

COLOR PALETTE, TYPOGRAPHY & PICTOGRAMS 🔒

MEDALS 🔒

Designing for the experience

1) Conducted comprehensive research to acquire essential design elements.
2) Acquired valuable insights into compliance requirements, design tools, and in-depth understanding of UI/UX.
3) Communicated effectively with high-level executives of TCS clients, delivering timely solutions for the Application Design.
4) Spearheaded the interface design of the app, with a particular focus on integrating innovative features. Introduced elements such as smart medals, immersive soundtracks simulating the experience of running through cheering crowds, unique AR and VR components, and virtual maps displaying runners' locations on a city course, irrespective of their actual geographical position.
5) Designed engaging modules such as Selfie Frames, Stickers, Augmented Reality Design, etc., and explored the Visual Design/Graphics Design aspects.
6) Conducted thorough research on the Design System, emphasizing the curation of reusable functional elements, components, and patterns.
7) Diligently curated presentations for each marathon event, ensuring a consistent alignment with the brand identity for the respective year. Highlighted new features, managed user downloads, and acknowledged top runners for the application.