Kevin Feng

-- CS student, creative technologist

Rehack

HTML/CSS/JavaScript, Illustrator, prints
Summer 2018 – present

Introduction

In the spring of my freshman year, an alum came back to campus to talk about some of his work in mental health tech. A few months later, he ran the first reverse hackathon for professionals in the Bay Area to bring together an interdisciplinary crowd to tackle problems in current tech products. I saw the event recap on his blog and realized that this was a valuable event to bring to students. More specifics on why I started Rehack can be found in this Medium article.

After bouncing around ideas with the alum and friends over the summer, I returned to campus in the fall and established Rehack, a student organization dedicated to putting together the first reverse hackathon for students. The goal of Rehack was (and still is) to bring together students with different backgrounds and experiences to develop creative solutions that would make modern consumer tech products more fair, humane, and socially responsible. I got together a small team, and after a year of hard work, productive conversations, and non-stop fundraising, we made Rehack a reality.

There are countless components involved in making Rehack successful both as an organization and as an event, but I want to touch on a particular component that I focused on heavily from the very beginning up through to the day of the event and beyond: the design. Read on to find out how I built the graphical presence of Rehack, from the logo, to colour palette, to website, to printed materials!

Beginnings

Since Rehack is simultaneously a new concept and organization, it's important for the branding to be communicative, distinctive, and memorable. During freshman summer, I started by reflecting on the intent and goals behind Rehack and where exactly I wanted to take it. My thoughts basically boiled down to the following:

Rehack's mission is to empower students to critially examine technology around them and articulate their thoughts by prototyping solutions to the problems they see.

Rehack is driven by values of mindfulness, diversity, and innovation. Rehack aims to build a community of students with varying areas of expertise and encourage among them discussion on how to build today's technology to be more meaningful.

These thoughts allowed me to start coming up with some graphical ideas for the logo. I experimented with logomarks, logotypes, and a combination of the two. I also played around with different graphical forms; I liked the brain because it embodies two of Rehack's main values (mindfulness and innovation) and is widely recognizable, but I also liked the idea of using only simple, geometrical forms. Through all of this, I tried to incorporate the 'reverse' part of reverse hackathon meaningfully, as that was one of Rehack's unique points. You can see some of these efforts in the initial Illustrator planning document.

Circa July 2018.

It was initially all done in black and white to make an isolated decision on form. I settled on the brain with a sine wave through it because the form was distinct, scalable, and meaningful: it represents the organization and event's focus on areas like digital wellbeing and human-computer interaction. Pair that up with one of the text options, and bingo! We have ourselves the beginnings of a logo.

Colours and Typography

I chose blue and teal as two potential colours for the logomark. Blue is often considered a calming colour, which fits in with some of the mental health themes that inspired Rehack, and also has a pretty unique place in the tech world with the infamous Windows blue screen of death. Someone once described teal to me as the colour of digital water, which I thought was oddly fitting and I enjoy its soothing qualities.

Colouring the logomark with one of those colours wasn't anything spectacular, but colouring it with a gradient of those two colours was compelling. I was working with gradients during my internship that summer, and was well aware of their over-usage in web interfaces, so I hesitated on using it. However, it carried notions of diversity and change, which I thought were important to Rehack, so I stuck with it. Later, the gradient actually caused a bit of problems when printing the logomark on apparel and other swag, but that was dealt with later.

The finished logo.
Logo monochrome variations.

From this, I derived the colour palette, using 3 colours (including the blue and teal) as primary colours and variations of those as the supplementary colours. I also established four monochrome shades that are handy for grayscale designs and typography.

Primary colours.
Supplementary colours.
Monochrome colours.

Typography wise, I chose Nunito Sans to typeset the logo as well as to use in all paragraph and body texts. It's a precise geometric sans serif that I thought was open and friendly but also nods to the logical, rational side of technology. It's also open source and available on Google Fonts, which makes it easier for future designers to work with. Below are samples of Nunito Sans Regular and Bold, which were used widely in Rehack's body texts.

For our titles and headings, I chose Montserrat, a wider sans serif typeface inspired by old posters and signs in the Montserrat neighbourhood of Buenos Aires. The boldness of the heavier weights packs a lot of punch, while still giving off a benevolent vibe, making it ideal for posters and emphatic web UI. Plus, it's also open source!

Visual Extrapolation

With the basic visual identity established, I went on to broaden the graphical language.

I first explored some iconography, which I thought would be useful when we made social media posts or signs for the event or add to our website. I developed an icon set for general actions such as writing, liking, searching, announcing, and more. I tried to keep them bold, geometric, and simple.

The icon set in 3 colours.

Surprisingly, these icons didn't get used all that much. Perhaps there was a bit of over-flatness or excessive blockiness that clashed with the smooth logomark, or that they showed general information but no unique information about Rehack. What became frequently used, however, were the expository graphics.

Since reverse hackathons are a fairly new concept, I created an abstract series of graphics to represent what Rehack was about, which I called "expository graphics". I wanted to incorporate scenes of communicating, collaborating, and building, into a collective art style that could be repeated to strengthen the brand. I found that isometry gave me a lot of room for scene setting and storytelling. The isometric expository graphics were used widely in both our print and digital materials. Some examples are below.

Another important graphical asset was the triangle mesh. I chose it to be an atomic element that can sit in the background, supporting other graphics without demanding attention itself. The mesh of isoceles triangles complements the isometric graphics effectively; it provides order and assists with form, but does not constrain.

Our Google Forms header.
Banner for our social media pages.

Execution

Below is the homepage of the Rehack website. You can visit it at https://rehack.co.

When deciding what to do for posters promoting the event, the team decided that it would be cool to design them such that each poster could function by itself, but becomes more powerful in the presence of other Rehack posters. The results (in CMYK colourspace) are as follows.

We unfortunately couldn't get them printed on a full bleed printer since we were saving money for other purposes, but they still more or less did their job.

Posters in the wild.

I also designed cardstock "handbooks" for participants, and since we didn't spend any of our funds on poster printing, we managed to get these profesionally printed.


Of course, an event wouldn't be complete without name badges.

And here are some of our other swag :)

Team shirts. Participant shirts were white with blue text.
Nice and clicky pens.
Tote bags.

Our two sticker designs.

Conclusion

When I first had the idea of Rehack, I took a design-centric approach to building Rehack up by solidifying its visual identity. I found this very effective because it required me to explicitly address the goals and vision of the organization in a meticulous, thoughtful, and hands-on process. Not only did it help with Rehack's image, but it also organized and clarified my ideas and allowed me to discuss them with others more easily once I got back on campus. Ultimately, the design work laid a solid foundation for introducing this new reverse hackathon concept to the team and the public in a clear, friendly way.

Of course, Rehack would not have been possible without an awesome team working hard since the very beginning. A huge thank you to all those involved, pushing through ambiguity and tough times, and for believing in our ambitious vision. We are also endlessly grateful to all our partners and funders, who helped us make this unique event a reality and for providing fantastic resources for both participants and the team.

The event may be over, but we're planning some exciting things for spring and Rehack 2020 to build upon the themes explored in the inaugural Rehack. We hope this is only the beginning of an interdisciplinary exploration on how our tech products can be better built to serve humanity.

:D