HackerYou: A design case study

Studio Function
Nov 10, 2015 · 6 min read
Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

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.

Studio Function

Design rants, raves, and case studies

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store