2XKO Mobile

PROJECT SPACE

Riot's highly anticipated new title, 2XKO, is a tag-team 2D fighting game. Ever since I was lucky enough to be an Alpha Lab play-tester, I was impressed by its striking visual identity, particularly its use of dynamic motion in UI animation and energetic visual motifs. Inspired, I set out to explore and practice working with its strong visual style.

Mobile gaming is a billion-dollar industry, with popular titles like Call of Duty, Fortnite, and PUBG all making use of mobile platforms. While fighting games are more niche, successful mobile adaptations like Mortal Kombat, Injustice 2, Brawlhalla, and Skullgirls prove it’s possible to bring mechanically complex games to mobile.

Intrigued by 2XKO's bold visual style, and curious about the challenges of creating game UI for mobile, I embarked on solving this personal question:

‍

How can I understand and work with 2XKO's visual style while adapting its identity for a mobile platform?

SOLUTION

Check out the Figma prototype below! (It may take some time for all images to load.)

DESIGN PROCESS

But how did we get here?

Before my prototyping, I planned out several screens and layouts by sketching ideas on paper. After figuring out general layouts, I began sketching icons and assets for the prototype.

BUILDING A VISUAL IDENTITY

As I studied the visual identity of 2XKO, I first wanted to establish the foundations of the visual identity:

I took special attention to the designs of the iconography, to work within this visual language.

REFLECTIONS

- Observation is a crucial skill. While initially playing 2XKO during alpha lab, I appreciated the UI Design on a relatively surface level. However, dissecting and designing with its visual styles and motifs required the sharpening of my observational skills. Translating these observations into practice deepened my appreciation for the craft, gained a whole new appreciation for the craft, and helped me better understand what it means to establish a cohesive visual identity.

- The "Mobile" comes first in Mobile Layouts. Designing for mobile introduced a lot of challenges that I had never thought deeply thought about before. User testing highlighted issues like button placement and sizing, which are critical on smaller screens that are typically operated only with the thumbs. These insights taught me to approach mobile design with a user first mindset, and to design consideration of how mobile users actually interact with the interfaces in the forefront of my mind.

‍

Overall, I had an absolute blast working on this personal project! Working with a design aesthetic and a product that I love was an absolute joy, and it solidified to me that Visual Design Art is the field that I want to pursue.

2XKO Mobile.