Empowering Hackers Worldwide

My interest in design took off right in the heart of the hackathon community. Through each project made with other hackers, I learned how to make viable products and what it took to put them together. I was always the designer. My role was to develop a theme, color combinations, logos, fonts, and the front-end of the app in just 24 hours. This autotelism would lead me to help Major League Hacking (MLH), the official student hackathon league. The very league that I participated amongst 65,000 hackers.

Major League Hacking faced an overwhelming growth in 2014 where the number of events increased tremendously. It was also in the middle of crossfire between major tech companies fighting to be the main attraction in the hacker community. As the hype continued to grow, MLH’s presence was being overshadowed. The question was, how can MLH separate itself from the tech company trees while still remaining genuine in the hacker community?

Learning the Brand

I’m MLH’s stepparent. I didn’t make the logo, but I adopted the emblem as if it was my own child. Because of this, defining the brand was quite a challenge in my early days. I had to explicate the symbol to the point where I understood its behavior and how it can be manipulated. What are its characteristics?

Logo Analysis

Bold: You know it when you see it no matter where you are. The company strives to be the biggest hackathon league in the world with the best talent.

Colorful: It has all the primary colors.

Authentic: It’s an honest logo. Very simple but direct on what it stands for because it explicitly states it underneath the three letters.

Quirky: Since it’s different from every tech and hackathon hosting company, it always tries to challenge the status quo. The brand was open for randomness and everything hacker culture.

Changing Outfits

Early on I designed up to 3 sub brands simultaneously including seasonal merch for Fall and Spring academic semestes. Each of those 3 events were dramatically different from each other. I guess you can say I got carried away, but I needed this exploration to discover a new problem, an inconsistent brand.

The voice of the brand seemed to be unclear because of the mix of content creation. The outfits for MLH were too far left and random. The ideas were running thin because there was only so much seasonal motifs I can play around with.

Hackcon III

Hacker conference took place in San Francisco. The theme was based around popular memes such as the Doge and the California postcard style.

Hackcon IV

The fourth installment happened on the campgrounds in Boulder, Colorado.

Hack The Planet

The first event hosted by MLH in the Computer History Museum in Mountain View, CA.

Seasonal Merch

Building the Design System

Would anyone in the community, including ourselves, be able to recognize our products without the logo on it? After the stage of exploring the brand, not a chance.

MLH continued to produce more sub brands, first party events, and printed products for advertisement. With this growth, it was time to build consistency. The goal was to reduce the mix of content creation, maintain my sanity, and cease the process of reinventing the wheel all the time. Being the only designer at MLH, I had to train my team to be designers and let the system work for me.

Clarifying the Identity

To build name recognition and identity, it was now time to scribe the almighty style guide. MLH needed to play around with its colors and display font. I went back to analyze and unpack its color attributes, size restrictions for print and digital products, use of typography, etc.

Once these were set, I had to make sure our physical presence was just as punctual. We fully embraced the characteristics of being simple, approachable, and quirky.

Selecting more specific motifs

Deciding on fewer themes helped me focus as a designer at MLH. Through user interaction with our brand and feedback during our events I accepted that I needed to create products that are recognizable: hardware and popular wearable items. MLH gained its popularity through the Hardware Lab where we provided new technology powered by Oculus, Myo, Pebble, Samsung, and more.

Working with Sponsors

Having a system ensures that our sponsors respect our branding. If you don’t have rules set they will bully you in how they want to be advertised. Making it clear that we were partnering with our sponsors rather than working for them is very important to MLH. This is one of the key factors of staying genuine amongst the hacker community.

Web Portals

The product team raised a good question, “If a user visited the different portals, would he or she know they came from the same brand?” Prior to the system, absolutely not. We transferred all the colors and typography rules to be SASS variables in our boilerplate templates. I had to make sure our audience and my team recognize the frequently used visual cues in button colors and typography. Building it with Gulp and Jekyll was ideal compared to other builders and templates. The learning curve is very low in which some of our team members can easily collaborate and edit the portals whenever they need to.

Constraints

1. Sponsors had logo size restrictions. Their logos needed to be placed on certain background colors. Sponsor logos were also integrated in display logo designs so aspect ratios for them had to be much larger and precise. Imaginary shapes surrounding display logos were squares and rectangular not circular.
2. Due to print cost for apparel, decals could only be one color. With that I keep in mind the details that are required to make the design recognizable on a shirt.
3. Turn around time for design projects is a big one. They were always quick at MLH. Not enough time for details. Even though deadlines deadlines were now adhered to, prepared templates reduced creativity.
4. The room for creativity diminished little by little especially now at this stage my creative palette was in template form.

Sharing with The World

Despite its constraints, I learned to see how the community, including my team, interacted with the system. After putting it together, the communication with the brand began to circulate.

Community Interaction

To maintain consistency in the brand and show our authenticity, we made our assets available to the public. The logos are now used correctly on hackathon websites including presentations during talks. It was a relief to not see anymore colored MLH logos on purple backgrounds or other colors where we weren't legible.

Hackers made bootleg swag and still maintained consistency. Organizers used our templates for events like name badges and HTML boilerplates. Seeing how the community interacted with our assets inspired me to bend the rules a little bit more just to see what they’ll do with it next.

Team Interaction

The team became the brand police. During design review they would ask things like “Are you sure these are the right colors for buttons?” Sometimes they would bring out their rulers and measure banners and posters to check if the logos are meeting the size requirements. It was great. Another plus I noticed was that the team could make their designs without thinking twice about how to apply the logo.

The world is on my team now.