Studio Function is Vivian Hui, Frank Maidens & Ryan McLaren

We encourage the success of growing companies with communication strategy and outstanding visual design.

Our work enhances brand credibility and delivers lasting value to clients.

Brand Definition

blogTO

< back    1 of 15    next >

Refreshing one of Toronto’s biggest brands

blogTO is Toronto’s main stop for local news, reviews, and best of lists. Created in 2004, it’s one of the city’s longest standing culture sites.

A new visual identity and responsive web design were required to help the organization preserve its place as a contemporary destination for all things Toronto.

< back    2 of 15    next >

Getting ready

Prior to any new exercise, the design problem needs to be articulated. A creative brief is the first step in clearly understanding the task at hand. Visual mood boards were also used to help with orientation prior to visual identity exploration.

< back    3 of 15    next >

Final logo design

The refreshed blogTO logo combines influences from editorial design, typographic sensitivities from the modern web, and a visual nod to the early days of blogging.

This simple, meaningful approach provides blogTO with a wordmark that communicates with authenticity and is better able to stand the test of time.

< back    4 of 15    next >

Social media presence

Part of blogTO’s ongoing success stems from their sustained investment in social media. Each of their channels boasts a robust following and the organization tries hard to keep their audiences engaged.

Specific versions of the wordmark were designed to live comfortably in the icon formats required by various social properties.

Twitter  ⁄  Facebook  ⁄  Instagram

< back    5 of 15    next >

Printed stationery

Many of blogTO’s relationships with advertisers and other partners still depend largely on face-to-face meetings. Designs were created for business cards and other stationery to represent the brand during offline exchanges.

< back    6 of 15    next >

Responsive platform design

It’s no secret that the majority of contemporary internet traffic comes from mobile devices. blogTO wanted to reinvest in creating a great reading experience for users on any device or browser.

Specific attention was paid to the design of individual article pages. Users are becoming more likely to first land on these pages via shared content on social. Individual article templates have become just as important as the home page itself.

< back    7 of 15    next >

Responsive platform design

A flexible, scalable system was required to accommodate a wide range of article content. blogTO’s best of lists are particularly popular, so the ability for users to search, browse, and rate different listings was a key priority.

< back    8 of 15    next >

Responsive platform design

Photography plays a huge role in user engagement and blogTO is dedicated to making sure each article portrays assets effectively.

Strong visuals are supported by various layout systems that allow different templates to properly manage a wide range of content.

< back    9 of 15    next >

Responsive platform design

Maps and address data are central to a location-based content strategy. Contemporary mapping services were skinned and incorporated into the redesign of specific page templates. These solutions were created to communicate clearly on any browser or mobile device.

< back    10 of 15    next >

Responsive image galleries

Themed slideshows are a very effective way to quickly tell a visually engaging story about a local establishment. Significant effort was dedicated to the creation of an immersive, full-screen image gallery experience. A system was also designed to allow unobtrusive ad integration.

< back    11 of 15    next >

Responsive web app

An attractive user onboarding process was designed to encourage new users to create an account with blogTO and access the full range of site functionality.

< back    12 of 15    next >

Responsive web app

Once logged in the user has access to a dashboard and a wide range of useful features to further promote engagement with blogTO articles, reviews, and best of lists.

An innovative approach to the responsive dashboard design feels bespoke and elevates the brand.

< back    13 of 15    next >

Responsive web app

Continued emphasis on photo and image content keeps the app design from feeling dry or cumbersome. Special attention was dedicated to creating flexible layout systems and strong typographic hierarchies.

blogTO’s responsive platform and web app were developed by the amazing team at Hipo.

< back    14 of 15    next >

Motion graphics for millions of viewers

Video content is becoming one of the main ways blogTO engages with millions of users on social. A cohesive system for video art direction, text overlays, and other graphics was required to maintain brand consistency in this growing medium.

< back    15 of 15    next >

Design extension to other properties

Part of blogTO’s growth strategy is to bring various content producers under its brand umbrella. Stuck On The Gardiner is one such example. Each of these acquisitions require visual design that registers as unique, but still exemplifies a strong connection to the central brand character.

Various animations and motion graphics were created to provide art direction to external production teams. See them live on blogTO’s Facebook video page.

Canada Learning Code

< back    1 of 17    next >

Solidifying Canada as a leader in innovation

Canada Learning Code is on a mission to help 10 million Canadians learn vital skills for the digital economy. Through program workshops, strategic partnerships, and a focus on underrepresented demographics in STEM, the organization is changing the landscape of tech education nationwide.

CLC’s leadership team required a new overarching, national identity to unify its various programs in a brand umbrella, along with a design strategy to ensure quality and consistency of all communication touchpoints moving forward.

< back    2 of 17    next >

Audience definition & strategic planning

The positioning of a new identity requires clear definition of audiences and communication goals. The creative brief process captures essential input from stakeholders and sets a criteria for successful messaging and visual design.

A positioning strategy for the preservation of established, well-known program identities like Ladies Learning Code was also essential to the process of generating CLC’s new national brand.

< back    3 of 17    next >

Crafting logos as cornerstones

CLC required the creation of a new logomark to communicate stability and accessibility to a wide audience of learners, educators, partners, and volunteers.

Refinements to existing program logos helped establish a flexible system for the addition of new initiatives in the future.

< back    4 of 17    next >

Amplifying results

New visual language provided a system for simple, memorable communication in reports and other printed material.

< back    5 of 17    next >

Impact from a distance

An awareness campaign was created to express the possibilities of code and encourage the latent creativity that exists in all people.

< back    6 of 17    next >

Meaningful metaphors in visual elements

CLC believes that coding education can make a significant impact on the lives of all Canadians, and contribute greatly to the health of Canada’s economy. Aspects of the new visual identity represent the energy created by the intersection of the digital and physical world.

< back    7 of 17    next >

Memorable web design

A contemporary web design was required to introduce CLC’s new visual identity and position their program offerings. Interesting size hierarchies and layout alignments create a memorable design that communicate with clarity and interest.

< back    8 of 17    next >

Memorable web design

The responsive layout was designed to accommodate french and english content in all page sections. Key stats and other achievements were called out to help viewers read quickly. Social media integration was another important aspect of the site design to support CLC’s impressive number of followers nationwide.

View the site

< back    9 of 17    next >

Branded social properties

Social media is a critical aspect of CLC’s communication strategy. Twitter in particular allows CLC to promote events and engage with communities associated with its various programs. Large groups of learners, partners, and volunteers are united by conversations and the common goal of making tech education accessible to all.

< back    10 of 17    next >

Branded social properties

Extensions of CLC’s visual language create impactful, attractive graphics that are highly visible in crowded news feeds.

< back    11 of 17    next >

Cards to help the cause

Name cards for team members needed to showcase CLC branding as well as the respective program identity for chapter leads involved at the local level. A vertical orientation and bold use of colour help these designs make an impact.

< back    12 of 17    next >

Educational program – Ladies

Founded in 2011, Ladies Learning Code is the original educational program. Over the years it has gained much notoriety and brand equity, so the challenge was to integrate it into the larger brand umbrella while preserving its character and charm.

Updates were made to LLC’s visual language with new typographic and illustration styles.

For a deeper look at our collaborations with LLC since 2011, read our design retrospective on Medium.


< back    13 of 17    next >

Educational program – Teens

Teens Learning Code is a new addition to the program family that offers clubs, workshops, and networking events for young learners. Specific icons and energetic design pieces were created to resonate with this audience.

< back    14 of 17    next >

Educational program – Kids & Girls

Encouraging kids, particularly girls, to develop an interest in coding is central to the success of CLC’s mission. A range of design collateral was created to support these educational programs and encourage young minds to pursue an interest in technology.

< back    15 of 17    next >

Educational program – Teachers

Classrooms also play an essential role in making coding education more accessible to young Canadians. CLC created specific material that allows teachers to deliver existing curriculum through the lens of coding exercises. Simple, characterful visual design was required to help these assets communicate clearly and inspire educators.

< back    16 of 17    next >

Ensuring quality & consistency

Canada Learning Code’s new visual identity will be used by various team members, volunteers, and community partners. This resource helps ensure graphic standards are upheld during the application, extension, or future generation of brand assets.

Visual consistency across a range of touchpoints helps elevate the organization, underscores credibility, and encourages the formation of new partnerships.

< back    17 of 17    next >

Program graphic standards

Quality and consistency are also required when working with specific program-level identities. A second resource was created to highlight typographic treatments, illustration styles, use of colour, and other essential characteristics for each program initiative.

The Blueprint

< back    1 of 10    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 should be the number one stop for anyone interested in the latest gadgets and other advances in wearable technology.

< back    2 of 10    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    3 of 10    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    4 of 10    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    5 of 10    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    6 of 10    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    7 of 10    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    8 of 10    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    9 of 10    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.

< back    10 of 10    next >

Completed logo & icon

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

Maple Healthcare

< back    1 of 16    next >

Defining the future of Canadian healthcare

Maple offers online doctor consultations to Canadians anytime 24/7. With a convenient, patient-centric model, the company hopes to create a more sustainable system for healthcare delivery by reducing the load on overburdened clinics and emergency facilities.

The team at Maple required a visual identity, responsive web presence, and digital product design to help realize their vision.

< back    2 of 16    next >

The value of messaging

All design exercises start with a creative brief. This paints a clear picture of the communication goals, competitive landscape, and target audience profiles.

With a creative brief established, the next task is to define a brand voice and messaging strategy. The hierarchy and tone established here helps ensure consistency in all Maple communications. Consistent messaging is essential and leads to feelings of trust and confidence in the brand.

< back    3 of 16    next >

Final logo design

A simple, understated logomark was created to communicate with confidence.

Subtle custom modifications to various characters make the mark more recognizable. A lowercase text setting also contributes to a sense of approachability and warmth.

< back    4 of 16    next >

Responsive web presence

Maple’s marketing site had the challenge of introducing a novel service to Canadian users who are not accustomed to paying for doctor consultations. As such, special emphasis on the personal benefits of this convenient, patient-centric service was required to immediately convey value and drive conversions.

< back    5 of 16    next >

Trust & warmth

Various pages of the marketing site blend approachable design, illustration, and copywriting to put users at ease and help Maple stand apart from other current and future competitors. These pieces are assisted greatly by the charming illustration work of Sam Island.

Underneath this layer of approachability are strong alignments and good type hierarchies. This solid visual foundation makes the layout feel credible and helps inspire feelings of trust.

For a closer look at the generation of Maple’s identity and design collateral, read our case study on Medium.

< back    6 of 16    next >

Impressive physician network

Showcasing the names, faces, and biographies of Maple physicians greatly facilitates user conversions and also inspires other doctors to join Maple’s care network.

http://getmaple.ca

< back    7 of 16    next >

Mobile app – Onboarding

Many UX and UI considerations were delivered for Maple’s iOS app design, a key element of their growth roadmap. The app experience needed to anticipate a wide range of audiences and convey the same feelings of trust and warmth expressed on the marketing site.

Various parts of the onboarding process were broken onto multiple screens to focus the user action at each step.

< back    8 of 16    next >

Mobile app – Consultation chat

Users expect text messaging and video chat to be straightforward and uncluttered. The Maple consultation experience was crafted with familiar UI patterns and general ease of use in mind.

The memorable brand colour palette is used strategically throughout the app to focus attention on certain elements at the appropriate times.

< back    9 of 16    next >

Mobile app – After consultation

Following their diagnosis, the user has an option for free delivery of any required prescriptions. Since this is still a novel service, great care was taken to succinctly explain the process to help address any concerns.

To maintain a high standard of care and service, Maple collects a variety of feedback from users following every consultation.

Download the app: iOS  ⁄  Android

< back    10 of 16    next >

Brand opportunity at every step

Special care was taken to ensure every step of the user onboarding process maintained a consistent, characterful brand experience.

Use of colour, illustration, and copywriting all combine with a unique take on the design of typical form elements to elevate the page.

https://app.getmaple.ca/register

< back    11 of 16    next >

Web app – Dashboard

Much effort was dedicated to the planning and execution of Maple’s web app. Preliminary designs lead to user testing which fed crucial info back into the design process. Ultimately the result is an app experience that feels branded, intuitive, trustworthy, and interesting.

< back    12 of 16    next >

Web app – Talk to a doctor

The web app needed a way to collect patient symptom info in advance of the doctor consultation. A phased solution was designed to ensure all the proper data was collected, but also to gently guide the user to keep them from feeling overwhelmed.

< back    13 of 16    next >

Web app – Payment

Canadians aren’t used to paying for on-demand healthcare, so a clear system was designed to provide pricing transparency and make sure each user knew how much the consultation would cost.

Custom brand-specific icons were designed for different time blocks to help visually communicate the pricing structure.

< back    14 of 16    next >

Web app – Consultation

Maple doctors can diagnose a wide range of issues based on text conversations, image sharing, and video chat. They can even provide prescriptions and doctor’s notes remotely.

The design system here needed to simply and clearly manage all the variable data and states of the online consultation.

< back    15 of 16    next >

Consultation summary

Special care was taken with the design of the summary pages to ensure the patient has clear access to all the consultation info, prescriptions, and next steps provided by the doctor.

A system was also designed to rate the consultation experience, as this is another key aspect of the patient-centric brand vision.

< back    16 of 16    next >

Ongoing collateral design

Print brochures with details and pricing information act as an in-person bridge for doctors to connect patients to the app. Messages of convenience and ease of use are tailored to entice people sitting in a waiting room.

http://getmaple.ca

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.

Plaza Ventures

< back    1 of 9    next >

Connecting family wealth and private tech

Plaza Ventures is a forward-thinking venture capital firm focused on the innovation economy. Their annual micro-funds connect growth-stage companies to a wealth of knowledge and private capital from successful families.

The team at PV required a visual identity overhaul, new web presence, and refined messaging strategy to resonate with private investors and visionary entrepreneurs.

< back    2 of 9    next >

Creative strategy & web content planning

The most effective marketing messages combine aspects of authenticity, audience definition, and competitive landscape awareness. Creative strategy defines these aspects and explores top-level concepts to get stakeholder approval before design execution.

Once established, creative strategy powers a web content planning exercise and helps to define communication requirements for that brand touchpoint.

< back    3 of 9    next >

Logo updates to preserve brand equity

This updated design provides a sense of structure and established brand presence, while also maintaining a visual connection to PV’s previous logomark and parent company Plazacorp.

Subtle typographic details add visual interest and encourage memorability with new audiences.

< back    4 of 9    next >

Putting people first

Plaza Ventures is community-oriented and believes success is derived from great relationships. The firm actively connects investors with company leadership to help all parties achieve a successful outcome.

The new website was designed to celebrate these relationships and put the focus on great teams and outstanding individuals.

< back    5 of 9    next >

Design embodies philosophy

Thoughtful whitespace and well-structured layouts do more than improve the reading experience – these elements are a reflection of the firm’s discipline, maturity, and credibility.

< back    6 of 9    next >

A flexible system

The website was designed to accommodate future growth as PV brings new teams into the family. Portfolio company cards and other company-specific layout elements anticipate content variability and allow brand colours to create vibrancy on the page.

The overall art direction allows individual portfolio companies to be showcased and celebrated, highlighting details about PV’s relationships with various teams.

< back    7 of 9    next >

Creating a visual language

Successful websites find a deeper connection between page content and create harmony within those expressions. PV’s new web presence unites typography, icon design, infographics, photography, and layout with a sense of openness and transparency. This unification creates a memorable experience and imparts a positive impression of the brand.

http://plaza.ventures

< back    8 of 9    next >

Quality at every touchpoint

A well-crafted application of the brand’s visual language can positively impact all communication material. Clarity and visual interest combine to elevate reports and encourage successful communication by supporting the reading experience.

< back    9 of 9    next >

A plan for consistency

High-quality, consistent visual design is the product of thorough preparation. An identity standards guide and other document templates help to ensure all team members understand the components of the visual language and are equipped to use the assets provided.

Selected Work

Web Design

< back    1 of 25    next >

Canada Learning Code

A contemporary web design was required to introduce CLC’s new visual identity and position their program offerings. Interesting size hierarchies and layout alignments create a memorable design that communicate with clarity and interest.

< back    2 of 25    next >

Canada Learning Code

The responsive layout was designed to accommodate french and english content in all page sections. Key stats and other achievements were called out to help viewers read quickly. Social media integration was another important aspect of the site design to support CLC’s impressive number of followers nationwide.

View the site

< back    3 of 25    next >

Katherine Hague

Katherine is an angel investor, serial entrepreneur, writer, and the founder of Shoplocket and Female Funders. A refined responsive site was required to showcase her various accomplishments and promote upcoming speaking appearances.

< back    4 of 25    next >

Katherine Hague

An art direction that focused on the intersection of fashion + hardware was established early in the web design process. Clean graphic treatments, impactful typography, and elegant visual alignments were used to achieve the desired editorial look and feel.

< back    5 of 25    next >

Katherine Hague

Content on the site is seamlessly reduced based on the viewer’s device and browser size. Sliding carousels and accordion treatments help keep the page succinct and focused on vital information.

http://katherinehague.com

< back    6 of 25    next >

Maple Healthcare

Maple’s marketing site had the challenge of introducing a novel service to Canadian users who are not accustomed to paying for doctor consultations. As such, special emphasis on the personal benefits of this convenient, patient-centric service was required to immediately convey value and drive conversions.

< back    7 of 25    next >

Maple Healthcare

Various pages of the marketing site blend approachable design, illustration, and copywriting to put users at ease and help Maple stand apart from other current and future competitors.

Underneath this layer of approachability are strong alignments and good type hierarchies. This solid visual foundation makes the layout feel credible and helps inspire feelings of trust.

http://getmaple.ca

< back    8 of 25    next >

HackerYou

HackerYou offers full- and part-time web development courses in Toronto. The site aims to help prospective students fully understand the depth or course offerings and the quality of HackerYou’s lively, inclusive community space.

< back    9 of 25    next >

HackerYou

Clear access to upcoming course schedules was a key element of the content strategy. Early user interviews revealed that prospective students want to take is as much information as possible prior to taking the plunge.

< back    10 of 25    next >

HackerYou

The site highlights personal achievements by sharing student testimonials and showcasing various student projects created during the bootcamp.

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

< back    11 of 25    next >

FACTOR Canada

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    12 of 25    next >

FACTOR Canada

A dynamic and contemporary responsive web design fit comfortably into FACTOR’s existing visual language.

http://factor.ca

< back    13 of 25    next >

Public Inc.

Public is an agency, consultancy, and incubator that required a contemporary web presence to help attract new business and better describe their service offering.

< back    14 of 25    next >

Public Inc.

The responsive site has optimized layouts and content tailored to display effectively on any mobile device or web browser.

< back    15 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 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    16 of 25    next >

Timecounts

We collaborated with the Timecounts team on product planning and UX strategy based on different user workflows. This work was extended into 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.

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

< back    17 of 25    next >

The Working Group

TWG is a leading web and mobile application dev shop in Toronto. A responsive web design leveraged strong type hierarchies to promote easy reading on various page designs. The use of serif type provides a comfortable, serious counterpoint to the lighthearted illustrations and iconography seen on the site.

< back    18 of 25    next >

PostageApp

A unique design solution for PostageApp was created in collaboration with TWG. Loose illustrations focused around a carrier pigeon concept add a level of approachability and whimsy. Attention to detail in various user interactions also help create a more enjoyable purchasing experience.

http://postageapp.com

< back    19 of 25    next >

Felix Wedgwood Photography

Toronto-based photographer Felix Wedgwood required a lightweight responsive site to help showcase his portfolio in a large, impactful way. The user is greeted with a random image upon arrival each time to keep things fresh and provide a quick browsing experience.

< back    20 of 25    next >

Felix Wedgwood Photography

Lively site functionality brings content and images to life. At a glance browsing is achievable via thumbnails organized by category.

< back    21 of 25    next >

blogTO

blogTO is Toronto’s main stop for local news, reviews, and best of lists. Founded in 2004, it’s one of the city’s longest standing culture sites.

< back    22 of 25    next >

blogTO

Maps and address data are central to a location-based content strategy. Contemporary mapping services were skinned and incorporated into the redesign of specific page templates. These solutions were created to communicate clearly on any browser or mobile device.

< back    23 of 25    next >

blogTO

A responsive web app was designed for users to access their dashboard and a wide range of useful features, further promoting engagement with blogTO articles, reviews, and best of lists.

http://blogto.com

< back    24 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    25 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.

Product Design

< back    1 of 17    next >

Maple iOS app

Maple’s mobile app was a key element of their growth roadmap, since many Canadians were eager to consult with doctors on the go. The app experience needed to anticipate a wide range of audiences and convey the same feelings of trust and warmth expressed on the marketing site.

< back    2 of 17    next >

Maple iOS app

Users expect text messaging and video chat to be straightforward and uncluttered. The Maple consultation experience was crafted with familiar UI patterns and general ease of use in mind.

Download the app: iOS  ⁄  Android

< back    3 of 17    next >

Maple web app

Special care was taken to ensure every step of Maple’s patient experience maintained a consistent, characterful brand presence. Use of colour, illustration, and copywriting all combine to elevate this particular touchpoint.

< back    4 of 17    next >

Maple web app

Significant effort was dedicated to the planning of Maple’s web app. Preliminary designs led to user testing which fed crucial info back into the design process. Ultimately the result is an app experience that feels branded, intuitive, trustworthy, and interesting.

< back    5 of 17    next >

Maple web app UI kit

A deeper sense of familiarity and trust can be directly influenced by the consistent presentation of UI elements. The creation of a visual asset library helps ensure all existing and future expressions of the brand feel the same, and allow broader team of designers and developers to work more efficiently under a unified art direction.

http://getmaple.ca

< back    6 of 17    next >

Zion iOS app

Zion has a vision for convenient delivery of a curated selection of dispensary cannabis. Product planning, iOS app design, and other top-level marketing materials were commissioned to help realize their ambitions.

< back    7 of 17    next >

Zion iOS app

Intuitive browsing by category helps customers select the right product based on their preferences or conditions. Interesting type hierarchies and use of white space in the app design create a pleasing, memorable experience when shopping.

< back    8 of 17    next >

Zion iOS app

Product screens draw a noticeable connection to packaging design and other touch points to provide visual consistency for the brand. Confident use of colour in the app also ensures clear differentiation between sections and contributes to visual interest.

< back    9 of 17    next >

blogTO responsive web app

blogTO has experienced a massive shift to mobile traffic in the past 3 years. As such, the new web app needed to consider the needs of this audience first and foremost.

Each user’s account provides a wide range of useful features to further promote engagement with blogTO articles, reviews, and best of lists. An innovative approach to the responsive dashboard design feels bespoke and elevates the brand.

< back    10 of 17    next >

blogTO responsive web app

Continued emphasis on photo and image content keeps the app design from feeling dry or cumbersome. Special attention was dedicated to creating flexible layout systems and strong typographic hierarchies.

< back    11 of 17    next >

blogTO responsive web app

Navigation and other primary app functions were designed to provide a terrific user experience in mobile viewports, where blogTO’s user base primarily resides.

http://blogto.com

< back    12 of 17    next >

Timecounts web app

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    13 of 17    next >

Timecounts web app

We collaborated with the team on UX strategy to accommodate different user workflows, and provided visual interface design and packaged assets 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    14 of 17    next >

Timecounts web app

Volunteer profiles, complex calendar functionality, and various states of volunteer availability all needed to be managed by a simple visual system. This 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    15 of 17    next >

Marketmaker iOS magazine

Bi-annual issues of Marketmaker Magazine highlight the successes and innovations of some of the world’s most influential people. Readers can explore different topics and sub-categories via long-format articles, interviews, and other analysis in an editorial format designed for tablet consumption.

< back    16 of 17    next >

Marketmaker iOS app

Marketmaker’s iOS app also provides access to long-format articles in combination with other financial information. Pairing editorial content with the ability to reference real-time market data creates a meaningful experience for users.

< back    17 of 17    next >

Marketmaker iOS app

The app allows users to dive deeper into their own research processes without the need to switch to other products or websites. Users can also set notifications for various material news events like product launches and earnings calls.

Visual Identity

< 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 focused on the propagation of meaningful solutions to a variety of communication design challenges.

Brand definition, visual identity, messaging strategy, contemporary web solutions, and digital product design are all passions. We understand and respond to the ever-changing nature of the design landscape to create real value for our clients. In short, we design for business, we design for love.

Request a quote

Involvement

On-demand Healthcare

Maple provides Canadians with 24/7 access to doctors online. Frank and Vivian have been working closely with the team since 2015 to develop a rich brand language spanning visual identity, responsive web presence & web app design, iOS app design, print & environmental graphics.

Maple: A design case study

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

Learn to Code in Toronto

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

Their 12,000 sq. ft. education and co-work space on Queen St. West is one the most inspiring places to learn and connect with other passionate minds. Since 2012, Frank and Vivian have had the pleasure of helping build their brand identity and truly believe that there is no better community in Toronto to advance your tech skills.

HackerYou: A design case study

Rants & Raves

From the Blog