How We Built: Instagram Share

Peloton offers a strong, 10-week software engineering internship (among other disciplines) where undergraduates are integrated into engineering teams to deliver live features into the Peloton ecosystem. Instagram Share was developed by the API team’s summer interns, Gayatri and Patrycja, in 2020. They wrote about their experience building Instagram Share!

We started on the Engagement API team in June 2020 as interns. As it was once described to us, “the Engagement team is responsible for everything about a Peloton member’s experience after they log into the app or connected fitness device.” Under the hood, the Engagement team works heavily in Peloton’s monolith (largely in Python with a Postgres ORM), which contains all of the APIs we expose for our Bike/Tread, Web, Mobile, and TV client applications. Like everything in 2020, our internship was fully remote. Our remote onboarding went as smooth as getting installations, permissions, and configurations could go, thanks to our mentors Aemile, Kirtan, Maryann, Alisa, Komran, and our manager Greg.

Our project for the summer was to build out the Instagram Share feature for Classes, Workouts, and Tags. One of the strongest aspects of Peloton is our community. Yes, we can give you a great workout. Yes, our instructors are amazing! But Peloton wouldn’t be Peloton without our Members and the supportive community they’ve built. We wanted to create a way for our Members to easily share their Peloton fitness journeys with their friends and family, regardless of whether those friends were part of the Peloton ecosystem. As a first step, we took inspiration from our Members on social media, where we often see Members taking screenshots or videos of their Peloton workouts, and posting to their Instagram Stories. Naturally, we saw a great opportunity to enhance existing Member behavior by building an integration with Instagram.

Sharing to Instagram from Peloton

We built out three different ways for our Members to share to Instagram from the Peloton iOS and Android mobile apps: Classes, Workouts, and Tags.

When browsing through Peloton’s class library using the mobile app, Members can choose to share any class to Instagram Story, displaying the class title, instructor name, original air date, and the thumbnail image for that class.

Similarly, Members can also share their favorite Tags with their friends by clicking the share icon from any Tag’s detail view. This will post a simple image with the Tag name front and center to the user’s Instagram Story.

Finally, Members can share their completed workouts to their Story from the workout details view. Depending on the class, the background media asset will either be a dynamic black-and-white video of the instructor who taught the class or a custom static image for that particular class. Overlaid on top of this is a sticker asset that shows the class title, instructor name, the Member’s leaderboard name as well as the Member’s workout metrics (output, calories, distance, etc.).

How We Built It

In order to bring Instagram Story sharing to our iOS app, we first had to build out the backend to support it. We needed several new API endpoints that could be used to return different images depending on whether a Member wanted to share a tag, a class, or a particular workout they had taken.

For Tag sharing, we started by adding an endpoint that could return a Tag share image for any given Tag. Under the hood, the endpoint calls methods that take a default background image, and formats the image you see below, including drawing the name of the tag:

To implement sharing of a specific class, we stood up a separate endpoint that fetches a thumbnail image for the class and performs some basic formatting to produce the asset below:

The heaviest piece of implementation was workout sharing, as we needed a way to generate both a sticker asset that displayed the Member’s workout metrics, and a separate background asset that the sticker could be placed on top of. We supported this by adding two separate endpoints, the first of which generates a transparent image that the workout metrics are drawn on top of. This becomes the sticker that is centered on top of the background image or video asset in the Instagram Story editor. The second endpoint fetches and returns these background image or video assets.

When Instagram Share launched, the backgrounds for most workouts shared came from a common set of black and white videos of our instructors. However, this November we expanded our workout sharing capabilities to support campaign-specific images and videos to be used as backgrounds instead of the black and white videos. We had the exciting opportunity to collaborate with the Marketing and Creative teams to launch this for our Beyonce Artist Series classes!

Once these new endpoints were in place, it was time to enable the iOS client to use them! While the Engagement API team doesn’t usually do iOS work, we decided it would be a good learning opportunity to learn Swift and professional iOS development-- many thanks to Komran for his tireless hours on call helping us get our Xcode environments set up! In terms of actually communicating with the Instagram API, this blog post by Facebook guided most of the information we had, and helped us design the background videos, images, and sticker assets that were released.

We decided to integrate Instagram Share through the iOS share sheet, which Facebook Share had already been using. A custom Instagram Action in the share sheet was created to download media at the returned S3 urls asynchronously. This media was then routed using OS level commands through the pasteboard provided by Instagram to open the app in story mode.

Reflections

This project required regular communication with UX designers to design the Instagram content itself, iOS/QA engineers to reliably integrate sharing into the Peloton app, and the creative team to generate content for each instructor and class to share. One of the most rewarding parts of this project was collaborating with people across the company. At the beginning of the project, we had the opportunity to dialogue with designers and the creative team about what was feasible from an engineering perspective. For instance, we iterated for almost five weeks on the sticker design on workouts -- sometimes completely redesigning the story graphic, sometimes negotiating the size and position of the copy down to the pixel, and went back and forth until days before release! We were grateful that we were able to own an end-to-end project like Instagram Share, a hefty feature, just as summer interns. Not only did we push production code within our first week of starting our internship, but we were treated like full-time engineers throughout the process. We had a voice in meetings, pushed back when we disagreed, and had agency in deciding the direction of the feature. Even though we would have liked to be in the office, everyone we collaborated with made working at Peloton smooth, fun, and super fulfilling!

Sharing on Sharing

Right before our full launch, we had the opportunity to demo the Instagram Share feature to Viresh Rustagi, our SVP and Tom Cortese, the co-founder and COO!

Since launching this feature in September 2020, we have seen over 560K shares to Instagram Stories. Over 89K of our members have used this new integration to share their Peloton experience on Instagram. Some of our most shared classes were Robin’s Hamilton Ride, Matt Wilper’s Turkey Trot, and Chelsea Jackson Roberts’ 30min Beyonce Yoga Flow.

We hope the ability to share one’s Peloton experience will help boost that feeling of belonging and accountability, so that our Members can better meet their fitness goals. We believe that seeing your friend crush their workout or share their new favorite class will inspire others to do the same. With Instagram Share, we want to drive home the point that Peloton is not just a bike. We are a community and together we go far. Being a summer intern at Peloton (and extended into the Fall too!) was an amazing experience, bolstered by Peloton’s explosion in 2020. We were fortunate to have a broad experience-- owning the development of this feature end-to-end as interns and watching it launch shortly after our internship!