M&J - MOBILE ARCADE

This project involved collaborating with an overseas client to design and implement a feature that aggregated games from multiple indie mobile game studios onto a single platform. The goal was to create a cohesive hub for showcasing and monetizing their work, enabling consistent revenue generation. As the lead for this feature, I oversaw its creation and ensured seamless integration into the app under development.

Due to NDA restrictions, placeholder visuals and aliases have been used to represent the original designs and companies involved.
UX Design
UI Design
User Research
Low Fidelity Design
User Flows
Wireframing
Entertainment App

1.0 Context

Problem Statement

Our client, an overseas game publisher, collaborates with multiple independent game developers across regions such as China, Hong Kong, and Malaysia. They faced challenges in consolidating their partners’ games onto a single platform to improve discoverability, streamline monetization, and create a cohesive user experience. The goal was to design and implement a scalable, user-friendly feature that would integrate the diverse game catalog while aligning with the client’s branding and business objectives.

Market Research

Our client sought to replicate the monetization model of a real-life arcade, where users could "insert tokens" to access and play games. This approach aimed to align with the formats of the indie mobile games they represented, creating a seamless and engaging user experience. Inspiration for this system was drawn from platforms like Lehzin and Webtoon, which successfully utilize token-based monetization to access paywalled content. Similarly, the proposed model would allow users to spend tokens to unlock additional game levels, exclusive content, or premium features, fostering both user retention and revenue generation. This approach not only simulated the nostalgic feel of an arcade but also provided a modern and scalable solution for monetizing digital content.

2.0 Designing

Concept Building

To address our client’s needs, we drew inspiration from platforms like Webtoon and Lezhin for their token-based monetization models, as well as online gaming platforms such as Steam and Epic Games for their intuitive and user-friendly interfaces. Our goal was to create a simple, minimalistic UI that catered to the client’s desire for a cohesive and accessible design while maintaining a playful and engaging aesthetic.

The design aimed to evoke the nostalgic charm of a real-life arcade while incorporating modern UX principles to ensure usability. By incorporating bright, dynamic visuals and a seamless navigation flow, the UI encouraged a flow-state mentality, allowing users to focus on enjoying the games without unnecessary distractions. This balance of simplicity and playfulness aligned perfectly with the client’s vision, creating a platform that was both functional and enjoyable to use.

Low Fidelity Wireframes

The initial wireframing process focused on identifying the core features required to meet the client’s objectives. Key functionalities included a trending/explore page to highlight popular and newly added games, and dedicated studio pages showcasing each developer’s catalog of games.

This split into two pages allowed for better user navigation and content discoverability. The trending/explore page served as the platform’s main hub, featuring curated game lists and spotlighting engaging content, while the studio pages provided an organized space for users to explore the games of individual developers in greater detail.

Userflows

To ensure an intuitive user experience, we mapped out clear user flows that outlined the path from discovering games on the trending/explore page to exploring individual studio catalogs. This helped streamline navigation, ensuring users could easily access content, make token-based purchases, and engage with the platform's features with minimal friction.

Refinement

In the refinement stage, we consolidated all the concepts and user flows into a cohesive high-fidelity design. This involved fine-tuning visual elements, adjusting interactions, and ensuring consistency across the platform. The final design was optimized for both aesthetics and usability, making it ready for developer handoff, ensuring seamless implementation of the user interface and experience.