TEDxToronto is an independently organized conference licensed by TED. The yearly event brings together Toronto’s thought leaders, change-makers and everyday citizens to witness unforgettable talks from all disciplines.

As active participants in our local community of technologists, educators and designers (in all their broadest definitions), our team couldn’t have been any prouder to carry the label of official Creative Partner for TEDxToronto over the last two years. With the release of this year’s talk videos this morning, I thought I’d reflect on the work we’ve been privileged to create (and recreate) for this prestigious annual event.

Designing a TEDx brand for Toronto to call its own

We couldn’t have possibly been better aligned with a brand that believed so strongly in change and the notion of pursuing passions. All we had to do, then, was design an experience that encouraged others to do the same.

Our mandate was to create a digital presence that included a website, a live streaming dashboard for remote viewers and on-location digital displays for conversations happening on Twitter. Each of these properties came together to inform and excite the community while promoting TEDxToronto’s new theme for the year: a Call to Action.

What we created was a design system that paid homage to the global TED brand but that also gave Toronto its own distinction. The dotted pattern, which has now become an iconic visual element of TEDxToronto, was originally conceived to add some punch to the stark white-grey-red palette that TED easily identified with. Bold titles (brought to you by the typeface Bebas) were used as additional visual anchors inside formulaic grids of boxes. The system was clean and calculated with just enough flare and contrast to make it friendly on the eyes.

TEDxToronto 2011

 

The fixed header also made scrolling a notable interaction – something that was well-received amongst visitors. Elsewhere, seamlessly integrated video players that loaded dynamically in place added an additional layer of delight on top of what was already engaging content.

Behind the curtains, the entire site was supported by a robust custom WordPress theme. Referred internally as our Conference Management System, the theme featured full management capabilities of delegate applications, speaker nominations and satellite event listings (in addition to all the various custom post types) from inside WordPress’ friendly admin panel.

The team was incredibly proud of the work that had been created, and was even happier when we heard that it had earned us a spot as a finalist in the Design Edge Regional Awards later that year.

Redefinition

As with My City Lives, we were blessed with one of those rare opportunities to take a second crack at our work. We had been invited back as the Creative Partner for TEDxToronto 2011 and were charged with the challenge of topping the successes of the year before.

TEDxToronto’s 2011 theme was, quite fittingly, Redefinition. In light of this, we began work in early June to redefine the look and feel of each of the materials, starting with the website.

Aligning the brand

TEDxToronto had reached a few milestones by then, including becoming one of world’s top 5 TEDx events. This also meant that we were on TED’s radar, which inspired us to start our redefinition work by better aligning the TEDxToronto brand with that of TED global. We cleaned up the typography (reverting to a strict Helvetica-based type system) and were more stringent on the application of the TEDxToronto wordmark. However, we felt it was important to keep the dotted pattern on the 2011 materials as it had become a defining characteristic for Toronto since we first introduced it the year before. Fortunately, the TEDxToronto committee agreed.

The redesign

Coupled with the brand-alignment efforts, we started critically assessing the entire design system from the ground up. Wanting to leave the content structure and backend intact, we focused our energy on strengthening the visual architecture to better support the breadth of content that had been written over the last twelve months. Blog posts became more enjoyable to read, speakers easier to learn about, and rich video content more easily discovered through streamlining the architecture and designing more scalable type systems that focused on helping visitors consume more content more comfortably.

 

The frame of the site also naturally evolved, starting first with a cleaner sidebar that more effectively presented pertinent conference information and priority action items. The navigation had also moved a few times during the redesign, but settled in a left column that protruded from the main body, just adjacent to the TEDxToronto wordmark. Once there, we very naturally saw the potential to bring back the fixed-navigation treatment that had worked well for the previous design. Additionally, left aligning the site helped frame the new navigation between the browser window and the site’s main body and brought back a layout style that was seen much less commonly today. It was just the right touch for an event about redefinition.

 

Amongst other priorities, the redesign was also an exercise in efficiency. With essentially the same WordPress backend in place, we were able to successfully deliver on our vision while maintaining 95% of the same markup and only making revisions to the stylesheet. #win

Day-of experiences

Like the year before, the new design system was also extended to the other pieces that supported the delegate and remote viewing experiences on the day of the conference. For those in attendance, you would have seen TEDxToronto Twitter walls on display across the venue, encouraging delegates to join the conversation on Twitter.

 

For those unable to attend, remote viewing parties were organized to stream a live video feed using the TEDxToronto Live Dashboard.

Inspired

It’s been a great privilege to work with TEDxToronto and we’ve only ever wanted to do justice to a brand that’s so well known for pushing the boundaries of, well, just about everything. We’ve always been fortunate to be surrounded by inspiring people in our day-to-day work and this remained true as ever over the course of the project. Having our work be well received by the community was simply the cherry on top.

We’re looking forward to seeing what TEDxToronto has in store next!

  • http://twitter.com/ChristineHamon Christine Hamon

    Well done JetCooper. The branding of TEDxToronto is first class!

  • http://twitter.com/dildhalla Adil Dhalla

    Agree with Christine. I hope TED themselves have taken notice of how well you’ve presented the brand. 

  • Kerry Mckibbin

    Great synopsis of the journey. Jet Cooper did an amazing job in helping to streamline the site, ultimately making it more user-friendly as well as TEDx Brand Standards friendly.

  • Ggalex

    Please put the talk schedule. That is very important. Thanks for your effort

  • http://www.jonlim.ca/ Jon Lim

    Tremendous work, as per usual!

  • http://darrylkraemer.com/ Darryl Kraemer

    Beautiful design work JetCooper. Some inspiring ideas as we continue to tweak the TEDxWaterloo redesign we just rolled out for the 2012 event.

  • http://twitter.com/verneho Verne Ho

    Thanks everyone! 

    @ggalex:twitter The day-of schedule has been taken down, but you can watch all the talk videos at http://tedxtoronto.com/speakers/. :)