Fourzy by by MindIse
Fourzy is a two player turn-based strategy game for iOS and Android based devices , inspired by classic four in a row games. The client has a functional prototype that is currently in beta testing. They are looking for a redesign of their current UI and a way to improve the overall UX experience of the game.
Prior to implementation of the new user interface, Fourzy's graphic designer provided us with the latest version of the UI design.
Below are "Play", "Shop", "Ranking", "Fourzies", and "Game Board" screens.
We created an affinity map to gain insights from users in order to address the following issues:
1. Lack of on-boarding process
2. Poor user engagement and retention
3. Fairness - new gamers play with experienced gamers
4. Users don't feel rewarded after playing
Our team conducted contextual inquiries to create a user journey map.
1. New users are frustrated when they first interact with Fourzy, because it's hard to figure out how to play, and they want give up.
2. Long wait time for their opponent to play back makes the users quit.
Our researcher created two personas for us as references during the design process in order to help us better understand users' needs.
1. They are game lovers
2. Prefer strategic games, love new challenges
3. Care about in-game networking and community
4. Like to win the games and get rewarded
1. New users get impatient and frustrated because it's difficult to figure out how to play the game.
2. Users get impatient while waiting for their challengers to play their turns.
3. Users don't feel rewarded after playing the game continuously.
Fourzy users need clear game instructions for their first experience with the game. Long wait times can be solved once the game launches as a real-time game, because users can play with other online players. We also believe by creating levels and adding rewards to Fourzy we will improve the user gaming experience and attract a larger audience to play the game, while increasing the retention ratio. However, after Fourzy launches as a real time game, current landing pages need to be redesigned to match the new features and functions.
As designers, Meg and I divided the interaction design challenge into two parts. Meg was in charge of the on-boarding design; I took ownership of the level-up process design and the landing screen redesign. I was also in charge of the UI redesign.
After the stakeholders kickoff conversation, I learned about their business needs, which are the ways to make money through the game. After studying about competitors' models and Fourzy's game structure, we came up with the following 5 options:
1. AppStore Purchase:
Users need to purchase Fourzy prior to or after downloading the game.
2. In-game Shopping:
Users purchase Fourzies and tokens from the built-in game store.
3. Pay to play boards:
Certain levels' boards need to be paid to join the game.
4. Host Game Events:
Create competitive events that require users to purchase entry into the competitions.
5. Advertisements:
Collaborate with other brands to design and implement advertising game boards.
After I poured over Fourzy's game design documents, I took into consideration the personas and users needs. I then created a game level structure based on research.
Level 1 to Level 3
Level 3 to Level 5
Level 5 to Level 7
Level 7 to Level 8
The Wizard is a main character in addition to Fourzies. He creates a connection between the game and the users. We decided to use the Wizard as the guide through the levels, in order to build connections with users.
After conducting usability test on specific competitor' features and level flows, I designed a new "level-up" flow that includes animations of the Wizard and screen changes.
Because the new design hasn't been implemented into the prototype, there are some missing screens. I sketched out the current screen flow to find out what was missing.
1. Token section
2. Fourzy profile screen
3. User profile screen
4. Setting screen
5. Shopping flow
6. Unlocked level screen
Fourzy will be launched as a real-time game where online users will play against each other. I redesigned the landing screens to match this update and also created an event screen.
1. 5-Section Navigation bar: Shop, Fourzies, Play, Ranking, and Event
2. Combine Fourzies and Tokens in the same section
3. Add "History" to separate offline games to live games
4. Create 3 sections of ranking methods
5. New "Event" screen
After taking inspiration from the Wizard, I followed the existing graphic design guide and applied industry standards. This was instrumental in assisting me in the design of the new navigation bar, giving users more visibility.
After researching our competitors, I realized the lack of consistency in the current UI design. The current interface is mixed with 2D and 3D design, such as flat design texts laying on 3D buttons, multiple opacities of different backgrounds, and varying degrees of border thickness of elements. My redesign goal is making the interface more consistent.
Once Fourzy launches as a real-time game, users can see the number of online players. This will make users feel more engaged, as well as creating a Fourzy community!
