Skyscraper

During NYTimes' Maker week, I proposed, led and launched a new interactive game called Skyscraper. Skyscraper is a reimagining of a sudoku-type puzzle turned into 3D.

ROLE

Product Designer / Project Manager

TIMEFRAME

Summer 2019 (3 Weeks)

TOOLS

Programming Tools: React, Three.js

Design Tools: Figma, Cinema4D

TEAM

4 Engineers, 1 Designer (Me)

Group 2

Start Screen

Group 3

Live on nytimes.com

Group 4

Game Screen

Group 6

Win Screen

ezgif.com-crop (1)

Mobile Web

ezgif.com-crop (2)

Playing the Game

The objective of Skyscraper is to input buildings with a height between 1 and 4 inside the grid and place it so that each row and column contains all digits only once. The numbers around the grid indicate how many buildings are visible from that spot. To win the game, the user must complete the New York City cityscape.

This idea came to fruition after a conversation I had with another fellow intern about how this game could be developed using three.js. We then submitted the idea on our Maker Week slack channel and then formed a team with those who were interested in our project.

MacBook Pro

We first started by building a web version of the game which we would be able to present at the end of Maker week. Some considerations we kept in mind were to visually connect to the games that currently exist as well as other branded UI interactions.

Challenges for us, were to consider how 3D could be introduced in a 'Timesian'-way as well as to consider how 3D could be visually represented.

Group 5

Onboarding was one of the difficult issues we had to solve. A lot of previous research stated that users often play the game without looking through the rules. In order to combat that we tried testing using different colors for the buttons and tried to give the rules more attention. But while doing user testing, most users often jumped right into the game without even reading. We provided a help button during the game screen so users could read what they missed if they're feeling confused.

Interaction Models

swivel-before

Before User-Testing

ezgif.com-crop (3)

After User-Testing

We also experimented a lot with how a user might revolve and move around the (3D)board. Our initial attempt was to provide static angles that would give an idea of how many buildings you can see from that point of view. This, however, made things confusing and difficult to transition from two different camera angles. After some deliberation, we moved on with a pan to view for beta testing.

Modes we compared

Group 2

Before User-Testing

Group 3

After User-Testing

Originally we strayed away from the option to see both 2D and 3D at the same time. I thought it was tacky — not 'Timesian' and frankly just not intuitive. However, after some internal user-testing, most users found the 2D view confusing and hard to understand.

This was a big learning opportunity for me — since I knew all the tricks and rules to the skyscraper puzzle I didn't need the 3D view — however for a new user who doesn't know all the tricks had a greater understanding when viewed in 3D.

Reflections

What started as a conversation of feasibility turned into a launch of reality. This was my first time leading a team with a group of developers and creating something that was fully functional from the ground up. Leading a group and standing in as a PM, was something that was a great challenge but also a great discipline to practice. I was able to support my team members and prioritize the work that needed to be done on a quick timeline. Being able to practice my soft skills and learn how to encourage deadlines while also being mindful of my teammate's time taught me a lot on how to operate on a larger scale.

This was also my first time making a game, something completely unrelated to the genre of work I usually work in. This was also something that made me realize what I liked about product design and how a product designer isn’t limited to the medium of work but rather the thinking around the work.

If I were to continue this project I would try to design a screen for mobile where 2D and 3D can coexist on a better plane. Because the transition of the work was from web -> mobile with a tight deadline for the transition: a lot of my challenges were about how I could efficiently use my time, use the existing tech stack, and designing for a smaller screen.

Overall, it was a very exciting and scary experience. I didn't think much would happen out of an intern-led Hack Week project, but it ended up being a richer experience than I initially thought it'd turn out to be.

Group 146

Live on Nytimes.com