Consistent Branding Across Diverse Graphic Systems in the Video Game Industry

I am Polina Molchanova, and for the past two years, I have worked as the Communication Design Director at Xsolla. Xsolla helps thousands of game developers and publishers of all sizes fund, market, launch and monetize their games globally and across multiple platforms. At Xsolla, we build tools and services for the gaming industry across Fintech, Gametech, and Adtech. Thus, a fundamental element in shaping and scaling our brand is our strong emphasis on the video game sector. The key focus of visual communications in this regard is to establish connections between the brand, the product, and the industry. 

Creating a high-quality family of icons and logos requires a thoughtful approach, a good eye, and extensive practice. Our approach to crafting icons and logos serves as an example of how we can create a cohesive graphic system that integrates these three components. Together with Kirill Romanovsky, VP of Design at Xsolla, we will share the key principles of scaling the video games-related brand based on how we created the icons system for Xsolla.

The Initial State of Xsolla’s Branding

The main role of an icon is to efficiently communicate a metaphor or a concept that is familiar to the user. Initially, each Xsolla product had its own icon: a symbol or a logo representing the product. These icons were featured on the official website and in other product communications. With no unified graphic system in place, these icons differed in shape and style, potentially leading to confusion in the overall visual representation of the brand. As a result, it could have been challenging for users to connect a product with the Xsolla brand.

Our goal was to create a consistent system of icons for Xsolla, including product symbols and interface icons. We followed these key principles:

• Maintaining consistency and easy recognition.
• Embracing a gaming visual style.
• Employing abstract and simple design.
• Creating distinctive representations for each product.
• Ensuring icons can scale effectively across different products and interfaces.

To achieve this, we followed a straightforward three-step approach:

1. We began by assessing the icons and symbols industry standards.
2. We clarified the brand strategy.
3. We then developed a cohesive structure for the icon system.

Step One: Assessing the icons and symbols industry standards

Gaming Visual Style

Traditionally, game icons are visually appealing, with distinctive shapes and a well-balanced mix of contrasting elements. They provide an engaging visual representation of images, often displaying a distinct and exclusive style that can resemble logos.

Fintech Visual Style

Many fintech companies commonly utilize stylistically similar icons that depict very simple and straightforward images. As a result, these icons blend in and lose their distinct product representation. Excessive stylization and the inclusion of decorative elements can potentially disrupt visual clarity and appear outdated.

Step two: Clarifying The Brand Strategy

Since Xsolla builds technological solutions that are closely tied to the video games industry, it was important for us to combine both visual styles without neglecting Xsolla’s brand identity. The following criteria were essential in refining the brand strategy:

1. Maintaining Xsolla's color identity.
2. Ensuring icon consistency across product interfaces, in marketing, and at events, both online and offline.
3. Aligning icons with key brand identity elements.
4. Preserving integrity among the icons.

Step Three: Establishing a Cohesive Icon System

It was determined that the refined icon style should blend the visual style of the video game industry with Xsolla's tech-focused business direction. However, illustrating each of the company's products with simple concepts and metaphors is challenging. We're not dealing with something as straightforward as a coffee shop, an online wallet, or a container for sore throat pills. Our suite of services includes monetization tools, funding and investment programs, influencer solutions, and others that are quite complex. Our primary challenge was to create a consistent set of icons that at the same time capture the essence of each product. To accomplish this, we established some fundamental principles.

• Minimalism:

Embracing minimalism in icon design enhances their clarity. Minimalistic forms are easier to understand, which also aligns with the modern design trend adopted by many IT companies.

• Unique Identity:

Each icon is crafted to be unique, which helps them to stand out and aims for their look and feel to be similar to logos

• Integrity: 

Establishing a consistent structure and methodology for creating elements across all icons results in overall integrity. This approach ensures that the icons are seen as related, fostering cohesiveness within the system.

Building the icons' visual style

The analysis mentioned earlier has highlighted the potential of blending gaming aesthetics with fintech sector trends to craft a unique visual style. To achieve this, we needed to undertake the following steps: 

• Implementing a consistent grid system that defines common forms used in the video games industry.
• Adopting a monochromatic approach to emphasize the technological foundation of Xsolla’s products.

Implementing a Consistent Grid System

We have established the grid system by dividing the square into three additional rectangles which provided greater precision in constructing elements and served as the final borders for certain icon shapes. The distinctive hexagonal shape allowed us to uphold a gaming-style aesthetic and seamlessly scale it within our products. Additionally, we introduced a secondary grid within that hexagon to further emphasize the unique structure of the elements.

Defining The Forms

The grid system we've developed has enabled us to create icons in various shapes while preserving a consistent style. For instance, the Payments icon is circular, resembling a coin, while the Anti-Fraud icon takes the form of a shield. Additionally, this icon grid facilitates convenient scaling across different formats, from small interface elements to key images.

Driving the Change

• Xsolla's identity remained intact through the alignment of technology and gaming visual styles, achieved via the distinctive hexagon shape.
• The adoption of a unified grid template ensured precise icon construction and consistency across all tools and services across various business directions.
• The inclusion of contrasting black and white fills has preserved icon readability across diverse formats while maintaining consistency.
• Each icon now metaphorically represents its respective product. For instance, the In-Game Services icon features a crystalline symbol, symbolizing the integration of various service types.

As a result, we successfully merged the fintech and gaming industries, aligning them with Xsolla's authentic branding to underscore its dedication to serving game developers and publishers.

Polina Molchanova, Communications Design Director at Xsolla

Kirill Romanovsky, VP of Design at Xsolla