Hack Club’s Midnight

Problem

Midnight was a flagship destination hackathon for high school students located in Vienna, Austria. When I was brought onto the project, the team was figuring out how to make this hackathon and its theming more appealing to teenagers.

Problems

Originally, the theming was “from the 90s”. Not only was it cliche, it had no relevance to a typical teenager.
Theming needed to feel big (dare I say bold?) if we wanted to convince teenagers that it was worth the time and effort to fly all the way around the world.

We changed the theme to “murder mystery”. It was in line with the atmosphere we perceived in Vienna, especially the gothic architecture and historic, moodier atmosphere.

Exploration

A sealed envelope with a Midnight wax stamp

My initial exploration and vibes ended up becoming more murder-y than we anticipated. My team pointed out that it leaned too much into the horror and fear elements, and they felt like it might turn away parents and some teenagers.

Flat, board-game-inspired Midnight landing concept

A second flat Midnight concept with the castle skyline

I developed flatter look, inspired by board games like Clue and the covers of Knives Out and the Orient Express, Me and the team thought it fit our ideal theme and feel perfectly.

It felt like a friendly mystery, rather than a terrible murder.

Solution

Primary Colors

Forgettable Beige

#FEE1C0

Raspberry Juice

#F24B4B

Midnight Veil

#453B61

Secondary Colors

Electric Blue

#1385F0

Honey, wash kids

#FFBB31

Counterspell Pink

#ED0F7E

Typography

Headings

Subheadings

PT Serif

Paragraph

PT Sans

Logo

The Midnight “a strange letter arrives” page — The aesthetic was easy to adapt to multiple pages. I loved that pages were able to stay simple but still be visually interesting with distinct shapes and stay vibrant with color.

The Midnight FAQ page — The aesthetic was easy to adapt to multiple pages. I loved that pages were able to stay simple but still be visually interesting with distinct shapes and stay vibrant with color.

The Midnight platform dashboard — Other views, like the platform, needed to stay simple and functional. The underlying theme was still communicated through the bold color palette, sizing, and slightly funky shapes. They don’t detract from usability and functionality.

The Midnight platform project view — Other views, like the platform, needed to stay simple and functional. The underlying theme was still communicated through the bold color palette, sizing, and slightly funky shapes. They don’t detract from usability and functionality.

Reflection

Midnight was the first highly stylized and fully branded project I’ve ever done. A lot of our effort in creating a charming aesthetic reminiscent of a fun murder mystery puzzle added to the atmosphere of group of hackers who attended the event and the community that formed during the lead up.

With both our theming and the excellent work of the organizing team, I think Midnight will be an experience that a lot of participants will hold on to.