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”
September 2020 — October 2020
TechTO’s old website didn’t clearly articulate what the organization did or provided. The branding also needed work to better align with their values.
- Communicate TechTO’s product offering clearly
- 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
- MoM (month-over-month) newsletter subscriptions
- MoM membership subscription initiations
- MoM membership subscription confirmations
Roles & Responsibilities
Jason Li — Project lead, design lead, client communication, Webflow support
Jeffrey Li — Webflow lead, design support, client communication, note keeper
Our project was limited to a one-month timeline with just the two of us working on it. Due to COVID-19, the entire project was done remotely with meetings held over Google Hangouts. We also had a budget for anything outside of our capacity (e.g. required dev work, illustrations). Lastly, since the website was built on Webflow, we were constrained by what was possible on the platform.
Users of the TechTO website fall under a few overlapping categories. The redesign ensured all of these users’ goals were met.
Main goal: Learn more about TechTO as a whole
TechTO Insider is TechTO’s paid membership program.
Main goal: Access exclusive member content
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
Outside organizations affiliated with TechTO.
Main Goal: Contact the TechTO team (for prospective partners)
We communicated with the TechTO team every step of the way. They gave us creative freedom and were receptive to ideas. Every piece of the final product went through various iterations informed by feedback.
Before it Began
TechTO approached us to build a new website. We wanted to ensure that a new website would actually help with their problems. This led to a diagnostic discovery call.
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.
We began by restructuring the information architecture to suit the goals of the new website. This started with a sitemap which developed into page outlines (detailed outlines of what content would be on every page).
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 was our no-code platform of choice for building this responsive website. Its CMS and visual designer allowed us to build using minimal custom CSS or JS. We made sure TechTO’s existing tools for email collection, ticketing, membership, and analytics were compatible with the new website.
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.
Aesthetically speaking, the old TechTO website played it very safe. This needed to change because it was uninspiring of their values of inclusivity, new connections, growth, and collective success. We set out to create a brand identity that better expressed those values.
The hexagon is a motif found throughout the new TechTO website. Riffing off the TechTO logo, we wanted to create a recognizable pattern based on our six-sided polygonal friend. We liked the idea of how outlined hexagons formed a network-like map when laid on top of one another. We felt this nicely illustrated the connection forming aspect of TechTO.
Several hand-drawn arrows with little notes were also added to convey the casual and scrappy nature of the organization.
These patterns were intended to create an unintimidating and welcoming environment for people to get involved.
- 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.
We tested the redesigned homepage, newsletter, and Insider pages with five members of the TechTO Insider community to collect feedback on:
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
TechTO’s old homepage made it difficult to understand what the organization was. The primary CTA was to join an “Online Event” which was a big ask, especially for a new visitor.
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.
The old website didn’t have an About Us page. Both parties agreed that the site needed one to explain TechTO. In our discussions, we identified a few things that had to be on the page: impact numbers, values, the team, contact info, and partners.
Our goal for the page was simple: casually describe TechTO while celebrating everything they’ve accomplished so far.
TechTO didn’t have a Newsletter page before. There was only a subscription field in the footer and a tiny blurb.
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).
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.
The old website used a tag system (e.g. marketing, health, people) for every livestream. A user could click a tag to see all related upcoming livestreams. However, with there being only a few upcoming livestreams at any given time, several tags yielded no results. Furthermore, there was no separation by series. This made for a poor navigational experience.
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)
The old membership page was very simple and only communicated the benefits through a few paragraphs.
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.
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.
With the goal of better communicating what TechTO does and offers, TomYum built a new website in close collaboration with the TechTO team.
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.