Blackjack

2017

After learning much about the platform and achieving great success with our Jigsaw Puzzle Instant Game, my team embarked on porting another Mobilityware classic-- Blackjack. In line with the social nature of the platform, we designed the game with a robust multiplayer tournament mode and challenging single player mode to satisfy players of all types.

UI Design

Like Jigsaw, I had a lot of premade UI assets at my disposal and a general aesthetic to shoot for, but the original files were formatted for iOS native export, and many had to be recreated or optimized. There was also a good deal of brand new UI for features that did not exist in the native app, and I took this opportunity to refine a few UX kinks that were also present in the original game. The result was a game that looked on brand, with sleeker updated graphics and a more streamlined experience.

Classic Blackjack made more interesting by introducing a single player mode with level progression, multiplayer Tournament mode, and the ability to invite friends to live Tournaments via Facebook Rich Messages.

Mockups of the main Lobby. Players can choose between Sprint (single player) and Tournament (multiplayer) mode, access their stats via the Player Dashboard, and see their friends' progression.

Mockups of the Player Dashboard, which houses stats for the two play modes plus leaderboards of the last 25 Tournaments the player has played in.

Mockups of the Tournament mode game screen. A live leaderboard of the top players is anchored to the left edge of the screen, and updates after each hand played.

Mockups of the Sprint mode game screen. I used a blue felt table background to differentiate this mode from Tournament, which is also reflected in the Player Dashboard stat screen.

UX Design

I created these wireframes in Adobe Illustrator and was able to iterate very quickly and mock up every screen in the game by using linked files. Using these mockups, I documented the entire flow of the game in Confluence where we as a team were able to visualize the game and make adjustments/course correct.

Wireframes of the Lobby done in Adobe Illustrator. I later converted the Player Dashboard into a fullscreen menu due to its complexity and multiple layers of depth.

Wireframes of Sprint Mode and Sprint results popups. It was here that we realized Sprint mode should look distinct from Tournament mode, which I rectified by using a blue felt background.

Wireframes iteration of the Tournament leaderboard UI on the left edge of the screen. It took some work getting the size and alignment just right so that it wouldn't be too distracting from gameplay.

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 challenge each other, the game can notify players about new tournaments, and graphics can be dynamically generated to create things like leaderboards or brags.

Rich Message sent to players when inviting their friends to play the game with them.

Rich Message sent to players when leveling up in Sprint mode.

Rich Message sent as a score brag in Sprint Mode.

Rich Message sent to players when inviting their friends to play in a tournament with them.

Rich Message sent to players after winning a trophy in Tournament mode.

Rich Message sent to players when a friend of theirs begins playing Blackjack.

Rich Message sent to players when their tournament has ended and the results are ready to view.