Genopets In-App Market

Genopets is a move-to-earn game designed to gamify an active lifestyle, encouraging players to explore, battle, and evolve their digital pets while undertaking daily challenges. My responsibilities included crafting features that guided users through their pet's journey, focusing on intuitive interactions to evoke emotional connections reminiscent of classic pet-raising games.

For the in-app Market, I conducted the UX/UI research and designed the mobile in-app Market with the assistance of CPO, Bradley Zaia. My tasks for this project included exploring user flows, conducting research, building UX wireframes, designing mobile in-app UI, and collaborating with our game designer. We aimed to enrich the player interface and provide a seamless in-app Market for our players to access and enhance their in-game experience.

Role

Lead UX Designer, UX Researcher, Prototyper

2023, 3 Months

Background

Genopets is a move-to-earn game. The digital pets are a representation of the player’s personalities. Players can hatch and raise digital creatures called Genopets, which evolve and grow based on the player's physical activities tracked through wearable devices or smartphones. The game leverages NFTs (non-fungible tokens) to allow players to truly own, trade, and customize their Genopets, creating a unique and personalized gaming experience. Genopets promotes a healthy lifestyle by incentivizing physical exercise with engaging gameplay and valuable digital assets.

Paying homage to the nostalgia of taking care of our Tamagotchi, evolving and battling our Pokémon, or even raising our first real-world pet, the emotional connection between one’s self and their pet is a powerful force.
— Genopets

Understanding the Problem

The challenge was to design a seamless, engaging, and intuitive in-app marketplace. I was tasked to design a dynamic marketplace to create a sustainable money cycle and enhance the overall player experience in-app. The marketplace will offer players various customization opportunities for their digital pets, allowing them to personalize their gaming experience and express their creativity. By incorporating player incentives, such as achievements and rewards tied to marketplace activities, we aimed to increase in-game engagement and motivate players to participate more actively. In addition, the market needed to facilitate various transactions, such as purchasing in-game currency, items, etc. Ultimately, we want to enhance player satisfaction and foster a deeper connection to the game, ensuring long-term retention and continuous engagement. The marketplace will serve as a pivotal feature, driving the economic activity within the game.

To develop and design this new feature, I conducted research. My research focused on:

  • Competitive market research: Genshin Impact, Roblox, and Pokémon GO

  • Identifying best marketplace practices

  • Map out In-App purchase user flows

Research

Conducting thorough research was crucial for several reasons. First, it helped us understand the expectations and preferences of our players. By studying successful games like Genshin Impact, Pokémon GO, and Roblox, we could identify best practices and common player behaviors. This competitive analysis examined various aspects such as:

  • Currency Systems

  • Purchasing Flows

  • Subscription Models

Key Highlights and Patterns Identified

  • Genshin Impact: They have multiple in-game currencies. Some are paid currencies, and others are earned currencies. Their primary currencies are Genesis Crystals, Primogems, and Mora, each with their acquisition methods and uses. This variety allows players to engage with the game in multiple ways, enhancing their overall experience. However, the caveat with having multiple currencies is that it can be confusing for first-time players and a bit tricky to learn. A benefit is that they have currencies you can only earn through playing the game which motivates players to play more.

  • Pokémon GO: They have a simple and intuitive purchasing flow, primarily using Pokécoins. Their other purchasing method is direct cash. Modals for insufficient funds appear during critical gameplay moments, such as entering battles, to encourage immediate purchases without disrupting the gameplay. Players can quickly purchase what they need without exiting their current in-game action.

  • Roblox: Have a flexible currency system with Robux as the primary currency. In-game purchases are facilitated through modals that confirm transactions. Each game has its way of converting Robux into its currency. In addition, they offer tiered monthly subscription models for Robux. It provides sustained revenue while offering players consistent value. These models often include exclusive benefits that enhance the player experience and encourage long-term engagement.

Key Learnings from All Games

  1. A variety of currencies that players can obtain through purchase or playing

  2. Seamless purchasing flows at various points of the game

  3. Bundle and subscription models are offered to players

Analysis

The research revealed patterns and best practices that informed the design of the Genopets marketplace:

User Flow: A streamlined user flow minimizes interruptions and keeps users engaged. For example, purchasing prompts appear contextually during gameplay rather than forcing users to navigate away from their current activity.

Modal Prompts: Use of modals to handle insufficient funds and confirm purchases. These prompts should be intuitive and guide users through acquiring more currency or completing a transaction.

Currency Management: Clear differentiation between various in-game currencies and their uses. This helps users understand the value of each currency and how to acquire it.

Mockups & Design

Based on the analysis, I created wireframes for the Genopets marketplace, focusing on the following key aspects:

  • Homepage: A central hub for all marketplace activities, including purchasing currency, items, and subscriptions. The layout is clean and intuitive, with easy navigation to different sections.

  • Purchase Flow: A simplified flow that guides users through the process of buying currency and items. Modal pop-ups for insufficient funds and purchase confirmations ensure a seamless experience.

  • Currency Management: Visual representation of different currencies and their balances. Users can easily convert paid currency to in-game currency or purchase more currency through the app store.

mockup

The wireframe and design phase involved creating high-fidelity mockups in Figma based on the wireframes. These mockups were then developed into interactive prototypes by our Dev team to allow us to test the user flow and overall experience. Key design elements included:

  • Visual Consistency: Ensuring we maintained a cohesive visual style that aligned with the Genopet brand. This included color schemes, typography, and iconography.

  • Interactivity: Interactive elements such as buttons and modals that respond to user actions, providing immediate feedback and guidance.

  • Accessibility: Ensuring the design is accessible to all users, including those with disabilities. This involved implementing features such as scalable text, high contrast modes, and screen reader compatibility.

Final Design & Development

After going through several iterations and prototypes, my designs were finalized. We launched our in-app Market to our mobile players. There were font updates and several visual changes to the overall game which we applied to the Market before we released it.

Look at the video below to see the finalized designs.

This is how Market looks in-game. We established a flow where the player can select the “Market” button in the top right corner to then enter the Market. From there, we display our featured items along with the Market Shops that players can choose from. Below that section, we have a section where players can acquire more Energy or they can purchase Qubits.

When players select a Shop, they will be directed to that specific category. Here they can sort through a variety of options using the tabs or using the sort-by feature. I utilized a split-screen view of the listed items and the primary item that is being viewed. It’s so players can easily compare items and read their descriptions without having to go back and forth from different pages.

Some minor visual adjustments need to be made in terms of clean design and consistency. This will be done as a separate ticket where we will request these changes with our dev team. As always, design is an iterative process.


The video below demonstrates how a player might be able to access the Market if they are low on Qubits or Energy. We aimed for it to be as minimally intrusive as possible. We provided players with the option to make quick purchases without having to leave their current action.

In this example, the player is playing in the arcade (fun fact: I designed the entire arcade UI and the interactive UI elements!) with their Genopet. When they lose all their HP, they have one chance to continue again if they pay with Qubits. If the player does not have enough Qubits, a modal will appear asking them if they would like to purchase Qubits so they can continue playing.


Key Takeaways/Learnings

The development of the Genopets marketplace provided several valuable insights:

  • Player-Centric Design: Focusing on the players’ needs and learning from other mobile games was crucial for creating a seamless experience. These more developed mobile games were a great source of reference and inspiration since we were limited on time and resources.

  • Iterative Testing: Regular testing with our Beta testers and iteration based on their responses were essential to refine the player experience. Player feedback helped identify areas for improvement and ensured the final product met player expectations.

  • Collaboration: Working closely with the game designer, developers, and stakeholders was key to successful implementation. Clear communication and collaboration helped align the design with technical feasibility and business goals.

This case study highlights the importance of thorough research, player-centric design, and iterative testing in developing a successful in-app Market for Genopets. The final product not only enhances the player experience but also supports the game's overall goal of promoting an active and engaging lifestyle and helps find new avenues of generating revenue.