Studio Function is Vivian Hui, Frank Maidens & Ryan McLaren

Case Studies

Timecounts

< back    1 of 14    next >

Mobilizing Communities Across the World

Timecounts is a volunteer management platform for the modern organizer. This UK-based SaaS company empowers users with their suite of powerful tools to help recruit, manage, and engage their various communities.

< back    2 of 14    next >

Sketches & Ideation

Through an in-depth discovery and creative brief process with Timecounts, a framework for visual expressions of their brand character was developed. Guiding concepts of community, mobilization, time and scheduling were explored in this stage.

< back    3 of 14    next >

Logo Convergence

Successful sketches that accomplished the goals laid out in the creative brief were identified and further refined in vector. Different colour systems emerged to help support the communication goals.

< back    4 of 14    next >

Supporting Identity Concepts

The presentation aims to show each logo concept in context, since logos are seldom seen floating alone in empty space. This range of example deliverables allow the team to judge the effectiveness of the logo concept in context and provides different visual interpretations of the creative brief.

< back    5 of 14    next >

Completed Logomark

The final Timecounts logo takes a simple visual approach to representing community action and scheduled time. The clockwise traveling line feels dynamic and has an inspirational element of momentum that lends itself to animation. Paired with a contemporary lowercase sans serif, this combination mark is approachable and works well for the various needs of the brand.

< back    6 of 14    next >

Final Visual Identity

A logo is a small piece of the puzzle – a larger visual identity system needs to be crafted to breathe life into the brand. A dynamic colour palette, typography system, photographic treatments, custom patterns and iconography were all created for Timecounts with scalability and growth in mind.

< back    7 of 14    next >

Brand Illustrations

Illustration plays a large role in supporting internal documents and helps add visual interest to certain areas of user onboarding in the web app. A consistent art direction for illustration ensures new content fits comfortably under the brand umbrella.

< back    8 of 14    next >

Web App UX & UI

Timecounts’ brilliant engineers worked hard to develop a functioning product prototype, but needed guidance to extend the visual identity system to their various online and offline touchpoints. Their volunteer management platform maintains the voice and art direction established in their visual identity, but takes a step back to allow the user actions to be the main focus.

< back    9 of 14    next >

Web App UX & UI

We collaborated with the team on product wireframing and UX strategy based on different user workflows, through to visual interface design and asset preparation for development. Each area of the app strives to address user needs and promote an efficient workflow based on customer feedback from real-life scenarios.

< back    10 of 14    next >

Responsive Web Design

Once the product design was finalized the next phase was tackling the onboarding and public facing marketing site. The process kicked off with a competitive landscape analysis and the generation of communication strategy options that would ensure Timecounts had a distinct position in the market.

Highlighting actual users and organizations allowed the product features to be showcased in a valuable real-world context.

< back    11 of 14    next >

Responsive Web Design

Each organization’s story was tied to a different set of product features that new users would easily understand and derive value from. By sharing actual customer stories, Timecounts was able to provide inspirational accounts of how their product was helping to make an impact and move the needle in the real world.

< back    12 of 14    next >

Communicating Features & Value

When approaching the tour for Timecounts’ feature-rich app, it was important to connect with the various types of user needs and workflows. Grouping related features and succinctly describing their value demonstrates that Timecounts understands the typical pain points encountered by organizers.

< back    13 of 14    next >

Pricing Packages

Like many SaaS marketing sites, Timecounts required a pricing area that could grow as their offering evolved. A flexible slider system was designed as an engaging way for the user to determine the price for their needs. Animated icons help to visually support the idea of a lively, bustling community.

For a deeper look at the full design process with Timecounts, read our case study on Medium.

< back    14 of 14    next >

The Dev Pack

We often collaborate with startups that have their own in-house developers. When designers and developers work remotely, many visual nuances can be lost in translation. To prevent this we take special steps in the production of our designs with an in-depth dev pack which provides mockups for different viewports, CSS type styles, grid guidelines, and detailed functionality directions for specific page sections.

Download our ebook – The Dev Pack: A guide to preparing design mockups for development.

Ladies Learning Code

< back    1 of 11    next >

The Future of Learning

Operating 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.

< back    4 of 11    next >

Completed Logomark

Distilling the most successful elements of the exploration to a single mark is always a challenge. The final Ladies Learning Code logo has a custom hashtag symbol designed to complement the round, characterful 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 29 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 >

Engaging Art Direction

With dozens of chapters across Canada, 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.

< back    7 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    8 of 11    next >

Roadmap for the Future

As the program offering has evolved over the years, LLC wanted to provide learners with an engaging way to explore their different workshops.

An easy to use program roadmap was strategized and designed to help both new and repeat learners find something to suit their interests.

http://ladieslearningcode.com/roadmap

< back    9 of 11    next >

Growing the Brand Identity

A robust icon family and extended colour palette was developed to help diversify the existing brand language and add a visual presence to each of the programs. The icon style is scalable and built to grow as future offerings are developed.

< 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.

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.

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

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.

Public Inc. is an agency, consultancy, and incubator that required a contemporary web presence 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.

< back    4 of 25    next >

Timecounts

Timecounts is a volunteer management platform for the modern organizer. This UK-based SaaS company empowers users with their suite of powerful tools to help recruit, manage, and engage their various communities.

By sharing actual customer stories, Timecounts was able to provide inspirational accounts of how their product was helping to make an impact and move the needle in the real world.

< back    5 of 25    next >

Timecounts

We collaborated with the Timecounts team on product wireframing and UX strategy based on different user workflows, through to visual interface design and asset preparation for development. Each area of the app strives to address user needs and promote an efficient workflow based on customer feedback from real-life scenarios.

< 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 >

About Us

Design for Love

Function is a Toronto-based design studio offering 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.

Request a quote

Involvement

Maple – launching in 2016

Maple provides Canadians with 24/7 access to online physician visits. Users receive diagnoses and prescriptions through instant message or video chat. Frank and Vivian have been working closely with the team at Maple to develop a rich brand language spanning visual identity, responsive web & app design, print & environmental graphics – all supported by the talents of Sam Island.

We love collaborating with passionate entrepreneurs, growth stage startups, and established businesses to create or re-energize brand identities. Our team moves quickly and offers valuable insights from an external perspective. Email us and let’s get started.

#XOTO

Redesigning blogTO

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 Fall 2016!

Rants & Raves

From the Blog