MPQ: special tile popup refresh
MPQ: special tile 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 Special Tile Popup.
Special Tile Popup - UX + Visual Refresh
💥 Problem
In MPQ, if players wanted to know more about a special tile during a match, they could tap the tile to learn more about it.
However, as the popup displayed,
Players had no indication of which tile the popup referred to.
The character that the tile belonged to was also not apparent.
The popup was not visually up-to-date with the rest of the game.
🔨 Task
Create a visually refreshed popup that contains all the information currently in the old popup.
Find a way to convey the tile in question + the tile’s character.
Keep the implementation relatively simple (we had a Flash-based engine from 2013).
👶 Initial Explorations
Using the existing UI, I thought that I could solve our issues by
showing the portrait or icon of the tile’s character, and
applying a dark overlay to the rest of the board and (not pictured) lighting up the tile in question.
There are only two things that have proved consistent throughout history. One, a dozen eggs will always be $2.99 at Trader Joe’s. Two, life is hard. Due to the latter, I found out that:
cropping a portrait in a circular manner would be very tedious.
Because of engine constraints, we’d have to crop every character texture individually instead of applying a mask, and that may not be worth the development time.
lighting up the tile would not be possible based on the way the board was set up in the engine.
I had also considered the possibility that there might be duplicate characters on a team in the game, and so I placed the character title in the popup text. However, it was still hard to discern the character, as the characters rotated based on activity - and messaging “[Character] Middle” was not clear if we were still unable to see all the characters at the top of the screen.
Back to the drawing board…
🩹 Revision → Final
For round two, we now understood that the solution would probably require a bit more engineering work to expand the capabilities of our existing popup - and so I was given a little bit more free reign to explore the form of this information.
My next try included:
highlighting the character in question where they appeared on the game screen
This would allow us to message both the character’s team + the particular character in case of duplicates.
noting the character’s name with an appended # in case there were duplicates
adding the tile in question to the popup
Though there may be multiple of this tile on the board, we would have to cover part of the board no matter what.
The contextual information of the tile was less important than knowing what the type of tile was, and so we compromised on placing the tile image on the popup.
The number on this tile in particular is a countdown. I wanted to make sure the countdown reflected the actual countdown on the selected tile, just in case.
visually updating the popup to use new UI
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.