blogTO: A design case study

This is an archive of v.1 of our blogTO design case study. The latest text, images, and motion graphics can be found at: studiofunction.com/case-studies/blogto/

Studio Function

Published in

Studio Function

6 min readJan 21, 2021

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.

An overview of our creative strategy and design brief with references to specific visual elements

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.

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.

An example of BlogTO branding and visual design appearing in social media properties

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.

Follow on Twitter / Facebook / Instagram

Printed stationery

Designs were created for business cards and other stationery to represent the brand during offline exchanges with advertisers and other partners.

Example web UI design including unified visual assets in a responsive layout

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.

Demonstration of a flexible layout system showing web content is desktop and mobile browsers

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.

Web design showcasing impactful food and event photography

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.

Web UI design highlighting the responsive design of local map content and listing functionality

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.

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. View a slideshow

UX/UI design for new user account setup and onboarding

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.

Digital product UX/UI design for BlogTO’s web app shown on iPad devices

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.

An example of digital product design highlighting BlogTO icons and typography

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.

Motion design and motion graphics created for BlogTO social media properties

Motion graphics for millions of viewers

Video content is becoming one of the primary ways blogTO engages with millions of users on social media. Engagement metrics and opportunities for expanding relationships with advertisers rely on motion design to capture attention from audiences across various properties.

An overview of the visual standards created to guide the generation of additional motion design for BlogTO

Scripting consistency

A cohesive system for video art direction, text overlays, and other graphic elements was required to maintain brand consistency in this growing medium. Various animations and motion graphics were created to provide art direction to blogTO’s internal production team.