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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
For a deeper look at our collaborations with Ladies Learning Code since 2011, read our design retrospective on Medium.
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.
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.
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.
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.
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.
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.
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.
Maple offers online doctor consultations to residents of Ontario 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.
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.
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.
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.
Another challenge for the marketing site was to clearly depict the safe, effective nature of telemedicine and remote diagnosis.
A more serious, refined graphic language was developed for charts and other stats, which were again supported by approachable illustrations and inviting copy.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Content on the 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.
Based in Toronto for over a decade, TWG is a web and mobile application dev shop. A strong type hierarchy was used to promote easy reading on various page designs. The use of serif type provides a comfortable, serious counterpoint to the lighthearted illustrations seen on the site.
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.
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.
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.
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.
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.
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.
A dynamic and contemporary responsive web design fit comfortably into FACTOR’s existing visual language.
Significant effort was dedicated to the planning 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.
Design of the online consultation room required the juggling of various states and functionality. Live chat, image sharing, video conferencing, timelines, and prescription confirmation were each critical aspects. The app design accommodates these challenges while maintaining a simple and intuitive interface for patients with varying levels of digital literacy.
A user’s sense of familiarity and trust can be directly influenced by the consistent use of UI elements. The creation of a visual asset library helps ensure all existing and future expressions of the brand feel the same, and can allow larger teams of designers and developers to work more efficiently by sharing a unified art direction.
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. Navigation and other primary app functions were designed to provide a terrific user experience in mobile viewports.
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.
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.
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.
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.
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.
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.
Recently launched, 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.
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.
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.
© 2011 – 2017 studio function inc.
twitter ⁄ blog
frank ⁄ vivian ⁄ ryan
info@studiofunction.com
request a quote