Case Studies
The Working Group
Helping power the Toronto tech community
Based in Toronto for the last 10 years, The Working Group is a web and mobile application dev shop with the mission to be the best software company in the world to learn, work, create, and grow at.
Company culture has always been at the heart of their brand and their corporate materials required a visual update to reflect their core values.
1 of 11
Brand Update & Business Cards
Typography in the logomark was updated to feel more visually balanced and contemporary, and an expanded colour palette was developed to help support the original TWG green, representing 4 new subsections of the business: Web, Mobile, Community, and Fund.
2 of 11
Illustration Art Direction
Whimsical illustration has been at the core of TWG’s brand for over 10 years and helps to distinguish them from competitors. It was important to continue to leverage and evolve this brand art direction. Families of spot illustrations were conceived to represent TWG’s work/products, technology, and corporate culture.
3 of 11
Printed Marketing Material
Although TWG is a predominantly cloud-based company, the need for printed/offline marketing materials still arise. These pieces are meant to be one of the first touchpoints with a client, and showcase the illustrations in a professional manner, consistent with the brand.
Spot illustrations come together to produce the brand pattern, which helps to unify various marketing materials.
4 of 11
Consistent Visual Brand
Flexible and easy to use InDesign templates were designed to allow employees to quickly create beautiful and functional sales materials.
5 of 11
Website Design
Illustrations interact with devices on the website to display portfolio pieces. Spot illustrations and icons help to drive users to explore different areas of the site.
6 of 11
Website Design – The Team
A strong type hierarchy promotes ease of reading and powerful messaging. The use of serif typography provides a comfortable, serious counterpoint to the lighthearted illustrations.
7 of 11
Website Design – Process
Illustration was once again used to help visually represent TWG’s corporate process. This library of visual brand assets allow TWG to keep any piece of corporate literature – online or offline – interesting and engaging.
8 of 11
Website Design – Mobile
Conceptual masthead illustrations that integrate actual portfolio pieces while visually communicating high-level ideas are effective both when there is supporting written copy, or in standalone situations (such as projected presentations).
9 of 11
Website Design – Portfolio
Thumbnails that show the mobile work in context help provide an at-a-glance representation of recent work. For users that want to see more work, each thumbnail expands to reveal a full-size slideshow and info.
10 of 11
Facebook theme
A simple square user avatar is very legible when scaled to smaller sizes and the brand pattern cover image helps connect this Facebook page to their other materials. Visual integration with social media touchpoints is an important aspect of any brand system.
11 of 11
Fluency 21
A New Approach to Lesson Planning
The 21st Century Fluency Project has the ambitious goal of changing the way educators present curriculum. Our friends at TWG engaged us to collaborate and execute the designs required, and to update to their brand and a corresponding web app to facilitate the construction of contemporary lesson plans around the world.
1 of 13
Digital Sketching
Informed by a creative brief and rooted in research, an initial sketching process provides identity campaigns the required fundamentals for insight and success.
2 of 13
Logo Convergence
Certain sketched concepts will prove themselves worthy of refinement and finesse. It is in this convergent stage where ideas are more fully developed, vetted for communicative effectiveness and tested in application.
3 of 13
Completed Logomark
The final logomark design communicates unity and dynamism. It is meant to represent the five 21st century fluencies and their borderless relationship to one another. Clean, sans serif typography also contributes to a feeling of modernity.
4 of 13
A Brand Update
Most visual identity campaigns don’t start from the ground up, but rather progress from an existing foundation; Fluency is no exception. The updated logomark still carries the same flavour and core message found the original.
5 of 13
Paper Prototypes
Web app design can be a very complicated process so it is important to make sure the client, designers and developers all have a clear understanding of functions and features before starting the visual design. This paper prototyping process helps plan content and sets up a foundation for successful execution.
6 of 13
Web App Design
The final Fluency web app design was created in collaboration with The Working Group and leverages the circular motif established in the identity. Finding ways to incorporate rounded shapes into the layout also helped the site feel current and highly tactile.
7 of 13
Simplifying Information
Graphic systems were required to present large amounts of information efficiently and visually.
8 of 13
Pushing Conventions
Circular buttons in the secondary navigation were designed to incorporate the graphic language of the visual identity.
9 of 13
Smart Layouts
The application needed to manage a system for different users to leave comments on the unit plans, but doing so in a limited space was challenging. A sliding comment sidebar helps to comfortably display all messages left by users and could also be closed to maximize the working space.
10 of 13
Designed to Fit Multiple Viewports
Many educators today are using tablets to assist with lesson prep, as well as in the classroom. The Fluency site was designed from the outset to fit comfortably in desktop and tablet viewports.
11 of 13
A Comprehensive Graphic System
There is always more to an identity that just a logomark. Fluency required a host of other resources to communicate effectively and consistently across the board. The selection of colours and typefaces, development of icon sets and the production of other graphic standards all ensure the identity is impactful and memorable.
12 of 13
Ready to Use
The classroom view allows for polished and extremely legible lesson plans that translate easily to print stylesheets. The Fluency 21 Unit Planner is a highly functional tool with a low learning curve that educators can use to plan progressive, contemporary class projects.
13 of 13
Éclat School of Performing Arts
Dedicated to the Arts
Éclat School of Performing Arts is a bilingual summer school offering courses in Toronto. Their mandate is to provide high school students the opportunity to learn from accomplished theatre professionals in a mentor/classroom setting.
1 of 11
Naming & Logo Sketching
The founders came to Function with a business plan, but they lacked a name, visual identity and a messaging strategy. Working with them and their creative board, we generated name concepts that spoke to passion, inspiration, and academia.
”Éclat School of Performing Arts“ was selected as the name as it is a performance-related term that evokes feelings both in French and English, representing the bilingual nature of the school.
2 of 11
Logo Convergence
Logo sketches are a great, unrestricted way to try something new visually, but it’s not until a sketch is refined into a preliminary logomark can its communicative value be properly assessed and tested in early design applications.
3 of 11
Completed Logomark
Éclat’s logo was designed to express kinetic luminance, paired with a beautifully-crafted wordmark. Custom letterforms ensure legibility and promote overall visual harmony.
4 of 11
Brand Consistency
For Éclat, the generation of a brand standards document was essential to the logomark’s consistent and successful deployment across all of its applications. Guides for “clear space”, sizing, and colour are provided to help retain the logo’s visual integrity.
5 of 11
Brand Standards Manual
This booklet helps anyone charged with applying the Éclat identity to make informed decisions relating to the logo’s placement, sizing, alignments and supporting typographic selections; effectively a pilot light for the life of the identity and a valuable reference piece for anyone new to its design systems.
6 of 11
Business Cards
These cards were designed to embody the design systems outlined in the brand standards manual while communicating an elegant confidence.
7 of 11
Brochure Design
Through this brochure, students and parents are given an introduction to Éclat’s philosophy and the courses being offered in the coming season. Highlighting creative board member Fiona Reid and driving viewers to the website were other important objectives for the piece.
8 of 11
Website Design
Home to all course descriptions, teaching practice info, instructor bios, and registration details, the Éclat website was designed to be the final destination for anyone interested in attending the school.
9 of 11
Web Development
We developed this site so that as users browse further down the page, the header image is hidden and the nav bar sticks to the top, for easy access. This technique allows the site to keep the number of sections to a minimum, by showing a large amount of information on long pages.
10 of 11
An Effective Web Solution
Content on this site is designed with various types of readers in mind – from casual viewers who are skimming content, to interested students who need to know all the nitty-gritty details. A system of accessible type hierarchies also help to promote reading and exploration.
11 of 11
Ladies Learning Code
Empowering & Inspiring Women
Ladies Learning Code is a women-run not-for-profit group working to empower everyone to feel comfortable learning beginner-friendly technical skills in a social, collaborative way. Hosting workshops several times a month, they are causing major ripples in the local and global tech scene.
1 of 10
Sketching & Ideation
Brainstorming for the logo was centered around tech/code imagery and focused in on the #ladieslearningcode hashtag that was popularized very early in the group’s formation.
2 of 10
Logo Convergence
It is at this stage that we fully develop any successful ideas uncovered in the sketching process. In this case, creating an ownable icon proved to be a simple, effective, and gender-neutral solution.
3 of 10
Completed Logomark
Distilling the most successful elements of the exploration down into a single mark is always a challenge. The final Ladies Learning Code logo has a custom hashtag symbol designed to match the round and mechanical feeling typography. The icon and colour are distinct and simple enough to be used in standalone applications.
4 of 10
Wordpress Website Design
The Ladies Learning Code website design is a refined, straightforward, living extension of the brand. Information is easily accessed through a sidebar navigation, and the starkness of the black and white is offset by hits of the friendly raspberry colour.
5 of 10
Asset Creation
New startups and not-for-profit groups often have few visuals assets, such as photos or videos, to anchor the brand around. We are often tasked with creating visual interest through other means, such as typography, icons, infographics and treating text in a visual way.
6 of 10
Growing the Site
As the organization keeps evolving, so do their online needs. Designed with scalability in mind, new site content is easily handled – it is easy to design a visually and technically consistent section for the site, leveraging the existing grids, typography, and icons.
7 of 10
Print Collateral
Taking visual cues from the website, the printed sponsorship package shares the same approachable and well-composed visual qualities, with highly legible type.
8 of 10
Print Collateral
Large blocks of content are broken up with professional event photography, helping pace the content while providing the reader with a glimpse into some past event successes.
9 of 10
Twitter Theme
A simple background image and colour palette help make any Twitter page feel like part of the same brand family. Visual integration with social media touchpoints is an important aspect of any brand system.
10 of 10
The Food & Water Institute
Green Education & Awareness
The Food and Water Institute is a registered educational charity with a focus on clean, healthy food and water. They share science-based information, and challenge consumers to make informed choices.
1 of 9
Sketching & Ideation
Conceptual research based on a creative brief developed with the client lead to exploration focused on a harmonious visual balance and integration of the two parts of their organization. Various typographic styles were explored to reflect the institute’s contemporary and academic qualities.
2 of 9
Logo Convergence
The rough brainstorming sketches were then cleaned up and further refined digitally, narrowing in on suitable typographic and iconic treatments. Opacity and gradient effects proved to be a subtle way to communicate the interaction of both elements.
3 of 9
Completed Logomark
Further refinements led to a bold, memorable icon, paired with a matter-of-fact wordmark. This structural logomark speaks to both ‘food’ and ‘water’ in a visually balanced way.
4 of 9
Business Cards
The backs of the business cards zoom in on the icon in order to take advantage of the gradient colour fields. They are also smaller than a traditional business card size, adding interest while saving paper.
5 of 9
Website Design
With a lot of text information to communicate throughout the site, clear type hierarchies were required to promote readability.
6 of 9
Website Development
Fullscreen background images that scale with the browser help signify a change between sections. This site was also developed with a fixed sidebar navigation so the user can easily slide up and down between page sections.
7 of 9
Website Scalability
Since The Food & Water Institute holds regular events and workshops each season, it was vital to design scalable and easily updatable content blocks. By designing a narrow column, full width content still yields comfortable line lengths for reading.
http://foodandwaterinstitute.org
8 of 9
Twitter Theme
A background photo and colour palette that reflect the website helps make any Twitter page feel like part of the same brand family, as visual integration with social media touchpoints is a critical aspect of any brand system.
9 of 9
