GAME UI & UX
In 2022, the front end of Monopoly the mobile game by Marmalade Game Studio received a UI/UX overhaul to improve experiences, conversion and elevate visuals to its well deserved premium level.
Shortcuts
Roles: UI/UX Artist
Production Time: April - November 2022
Platforms: iOS & Android
Softwares: Miro, Adobe XD, Photoshop, Adobe Illustrator, After Effects, Unity
Overview
Board DLC Items Screenrecording
Monopoly is a hyper casual, infamous and family friendly board game played by people from all around the globe! Therefore, the Monopoly mobile game is a premium project with a large million+ user base and a high profile title at Marmalade Game Studio.
The game’s front end main menu, game set up and shop included areas of improvement both technically and experience wise with the additional goal of increasing DLC conversion rates based on industry standards. A programmer and I took on the task of generating the best result for a smooth flowing, appealing and bug free front end UI/UX experience with intermittent assistance from game designers, marketing, 3D artists and producers.
The success of this project’s front end marketing design system has become a relative standard now implemented across other important Marmalade Game Studio titles including Cluedo 2, Ticket to Ride, Mousetrap and more.
Project Goals
-
Resolve user pain points based on critical review of existing design and player feedback
-
Increase DLC monetary conversion rates
-
Apply UI/UX design system solutions for future sighted marketing strategies and campaigns
-
Create consistent interactions and visuals across the game
-
Bring the front end of Monopoly to the same premium level as its in game experience
Original Design Samples
Problems
In a critical review of the existing front end design, multiple areas of improvement were identified:
-
Sales and unique marketing events were not in a dynamic, predictable UI/UX system making them easily missable by players or impossible to implement
-
No follow through of cross- and up-selling
-
Tedious, unsatisfying shopping experience
-
DLC items were not visually presented to their optimal potential
-
Screens, in particular the main menu, were dull looking and lacked animation
Competitive Analysis
Before ideation, I conducted research and generated a competitive analysis based on project goals and critical review. Key focuses included takeaways from indirect competitors with proven conversion track record and conclusions with key achievements we should aim for. This analysis was crucial throughout the entire workflow to ensure our quality was kept up to or above the market standards.
UX Wireframe Flowchart Sample
Coming from an ecommerce background, I worked closely with the marketing team to elevate the conversion flow to be user predictable and effective. The main challenge of improving the front end experience and reaching goals, was to integrate cross- and upselling bountifully without being intrusive or overwhelming to current players and implement an internally usable system. Additionally, apply complex purchase logic based on all edge cases, logic for multiple game setup modes and a significant purchase moment.
UX Wireframes
Multiple versions of low fidelity wireframes for the main menu, game set up and shop screens were created and optimised for a mobile experience including consistent vertical scrolling, grander DLC visuals and attention to decrease player confusion or frustration. UX wireframes were produced and reviewed against competitive analysis, industry standards and internal needs.
In Game UX Wireframe Samples
UI Mockups
The main goal in the UI phase was to show off Monopoly’s beautiful 3D boards and tokens! Monopoly the mobile game had an existing UI style guide to be followed but I developed new rules for text restraints, offer tagging colour palette, recognisable UI treatment for stand out item and, most importantly, how to polish and present DLC visuals.
UI Mockup Samples
Animation
Subtle UI idle and onload animations are now found sprinkled across Monopoly’s front end screens. However, you’ll also find a satisfying main menu idle animation, two major purchase success moments and significant videos and real time camera movement instances of the 3D boards and tokens. 3D videos and real time camera moments were developed in collaboration with 3D artists to fit the vision of my UI proposal.
Shop Overview Onload & Idle Animations
Purchase Success Animation
The programmer and I spent significant time creating a near perfect implementation of the approved UI/UX in Unity. My key focuses were to recreate UI mockups, animations, performance optimisation, asset data inputs and responsive implementation onto cross-shared platform prefabs that works for all mobiles and tablets.