MPQ: rank popup refresh
MPQ: rank popup refresh
marvel puzzle quest
ux+ui artist
june 2021 - february 2022
As part of the UX/UI team on MPQ, a live service PC and mobile match-2 game, I helped visually refresh parts of the game that had not been updated since release. This kind of work entailed redesigning UX flows and replacing assets, such as the SHIELD Rank Popup.
SHIELD Rank Popup - UX + Visual Refresh
💥 Problem
In MPQ, players’ account levels were messaged as “SHIELD Ranks”. By playing the game, players would earn XP, which would raise their SHIELD Rank. This was meant to make the progression system feel more diegetic, as if the player were an agent of SHIELD.
Players were able to view their SHIELD Ranks by a button on the home screen that would then show a modal/popup. However, I had identified a few problems:
There was inconsistent UX between the regular popup state and the rank-up state.
The information hierarchy was confusing.
The original regular popup gave equal sizing priority to the level and the reward, placing the level above the reward for higher significance.
The popup was not visually up-to-date with the rest of the game.
Lack of proper text formatting made understanding certain bits of information unnecessarily hard.
🔨 Task
Create a visually refreshed popup that contains all the information currently in the old popup.
Reorganize and reformat the informational hierarchy.
Keep the implementation relatively simple (we had a Flash-based engine from 2013).
V1
V2
💡 Solution: Regular State
Right off the bat, in regards to UI design, I:
reduced visual noise and increased clarity
by changing the opacity and style of the SHIELD logo in the background (this also made it look more modern, IMO)
also by changing the background texture from a geometric design to a simple gradient
UX-wise, I understood that players were going to come to this screen to do two things:
check their rank/rank progress
check the next reward
and so I wanted to make their experience as quick as possible by adjusting the information hierarchy. Thus, I:
changed the sizing and alignment/placement of… everything
It made more sense to center everything and vertically stack them. This created more space for the player name and XP number, allowing me to increase the font weight and size of each line of text as well.
changing the wording of the reward text
This was minor, but having two references to numeric levels on the same screen could potentially be confusing.
For a V2 revision, in order to further streamline everything, I decided to:
adjust the placement of the agent name, as it was less important information than the level
increase the size of the current XP number to reflect significance
and… I think it worked out!
👶 Initial Explorations:
Rank Up State
The rank-up state was going to be a little more complicated. I was pretty upset with the original rank-up popup, because rather than trying to reorganize the information, the agent name/level was placed in the top right corner of the popup, with the level information redundantly repeating below. I basically needed to remake the top half of the screen from scratch.
And so I tried. However, the first three of my revisions had glaring problems - they are listed under each revision.
This revision reorganized the information too much and brought back the issue of horizontally displaying all the text.
This revision also reorganized the information [at the top] too much. I wanted players to feel consistency between the popups, while still reprioritizing information.
This one was okay, but I felt like we could do better. Did we need the agent name and the XP there? Did we even need XP at all?
✨ Solution: Rank Up State
I decided that the most important factors here in supporting the info hierarchy in a readable manner would be to
duplicate the order of presentation as the previous screen’s refresh, to maintain clarity and good flow, and
remove any extraneous information that would complicate the screen more than benefit it, so that we could bring focus to the elements that really mattered.
Removing the EXP number added room for a larger level indicator. Keeping the number would only display a full x/x points, and was confusing - and on this state of the popup, players didn’t need to know XP.
I also proposed:
reducing the weight of irrelevant text
adding an up arrow ^ indicator to the level number to show that it had raised up to level 73, since we were unable to add animations to this popup.
This revision was satisfactory, and so was accepted as final. Yay!
However, due to contractual issues and Demiurge eventually leaving production of MPQ to another studio, I do not believe this refresh is present in the game as of March 2023.
