TED Circles Event Generator
May 2020 - Nov 2020
Role
Designer
Developer
Tools
Figma
HTML/CSS/JS
Airtable API
Netlify
Team
Alyssa Hampton
Peter Maccario
Fun Fact
Over 2,000 event invitations have been created in the few months since launch!
A tool to allow TED's global Circles community of over 10,000 participants to create and share event invitations.
The key user delight comes at seeing a "tangible," digital invitation being created as they enter event information into a more traditional form.
The Challenge
TED Circles is a new and growing global community of learners who get together in small pods to gain new perspectives. In essence, they are book clubs around TED talks. Similar to TEDx, TED Circles has a simple "licensing" model where TED provides its brand to facilitate the creativity of local "Hosts." Given this flexible structure, Hosts sometimes operate outside of TED's awareness, creating events opaque to us. The Circles team came to me with a need to incentivize Hosts to schedule their events through TED, thereby allowing us to have a better sense of the success of the group, connect Circles in the same region, and provide customer support.
The Approach
The preexisting solution was a Google Form that Hosts filled out for each event. It functioned well but didn't provide any clear value to the Hosts, so it was often unused. Early on, I solidified a design principle of creating win-win scenarios in which Hosts and TED benefit from events created in our ecosystem. Tactically, this meant: Whenever you ask someone to take the time to input information, provide something in return.
Key principles for the tool
Take One...
In order to implement some of the above principles, I worked with the Circles team to brainstorm ways to support the Hosts. We decided on a system for creating invitations – something visually appealing that they could send to their friends that would also make them look good.
Early mock to convey how form inputs map to stylized text on an invitation using a two-panel layout
Redstructuring the Tech Stack in Airtable
Since TED Circles was a new, small team, their internal processes were lean and hands-on. Given their desire to quickly iterate the tool and community, I decided to create a new stack outside of the normal, heavy TED.com infra. Instead of involving 2-3 engineers to create custom APIs and a database admin panel, I adapted a tool they were already using – Airtable – to fit our stack. Although unconventional, we use Airtable as the sole database for Circles events. This allows the team to create email automations and other fancy interactions without touching a messy backend. So, the tool uses the Airtable JS API along with Netlify Functions to hide the API keys. Netlify also hosts our static site.
Key features of the tool
Here are a few features that were built over 1-2 months of in-the-wild testing.
Tangible invitations, digitally
Using tilt.js, I tried to give the invitations a sense of physicallity.
Date & time pickers
Many browsers do not have native date and time pickers. So, I had to use external libraries to catch and test the many edge cases of these inputs.
Auto-populated calendar invites
After creating an invite with the tool, Hosts get anauto-populated calendar invite.
Unique invite URLs
The tool creates a unique invitation URL and text for the Hosts to share.
Invitation page
Hosts get a unique page that updates as they change event info.
Wrapping up
The TED Circles community is an iterative experiment that will grow over time - so, that has been my development approach. The Event Generator site was announced at the 1-year-anniversary celebration of the community. People expressed deep gratitude in having such thought and care given to something that they used often. Over 2,000 event invitations were created in the few months after launch. Early success led to a large round of QA testing and bug fixes and the tool has been serving the community well!