Ladies Learning Code: A design retrospective

Pearl Chen leading the first ever sold out #LLC workshop on August 6, 2011. Photo by Jon Lim.

Digital Literacy for Everyone

Ladies Learning Code is an inspiring not-for-profit that’s become a leading resource in shaping digital literacy education. Since 2011, LLC has grown their reach to chapters in 30 cities across Canada — at least one in every province! The founding team (Heather Payne, Melissa Sariffodeen, Laura Plant, and Breanna Hughes) turned a series of local workshops for women into a national education movement, impacting Canadians of all ages.

Watching the LLC team continue to grow coast to coast, we felt inspired to reflect on our collaborations with them over the years — from nascent idea to national treasure.

The inception of LLC in 2011 included the initial brainstorming session (photos), first few workshops, site launch, and official launch party (photos — so many familiar faces!).

Brand Definition for a Big Idea

We were lucky to have been introduced to Ladies Learning Code in 2011, at the early stages of their inception. LLC’s mission to increase digital literacy fit perfectly with our own passion. We were eager to support their vision and help communicate their big idea with a brand definition exercise.

Armed with a clear vision of their goals, target audience, and other key creative brief elements, we set out to conceptualize logo and visual identity options that would resonate with the community. Ideas were presented, tested, and discussed with a large group at the initial brainstorming meeting at the Centre for Social Innovation in Toronto. Energy from these early meetups was channeled back into the identity design process, resulting in a design that was meaningful and scalable.

Concepts for the logo design explored various messages and visual approaches. A range of options was initially presented to test the community’s response.

Ultimately the logo focused in on the #ladieslearningcode twitter hashtag that had gained significant momentum. A brand icon was designed to reflect tech / internet culture, and represent the fabric-like interconnectivity that would become the foundation of this community.

Once the logo and visual identity were refined, we shifted our focus to the needs of the website. LLC’s early web strategy outlined essential content for launch and described the need for a clean, intuitive layout (basically the driving force behind every website).

The first version of the site was designed prior to any completed workshops, which meant there were no concrete visual assets to lean on — no photos/videos, no press, no testimonials, and no past content to display. Thankfully we are dedicated type nerds and always welcome this kind of challenge. For Ladies Learning Code, that meant getting back to basics with pleasing typographic hierarchies and the use of scale, colour, and alignment to generate visual interest and a rich experience.

With few assets to lean on, visual interest was created through basic design principles. A stark black, white, and raspberry colour palette was paired with Helvetica Neue light to create layouts that felt technical and chic. Check out ladieslearningcode.com from Sept 2011, via archive.org.

This clean type-based site design garnered some interesting kudos through the years, including a hilarious rip-off of the entire site:

You know you’re doing something right when your designs are being stolen!

The original desktop-only web design was created in 2011 — a time when the concept of “Responsive Web Design” was still a new kid on the block (the bible by Ethan Marcotte had only just been published the month before). With the eventual addition of a mobile site stylesheet (phew!), this modest but effective design carried Ladies Learning Code through to early-2014.

Thanks to everyone who helped develop and launch this original site in 2011: TWG, Brian Gilham, Dara Skolnick.

A more robust event management system was developed in 2013 as the LLC programming continued to grow nationwide.

New needs, new design

In the years following their launch, Ladies Learning Code branched out into other new initiatives like Girls Learning Code and Kids Learning Code. As their offerings grew across Canada, the need for a more robust event management system was pulled into focus. Users were looking to find certain types of events available in their city and LLC was eager to make this functionality available to everyone.

The LLC site provides a clear framework for potential learners to discover digital literacy opportunities across Canada. The experience of first landing on the home page is geared towards the ultimate goal of finding programming that is right for the user. Site development thanks goes to Brenna O'Brien.

This updated web design allowed each LLC initiative to have its own page presence. This distinction helped different audiences quickly find content relevant to them.

LLC’s expansion into youth-oriented events required the visual identity to be updated to reflect a broader mission and welcome new audiences. We consciously moved away from the use of Helvetica, replacing it with friendlier typographic personalities from Google Fonts: Quicksand and Montserrat. This revised type pairing added a new level of approachability and memorability to the design language.

A robust family of icons was created for use in various brand touchpoints. The use of these assets helped give the visual identity more presence as LLC’s programming grew to a wider audience of women, teens, and kids across Canada. The colour palette migrated away from the more mature use of black, white, and raspberry to become lighter and brighter with the addition of soft greys and greens.

The final piece for the new Ladies Learning Code site was a WordPress blog design. By breaking out of the typical framework for this section of the site, the LLC blog becomes its own property and a go-to destination for recent news. It was important to highlight the various blog contributors since these are the people responsible for the organization’s success.

Stay up to date with Ladies Learning Code: http://ladieslearningcode.com/blog, dev thanks to Brenna O'Brien.

We always prepare a site asset pack when working remotely from the implementation team. This is a great way to make friends with developers and help the whole dev process go smoothly.

To learn more about our Dev Pack process, grab our free ebook: https://gumroad.com/products/novMW/

With LLC’s continued growth, a new way to connect with their audience and present different learning opportunities was created in 2015. Start your journey at http://ladieslearningcode.com/roadmap

Engaging a National Audience

With dozens of chapters across Canada, Ladies Learning Code programs rely on corporate sponsors and a variety of volunteer efforts. A revamped About page was created to present a clearer picture of LLC’s accomplishments and to encourage more partnerships.

We created a visually engaging layout with illustrations, infographics, and concise calls to action help volunteers find ways to get involved and see what kind of social impact their contributions make possible.

Characterful illustrations were created to play off the established icon style and bring more energy to supporting pages of the site. Site dev thanks to Christina Truong.

This graphic language is also very effective in animated pieces and other kinds of motion design.

Roadmap for the Future

As the program offering continued to evolve, LLC wanted to provide learners with an engaging way to explore different workshops.

An easy to use program roadmap was conceptualized and designed to help both new and repeat learners find something to suit their interests. The roadmap was structured to help new learners discover workshops by city, category, or based on the new skills they wanted to acquire.

Each of the 3 initial design concepts focused on creating fun and interactive ways for learners to explore various workshops, while keeping within the overall site art direction:

Concept 1 explored an unexpected, circular approach that created feelings of discovery and adventure.

Concept 2 focused on a more subdued colour palette, leaning primarily on illustration to help showcase each path.

Concept 3 presented a rich colour palette and icon system with a highly scalable card layout.

Concept 3 was identified as the most scalable, approachable, and effective solution for the roadmap, and revisions were completed to make the final layout sing. Once this art direction for the large viewport was established, we designed the remaining viewports so there would be a clear example of how content should appear in various browser widths.

Roadmap site dev thanks to Christina Truong.

Each workshop icon was designed to have a meaningful visual connection to its content.

A workshop-specific icon set and extended colour palette were created to help diversify the existing brand language and add more visual presence to each of the programs. The icon style is highly scalable and designed to grow as future offerings are added.

Start your journey at http://ladieslearningcode.com/roadmap

CEO Melissa Sariffodeen speaks at the launch of Hour of Code / Recent initiatives (design by LLC’s creative director Nat Cooper) include: Teachers Learning Code, Canada Learning Code, and code:mobile — a coding lab on wheels visiting youth across Canada!

2017 and beyond!

Ladies Learning Code continues to inspire communities across Canada, recently branching out into new initiatives like Teachers Learning Code, code:mobile, and Canada Learning Code Week — coming up June 1–8, 2017! Our studio is very thankful to have had a small hand in helping them along the way and we can’t wait to see what they’ve got planned for the future. 💜

Have a project on the horizon?
Tweet @studiofunction, or visit studiofunction.com and let’s chat.

2020 Update

Check out our branding case study for Canada Learning Code:
https://studiofunction.com/case-studies/canada-learning-code/