App Redesign:
New York Times Games
The Problem
Unnecessary Navigation
Design Inconsistency
A section of the app contains packs of crossword puzzles that users can purchase. Each includes a free puzzle to try. There is no way to tell whether you have completed the free crossword without opening the pack, checking the puzzle, then backing out of multiple screens again.
On the main page, a gallery of crosswords required you to swipe past quite a few before reaching the “See More Packs” button.
Smaller design inconsistencies between the game screens such as buttons not lined up and unexplained white lines make the app less cohesive and conducive to the user experience of interacting with the menus.
The Goal
Misaligned buttons and random white bars
The goal of this project was to recreate the New York Times Games app while fixing these design issues in the original to make it more user friendly.
The Background
The New York Times Games app is a mobile way for users to play the newspaper’s crossword puzzles and a variety of other games including Wordle, Connections, Letter Boxed, Tiles, and Sudoku.
No indicator of free puzzle completion
The Process
References
To start recreating the app, I needed reference images. I took many screenshots of all the parts of the different pages and used them extensively to line up text, boxes, and symbols as closely as I could.
Typefaces
The simple sans serif used was easy to find and match, Libre Franklin.
For the titles, I was unable to find the exact typeface and opted to use Hepta Slab.
Components
The homepage of the app is where most of the interaction happens, so there is a lot of content and repeated elements. To easily manage and edit a large amount of repeated parts, I created components of the different boxes
Icons
Along with screenshots for reference, I needed the icons and symbols. My box components had areas for inserting images. I took screenshots and cropped them to the same sizes so they would all fit neatly and perfectly in the shapes.
The many screenshots of reference images and icons
Scrolling
The app had multiple sections of boxes that could scroll horizontally and I had to learn how to do this. I placed the boxes in a frame within the frame for the page and once they were lined up, I shortened the width to line up with the page edge. Next, I had to go to Prototype and turn on Overflow > Horizontal.
Creating horizontal scrolls
A reference image and its recreated frame
Components of repeated boxes
Results
A comparison between the original crossword packs page and my recreation with the added information.
The main games besides the crosswords lined up to show the uneven buttons and random white bars in the original versus my straightened out recreation.
Below is an image of the final prototype showing the connections between every frame.
A video showcasing the navigation and interaction of the final redesigned app.
Reflection
I am happy with how my recreation and redesign turned out. I think it looks accurate, the interactions work well, and the adjustments are good.
If I were to edit it more, I would maybe play around with the free puzzle indicator. Currently, the ones with available puzzles have the text while the completed ones don’t. A different idea might be to put the text under all of them and have them greyed-out on the completed puzzles.
Also, since my redesign, the New York Times Games app has actually changed its layout entirely. This means it’s no longer accurate, unless I decide to recreate this new design too!