Designing cmd-f, Vancouver’s first all-female* hackathon
Branding and design direction for a first-iteration hackathon
This past March, we welcomed cmd-f: Vancouver’s first all-female* hackathon. Held at the University of British Columbia, this 24-hour event sought to establish a stronger sense of community for passionate and curious women* in tech. Learn more about what went down during the weekend of cmd-f by reading this article.
The cmd-f team would like to acknowledge that “female” or “women” is not an accurate description for many people and it may make some feel unwelcome. We use * to specifically and intentionally include cis and trans women, as well as non-binary, agender and intersex people.
Last fall, I was recruited onto the cmd-f team as the sole designer. As a subgroup of the nwPlus team, I was well aware of the high caliber designs that had already been demonstrated through nwHacks 2018. I instantly felt the pressure that came with having to design for an entirely new hackathon, especially since I had such high expectations to meet. Despite my initial doubts, I decided that this would be a valuable opportunity to refine my design skills while contributing to a platform that resonated with me. Here’s my experience designing for a first-iteration hackathon.
The cmd-f Team
Allison Chiang, Anlin Chen, Avery Brown, Rebecca Roth, Zoe Fox and me :)
As a small team, everyone worked together on event logistics and sponsorship communications, while I primarily focused on the design aspects.
Establishing the design direction
Although we wanted to appeal to an all-female* demographic, we wanted to do so in a way that would not propagate any traditional gender stereotypes. Before leaping into designing, we looked to existing female* hackathons around the world for inspiration. Some notable ones were Elle Hacks, AthenaHacks, and Technica. I particularly liked the ones that avoided pink as a focal colour choice, but rather blended or incorporated it with other hues when used. Analyzing these hackathons helped us navigate towards the design direction that we wanted to pursue: one that would not need to emphasize or categorize femininity. We wanted cmd-f to be presented as any other awesome hackathon would.
Logo
Before I had joined the team, Zoe had taken on the first attempts at creating the logo. Since our name was cmd-f, it came as no surprise that we wanted to tie the Mac command symbol (⌘) into the design (sorry Windows) 😅 The concern with this design was the resemblance of the f to the Facebook logo.
I experimented with this concept a bit more, this time introducing a cube shape inspired by keyboard keycaps.
The f in the command symbol was then dropped to reduce clutter and redundancy.
After all these design iterations, we finally arrived at our resulting logo: a simple black and white keycap design.
Colour palette
While I was testing out different colour schemes, the team really liked the combination of colours below, so it became the starting point of cmd-f’s colour palette. The pink-orange-teal trio checked off all the boxes for looking refreshing and pleasing, while straying away from being too feminine.
Designing the Graphics
As someone who came from a background in digital raster illustration, vectors were something I definitely did not have the most familiarity with. Finding an intuitive program for the creation of these vector designs was essential. Figma and Gravit Designer became my go-to applications to use.
The more “complex” vector graphics such as the logo and main visual elements were created with Gravit Designer, as it offers a crucial skew tool that isn’t available yet on Figma. This skewing was necessary to obtain the angle and perspective of the logo and its components.
I was first introduced to Figma by my team, and it is undeniably one of the greatest design tools that I have ever encountered, allowing for real-time collaboration on design files. This made it really easy for me to communicate design changes to my team and for anyone on the team to step in and see the work in progress. If it hadn’t been for the unavailable skew feature, I would have probably done everything on Figma. Most of our marketing and promotional material was done through it, as were our website mock-ups.
Next, the most important part of the website was going to be the top of the landing page aka the first part that the user would see when they landed on the website. Our goal was to saturate this section with a welcoming and female*-empowering energy, so Anlin suggested the idea of having a female* hacking away on a laptop atop of the logo. I also wanted to present the hackathon as a comfortable environment to be in, hence the addition of the pillows and blanket to achieve a cozy impression.
Posters
We made physical posters to hang up around campus but didn’t get the chance to put many up. After all, we didn’t really rely on it as an effective marketing strategy.
Stickers
For stickers, I had the logo and a few hexagon-shaped explorations in mind. I created a separate isometric “work office” vector illustration as the background. Avery also had a go at creating a cmd-f panda bear sticker.
Event Signage
A few samples of how our signage designs looked like. These feature an overlay of tiles created by Zoe.
Snapchat filter
Ceremony Slides
Takeaways
Designing for a new hackathon is difficult. Despite beginning these efforts nearly 6 months in advance, we encountered many setbacks because almost the entire team consisted of first-time hackathon organizers. We were all learning together along the way, but I can honestly say that I am super lucky to have had the opportunity to work with such a supportive and accomplished team of women* to bring cmd-f to life. Without them, I’m not sure it would be the same.
In spite of the difficulties, designing for cmd-f was tremendously rewarding. It’s a really exhilarating feeling to see your designs on the back of an individual’s laptop. Reflecting back, there was so much more that I could have done, but that just means I have a lot to improve on and learn about in terms of design. Using this mentality as motivation, I’m looking forward to delivering even greater experiences as a designer for the upcoming year. Here’s to the next iteration of cmd-f! 👏
Thanks for reading!
Words by Jessica Wu, 2019/2020 Design Director
Stay in touch: Twitter | Facebook | Instagram
