Process

I was tasked to update the original design (also the current design in game) with a new “quests” feature that visualized how and when players were gaining points on the Merge Pass Rewards system.

I began with grey-boxed wireframes in Photoshop — to visualize the changes the game designers wanted and balance what the game screen could handle, and players could make sense of.

Pop Up Design

Based on the current design, one of the quickest ways of implementing a quest visual system was simply to add a Quest Pop-Up to the Merge Pass flow. However, it would add yet another pop-up to a window that was already a pop-up; and it felt as if the quests were hidden/ hard for the players to find.

Tab Design

Alternative to pop-up was a tab design system. Fortunately Tabs already exist in the game, which left determining what the quests and rewards would look like, and how much of the screen the MergePass would take up. The above wireframes kept the MergePass more or less the same as the current size — the largest existing pop-up.

After going back and forward with the in-house design team and the client’s UX/UI design team, we settled on trying Full Screen. The idea was to make an exception to the pop-up rules and emphasize just how important and special the Mergepass really was.

After more iteration the team decided to remove the season side-bar (as seasonal merge pass events were not certain to be implemented) and focus on just the rewards and quests.

The initial mockup followed the color treatment of the general games UI, but was deemed not special or rich enough, so I was tasked to find a more “royal” color treatment.