Designing Hack@Brown
Now that Hack@Brown 2015 is over, I wanted to touch on a few of our design decisions, and the role the design team played in organizing the event.
Who We Are
In refreshing our brand, we started by reflecting on the intent and goals of the people behind the organization. Our mission statement reads:
Hack@Brown’s mission is to empower people to learn and build awesome things.
We’re driven by the core ideals of diversity, inclusivity and mentorship, and aim to build a fun-loving community at Brown and RISD surrounding learning, creating, and sharing ideas.
From this, the design team derived a few principles:
We’re grounded in technology, but don’t idolize its existence.
We embrace that technology is more powerful and interesting when synthesized with other fields. We encourage diversity in thought, experience, and goals, and believe that technology can be a platform to evoke change in many different areas.
We’re open, playful, and welcoming, but are serious about our goals.
People of any experience level should feel comfortable interacting with us, but our interactions should be meaningful and serve a real purpose. We are warm and friendly, but competent.
We guide and offer assistance, but don’t constrain.
The hacker movement is inherently about independence and breaking barriers. At the same time, we recognize our role in introducing people new to this concept, and the important position we play setting tone and message. We foster an environment which promotes curiosity and collaboration, and make sure people know where to turn if they are experiencing problems.
These principles are used to guide not just our visual design, but also all the different ways Hack@Brown interacts with people — our user experience.
Basics
Logomark
We started with our logomark. We liked the shape of the Hack@Brown claw, but its use and appearance in 2014 was inconsistent. The primary appearance of the 2014 logo was difficult to use in various circumstances.
We had to tweak the claw for each new image it was overlaid against, completely restyle it for t-shirts, bags, and blankets, and force it into situations where it simply did not look good.
It was time for some unification.
This year, we flattened the logo so that we could comfortably use it consistently across all our various mediums— take a look:
We wanted the logo to better reflect our playfulness. From last year’s set of browns (ha!), oranges, and other fiery colors, we’ve transitioned to a collection of more welcoming, friendly, but still energetic colors.
As we applied these colors to the logo, we retained the slightly shaded look last year’s solid color logo had. We subtly “lit” the logo such that the “glow” of the logo’s central red core would be reflected as purple from the inner surfaces of the claws.
Finally, we made some minor adjustments to the logo’s form to optically equalize the spacing between the individual claws and to make the overall appearance slightly sleeker.
Color
From our logomark colors, we pulled the 5 central accents we’d use in the rest of our brand:
Our primary and secondary colors are fuchsia/pink and blue, with supporting yellow (warning), green (confirmation), and purple colors as needed.
We also enumerated our UI and secondary brand colors, which are used to standardize interface and secondary artwork palettes:
Logotype
We then refreshed our logotype. There wasn’t one consistent application of our logotype last year, but this year, we standardized on two styles:
The first is our organizational logotype. It’s slightly more subdued, with title capitalization and a calmer coral.
The second is our 2015 Hackathon logotype. It’s more active, using allcaps, and a more energetic fuschia.
These subtle variations reflect the different nature and scopes of Hack@Brown the organization, and Hack@Brown the event, and pave the way for a more defined separation as we start giving workshops and hosting secondary events, growing beyond the hackathon itself.
Typography
Both logotypes are typeset in LL Brown — a playful but precise geometric sans serif. It’s open and friendly, but also nods to the mathematical, rational nature of technology — perfect for our needs (the name helped too!). We decided to use LL Brown in all other type settings as well.
Visual Extrapolation
Keeping in mind our 3 principles and mission statement, we explored our broader visual identity and brand.
Atomic Elements
We decided to centralize on the triangle as a design motif.
The simplest polygon, a triangle is flexible and modular, and lends itself to tessellation and composition. Triangles in formation are uniform, but not identical in character. A triangular grid provides order, but does not feel boxed in.
Importantly, it’s also very easy to break or bend the triangular grid. Shapes naturally slide along the three grid axes, changing the character, composition, and balance of the canvas.
The triangular grid guides and assists, but does not constrain.
For nearly all designs, we used a grid of tessellating isosceles triangles. The triangles aren’t exactly equilateral, to align with the triangle metrics in our logo.
Secondary Graphics
While keeping in mind our principles and mission, we created a series of modular secondary graphics. These graphics harmonize with the triangular grid, but aren’t bound to it, and are composed of triangles of varying dimensions.
Semantic Graphics
We also created a series of abstract but bold graphics to represent the three main creation categories at hackathons — Design, Hardware, and Development.
Compositions
Our 2015 branding was constrained by the lack of high quality photography and videography from our inaugural 2014 event. To counterbalance this, we focused on creating bright, vibrant compositions that reflected more abstractly our principles and mission.
Print:
Social Media:
Photography + Videography:
When we did brand photographic material, our graphics took a backstage.
We wanted to let the organic sense of energy and excitement from the event shine through.
Motion Identity
As a modern organization, our identity needs to shine in dynamic situations. We explored how our logo and secondary branding would look in motion, and some of it was used in our video titlecards.
Playing with our brand in motion also influenced our static compositions — seeing our designs change and attain a new sense of physicality gave us new inspiration while we were iterating.
UI Design + Website
With Hack@Brown, we had a great opportunity to show our take on the hackathon user experience — both physical and digital. We wanted our experience to be consistent and reflect our principles, and to be in play the moment people first visited our website.
UI is a huge topic, and what’s presented below is only a small vignette of the interactions we’ve crafted, and the decisions we’ve made. I’ll be giving a more in-depth tour of our digital UX in the near future.
2015 Homepage
This was our registration UI. This would be the first interactive experience our users would see, so we wanted an experience that both uniquely encapsulates our brand, but is also effortless to use, and designed with accessibility principles in mind.
Forms are inherently annoying to fill out, and create a huge mental barrier to actually registering, so we made sure that we asked only the minimum amount of information required.
The result is a form that is instantly recognizable as a webform, but exposes our brand in unique, playful ways, designed to make the inherently annoying process of filling information out as pleasant as possible.
It’s the small things that make the difference.
But we made sure that we didn’t compromise secondary usability — even though we used many non-native HTML components, the form is still keyboard controllable like normal, and behaves like a regular old HTML form to screen readers.
Check-in
This is our check-in interface. Event volunteers were trained to use it the day of the hackathon, so we needed to make onboarding intuitive and rapid. But we also made it extremely fast for power users, by ensuring that the entire system was keyboard controllable.
Hacker Page
This is our hacker page interface. It’s the centralized location to check and modify information once hackers are registered. Travel reimbursements, messages during the hackathon, and editing info are handled here.
Authentication
You might have noticed that we didn’t ask hackers to create user accounts or passwords. We thought that this method of authentication was too heavyweight for a system that users would only use a couple times every year.
Instead, we opted for a secret token system — once registered, users would get a url in their intro email, and all subsequent communications:
Visiting this url would take them to their hacker page. We’d also store a cookie, so that subsequent visits to the hacker page wouldn’t require hunting down the email link. (There was, of course, an option to manually sign out.)
This allows users to naturally automatically log in outside of the hackathon as needed, and easily maintain a persistent session on a device during the hackathon itself — no memorization of account credentials necessary.
Event UX + Logistics
For a vignette of our event logistics thought process, check out this brilliant writeup by our 2015 Logistics Director, Jessica Liang:
The design team helped out by producing physical media — posters, signage, banners, bags, food, and cards.
The Team
This is (slightly pixelated) us. I’m the one on the top left.
Click on our faces to learn more!
I hope this was a useful tour into our design process as a quickly moving student group. Give this a recommend if you enjoyed it!
Thanks for reading.
More Hack@Brown stories:
Chen (Brown ‘17) directed the design team for Hack@Brown 2014, and 2015. After a stint with IBM Watson & Microsoft, he’s now back at Brown.
When not swamped with work, Chen leads the efforts of HH Design to increase design advocacy and awareness in the maker/hacker/hackathon community.
He’s also a bit out of practice speaking in the third person.
