Ladies Learning Code: A design retrospective
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.
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.
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.
This clean type-based site design garnered some interesting kudos through the years, including a hilarious rip-off of the entire site:
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.
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.
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.
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.
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.
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 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.
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
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. 💜