Infinite Frontier

Overview

My Role
UX/UI Designer
Team
2 Designers
2 Engineers
Platforms
Mobile
Mockups
Link

Infinite Frontier was in need of a comprehensive UI redesign to create a modern and visually appealing interface that reflected the latest mobile gaming trends and captured the brand essence. The redesign incorporated modern design elements such as bold typography, bright colors, clean lines, and new icons resulting in an aesthetic and engaging interface that clearly illustrated game objectives. The goal was to enhance player engagement, satisfaction, and brand recognition by providing an intuitive and easy-to-navigate UI.

Discover

The mobile gaming industry is rapidly growing and expected to reach $100 billion by 2023. While dominated by a few major players, there's an opportunity for Infinite Frontier on mobile devices as its biggest competitors, Satisfactory, Factorio, and Rimworld, are not available on mobile. Each competitor has its strengths: Satisfactory offers visual appeal, Factorio has automation and multiplayer features, and Rimworld provides rich storytelling. Players' choice depends on preferences and platform availability.

Problem: The lack of mobile availability for popular strategy games presents an opportunity for Infinite Frontier to fill the gap and capture a substantial market share. However, to succeed, Infinite Frontier must design a compelling and user-friendly mobile gaming experience.

Read Section Summary

Market Analysis

The mobile gaming industry is rapidly growing, expected to reach a value of $100 billion by 2023. While there are opportunities for investors, the market is highly competitive and dominated by a few major players.

Additional Notes

The mobile gaming industry has been experiencing tremendous growth in recent years and is expected to continue to grow in the future. With the widespread adoption of smartphones and tablet devices, mobile gaming has become a popular pastime for people of all ages. According to market research, the global mobile gaming market is expected to reach $100 billion by 2023, with a compound annual growth rate of over 15%.

One of the main drivers of growth in the mobile gaming industry is the increasing number of casual gamers who are using their mobile devices as their primary gaming platform. This is due to the ease of access, as well as the availability of free-to-play and low-cost games. Additionally, the advancements in technology and the introduction of 5G networks have made it possible for developers to create more sophisticated and engaging games.

However, despite the growth in the industry, the mobile gaming market remains highly competitive, with a limited number of dominant players. This has resulted in the market being dominated by a few large publishers, who are able to leverage their resources and scale to maintain their position.

Overall, the mobile gaming industry presents both opportunities and challenges for investors. On the one hand, there is significant growth potential in the market, particularly in emerging economies. On the other hand, the industry is highly competitive, with a limited number of dominant players, making it difficult for new entrants to establish themselves. Nevertheless, for those who are able to successfully navigate the market, the rewards can be substantial.

Competitor Analysis

In the strategy game genre, Infinite Frontier faces competition from a number of strong competitors: Satisfactory, Factorio and Rimworld.

Takeaways

Satisfactory, Factorio, and Rimworld. Satisfactory is a visually stunning PC game that allows players to build and manage complex factories in an open-world environment. While it offers an immersive single-player experience, it lacks mobile compatibility and interpersonal gameplay features.

Factorio, also a PC game, stands out for its intricate automation systems and strategic gameplay. It supports multiplayer functionality, enabling players to collaborate and work together on complex automation projects. However, like Satisfactory, it is not available as a mobile game, which may limit its accessibility to a broader audience seeking mobile gaming experiences.

Rimworld, another PC game, offers a unique blend of strategy, storytelling, and simulation. Players are tasked with managing a group of survivors in a dynamically generated world, facing challenges such as resource scarcity and interpersonal relationships. Rimworld's deep narrative and emergent gameplay provide high replay value. However, it lacks multiplayer functionality and is not designed for mobile devices.

In summary, while Satisfactory, Factorio, and Rimworld offer compelling gameplay experiences in the strategy genre, they each have their own strengths and limitations. Satisfactory impresses with its visual appeal, Factorio stands out for its automation systems and multiplayer features, and Rimworld offers a rich storytelling experience. The choice between these games depends on player preferences, platform availability, and the desired level of interpersonal gameplay.

Define

After conducting the discovery phase, I created a persona for gamers. Josh, the Gamer, represents a busy professional who seeks enjoyable mobile gaming experiences and values connectivity with other players. To gain a deeper understanding of user needs, I developed user stories and journey maps, enabling a user-centered approach to design solutions that enhance their overall experience.

Solution: To capitalize on the untapped mobile market and compete with established strategy games like Satisfactory, Factorio, and Rimworld, Infinite Frontier needs to create a captivating and intuitive mobile gaming experience. This includes focusing on visually appealing design, incorporating robust automation and multiplayer features, and delivering immersive storytelling elements to attract and engage users.

Read Section Summary

Personas

Taking the discovery phase information into account, I proceeded to develop personas for the key user group: Gamers.

Josh, the Gamer: a busy professional and dedicated gamer, seeks quick and satisfying mobile gaming experiences during his commute and leisure time. He enjoys complex building games, values staying connected with other gamers, and is open to in-app purchases.

User Journey Map

To better understand user needs and expectations, I developed user stories and journey maps, enabling a more user-centered approach in meeting their requirements. By analyzing their journeys and stories, I could uncover valuable insights and design solutions that resonate with users and enhance their overall experience.

Develop

In the design process, I focused on creating a futuristic and technological aesthetic for the title's font and complementary text. The color scheme was inspired by the cosmic environment, using vibrant blue, purple, red, and gold. I designed icons for various game resources, facing challenges in representing different forms of the same resource. The use of color variations and additional icons helped differentiate the resource types. Simplicity was key for clarity in small icons.

The design guidelines were implemented by updating the game pages with the new font, captivating background image, and visually appealing buttons. Menu screens were improved for better user experience, addressing alignment issues and incorporating settings into the resources panel. Two new resource panels were designed with three sections and respective buttons to display building information, recipe details, and resource requirements.

Read Section Summary

Design Guidelines

For the title's font, I aimed for a futuristic style with curves and rounded elements. In contrast, I chose a sharp and sleek font for the complementary text, aiming for a more technological look. The intention was to replicate the typography seen on spaceships, evoking a sense of futuristic design.

To capture the essence of outer space, I chose a color scheme inspired by the cosmic environment. Utilizing a vibrant electric light blue and a complementary purple, I emphasized these colors for the most significant buttons. For less prominent buttons, I incorporated a bright red to denote caution and a gold hue to accentuate the brand's elegance.

Given a list of game resources, I took on the task of creating icons for each one. Through sketching, drawing, and finalizing the designs, I ensured that each icon represented its corresponding resource. Now, with the provided list, can you match the icons to their respective resources?

Resources:
Gas [raw, refined, pure], Bio [raw, refined, pure], Minerals [raw, refined, pure], Metal [raw, refined, pure], Food, Force Field, Water, Clothes, Medicine, Cutting Fluid, Pressure Valve.

Takeaways

One of the initial challenges I faced was finding a way to visually represent certain resources that appeared in three different forms, such as Raw Minerals, Refined Minerals, and Pure Minerals. It was crucial to make each icon distinct enough so that users would understand they are different resource types, while still creating a sense of cohesion among them to indicate their relationship.

To differentiate the three forms, I utilized color variations and additional icons. For example, the minerals were assigned the color orange, with the lighter shade representing Raw Minerals, the darker shade for Refined Minerals, and the darkest shade for Pure Minerals. In addition, I incorporated a gear icon for refined items, a star icon for pure items, and no icon for raw items, further distinguishing each form. This combination of color and icons effectively conveyed the different types of minerals to the users.

An important lesson I learned was that when working with small icons like these, simplicity is key. In hindsight, I realize that incorporating an additional icon may have made the primary icon more confusing. Therefore, for future reference, I would opt for a simpler approach without the extra icon to ensure clarity and minimize any potential confusion for the users.

Revamped designs

After finalizing and obtaining approval for the design guidelines, my next step was to implement them by redesigning the existing game pages.

To enhance the overall design, the new font for the title was implemented, and a captivating background image was added to reinforce the space-themed atmosphere of the game. Additionally, the buttons were updated to provide a more visually appealing and cohesive look.

The menu screens underwent updates to enhance the user experience. Two types of menus were addressed: those accessible during gameplay and those encountered before starting the game. For in-game menus, a dark background was chosen to ensure that the menu options remained the focal point without distracting from the overall gameplay.

To enhance the visual symmetry of the main game's UI screen, I addressed the misalignment caused by the menu button. By incorporating the setting buttons into the resources panel and elongating it, I achieved a cleaner and sleeker design. This adjustment ensured a more cohesive and visually balanced layout for a better user experience.

Additional Notes

Designing two new resource panels presented a challenge, particularly with the second panel requiring multiple iterations. The complexity stemmed from the need to display building information, recipe details, and resource requirements all within a single panel. After discussions with engineers and the game's creator, breaking the panel into three sections and separating each section with respective buttons was the chosen approach. This allowed for a clear progression of steps and emphasized the recipe-building process while maintaining all necessary information within one cohesive panel.

Deliver

After completing the redesign phase, the prototypes and mockups, meticulously crafted to incorporate the desired improvements and enhancements, were seamlessly handed off to the team of engineers responsible for bringing the designs to life. This collaborative handover process ensured that the vision and intent behind the redesigned interfaces were effectively communicated, providing the engineers with clear guidance for the implementation phase. By aligning design and development efforts, this handoff facilitated a smooth transition from concept to realization, enabling the engineers to leverage the prototypes and mockups as valuable references in the process of building and integrating the updated user interfaces.

Read Section Summary

Mockups

Next Project