UI/UX Design for Solitaire Blitz

While working as a Product Designer at Joyride Games, I designed the user experience and graphical interface of Solitaire Blitz, a competitive Solitaire app that was available on the Apple App Store.

Solitaire Blitz is a competitive Solitaire game where you can challenge other players to real-time or asynchronous games, with the ability to bet virtual currencies and cash.

User Persona

The primary user persona for Solitaire Blitz and the Joyride ecosystem in general was based off market research that showed that 63% of mobile casual gamers are female, the average age of players is 32-36, and that 60% of female casual gamers play everyday.

Establishing this user persona helps to give greater clarity who the product is being designed for, and additionally helps to break stereotypes that might naturally be made about gamers as a whole.

Crafting an Engaging Matchmaking Experience

Design Problem

The experience of finding a match with another player is a crucial point where engagement can be boosted or lost.

The goal was to design a matchmaking experience that was dynamic and interesting for players, and more engaging than the existing matchmaking within the main Joyride Games arcade app. We could measure this goal with data, particularly the percentage of users who find a match and who request a rematch.

The plan was to use the new UX designs and animations as the basis for matchmaking in future games within the Joyride ecosystem, with Solitaire Blitz being the first of them.

How might we redesign the existing matchmaking sequence to keep players more engaged and patient as the system finds them a match?

How might we create a design that is both specific to the Solitaire theme but general enough to be used as a template for matchmaking in another game?

Design Research

I looked at how other gaming apps handle matchmaking to gain insight into which designs worked best for which types of games.

My goal was to combine the best features that I witnessed in each matchmaking experience into an experience optimized for Solitaire Blitz.

Creating an Extendable Matchmaking UX & UI

While Solitaire Blitz is just a 1v1 game, because the matchmaking UX was intended to be used in future games beyond Solitaire Blitz, we considered how to accommodate games of varying sizes up to six players.

An important consideration for the UI design was how to make an experience that felt both curated and specific but could also be easily customized for each game in the Joyride ecosystem.

First Implementation

We landed on the first version of the new UX&UI to implemented after several rounds of iterative design and feedback. Some key changes from the initial Joyride design included:

- Adding a scrolling animation to the profile pictures of random players that you could be matched with, making the matchmaking experience more visual and relatable.

- Reversing the matchmaking counter to count up from 0 rather than down from 60. This gives the player a more positive perspective on the count, and doesn't wrongly imply that the user will have to wait 60 seconds to find a match.

Results shown in Data

Comparing the data from the original Joyride matchmaking experience to the new design, we found notable increases in several metrics, including a 19% increase in users requesting rematches and an 11% increase in users who found a match. This data validated our efforts with the redesign.

Future Improvements

We considered further UX improvements including adding a reminder of the total amount you could win, in addition to tips to give advice to players and give them something to read while waiting for a match.

Further UI improvements included enlarging the profile pictures significantly, putting less emphasis on the exit "X", and making the overall UI more cohesive.

Designing the Home Screen

Design Problem

Our goal in designing the Playground tab was to make it not just the home screen of Solitaire Blitz, but the hub of activity within the app.

We wanted to make the Playground tab a jumping off point where the player could dive straight into numerous different experiences, such as featured contests, challenges, and games with different stakes.

User Experience Wireframes

I drew up various wireframes for a gaming hub optimized for an app, with Solitaire as the specific focus, based off the player's jobs to be done (JTBD) and design research into similar screens in other gaming apps.

High Fidelity Iterations

From the wireframes, I created numerous high fidelity mocks of the Playground. I continually altered and improved the designs based off feedback from PMs, the developer team, and test users who were playing early versions of the game using Testflight.

Visual Design

I designed many graphics to add more depth, fun, and visual appeal to the game interface. For example. the above cards serve as a central focal point of the Playground tab, helping players to quickly enter into a game.

Last Iteration

The last iteration of the Solitaire Blitz Playground that I designed is depicted here. The design allows the user to jump directly into a game or action with the large top tiles, while the bottom half of the screen offers the player more precise wagering options, categorized by game mode.

In-App Footage

This screen recording shows the implemented app in-action, including shots of the Playground tab, matchmaking, gameplay, and results, all of which I designed.

more product design

Blitz

Designing a web app to optimize creation and testing of video ads for social media.

Clearr AURA Desk Lamp

Designing a desk lamp with a built-in face lamp for optimal lighting on video calls