Team

Braintree

West (creative agency)

Overview

Braintree is a company built by developers, for developers. In Braintree's case, code provides the foundation for digital payments. Braintree believes code is beautiful, creative, and an expression of the individual who wrote it. Code should be celebrated as an art form.

Developers spend countless hours creating the code that lies behind the scenes of almost everything we do. It manifests itself through the sites we browse and the tools we use. It is the foundation for most businesses. But by nature, the code itself typically remains unseen.

We took the chance to flip the script. To celebrate the individual lines and languages, the choices that are unique to each application, and the developer behind each.

Because we knew there are a million ways to arrive at any final product -- some more elegant than others -- we partnered with creative agency West to launch Codeology: an open-source project that gives life to the art and science of code. The kernel of this creative concept began in 2015, and evolved until its launch in 2016.

What It Is

Codeology is an open-source project that reimagines code by bringing it to life visually, as a 3D moving image. The combination of programming languages in each GitHub project determines its look: as no two pieces of original code are exactly alike, no two Codeology forms are either.

How It Works

The application pulls data from GitHub’s public API and creates unique visuals using WebGL, ThreeJS, and GLSL Shaders. Shape and color represent an individual language, with size being proportionate to how many characters of code were written. Because every developer’s codebase is different, no two Codeology projects are alike.

Reimagining Code

Codeology is open source; it can be forked and modified. Visualized projects can also be downloaded or shared as wallpapers and GIFs.

Try Codeology yourself

https://demo.marpi.pl/codeology/

http://codeology.kunstu.com/

Paid Social Targeting Approach (Facebook, Twitter)

• Paid social targeting on Facebook, Twitter and LinkedIn targeted more than 100 developer communities, including education (e.g., Code camps, General Assembly)
• Targeted many developer keywords, especially those related to GitHub
• Targeted Custom audiences of GitHub and StackOverflow users

Additional Integrated Marketing Efforts

• Organic social media content
• Direct collaboration with GitHub
• Product Hunt placement
• Media outreach
• Seeding messages within developer communities

Case study and examples

Results

From organic social media, PR, and word of mouth, Codeology spread quickly - earning thousands of site visitors, many GitHub forks, several front pages including Reddit, and many site awards. It was also the winner of the 2016 Cannes Gold Lion for Digital Craft - Data Visualization, and a 2016 Bronze CLIO Award (Digital/Mobile - Microsite).

While the awards and site front pages were amazing to see, the campaign fulfilled its true objective: to engage developers and get them to consider Braintree's platform.

• 100K+ Sessions
• 415K+ Page Views
• 169 Countries Reached
• GitHub: 100+ forks including by organizations like Microsoft, 450 stargazers
• 1K+ sandbox signups
• Social media follower growth; halo effect on pinned and recent organic content

Awards

• Cannes Gold Lion: Digital Craft - Data Visualization
• AdAge B2B Campaign of the Year Silver
• Product Hunt front page
• Reddit front page (first 48 hours)
• Clio Award (Bronze: Digital/Mobile - Product/Service - Microsite)
• FWA Cutting Edge Award, Mobile and Site of the Day
• Awwwards Site of the Day
• Kantar Information is Beautiful Award

Lessons

• During the planning stages, I took a weekend bootcamp course on SQL at General Assembly and additional learning. This helped me learn how to manage the project repository on Braintree servers (and other Braintree analytics management), Amazon Web Services (AWS) and GitHub.
• The Braintree team eventually moved on to other brand campaigns and projects, but I think an opportunity remains even to this day, to extend this concept. For example, academic organizations forked the project to their GitHub instances, but also reached out regarding potential partnerships.

Additional Recaps

https://www.braintreepayments.com/blog/turning-code-into-gold-with-codeology/

https://www.braintreepayments.com/blog/codeology-reimagining-code/

https://jasonirosenberg.cargo.site/Codeology

https://www.jacquelinejiang.com/codeology

https://www.marpi.studio/exhibitions/codeology