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/
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.
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.
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.
Designs were created for business cards and other stationery to represent the brand during offline exchanges with advertisers and other partners.
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.
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.
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.
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
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.
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.
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.
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.