Changes to the functionality and mechanics

Every Monopoly campaign introduces UX changes to features, functionality, and game mechanics. Below are the key updates for this year's campaign, which shaped how we approached implementing these changes through an engaging UI.

Replace the Digital Peel with GO button  

As mentioned, the GO button is now being added so users can move around the digital Monopoly board and enjoy a more immersive Monopoly experience.

Hero Animation

Instead of the digital board game, a hero animation will be placed on top instead, this will link to the game play to pull players into the world of Monopoly Special Edition.

How to Play Module  

Instead of the permanant placement of the rules of the game on the homepage, a dedicated module will be added to avoid repeating information to returning users.

Wallet Tabs

To reduce excessively long pages, UX and UI introduced tabs, allowing us to organise content more efficiently and reduce the amount of information displayed on a single page.

Horizontal Scroll

Horizontal scrolling for selected content. This allowed more information to be displayed within the same viewport without overwhelming users, while creating a cleaner.

Sound Bites

Introducing sound effects to reinforce the gamified experience and create a more immersive Monopoly: SE world.

Exploring new UI Elements

With all of the previously mentioned changes introduced for this year's Monopoly campaign, we took time as a team to explore different approaches for executing each UI element. For example, for the How to Play section, we explored multiple solutions, including a pop-up module with carousel steps, a single information module, or an introductory tutorial that guides users through key elements of the app.We approached this exploration with critical thinking, considering factors such as timing, development capabilities, user preferences, and overall user needs. This helped us evaluate each solution and determine the most effective approach for the final experience.

Overall UI visual exploration

Alongside this, we explored the overall UI visual direction we wanted to pursue. We identified three potential approaches for executing the experience.The first was a 3D World direction, which leaned into the campaign’s bubbly 3D key visuals and created a more playful, mobile game-inspired feel. The second was a 2D Mash Up direction, where we brought in more recognisable Monopoly elements to reflect the campaign’s ultimate collaboration and maintain a connection to the original brand. Lastly, we explored a hybrid 2D / 3D approach that combined elements from both directions to create a balance between the playful digital experience and the classic Monopoly identity.

3D World

2D Mash Up

2D / 3D

Main feature of 3D World aesthetics

• This aesthetic direction focused on amplifying the gamified nature of the Monopoly McDonald’s campaign, drawing inspiration from the campaign’s playful key visuals and 3D assets. The visual language explored vibrant colours, glossy 3D vector elements, and rounded, chunky UI components and typography to create a fun, immersive digital experience.

• We could focus solely on the provided 3D assets and, from an interaction perspective, make the app feel more like a casual mobile game UI, similar to experiences like Candy Crush or Monopoly Go.

• When discussing this direction with the Creative Directors and amongst ourselves, we identified some potential concerns. The campaign already featured a strong presence of 3D elements, so we questioned whether introducing the same visual language into the UI would add value or feel repetitive. Additionally, without the time or resources to fully transform the app into a game like experience through motion, sound effects, and rich interactions, there was a risk that the UI would feel incomplete. We also questioned whether this direction aligned authentically with the Monopoly brand identity.

• Additionally, without the time or resources to fully transform the app into a game-like experience through motion, sound effects, and rich interactions, there was a risk that the UI would feel incomplete. We also questioned whether this direction aligned authentically with the Monopoly brand identity.

Main feature of 2D Mash up aesthetics

• This aesthetic direction drew inspiration from the Monopoly board game, translating elements such as bold stroke lines, card designs, and physical game components into the UI. The visual language explored simpler buttons, solid colours, and familiar design cues to create a cohesive experience rooted in the Monopoly brand.
  

• To reconnect the campaign with Monopoly's original roots, we explored incorporating elements from the physical board game into the UI. This direction focused on using more 2D assets and design elements inspired by the classic game, creating a familiar and authentic experience while reinforcing the Monopoly brand.
  

• One reason not to pursue this direction was that it lacked some of the bubbly visual elements featured in the campaign's key artwork. However, it was also discussed that this could be a strength, as it would introduce greater visual variety and create a clearer distinction between the campaign assets and the UI.

Main feature of 2D/3D aesthetics

• This direction combined both 2D and 3D elements to balance the classic Monopoly identity with the campaign's key visuals. The aim was to create a UI that felt recognisably Monopoly while still reflecting the campaign aesthetic. Rather than leaning into a hyper-glossy, game-like style, this approach used a considered mix of 2D and 3D elements to achieve a more balanced and cohesive visual language.
  

• The main discussion surrounding this direction centred on visual cohesion. While combining 2D and 3D elements offered the opportunity to balance the classic Monopoly brand with the campaign's key visuals, some concepts felt inconsistent when viewed together. Certain UI elements appeared to belong to different visual systems, making the overall experience feel less unified. We also considered whether maintaining two distinct styles throughout the product would introduce unnecessary complexity and reduce the clarity of the overall design language.

Our chosen aesthetic: 2D Gameboard

After extensive discussion with the Creative Directors, UI and UX teams, developers, and other stakeholders, we decided to move forward with the 2D Mash-Up direction. One of the key reasons for this decision was that this year's campaign celebrated the ultimate collaboration between McDonald's and Monopoly, bringing together iconic McDonald's characters with Mr. Monopoly. We felt that referencing the original Monopoly board game would reinforce the brand's heritage, creating a more authentic and recognisable experience while complementing the wider campaign.From a development perspective, this direction was also the most achievable. Rather than trying to replicate the feel of a fully interactive mobile game, the 2D approach allowed us to deliver a polished, engaging experience that could be executed within the project's timeline without compromising quality.

With the direction agreed, we refined the visual language through further exploration, experimenting with colour palettes, buttons, and UI components. The final design system was built around solid colours, bold strokes, 2D iconography, and components inspired by classic Monopoly board game elements. This created a cohesive visual identity that balanced the familiarity of the original game with the personality of the McDonald's Monopoly campaign.

Full Design Phase

We then moved into the full design phase, where us as a team collaboratively designed all of the required app screens while exploring different UI components, shapes, colour, and layout structures. And just refining ways to rearrange the information needed on the page. Throughout this stage, design decisions were continuously iterated on and discussed, allowing us refine the app and ensure consistency across the experience. This process typically spans around two weeks, resulting in a cohesive design system and page layouts that establish the foundation for the rest of the app. Below are some examples of many of our experimental screens.

Design & Visual elements

Below is a closer look at some of the finalised UI elements and the thinking behind their design. This section highlights the key design decisions, and ow each element contributes to creating the Monopoly: SE experience.

Digital GO Button

For the Digital GO page, where users earn the chance to race Grimace around the Monopoly board to win properties or instant prizes, we designed a notification like card at the top of screen that made progress easy to understand at a glance. We also created a set of miniature property card icons to display the properties users had banked. The card would appear on the screen with a accompanied sound bite so it would create a notification dopomine effect for users to want to continue playing.

Proporties Cards

For the property cards, we explored a bunch of approaches before arriving at the final design. Our goal was to create a component that felt rewarding to collect while keeping the information clear. We ultimately landed on a design that gave more focus to the property's prize while displaying the remaining cards needed to complete the set within a single component. This was a major improvement to the information hierarchy as it creates a sense of progression and pushed users to continue collecting.

Hero campaign assets

We also decided to hero the campaign assets. As mentioned, we felt that last year we could have incorporated more campaign elements into the UI to make the app feel more connected to the current year's world and visual aesthetic. To address this, we introduced fun campaign assets within header areas.

Prize components

Like the property cards, we wanted to reference the iconic Monopoly property cards by incorporating the signature coloured property strip at the top and the information below. To highlights this year's collaboration, we also involed the campaign's graphic pattern into the background to create a distinctive "ultimate collaboration" feel.

Main Text Cards

We created these reusable card components to add greater depth and visual hierarchy to the interface, with page info being placed in the cards we could reduce the amount of flat text displayed directly on the page and help us achieve our overall goal of having more depth in this campaign. With this change, information became easier to scan & the allowed the UI to have a more modern feel.

Prize Claim Cards

On the Prize Claim pages, we continued using Monopoly inspired card components to communicate when users had banked a property and guide them through claiming their prize. We felt that centering and heroing the property card created a stronger moment of excitement, drawing attention to the reward and making the prize feel more valuable and impactful.

Pop Up Module

For the error and leaving modules, we also made the decision to incorporate campaign assets, such as the coffee cup light bulb shown in this example, to maintain the campaign focused aesthetic and create a more cohesive energy throughout the app.

Proporties Cards

For the wallet components, we landed on a approach that complemented the wider UI system. We paired these with icons created by the team, helping to bring more personality into the component and strengthen it with the campaign aesthetic.

Screens

Accessibility

Whilst designing we make sure that our buttons and text meets the accesability standards using the the figma plugin Stark which allows us to quickly check the colour contrast of text on it background. This is then checked again during the testing phase to reassure that standards are met before the launch.

We also made sure our designs met  WCAG 2.2   guidelines, this included:

• Resizable text: Checking if the text readable and functional when the page is zoomed to 200%. We created a version of our designs in 200% to make sure of this.

• Suitable header structure: This creates a clearer reading experience for assistive technology users while making content easier for everyone to scan.

• Form labels: Every form input has a label that describes it's needed input.

• Designs were functional in both portrait and landscape: So our content is not restricted to only one orientation.

• Captions were added as a visual aid: Colour is not used as the sole method of conveying content or distinguishing our visual elements, this helps that that may need a screen reader or are colour blind.

• Left aligned our text: Left aligned text is often easier to track because the beginning of each line stays in the same place which is helpful for those who magnify their screen and users with low vision, dyslexia, or cognitive disabilities as it's easier to scan.

Stage App Testing & Jira

Once the developers have implemented our designs, the app is released to the McDonald's Stage environment for testing. At this stage, we carry out a full UI review, as after coding can sometimes introduce inconsistencies or visual issues. Any bugs, design discrepancies, or usability concerns are logged in Jira and worked through collaboratively with the development team before launch.

Workshop

We then hosted an internal workshop using an A/B testing exercise, where participants completed a series of tasks across different design variations. This allowed us to compare how each version performed, evaluate whether users could easily find what they were looking for, and identify which design provided the clearest and most intuitive experience. The findings helped validate our design decisions before launch.

Below are the results for the selected final design, demonstrating how users performed across the tested tasks:

Final Stats

Media and press feedback