I joined the MPQ team at Demiurge Studios in April 2018 and soon became the solo UI/UX artist on the project.
Over the following 3 years, I balanced various responsibilities, including:
These are screenshots of how the main menu appears in-game today.
In 2021, 8 years after the game's initial release, the MPQ team set out to modernize the game with the support of our publisher at D3. These were our goals.
These are the wireframes, with original annotations, that I created in Adobe XD to communicate and discuss proposals with the team.
The process began with player research. I had several valuable sources of information at my disposal; experienced players on the development team, several years worth of player feedback across various platforms, and of course, our data analytics. Drawing information from those sources, and balancing it with the team’s development goals, I began to prioritize what information should surface on the main menu.
The core game loop needed to be as fluid as possible, so I proposed that most of those features should be accessible on the navigation bar which persisted across most screens. Anything else should appear top and center of the main menu tiles, followed by monetization features, and lastly with legacy content appearing below the scroll threshold.
An important consideration was how a new player would experience these changes, as content gradually unlocks throughout our first-time user experience (FTUE). These are a few proposals I made, highlight some pros and cons of each approach.
We also still needed to support our many PC players. Thankfully, tiled rectangle the design lent itself well to various aspect ratios.
MPQ had fast-paced development cycles, and labor-intensive Flash implementation requirements. This meant we often didn't have a ton of time for iteration on visual styles. Still, I was able to collect some visual targets (left) and use them to inform the visual mockups for the new main menu (center and right).
Part of the visual overhaul of MPQ involved the tile art. My goals were to make both the color and shape of the gem more instantly readable, and to modernize the look. To achieve this I steered away from the black-and-white shading of the original, and incorporated color harmonies into the shading of the gems to give them more distinction from one another while also giving them more depth. The more subtle highlights helped the character icon overlays to stand out, and the darkening of the tile board added some much needed contrast for the tiles to stand out against.
One of my favorite routine tasks was creating a promotional message of the day (MOTD) for new character and costume releases. I was given character concept art, and supplemented that with both handmade textures and photos from creative commons sources. The typography and subtle breaking of the frame were particularly fun for me.
Costumes are a fun cosmetic feature that was introduced during my time on the project. I mapped out the user flow, created and implemented the new UI art required, and came up with the art treatment for costume covers. This was before the big visual overhaul seen in the main menu, so the stylistic choices leaned more toward the game's comic book influences (like using halftones).
At one point, it was the hope of the team that we would have a chance to implement access to the Supports feature, as well as a saved team feature, from the pre-match flow. The Supports aspect of the feature made it into development, but sadly the remaining functionality had to wait until much later. These are some prototypes I created in Adobe XD highlighting my proposed changes.