BattleSolitaire

GamePoint | The Hague

iOS

Google Play

Role

Product Designer, Product Owner

Duration

8 weeks

Responsibilities

UI / UX Design, UI visuals, Unity implementation

Role

Product Designer, Product Owner

Duration

8 weeks

Responsibilities

UI / UX Design, UI visuals, Unity implementation

Introduction

BattleSolitaire is an engaging multiplayer solitaire game designed for two players. In this game, players aim to complete their stockpile before their opponent, following the classic rules of Solitaire/Patience but with a shared tableau.

Developed by a team of three developers, one artist, and myself as the UI/UX Designer, we successfully launched the MVP within an efficient 8-week timeframe, from conceptualization to completion.

Following the initial release, we continued to enhance the gameplay experience by introducing new mechanics, such as Events, and incorporating vanity items like avatar frames. These additions provide players with additional rewards, which can be acquired either through in-game currency or by completing timed events.

Web Redesign

The game was originally created in Java and later ported over to Flash. In 2015, not long after I joined the company, I created various concepts of how a redesigned version of BattleSolitaire could look like.
These concepts sparked some interest, but never went off to the next phase as there were other projects that had higher priority.

Original Web Game; Java and Flash version

Concepts Web redesign

Mobile Release MVP

In 2021, as a Product Owner of a research and development team consisting of developers and artist, we got the assignment to release a mobile version of BattleSolitaire


Having previously worked on the web redesign pitches, I was eager to start the project with a development team, but also know about the challenges we have to design a good layout that fits mobile gameplay.

Team Management & Design Process

At the start of this project, our team had multiple maintenance tasks from our other games to handle, alongside a limited amount of development time. Therefore, I needed to carefully plan our team's time.

I began the Discovery phase with our artist. My focus was on designing the game layout, while the artist worked on the game art. Our more experienced developer started in the Production Phase, collaborating with our server development team on backend tasks.
We had two new developers to recently joined our team. One worked on rapidly prototyping the game layout during the Ideation phase, while the other focused on creating a prototyping tool within Unity to help speed up development time for new features.

Game layout concept

Game UI concepts & prototyping

Redesigning the game UI for mobile presented a considerable challenge. The original web version featured two Solitaire screens stacked on top of each other, a layout that, while functional on the web, posed obstacles for adaptation to mobile platforms. Nevertheless, given the familiarity of the existing player base with this layout, it was crucial to create an intuitive and user-friendly design for the mobile version.

Building upon my prior experience in creating web redesign concepts, I approached the mobile redesign with clear objectives in mind.

• Firstly, all player interactive elements were strategically positioned below the screen and enlarged to ensure easy touch access.
• To address the issue of limited screen real estate, opponent cards were modified to display only the last cards in the deck, streamlining the gameplay experience.
• Additionally, the placement of player card decks underwent a redesign, integrating them within a perspective pane that harmonized with the background.

For the Unity prototype project, a important requirement was to give myself and the artist full control over UI modifications without disrupting the build. This approach not only allowed for rapid iterations during the concept phase but also streamlined the prefab structure for efficient implementation during the production phase.

Final design

After player feedback and play tests, some important changes where made:

• Scores are added to show which player is ahead. With this change the avatars are placed next to each other to show a clearer overview.
• In original design, tapping on opponent card will show the full stack. This feature was abandoned, since it’s a very fast paced game, the player usually looks at the last card of the opponents deck.
• Timer Countdown, while important, is not necessary to display until the last minute. Most of the games are finished before the timer ends. The Timer will now appear in the last minute of the game

Prototype Game Layout vs Final Design

Other Screens and Features

Other Screens and Features