During the summer, a proposed New York Times Games re-platform included a redesign of the home page, that was once built for the Crossword but now needed to accommodate a variety of games, puzzles, and leaderboards.
Within this redesign, the design team proposed the Card component as an identifying element for games and puzzles within all the information and articles on the home page.
In this project, I lead the wireframing and visual exploration of the Card component and presented the results of my exploration in weekly design reviews and meetings with designers, engineers, and other stakeholders.
In this context, we first decided to differentiate Games and Puzzles, where a Puzzle would be a daily instance of a Game. That is, Monday’s crossword was a puzzle, while the Crossword was a Game.
Both cards needed to contain different metadata, as they were used in different lock-ups and were relevant to different audiences. Further, puzzles were often grouped together (i.e. a week’s worth of Crossword puzzles, or an archive) and the icon and title in the Game card were too repetitive to stand next to itself multiple times.
This also rose the question of what information should be contained in each card. Or, better yet, what information is useful to players, and how do the needs of players change as they familiarize themselves with the Games environment.
In this context, we designed a Master Card component with toggle-able sections for different kinds of metadata that could be easily transformed into each expertise “type.”
From this, we devised a system with three levels of expertise, based on the progress of each player in the Games environment: new, registered, and habitual users, distinguished by their account’s status and usage time and frequency.
Each card type was built using a combination of two Master Cards with different data fields toggled on or off. The first Card, at the top, has Game-related information, such as name and icon, while the second holsd Puzzle-specific metadata.
Beginner
Intermediate
Expert
The "Beginner" card emphasizes the Game information. It includes the name, icon, and a brief description of the game. The Puzzle section has, in comparison to the others, less information, focusing on the title and date.
In the two more advanced cards, the Game section loses relevance in favor of more Puzzle metadata. The cards forego the Game's description to highlight the Puzzle's creator and editor. The "Expert" card drops the Game's name altogether, relying on the player's knowledge of the Games icons, so as to offer a more compact view.
All cards have a section below the CTA that contains user messaging. Similar to the rest of the card, these adapt to the player. While the "Beginner" message encourages the player or suggest a similar game, the "Intermediate" and "Expert" highlight the player's streak and stats.
Further along the process, I started to design higher fidelity renders of the Game cards, exploring the use of color, icons, and other stylistic choices, as well as hover and click interactions.
Please, interact with me
Finally, as discussions progressed the team pointed out that often (especially for new players), difficulty levels across puzzles were unclear, so we explored how to convey difficulty level in each card.
The discussion started with what visual indicators and language would work best and extended into the layout of specific cards, exploring where this indicator would exist in the card.
Similarly, we looked into iconography for progress, in an attempt to define what progress meant in each game.
Finally, we decided to explore how to indicate the subscription requirement for each Game, as a way to better display the value of a Games subscription to new users.
Limited Access
Subscriber Only
