GitHub Stars

Recognize those who go above and beyond.

GitHub needed to build a website for a new community program that focuses on recognizing and supporting those that go above and beyond in helping others in the developer space. Recognizing them as GitHub Stars.

GitHub is home to the world’s largest community of developers who share their code, work together, and build amazing things. But out of those more than 56 million developers on GitHub, there are a few who go above and beyond in helping others in the developer community.The GitHub Stars program recognizes these amazing people and enables them to make even bigger contributions by inspiring, educating, and influencing everyone around them. GitHub Stars are a diverse set of individuals, located globally, that nurture the community. Experts and technical leaders who passionately share their technical expertise.

We delivered an engaging experience to promote the recognition, explain the values of the program, and help the Developer Relations team to identify those people around the globe.

The GitHub Stars Program is led by Anisha Pindoria, Senior Product Manager, and Martin Woodward, Director of Developer Relations at GitHub.

GitHub
  • Cloud Computing
  • Developer Tools
  • Internet
  • Project Management
  • Software
San Francisco, USA
  • UX&UI Design
  • Development

A web platform focused on user engagement through rich interactions.

We worked on two-week sprints to get early feedback from GitHub. Iterating, moving fast, and focusing on the main goals on each step.

As GitHub is a remote global company in different time zones, introducing some tools such as Loom to share the progress of the project asynchronously was a nice thing to keep everybody in the loop.

An agile approach

The community and GitHub’s active users were in charge to showcase and propose the candidates. For that, we created a simple and usable nomination tool, to propose the nominees. This idea helped to gamify the process and share the nominations on social networks.

To help the program managers to identify the Stars, we created a workflow to get valuable information from all the applications. A form with some curated data to fill in for those who were nominated would help in that, right?

After two weeks from the official global launch, the website got more than 8k requests, and the first iteration for the admin section was not enough for proper follow-up.

To create a new CRM implied reinventing the wheel, a cost and time effort we did not have at that moment, so the close collaboration with the client took us to Airtable. After a week working on this new challenge, we could provide GitHub with a new functional tool.

A place to update the follow-up with the Stars and get internal feedback with graphs depicting the progression of the appplications to help them achieve their internal goals.

Identifying the Stars

We sped up the application workflow to 15 minutes in comparison to the almost 4 hours required before moving to our solution.

The purpose of the website was pretty clear, to spread the program and create an application process for both nominators and nominees. So, the interaction was clearly divided into two sides: the program and the nomination (for nominating and applying for the nomination).

On one hand, the program–related pages reinforced how it works, the requirements, the benefits, and the first Stars cohort as well. This was the human and emotional part of the website with pictures of the community leaders, and strategic content placed together with call to actions to encourage the users to participate.

A clear message

On the other hand, the nomination and application forms, where all data for the nominees is sent, needed to center the attention in the input action. The decision was to split the entry into three steps (personal data, links, and contributions) to make it easier for the user, who would be able to easily go through the wizard to fill in the specific information.

The graphic user interface was also designed keeping in mind the two processes —the nomination and the profile application— because each one demanded to apply a specific style to enhance each kind of interaction.

The goal was to create a visual atmosphere that let the users instantly connect with the idea of community and leadership.

For the marketing pages the goal was to base the interface concept on space, since all the GitHub programs and events names are linked to it (Stars, Satellite, Universe…), and that’s the reason why we applied the colour scheme, the illustration style and the alive stars background.
We followed the client’s brand guidelines in terms of typography and components, and designed a specific visual message to reinforce and go with the content.

On the side, for the application process and the Stars' directory we wanted to prioritize the usability and accessibility of the process, focusing on the function and guiding the users throughout the nomination steps.

By the end of the project GitHub started to implement their new design system and homogenize their website ecosystem in terms of graphic user interface and therefore Codegram's proposal became a beta version. After that we began to build the new GitHub Stars program website.

Working collectively with the GitHub team provided us useful insights from the digital and design team. Based on that we ran a SEO audit, to ensure everything was optimized and that every detail was considered.

The most shared pages were the Stars profiles, and creating a social image for each one initially seemed not to be a feasible solution, however, we figured out how to generate custom social cards using Puppeteer.

Making it shareable