GitHub Unwrapped

A campaign that uses GitHub activity data and transforms it into an engaging, visual narrative of a developer’s activity.

OBJECTIVE

Creatively capture and present users' GitHub year in review in a unique and engaging manner.

MY ROLE

Research

Visual Design

Illustration

Animation

TOOLS

GitHub GraphQL Explorer

Remotion

Figma

Illustrator

After Effects

TEAM

Jonny Burger

Mehmet Ademi

Luke Zirngibl

Matteo Gamba

Isabelle Fink

Chiara Turel

Tomas Massano

DURATION

3 months

In 2023, GitHub partnered with Remotion to launch the GitHub Unwrapped 2023 campaign. Our team was honoured to be the external design and development partner, tasked with transforming GitHub users’ annual activity data into a compelling, visually engaging narrative.

If you have a GitHub account, you can create your own video by clicking here

Challenges

Data Visualization

Transforming GitHub activity data into an immersive and engaging video.

Scalability & Cost-Efficiency

Reducing rendering costs while maintaining high-quality animations. And also efficiently handle large-scale rendering demands.

Solution

Data Collection

By gathering user feedback from the previous year's campaign and using GitHub GraphQL Explorer, we identified the most engaging data points. This research helped us determine which elements would resonate most with users.

Design Process

Exploration Phase: Created mood boards and concept sketches to establish the visual direction
Wireframing: Developed key scene structures and user interaction points
Visual Design: Created detailed assets including character designs, environments, and UI elements
Animation Testing: Prototyped key animations to ensure smooth transitions and visual appeal
Refinement: Iterated based on feedback and technical constraints

Technical Implementation

We optimized our React code by identifying and fixing performance bottlenecks and leveraging Remotion Lambda for fast, cost-efficient, and scalable cloud rendering.

Key Features

The Cosmic Journey

We developed a unique narrative centred around the theme “Universe”, featuring GitHub’s mascot Mona on exciting space adventures. The journey begins with users selecting their rocket—a seemingly simple choice that actually personalizes their experience by changing the background music that accompanies their adventure.

I heavily contributed with my research and ideas on creating the storyline, and produced most of the visual assets.

DATA USED

The flow chart below shows the data used on the campaign, based on our research on what would be most relevant and engaging for the users.

Dynamic Animations

We wanted to further highlight Remotion's unique dynamic capabilities. This is why users with different activity profiles (contributions) would find their rocket landing on a distinctly different planet at the journey's end. Those with consistent, year-round contributions might find themselves landing on the golden planet, while contributors with minimal activity will be landing on ice!

This subtle personalization created moments of delight and recognition as users saw their unique coding patterns represented in the universe we created.

All the planets we designed

A user landing on the Golden planet

The three different rocket colours. Each rocket was accompanied by a different background music.

Sharing options

To maximize reach and engagement, users could easily share their video across all social media platforms. We also created a sharable card specifically designed for Instagram stories. Users could simply download an image with their statistics and upload it as an IG story, making it effortless to celebrate their coding achievements with their followers.

Technical Innovation

Behind the scenes, we completely reimagined the rendering pipeline. By optimizing our React components and leveraging Remotion Lambda's serverless architecture, we achieved a 2.5x reduction in rendering cost per video compared to previous years. This efficiency allowed us to handle 25% more video generation while actually reducing overall costs.

The performance gains came from careful code optimization, strategic asset loading, and thoughtful implementation of animation sequences that balanced visual impact with technical constraints.

Results

When GitHub Unwrapped 2023 launched, the response exceeded our expectations. The campaign captivated users, with many sharing screenshots and recordings of their personalized adventures across social platforms. The technical improvements meant more users could generate and share their videos without experiencing delays or failures.

Over a 100,000 videos were generated, 25% more compared to the previous year. This demonstrated both the growing popularity of the experience and the success of our optimization efforts.

Here are a few highlight frames from the user’s journey, showcasing key moments as they watch their GitHub Unwrapped experience.

Honourable mentions: the Landing page, About page and my personal favourite the Error page!

Impressions

@Just_Moh_it

“That was unexpected haha 💙 You guys surpassed all expectations of insanity with this one 🔥 Inspirational! (I've rewatched this beauty at least 10 times now)”

@stefan_wittwer

“Really well made as always!! the contribution graph disintegrating into particles is a really nice touch 🤯”

@kami_ayani

“What a great project honestly, it unlocks so many crazy things for devs 👌 ”

@dima_ageev

“Looks amazing, even more impressive that the last year 🙌"

Page updated

Google Sites

Report abuse