FemmeHacks (2021)

Rebranding Penn's first inclusive all-women & non-binary hackathon

Overview

FemmeHacks is an inclusive all-women & non-binary hackathon hosted at the University of Pennsylvania. As a member of the design committee, I helped with the complete rebrand of FemmeHacks for 2021, created branding guidelines and illustrations for use throughout marketing assets and the website, revamped the FemmeHacks Instagram (@femmehacks), and designed marketing assets such as stickers, flyers, and banners to further the reach of the hackathon.

Timeline

4 months (November 2020 - February 2021)

Team

3 students

Role

Brand Design, Social Media Design, Web Design

Tools

Figma

Background

Running on its 7th year, FemmeHacks is a two-day collegiate hackathon hosted at the University of Pennsylvania by the university’s Women in Computer Science chapter. FemmeHacks aims to empower, educate, and inspire women and non-binary folks across the nation. Participants range from students from a variety of schools such as University of Pennsylvania, Princeton, Drexel, Rutgers, Bryn Mawr, Villanova, Temple, Haverford, as well as young talents from Philadelphia high schools looking to break into the tech field. After forming teams, attendees build a variety of web, mobile, and hardware applications, learn from workshops, and attend various speaker events. For 2021, FemmeHacks was held virtually due to the Coronavirus pandemic.

Timeline

November 2020

Phase out old logo and finalize new branding guidelines

December 2020

Create marketing assets and sponsorship packet

January 2021

Develop designs for website

February 2021

Develop social media and graphic assets

 01 — Brand Guidelines

Problem Space

1 — Absence of branding and consistency from previous years

2 — Lack of branding assets that are sustainable

3 — No brand management or organizational system for marketing assets

Brand Guidelines

With our rebranding, we sought to keep the core colors, pink, blue, and purple, set by the FemmeHacks founders 7 years ago, but wanted to add a more modern flair. This included updating the typeface and logo to also be more inclusive, including all female-identifying and non-binary hackers. We decided on Comfortaa as our primary typeface, a comfortable, geometric typeface intended for large sizes. The round letters created a more playful and welcoming mood than the previous, serif typeface. For the logo, we decided to include angle brackets, a clear indicator of computing, along with the a symbol representation for women to allude to how the hackathon was founded as a safe space for female-identifying and non-binary programmers to experiment and learn together. Lastly, the colors were brightened to create a more electric, energetic feel, pulling away from the previous pastel color palette.
 02 — Marketing Assets and Graphics

Once our branding guidelines were established, we were able to create illustrations and marketing assets, such as flyers, social media headers, and graphics for our sponsorship packet.

Flyers


With the updated brand guidelines, the flyers featured a large logo with the largest text being the title, FemmeHacks 2021, and the dates of the hackathon. Underneath, we added frequently asked questions with answers, such as defining what a hackathon is, questions about experience, and what to bring. The colors on the flyer were bright and colorful, using pink, blue, and purple to catch people's attention.

Facebook Header


The Facebook header was used as a main branding asset, in addition to our Facebook page, for email headers, registration form headers, and soft marketing efforts. The graphic features the Philadelphia skyline in the back with iconic buildings such as City Hall and Liberty Place, with the new logo layered on top of a laptop.

Sponsorship Packet


Our sponsorship packet got a revamp, sporting our new colors and logos as well as an updated sponsorship tier graphic. An emphasis was put on bright, eye-catching colors with our signature comfortaa font. As a result of the new sponsorship packet, FemmeHacks 2021 was sponsored by Google Cloud, Facebook, Microsoft, Vanguard, Bloomberg, the Trustee's Council of Penn Women, and the William and Phyllis Mack Institute for Innovation Management at Wharton.
03 — Illustrations, Graphics, and Social Media

A major goal of mine was to begin building a visual system of uniformly designed assets that could be used and reused in the future

Building an Asset Library


I decided to begin building an asset library on Figma, so that future organizers could easily use illustrations and other assets as well as add to the library. The asset library includes social media post and story templates, past flyers, Zoom background for virtual events, Facebook cover frames, and a separate illustration library with icons and graphics in SVG form to be used both on the web and for export.

Stickers


A hackathon tradition is creating vinyl stickers for hackers to put on their laptops after participating. I created 4 sticker designs, a logo-based sticker featuring a desk set-up, a code window with our slogan, a text-only slogan sticker, and a boba "break" sticker, as during the hackathon we had a boba break for hackers to grab a drink on us. These stickers captured the spirit of the hackathon, while appealing to our audience of high school and college student hackers who identify as female or non-binary.

Social Media: Instagram


My final goal leading up to the hackathon was to use social media, specifically Instagram, more purposely to establish a brand. To do so, I created post templates and varied colors, creating almost a diagonal color pattern when looking at the grid as a whole. These post templates included: organizing member spotlights, quotes from previous hackers, images, and fun marketing assets like a text exchange or browser "gallery" encouraging viewers to register. These posts emphasize the color palette of the visual system established.
04 — Website

New Website Design

Using the header graphic as the main basis for the website, a simple website was created to be a starting point for registration, the hackathon schedule, and for potential sponsors to gain information in addition to the sponsorship packet. This website design has proven to be sustainable--as of FemmeHacks 2022, the design is still being used, just with a different color palette to indicate a new year. The full website can be found here.
05 — Takeaways

Closing Notes

This was my first time working on a rebranding/marketing project over a long period of time. Because this was a rebrand that would continue on for future FemmeHacks hackathons, it was important to choose fonts, colors, and create icons and illustrations that would be timeless. Furthermore, it was important to differentiate from other existing collegiate hackathons via said illustrations and colors. My main takeaway was learning how to elevate a pre-existing design system. Overall, I'm super proud that I was able to spearhead and lead this rebrand, which has shown to be sustainable and is still used for this year's (and future years') FemmeHacks.