Game Hub
Improving the gaming experience
Project Objective
The New York Times Games App is incredibly popular, coming in at #4 on the US Gaming/Word App store category. However, it lacks developed social features and game statistics.
Research showed that NYT Games users like to see their stats for different games but don’t keep track of them because there isn’t a way to. It also showed that users want to share their results with others, mainly to bond with their friends and loved ones.
Furthermore, they are more likely to remember playing games when they see their friends playing them.
Key design priorities included creating user and friend profiles that showed statistics for the different NYT games and the process for adding and accepting friend requests.
PROJECT TYPE
Solo Design Sprint
ROLE
UX UI Designer | Researcher
Duration
3 Weeks Sprint
PRODUCT
Mobile App Feature Addition
TOOLS
Figma
Day 1
Define and Understanding the Problem
What do people do after completing a game?
Interviews
5 NYT Games users interviewed
Two interviewees play other mobile games
Three interviewees only use NYT Games
CONTEXT
TIMELINE & PLANNING
The New York Times Games app has many games: Sudoku, Spelling Bee, The Daily Crossword, Letter-Boxed, and perhaps the most recently famous Wordle. For several months, you couldn’t escape the craze; all over social media, people were posting their attempts, the green emoji boxes filling up Twitter feeds. This sharing function isn’t unique to Wordle; all NYT games prompt you to share your stats upon completion. But what about sharing stats within the game itself? There’s a leaderboard for the Daily Mini, but as of the time of writing, it’s the only game you can share scores with.
What if each user had a profile with information about all the games? What if users could add their friends, thus allowing them to compare stats, see updates, and more?
Day 1,2,3 - Define the Problem & UX Research
Day 4,5,6 -Sketching User Flows & Design
Day 7,8,9 - Test, Feedback, and Iterate
DEFINING THE PROBLEM
The NYT Games app has over one million subscribers, but the social aspect is underdeveloped. Furthermore, statistics for different games on the app are either hidden or don't exist.
Solution:
Each user has a profile that shows stats for each game, and they can friend others and compare their stats.
RESEARCH
Competitive Analysis
While I completed interviews, I conducted a competitive analysis of three gaming apps.
I found that the Washington Post is most likely the NYT's biggest competitor in games because it offers free access to all games and statistics.
Affinity Mapping
DEFINE
Day 4 - 6
User Flow & Design
USER FLOW
DESIGN
Then, it was time to start figuring out what the new feature would look like.
Point of View
Because I have two personas with different goals, I created two separate problem statements, point of view statements, and how might we statements.
I decided on the most important aspect—adding and accepting friend requests. Because most users remarked that they’d only want to add people they knew, a request system would be best so that random usernames don’t pop up on the leaderboard or in notifications. The social aspect is more about friending rather than following other users.
Low Fidelity
As I figured out how things would work, some questions arose.
How do I integrate the profile? Do I keep it where it currently is and keep the statistics tab at the bottom, or do I replace the statistics tab with a profile tab?
I decided to keep the profile and stats tabs where they currently reside to keep things familiar to the user. The profile will have snapshots of game statistics, and the actual statistics tab can provide a deeper dive into each game.
High Fidelity
Moving into the high-fidelity phase, I changed and added a few aspects.
Add friend button I moved to the profile page as it's easier to find this way.
Share profile CTA I moved inside the "add friend" page because it's a form of adding friends.
Added three dots to the friend profile to indicate management (block, report, unfriend)
I didn't change each card to represent each game for this version of the high-fidelity frames because I wanted to continue testing the new feature. That's why the pages are a total of bees!
High Fidelity
Moving into the high-fidelity phase, I changed and added a few aspects.
Add friend button I moved to the profile page as it's easier to find this way.
Share profile CTA I moved inside the "add friend" page because it's a form of adding friends.
Added three dots to the friend profile to indicate management (block, report, unfriend)
I didn't change each card to represent each game for this version of the high-fidelity frames because I wanted to continue testing the new feature. That's why the pages are a total of bees!
Day 7 - 9
Test, Feedback and Iteration
TESTING
Goals
Evaluate usability and intuitiveness
Validate design decisions
Task
Search & add a new friend
Check your notifications
Accept a friend request
SUBSEQUENT ITERATIONS
Adding a leaderboard screens
This was originally outside of the scope of the project, but I was able to design what the leaderboard looks like with the other games added.
Notable design choices:
Letting users send reminders to their friends who haven't completed a game that day — encourages people to play
Kept a way to add friends straight from the leaderboard — this is a quick and easy way and encourages users to add more friends.
Removed the settings button, as the actions of editing the display name, viewing friends, and blocking are now located within the user's profile
Stat Card Redesign
In the first version of my high-fidelity designs, the cards were less detailed and more difficult to see. As I went through the iterations, I decided to update the look of the cards by bolding the stat labels and making the text larger.
Then, I needed different versions of the cards for when users had completed vs. hadn't finished the games yet. The first card is for when the user hasn't completed a game yet that day. The second is when a user and their friend have finished the game for the day. The final version is when the user has completed a game, but their friend has not, so there's a reminder prompt.
Notifications Redesign
For the notifications page, I noticed it looked very dense and not visually interesting enough. To combat this, these are the things I changed:
Added game icons next to the notifications to easier signify which game a user completed; this also adds a pop of color and exciting visuals
Bolded each player's username to help it stand out; it also signifies a link to their profile
Changed the size of "Today" and "Yesterday" and spaced out each notification to give it a more spacious feel
User Personas
I found that two separate personalities emerged from my research. The first one plays every day and relishes competition. That’s Jacob. I call him “the challenger.” The next user persona I’ve dubbed “the friendly player.” Even though she only uses the app a few times a week, she loves to see her friend’’ scores and has fun using the free games when she remembers to play. Meet Thea.
The New York Times
Updated UI Component Kit
To manipulate different parts of the app, I recreated several of its UI assets, including game cards and navigation bar icons. I also created different variations of the cards, the state of which depends on the games users and their friends have completed.
CONCLUSION
Next Steps — More Stats!
I'd like to design the rest of the game stat cards for the profile page, as I only did my interviewees' most popular games.
For the leaderboard, I wanted to design the stats for all of the games, but since this was outside the scope of the project, I only had time to design stats for one game.
Profile Customization?
While deciding what the profiles would look like, I decided to skip a profile picture and biography. I wanted to match the NYT's brand vibe; a profile picture could throw this off.
If I had more time, I would love to use my illustration skills to create a customizable avatar in the NYT Games style!
Profile Customization?
During this project, I learned the importance of testing the wireframes up and down before using them with testers. Because of some issues with the prototype I tested, some of my data focused on those limitations rather than what I wanted to test. However, I still was able to get valuable data for the project.
I very much enjoyed this project, as I love the NYT Games App, and my friends and I bond over it. All of my testers and friends who saw my project mentioned how much they liked it and that they’d love for the NYT to have this—which is something I’m proud to hear, although I now expect to see my screens whenever I open the real app!