My Role: Senior product designer: wireframes to high fidelity, the card system, desktop interaction design
Team: Product, engineering, editorial and an external agency
Timeline: 6 months
Tools: Figma, Miro
The Problem: The puzzles hub wasn't designed deliberately, and it couldn't carry The Globe's ambitions for games or sponsorship
What I delivered: A three-tier card system, game start, instruction and completion screens, and desktop interaction patterns
Outcome: Launched and still live, with one card pattern shared by every game
What I owned
The redesign was already with an external agency when I joined. I saw that the layout and card patterns needed more exploration to work across games, screen sizes and the app, so I made the case with alternatives instead of critique. I produced wireframes and high-fidelity iterations, and the agency and I met in the middle on a shared solution.
The desktop interaction patterns are mine end to end, including hover micro-interactions on the cards, and I specified an ambient gradient background for implementation.
The hub existed, but it wasn't built for where games were going
Leadership wanted Globe games to stand alongside prestige destinations like The New York Times Games, and saw renewed potential to monetize through sponsorships. The existing page hadn't been designed deliberately. Cards had no strong visuals, so no game had an identity and the page read more like a list of links than a place to play.
01
A premium destination
Position games as something worthy of the brand, not a sidebar to the news.
02
Room for sponsors
Make space for sponsorship and ads without hurting the play experience.
03
Built to grow
Add new games and special editions, like the Canada Day giant crossword, without new design work.
Desktop interactions, and a background with a metallic sheen
I designed how the hub responds to a mouse rather than just scaling up mobile: cards lift on hover and their illustrations tilt slightly. I also specified a slow, subtle gradient behind the cards to give the page a premium, metallic feel. The gradient didn't make the first release, so I've prototyped it since.
From choosing a game to finishing it
Start
Title, description and date, with Play, Archive and a prompt to save stats.
How to play
A worked example before the rules, so the mechanic clicks visually.
Congratulations
Completion time, a way back, the archive, and a reason to sign in.
One anatomy, three sizes
The shipped hub runs on three card types that share the same structure, so a new game or special edition drops in without new design work.
Featured
Daily Crossword
Today's puzzle, ready when you are
Play
Yesterday
Tuesday
Monday
Archives
Game
Sudoku
Play
Mini
Play
Giant
Play
1
Same order everywhere
Illustration, title, description, action. Players learn it once.
2
Illustration as identity
Each game owns an illustration, so cards stay quiet but recognizable.
3
Flexible slots, fixed structure
Optional elements like an author byline extend a card without breaking the grid.
4
Daily first
The featured card and day row answer the most common need, today's puzzle, before the catalogue.
The same flow on a phone, with nothing redesigned for it.
Because the cards and screens share one anatomy, mobile is the same system at a different width, not a separate design. (Use the mobile flow video here in Framer.)
The hub as it ships today.
Outcome
One pattern for every game
Seven games, the daily crossword and its archive share three card types.
Built to grow
New games and special editions fit the existing cards without new design work.
Consistent across platforms
The same structure carries through desktop, mobile web and the app.
Reflection
Joining a project already in an agency's hands taught me to influence with work, not opinions. Showing alternative iterations moved the conversation further than critique alone.
If I did it again, I would push earlier to get the ambient gradient and the full set of states into the first release, and set up measurement from day one so the system’s impact could be tracked after launch.