VIRTUAL AND INTERACTIVE

Building a scalable and interactive experience for virtual events

By offloading authentication and personalization from Drupal to small, high-performant and cacheable React components, we built a virtual community experience with the future in mind.  

The Challenge

Build an interactive virtual event experience to handle tens of thousands of users from around the world, that could scale to become part of the new face of Autodesk’s virtual community.

The Solution

Heavily cached pages generated by Drupal, user authentication and personalized components augmented by a React frontend library with a focus on scalability, maintainability, and future proofness.

The Result

Personalized
experience for real-time presentations and conversations
100,000 
virtual attendees 
200+
countries and seven languages 

The Background

In 2020, with the coronavirus pandemic all but eliminating in-person events, Autodesk University conferences needed to go virtual. Autodesk University (AU) is Autodesk’s educational community, established around an annual conference in Las Vegas and expanded through global participation. This main event would be the first to move online and would be held as a digital conference in November 2020. An estimated 60,000+ attendees would participate.

And the goal was to have attendees, who could register for the conference free of charge, be able to:
  • Stream a 24-hour live broadcast with different programming for different geographic regions
  • Watch all 700+ classes — which speakers would pre-record — as on-demand content
  • Attend 350+ live Q&As which would be scheduled by speakers who were preparing classes as instructional demos and hands-on labs
  • Participate in meetups and other community events
Community & Connection
Besides these key additions, the intent was to put a higher emphasis on community features throughout the website so that attendees can connect with each other.

This included supporting seven languages. 
"They [Relevant Bits] were a key part in making sure that we were able to deliver the platform’s core features and support the conference event."
– Alodia Cano, Product Manager, Autodesk 
STRATEGY 1

Create a scalable virtual experience

Given the platform's personalized nature, every page needed to be rendered on every request, causing significant stress on the entire system. To scale, we needed to depend on Drupal for content management while simultaneously finding a way to serve from cache as much as possible.
“Performance was by far our top priority. Load testing began months before launch and continued until a few weeks before launch. Above all else, we had to meet or exceed performance goals for the event to proceed as planned."
Edward de Groot – CEO, Relevant Bits

Update the log-in process

With these changes, only content editors and administrators were allowed to log in to Drupal. Everyone else used the newly built React library to authenticate with Autodesk's single sign-on service.

Cache website content

With Drupal tuned to generate static content only, we made sure we had the most efficient CDN caching in place for the entire website content. We optimized API endpoints used by our React library to serve cached data whenever it’s feasible.

Decouple Drupal

In order to provide a much higher degree of scalability, we decoupled user authentication and personalization from Drupal, allowing us to deliver the same pages to all users using a long-term cache and a global, distributed CDN.

Test. Test. Test.

We load tested to ensure the site could handle 60,000+ visitors. Good thing, because more than 100,000 attended! Even with the increased volume, the site performed as it was designed

Use the existing React library

This and other new features were an advancement of our existing community-focused React library, which already provided community features like recommending content, commenting, following people, and more.
STRATEGY 2

Personalize the virtual experience for every user

For a long time before the conference we had been working on a React library to provide community features in a scalable way. With that foundation in place we were able to rapidly roll out new components that showcased speakers, activity by attendees, and featured events — all geared towards the industry of the visitors.

Give attendees better control

By developing a new microservice, conference attendees could manage their schedule. We built several components which utilized this data. For example, attendees were able to see their upcoming events on the homepage of the conference.

Reuse existing React library

Prior to the conference, we had been working on a React library to provide community features in a scalable way. With that foundation in place we were able to rapidly roll out new components that showcased speakers, activity by attendees, and featured events — all geared towards the industry of the visitors
STRATEGY 3

Design a platform that is easily maintained

With help from the fantastic Dev-Ops teams at Autodesk, the entire system was built on an efficient CI/CD system, making things very manageable.

Use Drupal for static content

Our new approach was to use Drupal only for outputting static content, but we still needed to design a system that allowed creating page layouts with static and dynamic content mixed together in a flexible way.

Ensure content editing is easy

Content editors still logged-in directly to Drupal to update content, so we managed to mitigate any changes to how they operated and managed the site.

Develop method for dynamic content 

We came up with a way for content editors to add the dynamic components onto the pages they managed, allowing them to configure properties which affected how the components behaved.
“Strategically, we had to decide what the best approach was — the most scalable approach, the most secure approach. And then we had to distribute the work across the three teams that were doing the development work."
Nic Brincat – Agile Project Manager, Relevant Bits
STRATEGY 4

Coordinate virtually across multiple teams

It might sound cliché, but working on a project this big — and under aggressive deadlines — requires incredible teamwork. AU 2020 was no exception. We partnered with three separate development teams, in addition to Autodesk's own internal team, to evaluate and execute upon the most critical details.

Stretched between San Francisco and Budapest, there were few hours each day when the project wasn't being worked on. 
 
STRATEGY 5

Build for future growth 

The highlight of this project was certainly the offloading of authentication and personalization from Drupal to small, high-performant and cacheable React components and scalable microservices.

By introducing the new microservice and progressively adding decoupled components to pages, we set the platform up for future growth.

As the development of the site continues, we’re able to gradually replace functionality and components with solutions that are more focused on scalability, performance, and rich user experience.

Check out the Recap

Autodesk provides an overview of the conference on their blog. Take a look at session recordings, presentations, and more from AU 2020.

An Ongoing Partnership

Beginning in 2018, we started with AU’s website launch project. As the trust grew, so did the projects. We continue to partner with Autodesk on a number of efforts and greatly value our ongoing relationship.

We want to build something great with you.

Relevant Bits is a strategic design and development team, brought together by the desire to do better and be better. Tackling projects that require an innovative, cooperative, and technical approach, Relevant Bits partners with companies that want to solve complicated problems. From manufacturing and retail to community education, Relevant Bits leads projects from initial