How We Run Online Workshops

Over the past few months, many organizations have struggled in one way or another. Smashing, too, has had to get creative and we’ve had to rethink our conferences and workshops. In this post, I’ll share what we’ve learned about taking our workshops online.

When difficulties began back in March, it was essential that we reacted quickly. There was no huge deposit in the bank, no friendly investment to rely on — this small company has been fully independent since day one. So we got together and discussed what to do. Obviously, the situation wasn’t going to clear up in a week or two, and we had to figure out how to recalibrate not only our offering but also the way we ran things.

Rachel came up with the idea of putting our in-person front-end and UX workshops online. After all, all of us are mostly stuck at home, so let’s make the best of it. If we can’t travel to learn together, we’ll bring the workshops to everyone around the world.

Remote, live, interactive and practical. That’s Smashing Workshops.

Out With The Old

Back in 2013–14, we experimented with a few webinars, but the format didn’t feel quite right. The tooling was suboptimal, connections were unreliable, and feedback reflected that. So we realized quite quickly that the webinars weren’t working well, and we abandoned the idea to focus on conferences instead.

But these times — as we keep hearing over and over again — are unprecedented. So we set out to explore what a truly smashing experience for online workshops could be like, now, in 2020.

Of course, these days, there is so much well-produced prerecorded video content already available online: courses, masterclasses, talks, and presentations. What would make people want to attend an online workshop? That’s a good question indeed.

Our answer to that question was a live, authentic experience. Or, to put it differently, a dedicated time and place for attendees to connect with the community around the world; to ask experts in the industry directly, in real time; a format that enabled group exercises, homework, and interactive sessions from live coding to live debugging and live designing. That’s something an offline experience usually can’t provide.

We worked together on an ideas document and conducted user research to validate our hunches. We interviewed eight people, most of them had attended at least one SmashingConf in the past, as well as Smashing Members, trying to find out what would appeal to them about an online workshop.

That brought us to some very promising results. That’s how Smashing Online Workshops came around — designed from scratch.

With so many conferences around the world being cancelled, I’m grateful to have virtually attended a very informative @smashingconf workshop for the past couple days. Even from home, the learning never stops. pic.twitter.com/K3pbJBNpof

— Gabriel Tan-Chen (@gabrieltanchen) April 15, 2020

Breaking It Down, Breaking It Up

The interviews showed that attendees didn’t want to spend long stretches in front of a screen. So we decided to split our workshops into shorter, manageable chunks and span them across a longer period of time. And rather than packing a few workshop days into a single week, we felt it would be better to space things out a bit more, across weeks, not days.

Attendees would have enough time and space to take in all the content, do the homework between sessions at their own pace, and have ample opportunity to ask questions in a friendly, comfortable setting.

In the end, we split workshops into sessions of two and a half hours each, held over a few weeks (for instance, running on Thursday/Friday, Thursday/Friday, Thursday, three weeks in a row). Each two-and-a-half-hour chunk would include a focused session of a couple of hours, followed by a 30-minute Q&A.

What’s The Right Tooling?

We wanted to find a way to design a friendly, accessible experience for everyone. We’ve tried pretty much every single video conferencing tool out there, and Zoom turned out to be the only solution that was fully accessible, supporting keyboard navigation and subtitles out of the box. Of course, we were aware of the security issues Zoom experienced at the time, and we tried out a new release that promised to have patched the holes.

The shared live experience was an important attribute. We wanted attendees to feel connected during the entire workshop and sessions in between as well. Since a workshop could span weeks, we set up a Slack channel (yep, another one) for everyone to join before the first session. Attendees can introduce themselves, share sketches and resources, and contact one another and the workshop coach.

For every workshop we create a collaborative Google Doc where everyone can find updated links, video URLs, slides, and resources — and also take notes together or ask questions between sessions.

To get the ball rolling, we prepared the SmashingConf website, announced two workshops — Rachel’s on CSS, mine on interface design patterns — and sent out a mailing. Both workshops sold out in no time.

What’s The Right Pricing?

We’ve all come to feel that online content should be affordable, cheap, or free. So much material is just out there online, so that paywalls and high prices have become very off-putting. We didn’t want to make our workshops expensive, but we didn’t want to undervalue the time, effort, and hard work put into preparing and running them.

We wanted to be fair: an accessible price and 50 / 50 split with the workshop coach. It made sense, really. The content that coaches have to prepare is exactly the same for an online setting as it is in-person. Attendees are offered the same amount of content, get all the resources of the workshop, and also have dedicated Q&A time after every session. In fact, there are more opportunities for everyone to learn at their own pace and raise their own problems and questions over a series of sessions.

We adopted the same pricing we use for in-person workshops. For five sessions of two and a half hours, the cost was $ 350 for an early-bird ticket, and $ 450 for a regular ticket. We validated the pricing in usability interviews and went with it. In hindsight, it worked remarkably well.

You Need A Team

We decided early on to have a team member available at all times during the workshop, providing support for latecomers, keeping tabs on progress, and ensuring participants are aware of what’s going on. This is vital, just as with an in-person workshop, as the teacher should be able to concentrate on teaching, not administration.

So just before and during every session, there is either Beth or Amanda or Jan helping out with all kinds of technical issues — from missing URLs to frozen cameras to audio problems and support inquiries.

Online, Everything Is Just A Little Bit Slower

Now, in a shared physical space it’s much easier to follow and ask questions, but this kind of interaction can be slower in a virtual space. People need time to settle, or may be experiencing technical issues. And our workshops are accessible everywhere in the world: English isn’t everyone’s first language. Group exercises need to allow for time to shift between tools and windows. Rather than speaking up, some people prefer asking questions via an online chat. The convenience of chat led us to expect more questions than we might receive in person.

In general, with group exercises to deal with, an online workshop runs about 10–15% slower than an in-person event, and dedicated time for Q&A means everyone gets to have questions answered.

Fast Access To Video Recordings

As most of us are working from home, our responsibilities and commitments might make it difficult for attendees to devote their full attention to each session as it’s happened. We have put time and resources into getting those video recordings out to attendees as quickly as possible — ideally within a few hours after the workshop session has ended.

We know that attendees really need quick access to videos, and indeed being able to watch later, or re-watch a session was one of the important features that showed up in user interviews.

What’s The Right Timing?

Our largest audience is based in North America; another large share is in Europe. We had to find a way to make online workshops viable to both East and West Coasts in the US, as well as Europe. After yet another round of user interviews, we settled on 6 PM Berlin time, which is noon NYC time and 9 AM San Francisco time.

The majority of workshops run to these times. Based on demand, however, we will run some workshops in the morning in Europe which is more friendly to those in Asia-Pacific too.

Running Group Exercises Online

Once we had an idea of how we’d run online workshops, we started looking closely at how to improve the collaborative parts of the experience. For technical workshops, it was quite straightforward: as a workshop instructor is explaining concepts and coding live, attendees follow along individually, raising questions if they encounter any issues.

Things get a bit more complicated once a group of attendees is supposed to solve design challenges together. For our design workshop, we wanted to break all attendees into teams of three to four, and create a space for each team to work on each exercise collaboratively. There are plenty of tools for collaborative sketching and designing, but what’s the best way to run a collaborative exercise for a group of 90 people?

We didn’t want everyone to have to set up a new (free or commercial) account, and we wanted to facilitate a shared experience for everyone, irrespective of their level of experience, to contribute their ideas without having to overcome a steep learning curve. We tried a number of wonderful tools, but one that works well is Miro.

In one of the first sessions, Joe Leech used Miro to create a digital space comprising a central area for his guidelines and notes, and “tables” arranged around him.

We’ve been building on this idea. As you can see above, we’ve arranged tables clockwise around the central area. Each table has three of four seats for attendees to take — including a personal area for sketches and notes. When we start a workshop, we ask every attendee to join a shared Miro board (no registration is required) and “take a seat” at one of the tables by adding their name to the top-right corner of their card.

There were plenty of other creative ideas for getting people involved. Some teachers used a shared Trello board for all notes and resources. Some teachers used CodePen. This great collection of critters was brought to life from the students in the SVG Animation workshop run by Cassie Evans — with so many fun and creative varieties to choose from!

Was It All Worth It?

Absolutely. It was essential to transition to an alternative, sustainable model, and we were happy to be able to connect with our audience as well. One of the most rewarding outcomes is that by running workshops online, we are able to reach people who wouldn’t be able to attend a workshop otherwise.

It was wonderful to see people laughing, connecting, learning, and sharing together. It really felt like we were helping one another get through these weird times together, with a truly global experience that’s difficult to achieve any other way.

It was absolutely incredible to see how authentic and collaborative an online workshop experience could be. There is literally no distance between attendees and speakers. We are all in the same boat, in front of our computers, in familiar environments, using tools we use for work every day. It feels natural to speak up, ask questions, and have casual conversations via chat or talking.

The feedback from attendees reflected this. In many ways, it wasn’t different from the feedback that we receive for in-person workshops — which shouldn’t be surprising. In the end, it’s the same content that is delivered in a different setting with different timing.

What’s Next?

We’ve run around 20 workshops so far, with plenty more scheduled for the next months. Certainly, we’ll keep running online workshops in this format and at the same frequency even when we can run in-person events again. Our online workshops have opened opportunities we hadn’t considered.

Personally, I fell in love with them, especially seeing how diverse, international, and authentic they have been. And frankly, I truly can’t wait to run the next one already.

You can join some of our upcoming workshops as well:

• Front-End Accessibility Masterclass with Marcy Sutton. Nov 6–20.
• Designing Websites That Convert with Paul Boag. Nov 18–26.
• Smart Interface Design Patterns, 2020 Edition with Vitaly Friedman. Dec 1–15.
• Building A Design System With CSS with Andy Bell. Dec 3–17.
• Build, Ship and Extend GraphQL APIs from Scratch with Christian Nwamba. Jan 5–19.
• Form Design Masterclass with Adam Silver. Jan 19–27.

Articles on Smashing Magazine — For Web Designers And Developers