Building the Future

Web / UX / UI / Frontend Development / Campaign
building the future thumbnail

TLDR

This campaign highlights developers in the open source community. Their projects are building the future by creating things that help people around them and around the world. Everyone has the ability to build the future; GitHub makes it easy for people to share ideas and work together to make it happen.

I was responsible for branding, designing, and coding the website for the campaign. I also oversaw the production of the on-site gallery, the physical manifestation of the campaign, at Universe our flagship conference.

Background

For GitHub's 10 year anniversary in April 2018 we launched a campaign that celebrated all the community's milestones over the past 10 years. Following the momentum of that campaign, the next chapter — a pivot and look towards the next 10 years. In this phase we want to empower the community to think about what they will build and how their work can impact the world around them.

The campaign

GitHub created a video series documenting open source contributors who are "building the future" To highlight this series we wanted to create a website containing all the campaign videos and information in one place.

Research and Explorations

Inspirations for the site included the Techies Project and Bonobos #EvolveTheDefinition campaign. When it came to the physical on-site experience, I looked for inspiration in museum design.

In early explorations I sketched out low fidelity layouts and landed on 2 that put emphasis on the people and their videos. I tested out different photo treatments to make the visuals consistent and recognizable.

Mood board collagesketch of a wireframe

Brand Definition

I faced having to work on many different parts of the design simultaneously. This led to some indecision with stakeholders–including selecting a typeface. Tech can often come off as technical and cold but this campaign focuses on the people behind the code so we wanted to inject humanization through type choices.

After taking a step back and resetting, I defined the brand. I committed to decisions and received approval which helped everyone get on the same page. The change to a dark background strengthened the tie to coding by visually imitating terminal and code editors. A combination of script and tall bold type added the bit of humanization we were looking for while remaining developer focused.

Brand definition for building the future project

Final Mockup

responsive design mockups

Build & Final

While building the site I realized the modal I designed would create complicated custom styling that didn’t align well with the design systems we had in place. Originally I had wanted to utilize the modals to encourage visitors to remain on the main page and highlight all the bios.

Ultimately I chose to move away from the modals since the final plan was to release a video each week with social media support. I coded the page and set up feature flags to switch on each week as we received videos.

website dev previewsBuilding the future website