GitHub Unwrapped

GitHub
Unwrapped

year in review campaign

Core functionalities

iterations

prototype

As the UX/UI designer on this project, I was responsible for all UX/UI elements and the user flow. I created intuitive cross-platform designs and pixel-perfect mocks for different Android and iOS devices. This included all pages and corresponding user interactions – from user sign-up, to video generation, feature customisations, and sharing functionalities.

My task was to ensure the user interface is intuitive and accessible for a broad target audience. I also shaped the visual direction of the project storyline to tell a unique story that aligns with the GitHub Brand. Part of this task was contributing to a plethora of creative assets for different social platforms.

Role

Visual Designer
UX/UI Designer

collaborators

Jonny Burger (Tech lead)
Mara Pavlov (Motion)

Matteo Gamba (Dev)

collaborators

Jonny Burger (tech lead)
Maria Pavlov (motion designer)

Matteo Gamba (dev)

Duration

Sep 23 – Dec 23

Tools

GitHub

Figma

After Effects

Adobe Creative Suits

Duration

Jul 23 – Present

Tools

Figma

Framer

Phabricator

LinkedIN Post

Try #Unwrapped

For GitHub, the world's largest source code host, For One Red and Remotion teamed up to create a new “year in review” experience. The project was launched in December 2023 with over 120k video renders. Over 3k developers shared their video on LinkedIn and X. Our work resulted in a 25% increase in rendered videos compared to the previous year.

UXR

Design Process

GitHub Unwrapped is an interactive yearly experience that provides users with a personalised recap of their coding activities over the past year. I kicked off the project by gathering user feedback from the previous year's version to identify areas for improvement. We ultimately decided to provide insights into the following categories: repositories contributed, issues, resolved & open, pull requests merged, programming languages used, public commits, productivity.

Storyboards

Detailed storyboards to outline the narrative flow

Art direction

Developing intuitive user interfaces across several devices inspired by GitHub's design ethos.

Visualise user data

Understanding GitHub's key metrics for developers and visualising them to be engaging and creative

Visualise user data

Understanding GitHub's key metrics for developers and visualising them to be engaging and creative

Accessibility

Enabling all users to access GitHub unwrapped no matter their platform experience or privacy settings.

Based on user contributions, each journey ends on a different planet. Below is the flow chart of the data used for the animation.

We explored different narratives and ultimately settled on a 'Universe Theme' featuring the GitHub’s mascot Mona going through space on fun adventures. I heavily contributed with my research and conceptualised the storyline, later focusing on the UX/UI, and creative assets. (3D video assets designed by Chiara Turel and Maria Pavlov.)

Core functionalities & visual assets

This design phase was my main responsibility and presented a unique set of challenges.

User Identification
Users can identify themselves with their GitHub username, or they can log in directly over the official GitHub. Depending on their privacy settings, a sign in via the official GitHub page was required. This way we created an inclusive experience that seamlessly integrated with both our website and the GitHub platform.
Responsive Design
Responsiveness across devices was crucial. Testing ensured that all information remained clear and accessible across Mac and Android devices, and various screen sizes from phone to tablet to desktop.
Android vs. Mac Considerations: Prioritizing critical data display on smaller Android screens compared to a more expansive layout for Mac users. Text Size and Readability: Adjusting font sizes and spacing to optimize readability across different screen resolutions.
Social Sharing
We encouraged users to share their custom videos on Social Media platforms such as LinkedIn, Twitter and Instagram. Previous year, users had trouble sharing, because downloading the video prior to posting was required. Technical limitations didn't allow for a shortcut link to share the video instantly. This year, we designed easily accessible links with a simple and straightforward step-by-step instruction for cross-platform posting.
Customisation Of Video Assets
Customisation for user engagement - Users have the opportunity to change the theme of their video. They can choose between 3 different rockets in different colors. Each rocket comes with a different soundtrack for the video.
User Identification
Users can identify themselves with their GitHub username, or they can log in directly over the official GitHub. Depending on their privacy settings, a sign in via the official GitHub page was required. This way we created an inclusive experience that seamlessly integrated with both our website and the GitHub platform.
Responsive Design
Responsiveness across devices was crucial. Testing ensured that all information remained clear and accessible across Mac and Android devices, and various screen sizes from phone to tablet to desktop.
Android vs. Mac Considerations: Prioritizing critical data display on smaller Android screens compared to a more expansive layout for Mac users. Text Size and Readability: Adjusting font sizes and spacing to optimize readability across different screen resolutions.
Social Sharing
We encouraged users to share their custom videos on Social Media platforms such as LinkedIn, Twitter and Instagram. Previous year, users had trouble sharing, because downloading the video prior to posting was required. Technical limitations didn't allow for a shortcut link to share the video instantly. This year, we designed easily accessible links with a simple and straightforward step-by-step instruction for cross-platform posting.
Customisation Of Video Assets
Customisation for user engagement - Users have the opportunity to change the theme of their video. They can choose between 3 different rockets in different colors. Each rocket comes with a different soundtrack for the video.
User Identification
Users can identify themselves with their GitHub username, or they can log in directly over the official GitHub. Depending on their privacy settings, a sign in via the official GitHub page was required. This way we created an inclusive experience that seamlessly integrated with both our website and the GitHub platform.
Responsive Design
Responsiveness across devices was crucial. Testing ensured that all information remained clear and accessible across Mac and Android devices, and various screen sizes from phone to tablet to desktop.
Android vs. Mac Considerations: Prioritizing critical data display on smaller Android screens compared to a more expansive layout for Mac users. Text Size and Readability: Adjusting font sizes and spacing to optimize readability across different screen resolutions.
Social Sharing
We encouraged users to share their custom videos on Social Media platforms such as LinkedIn, Twitter and Instagram. Previous year, users had trouble sharing, because downloading the video prior to posting was required. Technical limitations didn't allow for a shortcut link to share the video instantly. This year, we designed easily accessible links with a simple and straightforward step-by-step instruction for cross-platform posting.
Customisation Of Video Assets
Customisation for user engagement - Users have the opportunity to change the theme of their video. They can choose between 3 different rockets in different colors. Each rocket comes with a different soundtrack for the video.
User Identification
Users can identify themselves with their GitHub username, or they can log in directly over the official GitHub. Depending on their privacy settings, a sign in via the official GitHub page was required. This way we created an inclusive experience that seamlessly integrated with both our website and the GitHub platform.
Responsive Design
Responsiveness across devices was crucial. Testing ensured that all information remained clear and accessible across Mac and Android devices, and various screen sizes from phone to tablet to desktop.
Android vs. Mac Considerations: Prioritizing critical data display on smaller Android screens compared to a more expansive layout for Mac users. Text Size and Readability: Adjusting font sizes and spacing to optimize readability across different screen resolutions.
Social Sharing
We encouraged users to share their custom videos on Social Media platforms such as LinkedIn, Twitter and Instagram. Previous year, users had trouble sharing, because downloading the video prior to posting was required. Technical limitations didn't allow for a shortcut link to share the video instantly. This year, we designed easily accessible links with a simple and straightforward step-by-step instruction for cross-platform posting.
Customisation Of Video Assets
Customisation for user engagement - Users have the opportunity to change the theme of their video. They can choose between 3 different rockets in different colors. Each rocket comes with a different soundtrack for the video.

User Identification
Users can identify themselves with their GitHub username, or they can log in directly over the official GitHub. Depending on their privacy settings, a sign in via the official GitHub page was required. This way we created an inclusive experience that seamlessly integrated with both our website and the GitHub platform.
Responsive Design
Responsiveness across devices was crucial. Testing ensured that all information remained clear and accessible across Mac and Android devices, and various screen sizes from phone to tablet to desktop.
Android vs. Mac Considerations: Prioritizing critical data display on smaller Android screens compared to a more expansive layout for Mac users. Text Size and Readability: Adjusting font sizes and spacing to optimize readability across different screen resolutions.
Social Sharing
We encouraged users to share their custom videos on Social Media platforms such as LinkedIn, Twitter and Instagram. Previous year, users had trouble sharing, because downloading the video prior to posting was required. Technical limitations didn't allow for a shortcut link to share the video instantly. This year, we designed easily accessible links with a simple and straightforward step-by-step instruction for cross-platform posting.
Customisation Of Video Assets
Customisation for user engagement - Users have the opportunity to change the theme of their video. They can choose between 3 different rockets in different colors. Each rocket comes with a different soundtrack for the video.
User Identification
Users can identify themselves with their GitHub username, or they can log in directly over the official GitHub. Depending on their privacy settings, a sign in via the official GitHub page was required. This way we created an inclusive experience that seamlessly integrated with both our website and the GitHub platform.
Responsive Design
Responsiveness across devices was crucial. Testing ensured that all information remained clear and accessible across Mac and Android devices, and various screen sizes from phone to tablet to desktop.
Android vs. Mac Considerations: Prioritizing critical data display on smaller Android screens compared to a more expansive layout for Mac users. Text Size and Readability: Adjusting font sizes and spacing to optimize readability across different screen resolutions.
Social Sharing
We encouraged users to share their custom videos on Social Media platforms such as LinkedIn, Twitter and Instagram. Previous year, users had trouble sharing, because downloading the video prior to posting was required. Technical limitations didn't allow for a shortcut link to share the video instantly. This year, we designed easily accessible links with a simple and straightforward step-by-step instruction for cross-platform posting.
Customisation Of Video Assets
Customisation for user engagement - Users have the opportunity to change the theme of their video. They can choose between 3 different rockets in different colors. Each rocket comes with a different soundtrack for the video.
User Identification
Users can identify themselves with their GitHub username, or they can log in directly over the official GitHub. Depending on their privacy settings, a sign in via the official GitHub page was required. This way we created an inclusive experience that seamlessly integrated with both our website and the GitHub platform.
Responsive Design
Responsiveness across devices was crucial. Testing ensured that all information remained clear and accessible across Mac and Android devices, and various screen sizes from phone to tablet to desktop.
Android vs. Mac Considerations: Prioritizing critical data display on smaller Android screens compared to a more expansive layout for Mac users. Text Size and Readability: Adjusting font sizes and spacing to optimize readability across different screen resolutions.
Social Sharing
We encouraged users to share their custom videos on Social Media platforms such as LinkedIn, Twitter and Instagram. Previous year, users had trouble sharing, because downloading the video prior to posting was required. Technical limitations didn't allow for a shortcut link to share the video instantly. This year, we designed easily accessible links with a simple and straightforward step-by-step instruction for cross-platform posting.
Customisation Of Video Assets
Customisation for user engagement - Users have the opportunity to change the theme of their video. They can choose between 3 different rockets in different colors. Each rocket comes with a different soundtrack for the video.
User Identification
Users can identify themselves with their GitHub username, or they can log in directly over the official GitHub. Depending on their privacy settings, a sign in via the official GitHub page was required. This way we created an inclusive experience that seamlessly integrated with both our website and the GitHub platform.
Responsive Design
Responsiveness across devices was crucial. Testing ensured that all information remained clear and accessible across Mac and Android devices, and various screen sizes from phone to tablet to desktop.
Android vs. Mac Considerations: Prioritizing critical data display on smaller Android screens compared to a more expansive layout for Mac users. Text Size and Readability: Adjusting font sizes and spacing to optimize readability across different screen resolutions.
Social Sharing
We encouraged users to share their custom videos on Social Media platforms such as LinkedIn, Twitter and Instagram. Previous year, users had trouble sharing, because downloading the video prior to posting was required. Technical limitations didn't allow for a shortcut link to share the video instantly. This year, we designed easily accessible links with a simple and straightforward step-by-step instruction for cross-platform posting.
Customisation Of Video Assets
Customisation for user engagement - Users have the opportunity to change the theme of their video. They can choose between 3 different rockets in different colors. Each rocket comes with a different soundtrack for the video.

Campaign Assets: Eye-catching visuals designed for promotion on platforms like Twitter, Instagram, and LinkedIn in different formats and sizes.

Iterations

Design explorations & iterations

Initial iteration - Sign In

Initial iteration - video Page

Initial iteration – Focused on establishing the foundational structure of the GitHub Unwrapped experience incl. core pages, user flows and visual exploration.

Iteration 2 - Sign in

iteration2 - video Page

button exploration

Iteration 2 - Sign in

iteration2 - video Page

button exploration

2nd iteration – Strengthened the visual coherence with the GitHub brand to increase brand familiarity, reduced colour complexity and eliminated visual clutter. Also focused on content accessibility and user options to make video creation more accessible also for private contributions.

Iteration 3 - Rocket customisation

iteration 1 - customisation exploration mobile

Iteration 3 - Rocket customisation

customisation exploration mobile

Last iteration – Enhancing user engagement through customisation with rocket avatars and music themes, inspired by gaming interfaces to allow for playful experimentation.