App Redesign:
New York Times Games
The Problem
Through my personal experience using this app, I have noticed a few elements that could be improved with simple changes to better UX and UI. These issues come down to:
Unnecessary Navigation
Design Inconsistency
1. A section of the app contains packs of crossword puzzles that users can purchase. Each one 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 requires you to swipe past a lot before reaching the “See More Packs” button.
2. Smaller design inconsistencies between the game screens include buttons not lined up and unexplained white lines. These 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 the design issues in the original to make it more user friendly and visually consistent.
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.
A reference image and its recreated frame
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 instead.
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
Components of repeated boxes
Icons
Along with screenshots for reference, I needed the various 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 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 page’s frame and once they were ready, I shortened the widths to line up. Next, I had to go to Prototype and turn on Overflow > Horizontal to create the scrolling effect.
Creating horizontal scrolls
Results
The app redesign resulted in an interactive, close copy of the original with some adjustments to improve its UI and UX components. Below are comparisons of the changes made.
Free Puzzle Status
A comparison between the original crossword packs page (left) and the recreation with the added info (right). The inability to see free puzzle completion without opening and closing multiple pages is a personal annoyance I’ve had. Therefore, I think a simple change like the one added would go a long way in improving user experience.
Button Alignment/White Bars
This comparison has the non-crossword games lined up to show the uneven buttons and random white bars in the original (top) versus my straightened out recreation (bottom).
Final Prototype
Below is an image of the final prototype in Figma showing the connections between each frame.
Prototype Video
Here is a video showcasing the navigation and interaction of the final redesigned app.
Try it Yourself!
If you’d like, feel free to click the button below and explore the prototype on your own!
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 effective.
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!