G(irls)20

Transforming tomorrow by building a generation of female leaders.

Creating a web presence for a non-profit organization with a great cause

Launched in 2009 at the Clinton Global Initiative, G(irls)20 places young women at the centre of decision-making processes through their signature programs, Global Summit and Girls on Boards, they make strategic investments in young women through education and training, building networks, and access to unparalleled opportunities at home and abroad.

Role

I was the lead designer/developer on this project. I worked with stakeholders to create G(irls)20's style guide & website.

The Challenge

The challenge was to take an existing non-profit brand and update their online presence and platform and create marketing materials to grow with the brand over the next few years.

The Solution

The solution was to deliver a well strategized website & style guide. Success in this project will be measured by growth in program participants, and a new market of sponsors.

Developing a Strategy

G(irls)20 is advocating for change at the global level through their annual G(irls)20 Global Summit, they are invested in changing the status quo for women at decision-making tables in communities across Canada by placing Girls on Boards.

When developing the strategy we surfaced the challenges G(irls)20 is facing as a non-profit organization, we prioritized the needs and goals of the business and its participants & sponsors. This became the foundation for the style guide and marketing plans for G(irls)20.

So, how might we create a meaningful web presence and style guide for brand consistancy?

Understanding the Users

For G(irls)20's we have 3 user groups in mind. We are speaking to young girls ages 18 - 25 who are looking to participate in G(irls)20's programs like the Global Summit and Girls on Boards, we are speaking to young professional women who are looking to volunteer their time by supporting a young female leader's journey, and we are also spaking to companies that are interested in sponsoring programs and events, sponsors are how programs and events are possible.

Each one of these user groups is equally important to the growth of G(irls)20, we want to value and honour each group and make sure their main CTA's are easy to find, easy to understand, and easy to act on. Another layer we must consider in our communications is the fact that G(irls)20 is a global brand speaking to all countries looking to make a positive impact on the world stage. Diversity & inclusion will play a large role in the decision making process.

Defining the Brand

Through a series of exercises in the strategy session, we were able to extract and refine the key pillars of the brand. This defined the brand’s personality: how it should look, sound, act, and feel.

Positioning

Understanding what the G(irls)20 brand is and who they are a champion for helped define the positioning statement of the brand.

Brand Style Guide

G(irls)20's style guide is made up of 4 core elements.

01 Typography

When exploring fonts for G(irls)20 we knew that we wanted an interesting font pairing that remains minimal for general copy and marketing purposes. Our first defined font is Brandon Grotesque, which is a geometric sans-serif typeface, a good choice to spice up any sans-serif choices we've all seen before.

FF Tisa has a large x-height which offers it excellent legibility, I think it’s a great choice for setting long passages of text on the web. G(irls)20 as a brand is offering so much information at any given time and we wanted to make sure that users are able to comfortably read through any amount of text on our site.

02 Colour

G(irls)20's brand colours are bright and bold, originally having defined one gold and one blue I wanted to expand that palette to offer more flexibility in the designing process. This stays true to G(irls)20's roots and allows them to move forward into the future with confidence.

Colour Defined

Through many stages of possible colour palette's we landed on pulling tones and tints from the original palette. We also added some functional colours that will be helpful when creating the website.

03 Imagery

The text/image blocks across the site require a square image, and left aligned text. The square images have a gold drop shadow that ranges from 100% hight to 75% height and 50% height, this allows to keep it youthful and legible at the same time. Below is an example of the images and also a look at the image blocks in the wild.

Banner/Blog Images

When posting images as page banners and blog post thumbnails, I wanted to define an easy approach to using images that keeps a consistant feel across content and that it fits all the possible ways an image can be shared from their site. For these images we must use images wit 16:9 dimensions (1920px x 1080px) and on top of that we must make sure that aspects of the image that are important to the context don't get cut off.

My solution to this problem was to create a guide for the G(irls)20 team that will help them approve and post content. The red rectangles represent images with 16:9, 4:3 and 1:1 size ratois, as long as the image looks appealing in all circumstances it is safe to post.