“It was all thanks to a funny hat”
On Thursday we won the NodeJam competition, a startup competition between 35 different startups to showcase applications of the Node.js framework. We won $100,000 in prizes and plenty of glory!
The story of how we did it is an epic tale of working really hard and having tons of fun.
(…and falling asleep at our desks)
Week 1: The intern backstory and deleting weeks of code
We decided a year ago (last January) that we wanted to build a multiplayer game. Our January intern Chase built a prototype that was an asteroids-like game. But it wasn’t quite polished so we decided not to launch it, and it sat on the shelf because we were super busy with other things. Then in the summer, another intern, Jeff, dusted off the game and totally revamped it, turning it in to a working multiplayer game similar to Scatter. It got really far along but the game dynamics involved weren’t perfect.
This January we decided we were going to go all-out to launch a game. We got both Jeff and Chase to come back, and we got their friend Eddie to come along too (all three are sophomores at MIT). Anand and I rounded out the team that would be focused on building the game.
We identified that our previously built prototypes were too chaotic – you spent more time aimlessly crashing into stuff than using the knowledge you’d learned on Quizlet. So we made the tough decision to abandon the months of work we’d already spent on building games and started from scratch. In the first week, we split up the whole Quizlet team into 3 groups of 3 and brainstormed new games.
We came up with three tests that our ideal game should pass:
- It should have learning value: you should spend much more time with your brain turned on than navigating an avatar or clicking rapidly.
- It should make you laugh out loud.
- It should keep you on the edge of your seat and be playable for long stretches.
Week 2: Prototyping several games
We split up into two main development teams to build prototypes with two concepts: one, a pictionary-esque writing game, and one, a Tron-like matching game. Our Tron prototype looked something like this:
After several bad initial attempts where we all got bored after 5 minutes of gameplay, we built an off-shoot of our pictionary game that required everyone to write a sentence using the prompted words. When sentences were completed, everyone had to vote on everyone else’s sentences. After 50 minutes of playing, we noticed that none of us had wanted to quit. I excitedly tweeted, “Just spent an hour glued to my screen playing a new game prototype with the Quizlet team. It’ll be extremely hilarious and creative.”
After tweaking it for a day, we piled into a meeting room and discussed what it would take to make that cool prototype into a full production-ready Quizlet game:
After enumerating the tasks, we added one more, somewhat-unrelated task. What if we won NodeJam? We knew it could be a distraction, but it would also be fun and a nice little PR win for us, while still requiring us to build the game we wanted to build for the site. So then, around January 11, we decided we would win NodeJam.
To do it, we knew we had to build something impressive that would show off the real-time capabilities of node. We thought it would be very cool if we could get a participatory demo where the whole audience could play our game from their laptops. But we couldn’t waste time building something cool that would be useless to Quizlet later. So Will, our intrepid operations director, coordinated a series of classroom visits to test out our prototype with real live students.
On January 13th, we brought our prototype to a French 2 class at the Urban School in San Francisco. It was clearly a hit — we had to ask kids several times to stop playing before they closed their laptops and gave us feedback.
Students were playing the game very competitively – so we knew we were on to something.
Week 3: Building. Like. Crazy.
In week 3, we had a solid understanding of what we wanted to build, so it was a matter of getting it all done. Keep in mind that Node.js was relatively new for most of us, so we had to learn a new programming environment and build a new game at the same time.
Above, Jeff and Chase realize they left some bugs in the code the night before an 8 AM demo for a Chinese class, so they sat down to fix what they broke.
At one point, we ran out of Red Bull. At another point, we heard from the conference organizers that only 3 other companies were doing live demos; the rest were planning to do slideshows. “Are they crazy, or are we crazy?” we wondered. We were certainly taking the risky route. Three days before the competition, the level of intensity bumped up another notch when we learned that the previously unannounced grand prize for winning was worth more than $100,000. Wow, we thought — what if we actually did win?
The night before: Chaos and despair
As the deadline approached, we got more and more nervous about our ability to finish it all. We had scoped out two completely separate views of the game — one a spectator mode, and one a student mode, and they were having trouble syncing up. There were still lots of bugs, and as the day before our presentation turned into the night before our presentation, we still seemed far from a finished product. Not only that, but the script we had drafted for the presentation wasn’t working. Every time I tried presenting it, I either ran out of time or it was barely comprehensible. On the plus side, I had bought a wizard hat that would be a fun prop for the presentation.
At around 3 AM, I uttered the words, “This is a disaster.” For the next half-hour or so, I paced around the office, too tired to think, and wondered if we should just cancel the whole thing. On a whim, I challenged Anand to a ping-pong game, and that’s when things started to turn around. Ping pong was the perfect cure for our creative doldrums, and we started to brainstorm a brand-new presentation script from scratch. I ab-libbed a new version which everyone agreed was much better, and then Anand gave it a shot.
Since we had the wizard hat, he put it on and started dropping hilarious lines into a mock presentation of his own (e.g. “Back at Hogwartz, we used to play this game all the time”). After a couple hours of straight laughter and some bug fixes from the interns, I fell asleep on the couch (the time was now around 6:30 AM). Anand redid the login screen and then called it quits. At 8AM, I woke up, merged some code, and went back to sleep for a couple more hours.
Going on-stage for 200+ people
After a few hours of sleep at the intern house around the corner from the office, we all piled back in around 11:15 AM to make final preparations for my 3 PM demo. We had gone to sleep with the idea that we had something vaguely working, but as I rehearsed my presentation, it was very rough and I could barely articulate what I wanted to say. Both Dave (Quizlet’s CEO) and Anand jumped in to ad-lib their own versions of the speech, hoping to help me. With about 15 minutes before we had to drive to the conference, we finally printed out a decent script that I could read from stage if I had to, and one final rehearsal went well enough to give us all a modicum of confidence.
When we arrived I was whisked backstage to prepare my laptop for the presentation. A minute before I was supposed to present, I suddenly realized I didn’t have my crucial wizard hat. Panicked, I texted Anand and searched the backstage area to no avail. I asked a stage assistant if she could look, and with 10 seconds to spare, she came running with the hat. Whew!
I came on stage, and gave my presentation:
I grew worried as the number of people connected increased. We hadn’t fully tested the limits of all this new code and hadn’t coded any of it with an eye on performance.
Here I showcased the incredible pulsing graph of everyone typing their sentences in real-time.
Another angle — note all the laptops playing along. Thankfully, there wasn’t a single bug during the whole demo. And that was after deploying some quick changes the interns wanted 20 minutes before the talk, which I swore I wasn’t going to do and which is, in general, a very bad idea.
And the final results! We prompted the audience to write sentences for the word “mendacious,” meaning “dishonest; untruthful.” The sentence that got the most votes was: “The venture capitalist was mendacious when he said, we add value.”
(Funny side note: the guy who wrote the sentence congratulated me on my talk afterward. He was a VC.)
Sweet success
As I was pulled off stage for going over the 5-minute time-limit, I knew it had gone well. It hadn’t crashed! The sentence that won was actually decent! I checked Twitter on my phone, and saw some awesome feedback from the crowd.
I came back into the audience to watch the rest of the presentations. During the judges panel, all of the judges mentioned Quizlet, although some said they had a hard time seeing it as anything more than a cool demo. I thought we had a chance at winning some prize, but based on the judges’ commentary I thought we had no chance of winning the overall.
When the moderator came on, he first announced us as the winners of the afternoon round (the semi-finals, sort of). Chase couldn’t believe it. We were all super excited. Then they announced some other winners (audience favorite, best use of Node). I crossed my fingers and my knees bounced in anticipation. And the overall winner was……
QUIZLET! The whole team stood up in the audience and high-fived, and I went on-stage to collect the prize. Afterward, I was promptly interviewed on-camera (with my hat!). Here’s the tech-heavy video, which includes parts of my live demo at around 1:40.
The real test: Launching the game to the site.
So you’ll notice we haven’t actually launched the game yet, which is what you all really want. But as you can hopefully tell by now, we’ve been working hard on it. If you’re still not convinced, check out this graph:
This is the amount of code written by different people on the team.
Our plan is to launch this thing as soon as possible — we want to make sure it’s really good, and ready to scale to Quizlet’s millions of users. So stay tuned for some announcements about when this thing will launch!
Many thanks to Chase, Jeff, Eddie, and Anand for being a killer team!
If you enjoyed this, I am Andrew Sutherland and you can get me on twitter at @asuth and also follow @quizlet. Also, we’re hiring developers!
(Thanks to Alex Williams and Trevor Mcleod for photos)
We recently launched a limited release of our new Multiplayer game for Quizlet users to try out.
