Girls Who Code
Girls Who Code is reinventing the future of technology by building the world’s largest pipeline of women engineers.
![An image collage featuring branded items and promotional content for Girls Who Code. Items include a tote bag, pins, a website screenshot showcasing a statement about building female engineers, and a booklet showing color ratios and accessibility information.](/_next/image?url=https%3A%2F%2Fwww.hyperakt.com%2Fassets%2Fimages%2Fgirls-who-code%2FGWC_compilation-1.jpg&w=3840&q=75)
The challenge
Today’s zeitgeist was pointing to a Generation Z that is highly engaged in social and political issues and wants to use their voices and platforms to make a difference. Coding is a powerful language for creating the world we wish to see. Our challenge was to unify the organization branding and build a focused, noise-free digital experience, all the while telling the story of young women changing the world with technology.
Dialing in an established brand
The quirky and easily recognizable GWC carried notable brand equity, but lacked versatility at scale. We redrew the logo to make it more visually balanced and web-friendly, and introduced a superhero “G” icon. The G is optimized for social media accounts, building even more momentum on platforms where GWC has substantial followings.
![The image displays the text "girls who code" with "girls who" in a flowing, cursive style and "code" in a bold, block-style font. The colors used are teal with red and black shadows for a 3D effect. The background is white.](/_next/image?url=https%3A%2F%2Fwww.hyperakt.com%2Fassets%2Fimages%2Fgirls-who-code%2FGWC_Overlap_2021-02-04-210146.jpg&w=3840&q=75)
The Girls Who Code brand is now unified in its visual language—a dynamic and user-friendly design system comprised of accessible typography, flexible design elements, and color combinations chosen in careful adherence to visual web standards—and equipped with tools to modulate its voice for different audiences — Corporate partners & Investors, Parents & Girls, Girls — while maintaining a thread of visual resonance throughout. Its ecosystem of unique yet complementary platforms is now brought together through a bigger brand story, connecting users to the GWC mission no matter their entry point.
![A smartphone with a case featuring a pattern of colorful concentric circles, each with a prominent "G" in the center. The background is yellow, highlighting the vibrant design of the phone case.](/_next/image?url=https%3A%2F%2Fwww.hyperakt.com%2Fassets%2Fimages%2Fgirls-who-code%2FGWC-Phone_1.jpg&w=3840&q=75)
Girls make waves
We anchored the visual system in a narrative that speaks to the core goals and values of Girls Who Code: waves of momentum, waves of progress, waves of change. A visual interpretation of the shape of code lines written in a scripting window, it is also a metaphor for the power, strength, and resilience of a new generation of young women and girls coming together to effect positive change in the world.
![A snippet of JavaScript code using React, which includes conditional rendering. If both `!statement` and `!richText` are true, the code returns a `div` with components for `HeadingOnly`. Otherwise, it returns a `div` with components for a heading statement and possibly text.](/_next/image?url=https%3A%2F%2Fwww.hyperakt.com%2Fassets%2Fimages%2Fgirls-who-code%2FGWC-Code.jpg&w=3840&q=75)
![](/_next/image?url=https%3A%2F%2Fwww.hyperakt.com%2Fassets%2Fimages%2Fgirls-who-code%2FGWC-Web-screens.jpg&w=3840&q=75)
![Three smartphones displaying different screens of the "Girls Who Code" fundraising and program information. The left screen highlights fundraising details, the center screen shows a navigation menu, and the right screen details the summer immersion program for 10th-12th graders.](/_next/image?url=https%3A%2F%2Fwww.hyperakt.com%2Fassets%2Fimages%2Fgirls-who-code%2FGWC-Mobile-1.jpg&w=3840&q=75)
![Three cloud-shaped icons are displayed on a pastel background. The yellow icon contains a circuit design, the blue icon shows a web page, and the orange icon features a sun partially set over a horizon.](/_next/image?url=https%3A%2F%2Fwww.hyperakt.com%2Fassets%2Fimages%2Fgirls-who-code%2FGWC-Icons-2.jpg&w=3840&q=75)
![Two smartphone screens display Instagram posts by "Girls Who Code." The left post shows a confident person with short hair and a jacket with many patches. The right post features a quote from Kemi A., a Girls Who Code alum, about the importance of more girls learning to code.](/_next/image?url=https%3A%2F%2Fwww.hyperakt.com%2Fassets%2Fimages%2Fgirls-who-code%2FGWC-Mobile-2.jpg&w=3840&q=75)
News & Recognition
Project Credits
- Abigail Fisher
- Julia Zeltser
- Sruthi Sadhujan
- Laura Jo Hess
- Delaney Weber
- Izabella Stern
- Sarah Hallacher
- Ryn Adkins
- Dylan Viola