Creating a Website for TechTO, Canada’s Largest Tech Community

Jeffrey Li
Jan 21 · 9 min read
Header image showing the TechTO homepage on a laptop and a phone.
Header image showing the TechTO homepage on a laptop and a phone.
New responsive TechTO website

Overview

About TechTO

We support entrepreneurs and innovators at all stages of their careers and businesses. We host events, both in person and online. We help people develop new skills. We connect people and expand networks. We build relationships and form partnerships. We speak with the media. We advocate for the tech sector. We meet with governments and policymakers. In short, we do whatever it takes to support Canada’s tech community. -TechTO “About Us”

Duration

Problem

Goals

  • Rebrand TechTO to be in line with its values
  • Structure information architecture for ease of use
  • Build a scalable website allowing for easy changes
  • Drive more newsletter subscriptions
  • Drive more membership subscriptions

KPI

  • MoM membership subscription initiations
  • MoM membership subscription confirmations

Roles & Responsibilities

Jeffrey Li — Webflow lead, design support, client communication, note keeper

Constraints

Target Users

General Visitors

Main goal: Learn more about TechTO as a whole

TechTO Insiders

Main goal: Access exclusive member content

Livestream Viewers

Main goal: Get information about upcoming livestreams and/or get a ticket

Potential Newsletter Subscribers

Main goal: Learn more about the TechTO newsletter to potentially subscribe

Partners

Main Goal: Contact the TechTO team (for prospective partners)

Process

Before it Began

During the call, we discussed their problems and goals, and we confirmed that a new website would be in their best interest. So we started by designing samples of potential visual and copy options.

In the following call, we held a feedback session for the samples and discussed several other websites to better understand what they were looking for.

The contract was signed after discussing logistics, and the project was in motion.

Process Summary

The new homepage was then designed using feedback from the samples. We worked on rebranding at this point. Several variations and calls later, we settled on a homepage design close to what is live today. Afterwards, we designed the rest of the pages using the homepage as a style guide. This is when we conducted user testing and gathered feedback.

Once all parties were happy with the state of the designs, Webflow development began. For the website to be scalable and modular, we used the Webflow CMS for dynamic content wherever possible.

Before going live, we trained the TechTO team on how the website was built and how to make changes. Then we launched.

Webflow

Since this was a client project, TechTO needed to be able to make changes easily. This wasn’t an issue after a little Webflow training from us.

Rebranding

Patterns

Several hand-drawn arrows with little notes were also added to convey the casual and scrappy nature of the organization.

Screenshot showing the hexagon community network and casual note found on the homepage.
Screenshot showing the hexagon community network and casual note found on the homepage.
Hexagon network with a note

These patterns were intended to create an unintimidating and welcoming environment for people to get involved.

Typography

Graphic showing the typefaces used for the website.
Graphic showing the typefaces used for the website.
Fonts used for the TechTO brand
  • Archia (Header — Slab Font)
  • Inter (Body — San Serif Font)
  • PT Serif (Italicized Emphasis — Serif Font)

We wanted to strike a balance between style and legibility which is why these typefaces were paired.

User Testing

Screenshot of the targeted feedback we were looking for during testing.
Screenshot of the targeted feedback we were looking for during testing.
The feedback we were looking for

Key insights were that:

  • The overall impression of the new designs was very positive
  • The website needed to strongly convey a message on the quality of the community
  • Respondents wanted to see livestreams and Insider benefits without having to navigate too far
  • Respondents joined Insider for access to exclusive content and connections — this is what needed emphasis

Page Commentary

Homepage

Screenshot of the old website’s homepage hero section.
Screenshot of the old website’s homepage hero section.
The old homepage hero section
Screenshot of the new website’s homepage hero section.
Screenshot of the new website’s homepage hero section.
The new homepage hero section

If there’s one thing we wanted to communicate with the new homepage’s design and copy, it was community. To emphasize this, we showcased genuine TechTO members and testimonials, including a Twitter thread. We also changed the primary CTA to a newsletter subscription as it would require less commitment than event attendance.

Functionally, the homepage can be thought of as the gateway to other areas of the website — piquing interest without showing too much. This is why About Us, Livestreams, Membership, and Newsletter all have their sections on the homepage.

About Us

Screenshot of the new website’s “About Us” page hero section.
Screenshot of the new website’s “About Us” page hero section.
New “About Us” page

Our goal for the page was simple: casually describe TechTO while celebrating everything they’ve accomplished so far.

Newsletter

Screenshot of the old website’s newsletter subscription field in the footer.
Screenshot of the old website’s newsletter subscription field in the footer.
Old newsletter subscription field

TechTO wanted to engage more through their free newsletter because as mentioned, it requires little commitment. We added several subscription fields throughout the website to make subscribing as easy as possible.

For inspiration, we reviewed several newsletters and analyzed them for what they did well. Transparency regarding cadence and content was a prominent pattern observed among the newsletters we liked. So we made it a point to showcase real past content (email subject lines, issues).

Screenshot of the new website’s “Newsletter” page.
Screenshot of the new website’s “Newsletter” page.
New “Newsletter” page

We hoped that by honestly presenting the newsletter, we would build trust with the visitor of the page thereby increasing the chance of a subscription.

Livestreams and Series

Screenshot of the old website’s “Online Events” page.
Screenshot of the old website’s “Online Events” page.
Old “Online Event” page
Screenshot of the new website’s “Livestreams” page.
Screenshot of the new website’s “Livestreams” page.
New “Livestreams” page

We redesigned livestreams to help users easily find the content they’re interested in. This meant simplifying navigation and terminology.

Let’s discuss terminology. A livestream is an individual digital event that falls under a series. And series are exactly what they sound like — collections of related livestreams. Similar to a TV series, we took the opportunity to design cover art for each series so that they would be visually distinguishable.

To save people’s time, we wanted users to see vital information about an upcoming livestream at a glance. Event detail pages have been given a refresh too. Accordingly, we redesigned the cards to communicate the following:

  • Series name
  • Livestream name
  • Date & time
  • Contextual thumbnails (speaker photo and/or company photo)
  • Button to Attend (get a ticket)
Comparison image of the old and new livestream cards.
Comparison image of the old and new livestream cards.
Old livestream card vs. new livestream card

TechTO Insider

Screenshot of the old website’s “Membership” page.
Screenshot of the old website’s “Membership” page.
Old “Membership” page

Through discussions with TechTO, we learned about the value and message they wanted to convey with Insider; an emphasis on helping you succeed.

One of the key insights from user testing was that many current Insiders joined the program for exclusive content and connections. This was a major driving factor in both the design and copywriting for the page.

We wanted this page to clearly and credibly express the value of joining Insider. Each feature was visualized to make the information less abstract and more digestible. Testimonials from reputable members of the community were included for social proof.

Screenshot of the new website’s feature visualization under the “Membership” page.
Screenshot of the new website’s feature visualization under the “Membership” page.
Example of feature visualization

A new addition is the “streams” section where the benefits are highlighted for targeted audiences. This makes the benefits more relatable to individuals within these audiences.

Screenshot of the new website’s “Streams” section under the “Membership” page.
Screenshot of the new website’s “Streams” section under the “Membership” page.
New “streams” section

Outcome

Analytics was set up to start tracking newsletter signups and conversion rates through the membership funnel. For confidentiality, we’re unable to disclose those metrics. However, here’s what Jason Goldlist, Co-Founder of TechTO, had to say about the project:

“TomYum is awesome. I asked them to think like management and not like an external agency — and they delivered. Their level of ownership over the work was exceptional, and they handled everything with grace and ease. They are simply one of the best agencies I have ever worked with.” — Jason Goldlist, Co-Founder of TechTO

Please take a chance to visit the new TechTO website. Their great team regularly hosts free and engaging livestreams, delivering value to people of any career stage.

If you’re interested in working with TomYum, please reach out through our website.

TomYum

We’re a digital studio dedicated to designing and building…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store