HackerYou: A design case study

A Toronto Trailblazer

HackerYou offers full- and part-time courses in Toronto for people who want to learn to code. Founded by a small team in 2012, it has become Toronto’s most inspiring place to learn web development and design.

Heather Payne is HackerYou’s CEO — she’s committed to education and has personally helped hundreds of people successfully transition to new careers in tech. We’ve had the pleasure of collaborating with Heather and the team as they’ve grown their offering and expanded their learning space.

HackerYou first approached us in spring 2012 to help them craft a messaging strategy and visual identity.

Design Solves Problems

All of our studio projects kick off with a creative brief. Through discovery meetings, questionnaires and other research, we pick the brains of our clients to get a clear view of the design problem. This process helps us to more intimately understand the company — their personality, offering, value proposition — in addition to the overarching communication and business goals. It also allows us to get a firm grasp on the local and global competitive landscape so that all future work can be intelligently positioned.

Armed with brain dumps and meeting notes, it’s our job to distill the wealth of valuable client information into a succinct document. This brief will ensure everyone is on the same page for the duration of the project and provides a vital key that helps determine the successfulness of our future design concepts.

Once the creative brief is in place, we start looking at the design of specific visual identity elements.

Exploring Identity

A logomark is the cornerstone of visual identity system. It presents an essential idea or character, but seldom captures a complete picture of the whole brand without assistance. Logos are brought to life by supporting typography, colour palettes, photography, and a strategic approach to written messages. Each of these elements need to be explored and intentionally combined to create a cohesive visual identity concept. Each identity concept represents a subtly different interpretation of the creative brief, and are presented to the client for feedback.

We execute a range of messaging concepts and visual design exploration based on the established creative foundation.

Our identity concepts explore type pairings and use placeholder images to establish art direction.

Our goal at this stage is to capture the spirit and potential of each solution, then put those ideas on the table for feedback. Most clients appreciate the opportunity to provide input early in the design process. Involving the client in this way allows us to collaborate more meaningfully, since they are the ones with the most intimate perspective of their business goals and audience.

HackerYou selected a messaging strategy and visual execution they felt would resonate effectively. They also provided feedback on other visual details which were integrated in multiple rounds of revisions, ultimately resulting in a final identity system.

A final identity system typically defines logo lockups, type pairings, icon/photo styling, and art direction of example applications.

Original Web Design

The inaugural site design for launch in 2012 focused on highlighting the team, advisors, and HackerYou’s part-time courses. The creative brief called for an established and approachable tone, which was a guiding factor in the overall visual design. Because the school was still in its infancy, few photos were available for use on the site, so a strong type-based design was created to promote visual interest.

Creating captivating web sites through interesting typographic hierarchies and strong alignments is one of our favourite design challenges — especially given the current web design landscape dominated by predictable, template-driven layouts.

Created for HackerYou’s launch in 2012, this site design leveraged clean typography and clear messaging.

Know When To Redesign

In 2014 HackerYou asked us to redesign the website in order to reflect their recent expansion to a 7,000 sq ft learning space, and the introduction of a new full-time front-end web development bootcamp.

We collaborated with Heather and the team to draft a new creative brief that refreshed our perspective on the company culture, brand voice, and communication objectives. Through this process it was established that HackerYou’s passionate community of students and alumni represented one of their main strengths, offering a key point of differentiation from the local competitive landscape.

When presenting web design concepts, our preference is to show multiple visual interpretations of the brief and content strategy — this helps the client make a confident decision. Three concepts were initially tabled for HackerYou’s consideration.

Concept 1 was designed to feel professional and institutional, with understated typography and interesting scroll effects.

Concept 2 took a bolder approach that aimed at feeling lively and unexpected, hitting extremes in type and image hierarchies.

Concept 3 presented a more balanced approach to the integration of text and image, harmonizing clarity and interest.

The final web design focused on graduate stories and lively depictions of the community experience in the HackerYou learning space. This art direction led to a dynamic responsive website that felt energetic and approachable. Our goal was to offer a real perspective on daily life at HackerYou.

Some of our fav feedback about the site design

Animated SVG icons were designed to bring life to the list of topics covered in the full-time bootcamp.

The Dev Pack

We worked with HackerYou’s talented team of developers to figure out the best way to bring our responsive designs to life. When designers and developers work remotely, many visual nuances can be lost in translation. To prevent this we take special steps in the preparation of our designs. Our design production process leads to an in-depth dev pack that provides visual designs for different viewports, CSS type styles, grid guidelines, and detailed functionality directions for specific page sections.

Download our free ebook to learn more about our dev pack process.

Beyond Internet Design

Websites are critical for almost every business, but they don’t always satisfy the need for other forms of marketing and communication. HackerYou is a code school in love with the internet, but still required assistance with printed marketing, signage, and other IRL collateral.

Printed leave-behind pieces are effective in various IRL environments.

External signage on Queen Street West has proven to be an effective way to encourage new applications. Direct messaging instantly communicates what the school offers.

Quality interior signage is motivating and helps students get excited about being part of the community.

Brand extension to course material helps complete the visual identity picture — closing the loop between marketing communication, and the classroom experience.

All The Feels

HackerYou has a special place in our collective studio heart and we’re proud to be a part of such an exciting force in the local landscape. Companies dedicated to community help make Toronto something special. We encourage anyone interested in building contemporary skills to check out http://hackeryou.com — or shoot Heather an email, she’d be happy to tell you how easy it is.

Overall we’re incredibly proud of what we’ve been able to accomplish with HackerYou over the past 4 years. It’s a strong reminder that client collaboration, design strategy and visual execution can help define and grow a successful business.

Want more?
Take a look through Ladies Learning Code: A design retrospective.

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

2020 Update

HackerYou’s 2019 rebrand to Juno College of Technology was supported by a full visual identity design update by Studio Function:
https://studiofunction.com/case-studies/juno-college-hackeryou/