Work

Designer & Human

Skyscraper

A ‘Timesian’ reimagining of the 2D logic puzzle, skyscraper.

Product Design, UI/UX

Summer 2019

1 Week (Hack Week)

Thumbnail image for skyscraper, it shows the mobile screen on a blue backdrop

Context
During NYTimes’ maker week, I proposed, led, and launched a new interactive game called Skyscraper. Skyscraper is a 2D/3D puzzle that’s solved by using spatial reasoning. The game was later live for a two-week beta testing.


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, build a New York City cityscape.

Team
Me (Design Intern)
Urvashi Uberoy (SE Intern)

Alicia Wang (SE Intern)
Yuchen Jin (SE Intern)
Tiago De Paula (SE Developer)

Group 3

Live on NYT

Group 2

Landing Screen

Landing Screen

Group 4

Game Screen

The skyscraper puzzle, originally solved in 2D, is known for being difficult to solve because of its spatial reasoning. An avid puzzle solver myself, I thought this game would become more accessible if brought to life with a 3D-Timesian reimagining.

Onboarding

When I was considering 3D games and all interactions involved in 3D games, there was little to base it off of when considering the current games within The New York Times. I questioned, How might we design 3D interactions so that it feels ‘Timesian’ even though there wasn’t anything to base it off of? What are some restrictions or additions to movement or interactions that make it more ‘Timesian?’

Group 5
ezgif.com-crop (1)

Live on Nytimes.com

Group 40
Group 39

For two weeks Skyscraper was published on mobile-web at the bottom of the page. I also designed two variations for the beta icons. 

swivel-before

Before

ezgif.com-crop (3)

After

After doing some internal user-testing we realized that a static swivel created some confusing user-experiences. We made changes so that wherever you clicked on it would swivel and remain consistent in the camera view.

ezgif.com-crop (2)

Playing the Game

Group 6

Win Screen

Group 7

Post-Win Grid

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. 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.

Group 146


Check it out at nytimes.com