Studio Function is Vivian Hui, Frank Maidens & Ryan McLaren

Case Studies

The Blueprint

< back    1 of 11    next >

Tech to Charge your Life

The Blueprint is a quarterly magazine and website dedicated to what’s new in the hardware space. Combining news, opinion, reviews and a shopping experience, The Blueprint wants to be the number one stop for anyone interested in the latests gadgets and other advances in wearable technology.

< back    2 of 11    next >

Logo Update

The company was using an original logomark, but it lacked consistency when applied to various collateral. New concepts for an updated logomark were created to bring a constant look to all visual touch points. Both concepts also subtly reference various stages of product planning and manufacturing.

< back    3 of 11    next >

Completed Logo & Icon

A revised logo and icon were created to act as a cornerstone for all branded digital and print pieces. The cut corner treatment was selected as a representation of a digital CAD file or product schematic.

< back    4 of 11    next >

Responsive Web Experience

The Blueprint website seamlessly marries editorial content with shopping opportunities. Working under the creative direction of “Vogue meets Wired,” a distinctly fashion and tech art direction is carried throughout the entire web experience, with a stark black and white palette paired with hits of electric blue.

< back    5 of 11    next >

Vogue Hardware

Consumer hardware goods are visually treated in a way typically reserved for high-end clothing, helping to cultivate a feeling of luxury. This art direction allows focus to be placed on the detail of products, encouraging viewers to covet hardware in the same way as other luxury items.

< back    6 of 11    next >

Editorial Shopping Experiences

When browsing on any device, The Blueprint’s responsive site design adapts to showcase optimized images and text. Keeping with the established art direction for product photos, editorial content is treated in the same visually interesting manner to encourage readers to engage with content.

< back    7 of 11    next >

Daily Giveaway

By embracing whitespace and letting the typography sing, all site content feels refined and intentional. Though stark in its colouring, readers are still encouraged to interact with site and have the opportunity to appreciate details in the hardware showcased throughout the site.

< back    8 of 11    next >

Product Spotlights

As curators and tastemakers, The Blueprint needed a platform that would be flexible for different product spotlights. Taking cues from print editorial layouts, these templates feel fresh and accessible, while accommodating any product.

< back    9 of 11    next >

Editorial Design

Each product spotlight was supported with team testing and review, represented with concise curator’s checks of approval. Interesting grids of photos helped highlight the process behind the product, and the making of the spotlight, allowing the reader a glimpse behind the scenes.

< back    10 of 11    next >

Digital Publication

Leveraging the design of the website for a consistent visual foundation, the digital issues of the magazine blend the sensitivities of conventional editorial design with the interactivity and vibrancy of a digital piece.

< back    11 of 11    next >

Enhanced Shopping Experience

This blended approach is particularly effective when showcasing or promoting products. Each object can be attractively presented in layout, supported by the ability to learn more or purchase directly from the page design.

Ladies Learning Code

< back    1 of 11    next >

The Future of Learning

From coast to coast across Canada, Ladies Learning Code is a not-for-profit organization with a mission to be the leading resource for women and youth who want to become passionate builders of technology. Their workshops impart technical skills to absolute beginners in a hands-on, social, collaborative way.

< back    2 of 11    next >

Sketching & Ideation

Brainstorming for the logo was centered around tech/code imagery and focused in on the #ladieslearningcode hashtag that was popularized during the group’s formation in 2011.

< back    3 of 11    next >

Logo Convergence

This stage is where we fully develop any successful ideas uncovered in the sketching process. In this case, creating an ownable logomark proved to be a simple, effective, and gender-neutral solution.

< back    4 of 11    next >

Completed Logomark

Distilling the most successful elements of the exploration down to 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.

< back    5 of 11    next >

Responsive Web Design

The Ladies Learning Code website provides a clear framework for potential learners to find and discover literacy opportunities in 19 cities across Canada. The experience of first landing on the home page points towards the ultimate goal of finding programming that is right for the user.

< back    6 of 11    next >

Tailored Experience

It’s important to provide browsing experiences tailored for various devices in today’s contemporary web landscape. By working through a content strategy process with Ladies Learning Code, pages were simplified to be more appropriate for the mobile browsing experience.

< back    7 of 11    next >

Scalable Content Systems

The Ladies Learning Code brand acts as the parent organization to other members such as Girls Learning Code and Kids Learning Code. Each of these programs needed scalable about pages to give more information about their mandate and ultimately connect learners with appropriate workshops.

< back    8 of 11    next >

Engaging Art Direction

With 19 chapters across Canada, the Ladies Learning Code programs rely on corporate sponsors and a variety of volunteer efforts.

A visually engaging page 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.

http://ladieslearningcode.com

< back    9 of 11    next >

WordPress Blog Template

By breaking out of the typical framework for this section of the site, the Ladies Learning Code blog becomes its own property and a go-to destination for the most up-to-date news. It was important to highlight the various blog contributors as these are the people that make the organization successful.

http://ladieslearningcode.com/blog

< back    10 of 11    next >

Print Collateral

A graphic language for sponsorship packages and other print collateral was established to help highlight the successes of years past and goals for future.

< back    11 of 11    next >

Print Collateral

Data, text, and marketing messages are treated with the same approachable and highly legible type found throughout the Ladies Learning Code website.

Infographics leveraging brand colours and icons help pace the content while providing the reader with a visually rich and interesting experience.

FACTOR Canada

< back    1 of 12    next >

Funding the Canadian music industry

FACTOR Canada is a non-profit organization that provides financial support to Canadian recording artists, songwriters, and music labels. Their assistance has helped foster the growth and development of award-winning Canadian artists including Tanya Tagaq, Alvvays, July Talk, Serena Ryder and Owen Pallett.

< back    2 of 12    next >

Discovery & Creative Brief

FACTOR required an overhaul to their website to better serve the needs of their national user base. Through an in-depth discovery session with their team, various pain points and specific communication goals were uncovered.

This information was captured in a creative brief document that acted as a guiding benchmark throughout the design process.

< back    3 of 12    next >

Content & Site Planning

Content audits helped inform a strategic reorganization of the existing site map, with new approaches to content prescribed to improve site usability and help guide users effortlessly through the application process.

< back    4 of 12    next >

Site Wireframes

Wireframes were created to help visually capture the content modules required for each page. Reviewing and iterating on these wireframes with stakeholders at FACTOR helped nail down any new site content that needed to be created and established a hierarchy of actions and messages.

< back    5 of 12    next >

Responsive Design Concepts

With approved wireframes and content strategy, the next step was to visually explore multiple design concepts.

For responsive web design projects, our preference is to present three concepts that demonstrate various expressions of the strategy outlined in the creative brief.

< back    6 of 12    next >

Responsive Design Concepts

Each concept shows the same pages and same content outlined in the wireframes to help easily compare and contrast between the concepts.

< back    7 of 12    next >

Responsive Design Concepts

Presenting three different visual approaches to the same content helps clients more confidently choose a design direction to pursue.

< back    8 of 12    next >

Responsive Web Design

FACTOR chose Concept 2 as the most effective direction to pursue, based on the organizations’ goals and audiences. We collaborated with them to revise the design to better suit their needs.

Overall, this design concept felt dynamic and contemporary and fit comfortably into FACTOR’s existing visual language. Their brand colours were strategically used for headings, calls to action, and icons. Randomized photos showcasing their FACTOR-funded artists help to add a dynamic element to the home page and site footer, driving users to learn more about their success stories.

< back    9 of 12    next >

Providing Accessible Content

The site system was structured in a clear manner to help users easily navigate between sections. Working closely with Jess, please!, FACTOR’s custom WordPress theme was developed with accessibility standards as a top priority.

< back    10 of 12    next >

Focusing User Behaviours

Users looking for funding through FACTOR needed to effortlessly find suitable programs to apply for. The ability to filter FACTOR’s programs added an element of ease to the whole process.

Additionally, by shrinking the main navigation bar as the user travels down the page, their attention could be focused on finding their desired information.

< back    11 of 12    next >

Simplifying the Application Process

A major pain point of FACTOR’s previous site was the difficultly prospective applicants faced when looking for application info. The site redesign focused on different approaches to content that would help guide new users through the system.

Text-heavy page templates were designed with visual interest in mind. This was achieved through the use of size contrasts, colour, and z-index layering. Each main section of the site was also colour-coded with a hue shift in the nav bar to help keep users oriented as they explored.

< back    12 of 12    next >

Succinct & Useful Content

The site redesign aimed to answer any question a user may have, before they needed to ask it. The clearly organized site sections and prominent calls to action helped to drive discovery and improve the overall user experience.

http://factor.ca – launching in 2016

Fluency 21

< back    1 of 13    next >

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.

< back    2 of 13    next >

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.

< back    3 of 13    next >

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.

< back    4 of 13    next >

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.

< back    5 of 13    next >

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.

< back    6 of 13    next >

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.

< back    7 of 13    next >

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.

< back    8 of 13    next >

Simplifying Information

Graphic systems were required to present large amounts of information efficiently and visually.

< back    9 of 13    next >

Pushing Conventions

Circular buttons in the secondary navigation were designed to incorporate the graphic language of the visual identity.

< back    10 of 13    next >

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.

< back    11 of 13    next >

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.

< back    12 of 13    next >

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.

< back    13 of 13    next >

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.

Marketmaker Magazine

< back    1 of 12    next >

Who are the Market Makers?

Marketmaker Magazine is a new online destination & publication tailored to deliver news on the small and medium cap business community. The inaugural iOS issue showcases profiles of noteworthy individuals and organizations doing important work in new media, education, sustainability, social innovation, etc.

< back    2 of 12    next >

Typographic Exploration

In the early stages of the identity design process, a multitude of typefaces are explored to fully vet the feelings and visual associations contained within. After a comprehensive divergence of options, certain approaches are selected for further consideration.

This process of divergence and convergence allows for multiple entry points for client feedback and ensures the identity design stays on track with the parameters outlined in the creative brief.

< back    3 of 12    next >

Wordmark Convergence

The refined wordmark concepts narrow in on typographic solutions that achieve the communication goals and appropriately position Marketmaker against other competitors in the space.

< back    4 of 12    next >

Icon Convergence

Refined icon treatments were also developed to fully explore the potential of each identity design concept.

Because Marketmaker knew that responsive web design was a core requirement of their web strategy, the full logo needed a simplified icon to fall back on when available screen space was reduced in mobile browsers.

< back    5 of 12    next >

Completed Logomark

The final logomark for Marketmaker combines a wordmark that feels editorial & digital with a simplified M icon that metaphorically represents fluctuations in various markets.

The icon was also designed to reflect the phonetic structure of ‘market-maker’ – fusing two similar elements into one visually unified whole.

< back    6 of 12    next >

Responsive Web Experience

A highly visual approach to the homepage content drove the responsive web design process, resulting in a final product that does not look like your typical business news website.

Colourful bars representing different article categories take over when the browser is scaled down to mobile – ensuring a highly visual experience is preserved when images have to be dropped to lighten the page load.

< back    7 of 12    next >

Responsive Web Experience

Special consideration was paid to the website’s expression in tablet viewports. Taking advantage of responsive design allowed us to present the site content in a way that felt more like magazine editorial – resulting in modified layouts that are easy to navigate with touch, and would go well with a sunny nook and a cup of espresso.

< back    8 of 12    next >

Article Design

Article design also took full advantage of responsive treatments, ensuring the reading and visual experience of each piece was preserved regardless of the viewport.

< back    9 of 12    next >

iOS Magazine Design

Special content was developed for the iPad magazine, available for download in the App Store. Marketmaker’s content strategy called for delineation between website and magazine content, providing multiple touchpoints for the user, and the opportunity for the editors to tell different types of stories with a faceted approach to the brand.

< back    10 of 12    next >

Magazine Features

Feature articles in the iPad issues incorporate more spot illustrations, more full-screen images, and other interesting layout opportunities afforded by the medium.

< back    11 of 12    next >

Extensions of the Brand

Consistent approaches to photo treatments and illustrations are ownable and maintain a high level of visual interest in each article.

< back    12 of 12    next >

The Full Picture

The development of robust colour, typographic, and layout design systems allows the Marketmaker brand to navigate a myriad of design contexts with ease and consistency. Stay tuned to marketmakermag.com for new content and iPad issue releases.

HackerYou

< back    1 of 12    next >

No Grades, Just Results

HackerYou is Canada’s first programming bootcamp, offering full- and part-time courses for people who want to learn to code.

They are passionate about helping people take charge of their career through a hands-on, project-based curriculum with some of Toronto’s most talented web professionals.

< back    2 of 12    next >

Sketching & Ideation

Early concepts for the HackerYou logomark explored visual representations of collective action, personal initiative, and other icons of tech culture.

< back    3 of 12    next >

Logo Convergence

Some of the more successful sketches are converted to vector renderings to continue examining how the concepts work in colour and alongside other graphic elements.

< back    4 of 12    next >

Completed Logomark

A final logo ultimately emerges as the most appropriate solution for the design challenge.

This mark for HackerYou feels young and vibrant, but also sturdy and established. The cursor icon represents each student’s potential, in addition to the commencement of their respective journeys.

< back    5 of 12    next >

Responsive Web Design

With a few years of successful cohorts under their belt, HackerYou was ready for a site redesign to help potential students fully understand the depth of course offerings, and also the HackerYou community.

Photos and videos of the HackerYou classroom and communal spaces offer a glimpse into the vibe of attending HackerYou.

< back    6 of 12    next >

Concise Calendars

Through user interviews, it was determined that students often read through the course information multiple times before finally applying to the bootcamp. It was important to clearly show when each course was running throughout the year so prospective students could plan their time accordingly.

< back    7 of 12    next >

Student Spotlights

With a vibrant community and wealth of student success stories and work, the site aims to highlight the people and possibilities.

Flexible grid and content systems allow the site to be easily updated and kept feeling fresh as new testimonials and spotlights are added.

< back    8 of 12    next >

Flexible Content Modules

Clear access to information was a key element of the content strategy, as user interviews noted that prospective students want to take in as much information as possible prior to taking the plunge.

< back    9 of 12    next >

Showcasing Courses

In addition to the full-time web development bootcamp, HackerYou also offers part-time courses that are often paired together – a consideration in the design of all part-time groupings.

A custom icon set representing the different languages, frameworks, and applications that students tackle in each course help add skimmable content to the page.

< back    10 of 12    next >

About HackerYou

The passionate team behind HackerYou is part of its ongoing success, highlighted in a succinct and accessible manner on the About page.

http://hackeryou.com

< back    11 of 12    next >

Printed Collateral

Sometimes digital marketing is not enough to reach every audience and a targeted print piece is required. This small brochure was designed as a leave behind for offices, cafés, and co-workspaces.

< back    12 of 12    next >

Printed Collateral

A flexible template was designed to allow HackerYou to update the content depending on the season and course availability. Strong type hierarchies and a simple layout help deliver messages with clarity and interest.

For a more in-depth case study about the process and development of the HackerYou brand identity over the last 4 years, check out this post on Medium.

Selected Work

Web Design

< back    1 of 25    next >

Public Inc.

A new responsive site was designed for Public Inc. – an agency, consultancy, and incubator – to help them attract new business, talent, and better describe their service offering.

< back    2 of 25    next >

Public Inc.

Long blocks of written copy were transformed into easily digestible sections, labeled with clear thesis statements. This solution on the desktop site translated into a very user-friendly option for the mobile browsing experience.

< back    3 of 25    next >

Public Inc.

The responsive site has both optimized layout and content tailored to various breakpoints, including tablet (portrait and landscape) and smartphones.

http://publicinc.com

< back    4 of 25    next >

Nudge Rewards

Nudge is a leader in innovative mobile CSR solutions. Their responsive site was designed to provide clear access to their messaging and brand story, with support from a photographic art direction that incorporates bright lifestyle images showing engagements in sustainability, wellness, and volunteer initiatives.

< back    5 of 25    next >

Nudge Rewards

Additional information about each team member can be found by expanding their image in the grid, a technique that leverages Javascript to help keep the page height manageable and approachable.

http://nudgerewards.com

< back    6 of 25    next >

Felix Wedgwood Photography

This redesign for Felix Wedgwood Photography showcases his work in a large and impactful way, while bringing in his pinhole/diecut branding elements in subtly. The user is greeted with a random image upon arrival each time to keep things fresh and provide a quick browsing experience.

< back    7 of 25    next >

Felix Wedgwood Photography

Contemporary javascript functionality helps bring content and images to life – at a glance browsing is achievable through thumbnail grids organized by type.

< back    8 of 25    next >

Katherine Hague

ShopLocket provides resources for the next generation of hardware innovation, and co-founder Katherine Hague required a responsive site to tell her story and showcase her upcoming speaking appearances.

< back    9 of 25    next >

Katherine Hague

Collaborating with Katherine to establish an art direction focusing on the intersection of fashion + hardware, clean graphic treatments, grids, and impactful typographic choices and alignments were used to achieve the desired editorial look and feel.

< back    10 of 25    next >

Katherine Hague

Content on the responsive site seamlessly reduces based on the device and browser size of the viewer. Sliding carousels and accordions were used to help keep the page succinct and focused on the vital information.

http://katherinehague.com

< back    11 of 25    next >

Pressly

Pressly, the latest innovation by nulayer, is a platform that helps publishers and content marketers build and deliver beautiful tablet and smartphone content apps, quickly and easily. A new marketing site design was required to encourage beta signups.

< back    12 of 25    next >

Pressly

The interaction between photography and various tablet and mobile experiences was an important way to highlight content as king.

< back    13 of 25    next >

Pressly

Strong grids and layout design help the viewer easily understand Pressly’s features and pricing options.

< back    14 of 25    next >

PostageApp

Collaborating with TWG, a unique design solution for PostageApp was created, with strong type hierarchies which help lead the user through to key information on the home page. Loose illustrations and diagrams add a level of approachability and whimsy, while providing a quick overview of how PostageApp works.

< back    15 of 25    next >

PostageApp

The carrier pigeon concept uncovered in the logo exploration phase shines with the different plans: egg, carrier pigeon, falcon, owl, eagle, pterodactyl (and beyond). Attention to detail in the user interactions help to create a more enjoyable purchasing experience.

http://postageapp.com

< back    16 of 25    next >

HackerYou

HackerYou offers full- and part-time web development courses. The site aims to help potential students fully understand the depth of course offerings, and also the lively HackerYou community.

< back    17 of 25    next >

HackerYou

Clear access to information was a key element of the content strategy, as user interviews noted that prospective students want to take in as much information as possible prior to taking the plunge.

http://hackeryou.com

< back    18 of 25    next >

Cicada Design Inc.

Cicada’s extensive portfolio is showcased in a manageable way on one page, with additional content hidden in carousels or external project pages.

< back    19 of 25    next >

Cicada Design Inc.

A sticky navigation at the top allows for easy browsing between the different sections and the peekaboo effect creates an engaging tension. Clean grid variations help distinguish between the different types of content.

< back    20 of 25    next >

The Blueprint

Working under the creative direction of “Vogue meets Wired,” a distinctly fashion and tech art direction is carried throughout The Blueprint’s web experience, which seamlessly marries editorial content with shopping opportunities.

< back    21 of 25    next >

The Blueprint

When browsing on any device, The Blueprint’s responsive site design adapts to showcase optimized images and text. Keeping with the established art direction for product photos, editorial content is treated in the same visually interesting manner to encourage readers to engage with content.

http://theblueprint.com

< back    22 of 25    next >

CFRU 93.3fm

This Guelph campus radio station was given a facelift to reflect their cutting-edge DIY radio programming. Working in collaboration with TWG, listeners can easily filter and discover new radio shows and stream live audio and archived content.

http://cfru.ca

< back    23 of 25    next >

The Working Group

Based in Toronto for over a decade, TWG is a web and mobile application dev shop. A strong type hierarchy promotes ease of reading and powerful messaging. The use of serif type provides a comfortable, serious counterpoint to the lighthearted illustrations.

< back    24 of 25    next >

Ladies Learning Code

The Ladies Learning Code website provides a clear framework for potential learners to find and discover literacy opportunities in 19 cities across Canada. The experience of first landing on the home page points towards the ultimate goal of finding programming that is right for the user.

< back    25 of 25    next >

Ladies Learning Code

It’s important to provide browsing experiences tailored for various devices in today’s contemporary web landscape. By working through a content strategy process with Ladies Learning Code, pages were simplified to be more appropriate for the mobile browsing experience.

http://ladieslearningcode.com

Visual Identities

< back    1 of 10    next >

< back    2 of 10    next >

< back    3 of 10    next >

< back    4 of 10    next >

< back    5 of 10    next >

< back    6 of 10    next >

< back    7 of 10    next >

< back    8 of 10    next >

< back    9 of 10    next >

< back    10 of 10    next >

Print & Editorial

About Us

Design for Love

Function is a Toronto-based design studio whose practice offers a dynamic range of communication design services. Our focus is the propagation of meaningful, functional solutions to visual design challenges, great and small.

Visual identity campaigns, messaging strategy, contemporary web solutions, print collateral, product packaging, and illustration are all passions. In short, we design for business, we design for love.

Involvement

Coming in 2016

blogTO is the leading news and culture site in Toronto with a larger online readership than NOW Magazine and Toronto Life. With over a decade of articles and reviews, they have established themselves as the go-to site for what’s happening in Toronto. Frank and Vivian were honoured to be involved in the visual identity update and responsive web design for their upcoming re-launch in Toronto and Montreal – stay tuned in 2016!

We love collaborating with passionate entrepreneurs and established businesses to help re-energize brand identities and offer insights that only outside collaborators can provide. Email us and let’s get started.

#xoTO

Learn to Code in Toronto

HackerYou offers full- and part-time courses for anyone interested in web development and design.

Having recently expanded to 12,000 sq. ft. on Queen St. West, HackerYou’s bright classrooms, new alumni lounge, and co-workspace make it the most inspiring place to learn and connect with other passionate minds in Toronto. Frank and Vivian have had the pleasure of helping build their brand identity over the last 3 years and truly believe that there is no better community in Toronto to advance your tech skills.

Resources

Logo Design Guide

We believe that logos have the power to define the perception of an entire business. They can be the difference maker in a world saturated by similarity. Our latest PDF explores the process and value of a visual identity. It was written for freelancers, marketers, developers, educators, and entrepreneurs that want to learn more about the principles and benefits of effective identity design.

Download the PDF