UX/UI DESIGN

NYT Games

Allowing users to compete on the NYT Games Crossword
My Role
UX/UI
Designer
Tools
Figma
Miro
Maze
Timeline
2 weeks
Company
Academic Project
My Design Process

Background

Crosswords bring people together

The New York Times crossword is played daily by thousands of people across the country,  my family and friends included. I first had the idea to add a "compete mode" feature when I noticed friends texting me screenshots of their times and scores, clearly eager to see mine as well. They wanted to compete! My vision for this new feature is to allow friends and family to deepen their connection to the platform and to each other through collaborative puzzle solving.

The Problem

NYT Games doesn't allow users to play games collaboratively

Users of the NYT Games App are not currently allowed to play games competitively or collaboratively with other users. This may lead users to leave NYT Games other platforms that are more social.

A perfect opportunity

Project goals

How might we add new features to NYT Games that allow users to compete and play collaboratively?

How might we connect NYT Games users to the NYT news application to increase engagement in current events?

Learning about potential users

Key insights from user research

The research phase for this project consisted of user interviews with four NYT Games players and a competitive analysis.

Research artifacts showing user efforts to compete and play together

Interviews

Takeaways

The first step was to hear directly from current NYT Games users about which games they played, how the shared scores and accomplishments with family and friends, and whether they would be interested in new modes of play that allowed them to communicate, collaborate and compete inside the application.

Insight #1

NYT Games players are engaged with current events

All research participants also read the New York Times and stayed up to date with current events.

Result: The competition feature will allow users to to choose current figures as avatars. The avatars will give have character specific fighting words at the beginning of each match.

Insight #2

Players like to solve collaboravitey and competitively

Some users shared that they like to solve the puzzles together over the phone, FaceTime or Zoom (collaborative), while others shared they like to text their times and scores (competitive).

Result: The app will contain users multiple different ways to play to play socially - some competitive and some collaborative.

Insight #3

Players like to solve collaboratively and competitively

Some users shared that they like to solve the puzzles together over the phone, FaceTime or Zoom (collaborative), while others shared they like to text their times and scores (competitive).

Result: The app will contain users multiple different ways to play to play socially - some competitive and some collaborative.

Insight #3

Users like to talk while playing games

Users call friends and solve the puzzle while on the phone, FaceTime or Zoom.

Result: The competition feature will allow users to talk chat while playing, but will also work while players are on the phone.  

What else is out there? 

Takeaways from the competition

Following the interviews, I completed a competitive analysis of other puzzle games where social play was possible. The goal of this stage was to understand how other applications were managing the demands of collaborative and competitive play.

Takeaway #1

Clunky UI

Existing game apps have distracting, kiddish and cluttered UI.

Result: The NYT Games compete mode will align with the NYT brand with a sleek adult vibe.

Takeaway #2

Ability to keep playing

Top apps allow users to play as many games as they want.

Result: The competition mode will allow users to play the archive puzzles as well as the daily puzzles.

Takeaway #3

Users earn rewards

Many of the games allow users to earn badges or awards and engage in tournaments.

Result: The competition feature will provide awards and stats so users can see how they stack up against their friends.

Defining the user

Persona

Based on key findings from the research phase I defined a user persona and used storyboarding techniques further empathize with their experience.

Storyboarding

An exercise in deepening empathy

Following the creation of Freddy's persona, I completed a storyboarding exercise to further empathize with his pain points and frustrations. By sketching out a typical moment in the users day, I was able to better align myself with the emotions and actions that drive his use of the NYT Games application. This helped me imagine how a new "compete mode" feature might  help fulfill some of his needs and goals and brighten his day.  

From concept to minimum viable product

Information Architecture

Once the persona was established, I created three specific task flows to demonstrate proof of concept. At this stage, I had many different ideas for all of the different modes of NYT Games new "Play" feature, but decided to focus my energy on creating the initial flows for a game called "First Word" that allows users to solve the puzzle competitively with a friend.

Task Flow #1: Invite a friend to play

Task Flow #2: Learn to play

Task Flow #3: Choose avatar and begin game play

Staying true to the NYT Games brand

Working inside constraints

In this case study, I added a new "compete mode" to the existing NYT Games application. Therefore, the branding was already determined by the NYT Games creative team. The challenge for me was to work within the pre-existing style to create avatars, new cards, navigation features and messaging. It was important that all newly designed elements  aligned with the overall look and feel of the existing brand so as not to distract from user experience.

Turning sketches into prototypes

Before starting any digital work, I spent hours sketching out ideas for different games as well as rough wireframes of the user flows. Below, you can view a cleaned up version of the final sketches I used as a guideline for my initial wireframes.

Initial User Flows and Sketches

Step #1

Ideate through sketching

Before stepping in front of the computer, I cherish the time that I get to sketch ideas for different screens and flows. I slowly refine my sketches until they are ready to become digital wireframes.
Step #2

Rough wireframing

The initial wireframes transformed the rough sketches into the first digital representation of the user flows, icons and layout.
Step #3

Mid-fidelity wireframes

Three mid-fidelity wireframes were used for usability testing. Instead of shooting for a pixel perfect layout, these prototypes were designed quickly to help gauge whether users could easily accomplish tasks and enjoy the initial features.
User Flow 1: Invite a friend to play
User Flow 2: Choose avatar and begin gameplay

Does it work? 

User Testing

After the initial prototype was complete, it was tested via Zoom with the same four participants interviewed during the research phase.  Each participant was asked to complete two tasks:

Task #1

Invite a friend to play

Users were instructed to "invite a friend to play "First Word" on the Thursday, June 13th crossword puzzle.
Task #2

Begin game play

Users were instructed to "accept their friends invitation, choose their avatar and begin gameplay."

Results

Users were very excited about playing NYT Games collaboratively

Overall, users loved the new NYT Games competition mode. They loved picking avatars from current events and all delighted in the fighting words delivered by their cultural icon of choice. Users also thought the game was creative and fun to play and were easily able to accomplish both tasks. However, all users struggled with a couple aspects:tried to click on the puzzles directly to access play mode instead of using the new "play" icon that was added to the navigation menu. Additionally, once game play started, users were confused about the rules of the game.

Takeaway #1

Users were confused about how to start play

Every user tested tried to start play by clicking directly on the puzzle they wanted to solve instead of on the new play icon in the menu bar.

Iteration result #1

Allow users to start play from multiple locations

Users can now enter play mode from two locations: the puzzle they want to play or the menu bar.
Takeaway #2

Users didn't intuitively understand the game rules

Although users were able to successfully navigate to gameplay, they were confused what to do once they got there.

Iteration #1

Adding Friction

The first time through, users are required to walk through the tutorial "How to Play" beflore they can start the game.
Iteration #2

Create tutorial flow

User testing revealed that a tutorial flow would be needed for users to successfully play the game.

Final Design

Sync existing fitness apps and tracking devices for seamless health management

Overall, the users loved the idea of being able to track outdoor adventures and gym workouts in the same location. In particular, users loved the calendar feature so that they could see how all of their different training aspects fit together as a cohesive plan. They loved the idea of being able to click on a certain day and see what workouts were completed. Users also loved that they could use GPS and other tracking devices on the same app they used for scheduling.

User Flow #1

Invite a friend to play

Users sync their health monitoring devices and current fitness applications, add friends and set up fitness calendars.
User Flow #2

Learn how to play

User testing revealed that the onboarding process was a bit stale. The entire flows UI was redesigned to match the energy of the rest of the application.  
User Flow #3

Choose avatar and begin game play

Users plan for a successful and healthy future with the built a built in fitness calendar that stores workouts and data.

Explore other work

Fitfind
Sage
NYT Games