This is the story of how my friends and I made a custom app for a virtual birthday party during the coronavirus pandemic.
We are now launched a Predella!
An idea is born
As I write this, it’s March and I am living in New York City, cooped up in my small studio apartment. It’s not because I’m an introvert, we’ve been ordered to stay at home by the government in an effort to stop the spread of a dangerously infectious pathogen, known as Coronavirus. Life has changed dramatically, seemingly overnight. Before this lockdown, my friend group was going out every weekend together. Now, I haven’t seen a single friend in person in almost two weeks.
We know it’s important, of course, so we adapt. For example, some friends and I had a little Jackbox Party Pack get together on Zoom, which worked pretty well. One of those friends and I talked about how we could digitize common party games that we had in college, like “King’s Cup”, but it was mostly a thought exercise. Then, last Monday, another friend of ours made the facebook event that kicked this all off.
You see, this friend, Nitsan, had a birthday coming up. Having a birthday in the age of coronavirus is rough, especially when you just moved to the city and were excited to see your friends all together, celebrating your birthday and your arrival. But this event would, of course, have to be virtual. At first, we talked about using Zoom for the party, but the thing is, software like Zoom is built for professional video conferencing. It’s designed to prioritize the single primary speaker, for the most part, and it understandably feels very “sanitized” in it’s social features.
Nitsan messaged me with the kind of text I love to get: “Wait we could make this really good”. This was the opportunity. If this was ever going to happen, his party would be it. We started brainstorming ideas for how to use existing software to make a better online party experience, but eventually I just said it: “what if we build our own thing?” Minutes later, my friend and former cofounder Abby messaged me: “I just had an idea of how you could do this video conferencing, but with side conversations”.
It was clear we all had the same itch. I told everyone to get in a video chat, and we brought in another friend, Brad. We did a blue sky brainstorm, essentially revolving around: “what would a Zoom for Parties look like?”
We knew we wanted to have as many people in a room as possible, all visible. It needed to feel more like a party does, where there is no real “dominant speaker.” We wanted to have multiple “rooms” for the party, just like a real party, and we wanted everyone to be able to see who is in what room. This would allow for people to form their organic conversation groups dynamically during the party.
We also wanted to integrate some drinking games, because everyone needs to let loose a bit right now! Essentially, we wanted to emulate a “real party” as close as possible. We knew this would be quirky and weird, and that was part of the charm of it. The other part of the charm was we had just one week to pull this off!
Ever since social distancing began, I had been thinking about how I could use the Twilio Programmable Video API (disclaimer: I used to work for Twilio and am a stockholder). It was perfect for what we wanted to do because it let us do whatever we wanted with the video, while it handles the actual hard part of streaming and multiplexing live WebRTC video rooms. The maximum room size for Twilio Video rooms is also 50 people, which is perfect for the scale of party we were going for.
In addition, Twilio had just released a new conferencing demo app that would work perfect as a scaffold to kick this off without starting from scratch. In fact, in that Monday night brainstorm, I setup the project locally in about 15 minutes and we all switched over to using it for the rest of the meeting! In addition, Twilio Sync would work great for the synchronized state needed for user data like “who is in what room”, and for room game widget data. In fact, because one of the goals was to open-source this and allow for self-hosting, we ended up using Twilio Sync for all state, so all you need is a Twilio account and somewhere to host the small NodeJS server (which can be a Twilio Function as well).
I got to work with the team during nights putting together React hooks and architecture that would make it easier for the rest in the group to collaborate and implement features quickly. I also was working toward implementing the MVP design that Abby had made by mid-week:
Once we had a good proof of concept to work from, we scoped out our more ambitious goal and divided up the work. Some team members worked on the core application, while others worked on the game widgets that would plug into the room experiences. There were many late nights, and some interesting bugs, but we managed to get a decent beta together by Sunday night and had a “dress rehearsal” with a small group of friends. The next night, we fixed the rest of the bugs we found, and then it was show time!
I’ll be releasing a video about the development process soon.
When you first logged in to the party, you entered a passcode and then set your name (or login with Facebook).
Then, you were greeted by Nitsan with a special welcome video made to emulate a real party. We wanted to start the party experience with the right tone: “this is stupidly sophisticated, but great.” So when Nitsan greeted you, we had Google Text-to-Speech actually say the party goers name during the video:
At that point, people arrived at the main party experience, where they saw some “party rules.”
And they could see who was in each room and click on whatever room they wanted!
We managed to get 3 games integrated by the party (which again was the following Monday): King’s Cup, a whiteboard for Pictionary, and Charades.
We also had a Jackbox room, but it was thrown together last minute, so it didn’t work very well and only lasted one game.
At one point, Nitsan used the broadcast feature to gather everyone in the “Living Room” to sing Happy Birthday. (This sounded horrible, of course, the audio clipped like crazy. But it was funny!)
In general, people started out by hanging out in their conversation cliques, but eventually, people integrated and even met new people! I made a few new friends myself, which I was surprised could happen in a virtual party. Rooms shrank and grew over the course of the party, just like in a real party.
The party lasted about 5 hours in total, with the main thrust of it lasting about 3 1/2 hours. We had 57 total attendees with a peak concurrent count of 30. It was really fun to see a bunch of friends I hadn’t seen in a while, some of them in years! It really did feel like a “party,” I know that’s hard to believe from just reading this perhaps. But you can try it for yourself! Read more about that below.
What We Learned
In addition to just having a fun time (a few friends even woke up with hangovers the next day), we also learned a lot about what makes a good social virtual party video experience. Here are a few of the things that were really made clear:
- The design goal of fitting as many people in one room as possible really helped make it feel like a party. We developed an adaptive grid that had some semblence of a dominant speaker, but not in one place like in most software.
- Having multiple rooms for people to move into when too many conversations are happening is crucial for a larger party like ours.
- Being able to see who is in those other rooms allows people to organically move rooms to join other conversations or see a friend, just like in real parties.
- The games were used less than we had hoped. Part of this I suspect is because people were just eager to converse and it’s hard to do both at once in video chat. Moving forward, we’ll probably develop some game widgets that are more video-gamey that do not require conversation to play, so that people can play the game while talking about other things.
- If you give people a shared whiteboard, phallic symbols will be drawn. This isn’t really something we learned, so much as it’s always been true and is still true.
- People can pull off a lot in a short time when they’re stuck at home after work.
Moving Forward / “How can I use this?!”
We’ve launched a product version of this at predella.app!
Thanks to all the Party from Home team members who dedicated a bunch of time to making this happen:
- Abby Frankola (Design)
- Brad Plaxen (Widget Development)
- Carlos Diaz-Padron (Engineering)
- Gail Wilson (Engineering)
- Nitsan Shai (Engineering)
- Roman Baiocco (Widget Development)
- Shreya Desikan (she recorded the video)