<aside> 💡 Note: I’m not affiliated with the New York Times or the original creation of this game. If you’re a fan of daily word games and not familiar with Connections, you should check it out! https://www.nytimes.com/games/connections

</aside>

Table of contents

Context

About this exercise

If you're like me, you're always curious about how things work. When using my favorite apps, I often wonder what it would take to recreate the logic behind the features I interact with. This exercise reveals the complexity behind even the simplest appearing apps and offers several benefits, drawing on my diverse background.

• As a designer, I analyze an existing UI, identifying the relationships between various elements, components, and content.
• As a PM, I break down the app into discrete features, articulate the value or purpose of a feature, identify dependencies, and define the scope of what I'm going to build.
• As an engineer, I contemplate how to integrate these elements and actually build the product.

I thought it would be interesting to demonstrate this process with a specific example. So, what am I reverse engineering this time? It's one of my favorite word games by the New York Times - Connections. Let's dive in!

What is Connections?

Let’s get a clear understanding of what this game is.

Connections is a game where your task is to find groups of four items that share something in common.

• Select four items and tap ‘Submit’ to check if your guess i correct
• Find the groups without making 4 mistakes!

Now that we have that context, the next step is to break down the UI of this game. To start, there are some primary elements and functionality I’m focusing in on.

Part 1: Product breakdown

Simple heuristic