Design, Prototype, Zoom: How New York Times Interns Built a Game Remotely

Illustration by Eden Weingart/The New York Times

By Milena Correa, Stephanie Lu, Jenna Kim, Natalie Erjavec, Rohan Shaiva and Shandler Mason

How do you design a digital game with people you have never met in person? This was a question we faced this summer as interns with The New York Times Games team, which is working remotely due to the coronavirus pandemic.

The team typically develops new game prototypes every month to test with Times subscribers. They assigned us — a team of six interns with skills in design, tech and data — an ambitious task for our summer internship project: to design and prototype a digital game in three weeks. To do this remotely, we had to get creative with our design and playtest approaches.

Initial Ideation and Game Design

The first step was to decide what kind of game we wanted to make. We were encouraged to explore fresh ideas, so we held an ideation session over video chat to brainstorm game concepts.

To guide our thinking, we filled out ideation worksheets and framed our ideas in the form of questions, such as “How might we make a game about space?” We then voted on our favorite concepts. Our initial ideas were wide-ranging, but we chose to make a “clock game”: where players must swap the mixed-up numbers on a clock to find the correct order.

The original ideation worksheet for Animatic. Our goal was to make a game that models the passage of time and restores order amidst chaos

After we settled on a concept, we began building sample prototypes on paper and in Google Jamboard, where we could test our ideas with our families and members of the Games team.

Left: Our intern team and Times staffer Sam Von Ehren playtested an early prototype based on sliding puzzles with Robert Vinluan, product designer on the Games team. Right: A Google Jamboard prototype of the “clock game.”

To make our game appeal to a wider range of players (and to make it more interesting), we replaced the numbers with visual icons. We wanted these icons to indicate linear progression since our game was centered around the themes of time and evolution. Our first design showed an embryo developing into a chick. (To answer the age-old question, we decided that the egg comes before the chicken!)

Milena Correa, game design intern, recognized that the sequential visuals evoked animation. We realized we could refer to the icons as “frames” that could reveal a simple animation when arranged in the right order. Our source of inspiration changed from a clock to a zoopraxiscope, an early motion picture device that cycled through images rapidly to animate them. This informed the name of our game: Animatic.

Once we had the visual metaphor sorted out, we had to decide on key interactions. A major component of gameplay was how players would move the frames around. We explored many possibilities. Through trial and error, we decided that each frame could be swapped with the frames two spaces to the left or right. This gave the gameplay two layers of complexity: players had to recognize the sequence of the frames, and they had to strategize about how to move the frames into the correct positions.

Product Design

We paid close attention to how Animatic would fit with the rest of the Games portfolio, especially through its visual design. Jenna Kim, product design intern, began conceptualizing the game’s visual design early in the development process.

With a zoopraxiscope as our inspiration, Correa and Kim decided to transform the original clock layout into a film reel. This made the theme and objective clearer, while elevating the game’s visual aesthetic.

Kim designed the icons and color palette with simplicity in mind. To make our game accessible to diverse audiences, we chose easily recognizable symbols for each set of icons that visually indicated some sort of change over time. We settled on four sequences: a chick hatching, an apple being eaten, a burning match and a pizza being eaten.

Initial designs and sketches of possible icons.

A big part of the design process was figuring out how to get players to start their sequence at the top of the film reel and continue clockwise. Kim tried to highlight the top of the reel in various ways, such as with arrows, symbols and even words. After some testing, we decided that the arrow was the most intuitive option.

Visual cue explorations and the implementation of the film reel design.

iOS and Web Builds

Animatic is the first Games prototype that was simultaneously built for iOS and the web. This allowed us explore how the game might feel both in-browser and in-app. It also enabled us to take advantage of Rohan Shaiva, Shandler Mason and Stephanie Lu’s diverse tech skill sets. To keep both versions of the prototype in sync, we communicated frequently and checked in daily over video calls.

Shaiva and Mason built the iOS prototype in Swift, while Lu created the web version using React. The highly interactive nature of the game presented a number of technical challenges. For example, animating the frames and showing their swapping movements required a carefully timed sequence of transitions and events. To allow for this chaining, Shaiva and Lu implemented code asynchronously — the animations run in parallel with the code that handles the logic. That way, if you’ve made the winning move, you won’t see the “Congratulations!” message until you’ve seen the frames swap.

Early versions of the iOS and web prototypes.

Because users interact with mobile and web interfaces differently — through tapping and clicking — we wanted to create a single interface that was consistent between our iOS and web prototypes. The original designs for both platforms contained a swap button that users would click or tap after choosing two frames to swap. However, we found that this approach required too much clicking and tapping, so Kim worked with the developers to explore different interactions. We decided that drag-and-drop for iOS and click-to-swap for the web made the gameplay most engaging.

Test and Iterate

Usually, the Games team playtests their prototypes with users in person so they can closely follow how the users interact with the game. Our challenge was to recreate this experience in a virtual setting with members of the Games team and the wider Times intern cohort — these sessions were coordinated by Natalie Erjavec, data analyst intern.

Playtesting as a group.

Although we hadn’t yet deployed our web prototype, we found ways to test it out. We sent playtesters a temporary link generated by ngrok, an application that creates access to a local development server. Playtesters then shared their screens with us so we could observe their facial reactions and their interactions with the game.

The process was trickier to figure out on iOS. Playtesters couldn’t download the app on their phones or run the latest development build, which would take too much time to set up.

The final game, Animatic

Shaiva developed a way to test the game over Zoom. During calls, he shared his computer screen and showed everyone the latest prototype on an emulated iPhone. Then, he gave playtesters remote control of his screen, which allowed them to play the game. This approach required several layers of abstraction and suffered from an occasional lag, but it ended up being an effective way to playtest.

Our remote playtesting hacks enabled us to obtain crucial feedback to improve our game. We made several improvements based on playtester feedback, including adding easier levels. Some players found it difficult to see where the sequence started, so we added a fade-in transition to indicate the order of the frames.

While Animatic is a prototype and not a fully polished game, we are proud of what we were able to accomplish in three weeks. We were able to leverage our different skill sets and collaborate cross-functionally, which allowed us to work efficiently and with fewer hiccups.

Making Animatic was a core part of our summer internships. While the Games team is not currently testing new prototypes, you can play Animatic here. Enjoy!

Milena Correa is a Game Maker Intern and a rising Junior at Parsons School of Design (Class of 2022), majoring in Design and Technology with a focus in Game Design.

Jenna Kim is a Product Design Intern and a rising Senior at Carnegie Mellon University (Class of 2021) studying Communication Design with a minor in HCI.

Natalie Erjavec is a Data Analyst Intern and a rising Senior at the University of Washington pursuing a B.S. in Informatics and a certificate in Sales.

Stephanie Lu is a Front-End Engineering Intern and a rising Junior at Santa Clara University (Class of 2022), majoring in Computer Science and Engineering.

Shandler Mason is an iOS Mobile Engineering Intern and a rising Junior at North Carolina Agricultural & Technical State University studying Computer Science with a minor in Applied Mathematics.

Rohan Shaiva is an iOS Mobile Engineering Intern and a rising Senior at Tufts University majoring in Computer Science and Film.

Design, Prototype, Zoom: How New York Times Interns Built a Game Remotely was originally published in NYT Open on Medium, where people are continuing the conversation by highlighting and responding to this story.

Source: New York Times

Leave a Reply

Your email address will not be published.