Designing Stanford University's largest hackathon


Design Principles

At TreeHacks we strive to create a hackathon environment that is inclusive, welcoming, and purposeful. Technology in itself is not the focus of TreeHacks. Since a diversity of approach requires a diversity of perspective, TreeHacks actively engages new participants from across the globe. In 2016, we were proud to announce that 50% of all non-Stanford hackers were female or non-binary. Above all, we host TreeHacks to have fun. Whether that means taking a yoga break or organizing a hike, we hope that TreeHacks can ultimately bring people together in what is a weekend of building, learning, and fun.


Over the course of three years our logomark has gone through several iterations. Our initial design relied on visual pun and technical humor. In our second year, we soon realized that our logo was failing to align with our mission of inclusivity. The newest version of our logo embraces a much softer image. Though remnants of our more technical past remain, we removed all sharp curves so that the branches of the tree, once lifeless, return a friendly wave. The typography has been set in lowercase to reflect our chill environment. And looking towards the future, the logotext uses two weights to enable modification for spin-offs of the “tree” brand.

Color Palette

When defining our design vocabulary, we decided that the feel of TreeHacks should reflect the warmth and energy of our university. Biking through the Stanford campus, four colors dominate the landscape: the red tiled roofs, beige stone buildings, brown dirt paths, and always-clear blue sky. Rather than use the dreary and official cardinal red, we invoked vibrancy into these four colors by infusing bright, subtle gradients.


The late-great Adrian Frutiger designed Avenir in 1988 with the intention of taking a more humanist approach to the cold and technical geometric sans-serifs of the 1930s. We found Frutiger’s motivation to run parallel to our dissatisfaction with the needless exclusivity of technology. We consequently chose the updated version of Avenir, Avenir Next, as the basis of our typographic language.

Semantic Graphics

A new addition to TreeHacks for this upcoming year are four verticals: Education, VR, Healthcare, and AI.



Collaborating with our web development team, I created several dozen website designs. The main challenge was to incorporate logistical information without alienating first-time participants. We decided that the homepage should welcome the user with the energy of TreeHacks rather than the technical aspects. No better symbol of that exists at Stanford than the palm tree.


I viewed the registration form as one of the most significant components of the user experience. The registration form is not only the gateway to participating in TreeHacks, but also our main source for gaining information to help with the selection of applicants. Keeping that in mind, I created a form that requires minimal information while giving the opportunity for applicants to share personal projects and stories. The simple structure also made it easy to synchronize the form with our internal tools.

Social Media & Outreach

In promoting TreeHacks online, I created several different flyers and profile photo filters tailored for social media. Given the noise of the web, I decided to create visuals that were eye-catching and informative but not excessively obtrusive.

Event Logistics

In the course of the actual TreeHacks weekend event, I found myself quickly improvising many design solutions. Whether I had to print special bathroom signs, glass engrave trophies, or quickly produce title sequences for a film, I found TreeHacks to be just as exciting of a learning experience for me as for any participant.