Apple has just unleashed some serious game-changers with iOS 14 and the iPhone 14 Pro. Picture this: a slick Live Activity widget to spice up your lock screen, and hold onto your hats because Dynamic Island has landed, folks! 🚀 Why the hype? Brace yourself for real-time action, right on your iPhone's lock screen, notification center, and even its dynamic island – all without ever lifting a finger to open the app. It's like having your own personal window into the digital world, ready to keep you in the loop 24/7. 📱

At ShareChat, we're always on the lookout for the latest trends. That's why we jumped headfirst into the excitement of IPL 2024 🏏, crafting a dynamic live score-tracking activity for India's Cricket Carnival. Join us as we take you on a journey through the process of seamlessly integrating this new feature into our existing product flow, unlocking fresh experiences for our users.

But we already display IPL scores within the ShareChat app. So, what's the twist?

ShareChat is all about delivering quick and real-time trends, but with a twist of social interaction and content sharing. Imagine you're busy at work, doing household chores, hanging out with friends, or on a commute. How annoying is it to constantly open your phone, navigate to the app, and refresh the score, only to repeat this every few minutes? Following the IPL scores should be as smooth as the cover drives hit by Virat Kohli.

With live activities for cricket scores, you can check who is batting and bowling, their scores, the team(s)' score, and once the match is over, who won it. The best part? All this is just a glance away, and you don't have to open the app.

What is Live Activity?

Let’s delve into the concept of Live Activity:

According to Apple, a Live Activity is a widget that displays real-time information from your app, enabling users to swiftly check the progress of events or tasks. Think of it as a means to provide live updates for activities that unfold rapidly on your device. Some common use cases include tracking cab rides, monitoring flight status, and receiving sports updates. Here’s why Live Activity is pretty nifty:

1. Avoids Notification Overload: Rather than bombarding users with a flurry of push notifications, Live Activity consolidates relevant information into a single, reliable space.
2. Glanceable and Reliable: Users can obtain a quick overview without delving into multiple notifications.

Welcome to Dynamic Island:

Now, fast-forward to the iPhone 14 Pro. Apple introduced Dynamic Island, which resembles a pill-shaped cutout at the top of the device. When the device is actively in use, Dynamic Island displays real-time status updates for live events. Imagine seeing song status from your favorite music app, a countdown timer, or toggles for screen recording. Essentially, Dynamic Island extends the Live Activity experience, seamlessly integrating it into the user’s active device usage. 📱✨

Let’s take a journey:

• So, we already had an RTC-backed live score and commentary section as a web card in the Cricket Carnival feed. The idea was to gather selective yet useful information about a cricket match at any given moment and present it in an intuitive, sleek UX.
• What did we choose?:
  • Team names, logos and score
  • Currently playing batters, bowlers and their score & stats
  • Indicate on-strike batsman
  • One-line summary when the match ends
• When devs wear a hat of a designer:
  • Our iOS tech team decided to design our own UI/UX; ownership is one of ShareChat's key values.
  • Inspirations: As you can see below, these are decent designs, but one appears busy, while the other is too utilitarian.
    

• V0: We started by taking notes about layouts from the above designs and landed on the UI below:

• The only challenge you have is to beat yourself:
  • Upon careful consideration, we realized we could take this even further. There were fundamental issues with the above design, such as
    • Wasted space in the middle portion making other parts too cluttered
    • Colors for batsmen and bowlers were static.
    • The entire widget lacked a modern and sleek appearance, not complementing the light mode system theme effectively.
  • Oh-My-Pixels
    • What if we do color wizardry?
      • We were receiving a single primary color for each team. What if we generate a unique color palette for each match on the fly?
      • What if we then take it to the next level by extending the palette to a light mode theme?
    • Then let's distribute the information a bit more evenly and add boundaries wherever necessary
  • Result?

• Nah, Pixel peeping:
  • We were facing challenges in keeping good contrasted player & team score labels.
  • Overs and other labels had too faded look. So what do we do?
  • Computer graphics as savior: There is a nifty little concept called alpha blending
    • It's a technique used to create the appearance of transparency and layering. Each pixel in a layer can have an alpha value associated with it, which represents its level of transparency, with 0 being fully transparent and 1 being fully opaque. When two layers are blended, the alpha value determines how much of the foreground layer will be visible over the background image. What this did was give us the ability to create custom shades of the team's accent color based on the current system theme’s background color without having to resort to uncomfortable shadows & borders.
• Ultimate look:

Dynamic Island:

This is where SwiftUI's inherent view of modularity and reusability come into the picture. Since we had intelligently designed scorecards as smaller components with a well-established dependency injection setup, we could extract individual components separately to layout the appearance of the dynamic island. (The code below is just a representation of the layout.)

Approaching the Final Over:

As we wrap up our exploration of ShareChat’s journey in integrating Live Activities and Dynamic Island features for IPL 2024, it’s clear that the blend of technology and user-centric design can yield immersive experiences. The team's commitment to refining UI/UX design, harnessing color wizardry, and utilizing computer graphics techniques like alpha blending has resulted in a sleek, modern widget. This enhancement elevates user engagement without inundating them with notifications.

In terms of numbers, we are seeing approximately 6% to 8% user engagement with live activity, and around 3% to 4% of our Daily Active Users are already interacting with this feature.

Of course, there are countless other avenues we could explore now that we have a solid foundation.

• For example, we could display the runs of the last six balls and provide commentary on the last ball, among other possibilities.
• We can even create custom experience by integrating real-time match trends and content on the platform with the scorecards
• Chatrooms for fans of current teams while predicting the score.

As the IPL carnival continues to enthral fans, ShareChat’s Live Activity widget guarantees that the thrill is just a lock screen away! Here's to rejoicing in the game we adore and the technology that seamlessly connects us to it, with every single update. Moreover, we envision this widget proving invaluable for upcoming cricketing extravaganzas like the T20 World Cup, trending tags, and beyond.

You can browse more information about this widget here.

(Note: At ShareChat, we believe in the power of speed and experimentation; this project was one of our experiments.)