Blaston Missions UI Redesign

Brief

I was asked to take a look at the Missions UI to redesign it as it had some usability and technical issues. I hadn’t work on any of the main interfaces in Blaston previously so it was a welcome task to get familiar with how the main UI worked and what we could start to lay the groundwork for upcoming redesigns and features. The Missions UI was a great feature as it was designed to give players tasks to work towards and get great rewards in the process with the ability to upgrade their rewards to include exclusive skins should they finish at least 10 missions in the month.

The existing UI had the following issues:

Rewards

• The normal rewards and premium reward upgrade process was confusing.

• The rewards amount and type was not clear.

• Claiming rewards after and before the season ends was confusing with the different tiers of rewards.

Missions

• The font size for the text of the mission was small before localization, making longer texts very hard to read.

• Localization of texts wasn’t accommodated well which made the text shrink.

• Progress text was small

Process

After sitting down with the game designer and programmers, I tried to map out all the use cases of how the missions UI actually worked. The high level functionality was quite simple, it was the claiming criteria and moments they could actually occur was the trickier part.

From looking at the UI, I saw we had three panes to work with and the different contexts of information were kind of mixed. So I decided to make it easier for users to understand how the system worked, each pane would represent a type of information.

The first pane would be the overview of the missions system itself. This would be the timer of the missions feature and the description of how the system worked. The middle pane would be related to the information and progress of the tasks themselves, and the right pane would be only the reward information. Adding better information architecture would help players understand what the system actually required.

From here, I tackled each pane individually.

First Pane

This would feature the countdown timer, hero art, and the description about the missions system.

Second Pane

The second Pane would only feature the progress tracker for completion, each mission would have the progress overlaid on the progress bar itself, freeing up the width for the text of the mission itself to be displayed. The real estate here would now be increased, allowing us to have multiline and larger font for readability and localization.
The container of the missions themselves would be scrollable rather than the entire pane as in the previous version. The unlocking missions in the future would be clarified for the user to know when the next one would be unlocked.

Third Pane

This pane now explains the default reward for all, which is a certain amount of premium currency (Blasts). The amount is now clarified, and the instruction to add rewards now tells that these rewards underneath are premium and are added to the pool to claim after completion of the 10 missions if the player upgrades the reward pool. The claiming state is simplified also, allowing the player to claim all rewards available should they meet the requirements. There is also text added to tell the player that the after claiming rewards they cannot upgrade their reward pool further.

Progress Pane

In the slideshow above you can see four states of Mission Progress:

Default

This is the UI the player will see for the first time upon clicking the widget on the home screen. The missions have no progress on them and the rewards are not upgraded

Progress

This is what it looks like while the player has some progress on the Missions but none completed. The progress bar behind the completion requirement has filled.

Completed

Here we can see that the user has completed 2 missions and they are progressing through their third. The completed missions have the badge earned and the progress bar filled.

Wait for Unlock

This is that the player has completed all the available missions and must wait for the timer to unlock the next one (the missions are timered to space out completion to an even rate for players).

Rewards Pane

In the slideshow above you can see the three tiers of rewards available to be won:

Default

This is the default reward for all players, the premium currency. The other two rewards have an increased size to show that the premium rewards are still not added to the pool to unlock.

2 rewards

This is what it looks like when the player has upgraded to add one of the premium rewards to their pool. This reward is then moved beside the blasts to associate them together. This is to help bridge the gap the previous version of the interface had.

3 Rewards

This is what it looks like when the player has upgraded to add both of the premium rewards to their pool. This reward is then moved beside the the other two rewards to show that these are all now the reward pool for the player. The rewards are centralized on the rewards pane and the text about upgrading is now removed to help clarify that there is nothing else to upgrade to. All rewards are now of equal size and increased in size to motivate the player that they are within their grasp.

Each of these states have improvements to make the states of upgrading more clear and easier to understand where the player sits in regards to the entire reward pool.

This is one side of the puzzle, the other was to help make claiming rewards more streamlined and easy, and explain the different caveats with claiming during and after the season, and what cannot be done once you have claimed.

In the slideshow above you can see how the UI allows the player to claim the rewards

Default

This is how the player can claim the default reward. The area occupied by the reward previously is now turned into a button with vfx to attract for interaction. The text at the bottom now warns players that they cannot upgrade after claiming.

2 rewards

The area occupied by the 2 rewards previously is now turned into a button with vfx to attract for interaction.

3 Rewards

The area occupied by the 3 rewards previously is now turned into a button with vfx to attract for interaction.

Next was to inform the player about once they claimed and how they would have to claim the previous seasons rewards in order to continue the next season’s missions.

In the slideshow above you can see how the UI shows that rewards have been claimed and if they need to claim before going ahead with the next season.

Claimed

Here the missions UI is locked with an instruction to come back and check next season for more. The text on the rewards pane lets the player know their rewards have been claimed.

Claiming after the season ends

Here the missions UI is locked with an instruction to claim the rewards from the previous season’s missions. This will then unlock the next seasons missions instantly.

Underneath you can see the UI Art done by my amazing colleague Isabelle Cassuto

Widget

After dealing with the main UI, the last thing to do a pass on was the widget itself on the homepage that opens the UI. This had some similar issues with text size and localization issues. The main widget state had the progress and the reward that the player didn’t have. The hover state showed in progress missions but he widget could only track 3 of the missions that were present so I did a pass over it to track the missions like the main interface.

The main thing I wanted to accomplish here was to make the widget fulfill it’s purpose - to track the progress of the player in their mission. Clarifying the widget to also allow the player to know that clicking this widget would open up the interface which wasn’t exactly clear in the previous hover state.

In the slideshow above you can see how the widget now has a much more real estate to allow the user to read an in-progress mission and allow them to see their overall progress in the missions system.

Default

Here the in-progress missions fade in and out on a carousel, previously we could only show three, but now we can cycle through all the missions that the player has not completed. The hypothesis here was to motivate and inspire players what they could do when they come to the home page in case they aren’t sure what they want to do next. After coming back from the duels, the progress bars animate and if full, update the counter in the corner.

Hover

This hover state informs the player that they can see all missions in an larger interface by clicking.

Underneath you can see the UI Art done for the widget by my amazing colleague Isabelle Cassuto