Jigsaw Puzzle

2017

Jigsaw Puzzle was the first time my team and I at Mobilityware were attempting to develop an Instant Game, html/javascript browser games that run within Facebook's Messenger app. Having come from a web design background, I had an advantage over many other game UI designers, however my team and I found ourselves having to modify our Unity workflow drastically to accommodate the limitations of this burgeoning platform.

For these reasons, we decided to adapt our studio's iOS Jigsaw Puzzle game into an Instant Game version, with new features emphasizing social interaction and puzzle trading that would be bolstered by the fact that the game was already being played inside a social media platform.

UI Design

For the UI, I had to stick fairly close to our native Jigsaw Puzzle app's style to maintain branding consistency, but I took several liberties to make it fresher, younger, and a little more modern as our users were a primarily younger Messenger-using demographic.

Jigsaw Puzzle is based on Mobilityware's iOS game of the same name, but with additional social features that leverage the Facebook Messenger platform. In addition to solving puzzles, players have the ability to request and gift completed puzzles to one another.

Views of the Main Menu of the game, which features sections to view your personal puzzle library, receive a free daily puzzle, purchase new puzzles, and a Friends List where you can view and request puzzles from friends.

Views of the Puzzle Menu, or library of all puzzles collected. Players can choose to replay old puzzles at varying difficulty for extra in-game currency. I made small badges and overlays for the puzzle thumbnails so that players would easily tell if puzzles were new, in progress, or completed.

I kept the in-game screen as clear as possible to avoid clutter and maximize space for puzzle solving. An elaborate animation plays out when the last piece is placed, after which users can watch a promotional video to double their in-game currency reward.

UX Design

When starting the UX, I wanted to emphasize the social aspect on the main menu. Since players could play the game for free via Messenger with friends, we really wanted trading and socializing to be the primary mechanic through which players gained new content, thus ingraining socialization as an integral part of gameplay.

I started by mocking up screens in Adobe Illustrator, and devoting a decent chunk of the main menu to displaying the player's friends and the latest puzzles they'd completed.

Illustrator wireframes of the My Puzzles menu.

Wireframes for the in-game screen.

Marketing

Rich Messages are an important aspect of Instant Games, as they one of the primary drivers of retention and socialization between players. Friends can ask others to send them new puzzles and the game can notify players about new content.

Rich Messages are dynamic graphics that can be sent to friends via Facebook Messenger from within game. This graphic is sent to players to remind them to collect a free Daily Bonus Puzzle.

After completing a puzzle, players can choose friends or even whole threads in Facebook Messenger to send this Rich Message. Clicking on the graphic automatically gives friends a link to collect the puzzle in game.

This Rich Message is automatically sent to friends of the player who start playing the game, and gives them a chance to help them build their puzzle library by linking them to their own gallery to send a gift.

Inviting players from the Main Menu send this Rich Message out to friends and threads of the player. The avatar is dynamically generated with the player's Facebook profile picture.