Building a streaming platform

Overview

In March 2020, physical events and gatherings in South Africa were banned for several months. With people confined indoors, streaming became the best way for events to carry on, and Quicket was in a position to ensure that streamed events were still valuable to organizers by offering ticket sales alongside them.

Problem

Quicket was a ticketing company, not a streaming company, and most of us knew very little about the streaming industry. We also weren’t sure what our event organizers knew about streaming and if they’d be willing to learn with us.

My contribution

  • Research: tested streaming and viewing methods; analyzed feedback from users via customer support

  • Content: wrote microcopy, transactional emails, and help articles

  • Frontend development: built streaming management page and viewer-facing pages

Constraints

The pressure of time was just as challenging as the lack of streaming knowledge. We had to get the streaming platform out into the world as quickly as possible for two reasons: to allow our organizers to start collecting ticket funds again and to start getting feedback so we knew what we were missing and how to improve.

Learning how to stream

To explain streaming to organizers, I had to understand it myself. The whole world was moving online at the same time, so it wasn’t hard to find information to prepare help articles on equipment needed, best practices, and what services to use.

I downloaded OBS Studio, the recording software we recommended to organizers, on my work laptop (an Asus PC) and my personal laptop (a Mac) so I could see the process on each. I knew from Google Analytics that most of our organizers used PCs, but I wanted to provide instructions for as many use-cases as possible. I also recorded meetings with my team lead so I could describe to organizers how to connect multiple people into the same stream, and I used both laptops to cast streams to my TV to provide instructions to ticket buyers.

My team lead and I streaming in OBS Studio

Development

For each of their events, organizers would need a form to create multiple streams and to view and edit the details of each stream. I looked to other pages with forms as reference for functionality and used the design systems we had in place for the various page and form elements.

While I built the organizer management pages, my teammate built the viewer-facing streaming pages. I rebuilt those pages a few months later, however, working with a freelance UX designer hired by Quicket. Before the redesign, the viewer-facing pages functioned as they should, but the visual design wasn’t up to par with other streaming platforms. The “Welcome” page copy also had some grammar issues and was inconsistent (e.g. we used the number “2” but the word “one”).

Before redesign: viewer-facing “Welcome” page

 

Before redesign: viewer-facing streaming page

Collecting feedback post-launch

After the platform went live, I helped with customer support on nights of highly anticipated online events. Between that experience and what the Customer Success team reported to us on the dev team, it was clear that:

  1. Many ticket buyers were missing the events. Without needing to go to a physical venue, it seemed they simply forgot an online event was happening.

  2. Some ticket buyers conflated Quicket with the event organizer, as the events were hosted on the Quicket website. This meant if a stream started late or was low quality, our Customer Success team bore the brunt of that feedback.

The second issue was two-fold — I needed to ensure ticket buyers knew the event was not organized by Quicket, but organizers also needed the resources to feel empowered enough to host a really stellar event on our platform.

Solution

The primary function of the streaming management page was a form for organizers to provide us with details we needed to send ticket buyers and to display on the viewer-facing pages. I used the form of an existing page as a reference for style and hierarchy. Consistency among forms ensured organizers didn’t have to learn a new layout when utilizing different features for their events.

Reference form

 

Streaming form

To ensure organizers received important information from us about hosting an online event before it started, I added a toggle to the event creation process where they could select if the event would be hosted online.

Switching on streaming during event creation

 

An online event in “draft” mode before streaming details added

I created an email that goes to online event organizers with a check-list of items to complete before their event starts. The email also included a link to a streaming section that I created in the Quicket Help Center with multiple articles to help them prepare.

Streaming check-list sent to organizers

 

Streaming section in Quicket Help Center

To address the issues of ticket buyers missing online events and conflating Quicket with the organizer, I created four time-based emails sent to ticket buyers leading up to the start of the event to remind them when and how to access it. These emails also provided a disclaimer that while the events are hosted on Quicket, they are not run by Quicket.

Stream reminder email sent to ticket buyers

The visual design and usability of the viewer-facing streaming pages increased significantly after the redesign. They fell more inline with the Quicket style guide, and on the “Welcome” page, I edited the text for better readability, bolding the numerical uses that a viewer has.

After redesign: viewer-facing “Welcome” page

 

After redesign: viewer-facing streaming page

Impact and lessons

Between March and September 2020, over 2,000 event organizers streamed 4,300 online events viewed by 250,000 people in nearly 100 countries. It allowed Quicket and many South African event organizers to stay afloat during a very precarious time. Even with event restrictions now lifted in South Africa, online events make up about 10% of all events listed on Quicket at any given time.

Because we needed to get the platform out into the world as quickly as possible, we were flying blind in the beginning with no designs to work from. For the redesign of the viewer-facing pages, it was such a relief to work with a UX designer and to have some Figma designs as reference. I had been a UX designer before (see event creation redesign), but working with one from the side of development was pretty eye-opening, showing me how I could be a better collaborator in future.

Next
Next

Redesigning an onboarding flow