Mobile Gacha Shop

A research and design project

CLIENT

Own project

SERVICE

UX/UI

YEAR

2025

TIME

2 weeks

Introduction

Introduction

For this project, I set out to design an in-game shop for a fictional gothic-styled gacha game. Gacha games are often packed with multiple currencies, limited-time offers, and endless tabs of items, which can quickly become overwhelming, even for experienced players. My goal was to take the familiar structure of a gacha shop and reimagine it with a darker, stylized, hand-drawn and sketchy theme inspired by Don’t Starve, while still keeping the user experience smooth, clear, and satisfying.

Product Overview

Product
Overview

This case study explores my process as a UX/UI Designer in building a high-fidelity shop interface from the ground up. The focus was on designing a store experience tailored to hardcore gacha players—users who are used to navigating complex systems, but still appreciate clarity and flow. I combined competitor analysis, design iterations, and usability testing to find a balance between thematic style and usability.

Goal

Goal

The goal of this project was to design an in-game shop that balances complexity with clarity. Hardcore gacha players expect layered systems, multiple currencies, and rotating offers—but that doesn’t mean the experience has to feel overwhelming. My aim was to create a shop that feels intuitive to navigate and visually tied to a gothic art style.

Problem statement

Problem
statement

In gacha games, the in-game shop is often one of the most complex areas to design. With multiple currencies, time-limited banners, and layered navigation systems, it’s easy for players to get lost or confused. The problem I wanted to tackle was: How can I create an in-game shop for a gothic-styled gacha game that feels easy to navigate, while still supporting the depth and complexity expected by hardcore players?

Scope

Scope

The project follows the full design process: starting with competitor evaluations to understand current industry practices, moving into wireframes and early concepts, testing and iterating on navigation patterns, and finally delivering a high-fidelity shop design. Along the way, I aimed to explore how much creative freedom (through a gothic art style) can be combined with the need for functional, player-friendly design.

Target Audience

Target Audience

This design is tailored for hardcore gacha players: the ones who log in daily, grind for resources, and know the value of every currency. These players are highly familiar with shop systems and expect depth, but they also appreciate when information is presented clearly. By focusing on this audience, I wanted to create a shop experience that respects their expertise while still smoothing out common pain points in navigation and readability.

Researching the Market

Researching the
Market

I began the project with a competitor research phase to understand how other games in the gacha genre design their in-game shops. The goal was to evaluate both usability and visual design across several titles. I looked closely at how different games handle navigation, shop layout, and purchasing flow, as well as how they present multiple currencies, offers, and limited-time promotions.


Beyond usability, I analyzed each game’s visual identity, their UI style, overall aesthetic, and how visual and audio feedback support the player experience. I also examined pricing strategies and retention hooks to see how they encourage repeat engagement and spending, identifying common patterns and opportunities for improvement in my own design.

User flow

User flow

Next, I broke down the user flow for two key interactions within the shop: topping up currency and purchasing an item. For the top-up flow, I mapped out how players move from selecting the in-game currency to completing the purchase, focusing on keeping each step clear and consistent with common mobile payment patterns. I also designed a separate flow for item purchases, outlining a few straightforward steps, from browsing and selecting an item, to confirming the purchase and receiving feedback.

Creating these flows early on helped me define how information should be structured and where potential friction points might appear in the player’s journey.

Next, I broke down the user flow for two key interactions within the shop: topping up currency and purchasing an item. For the top-up flow, I mapped out how players move from selecting the in-game currency to completing the purchase, focusing on keeping each step clear and consistent with common mobile payment patterns. I also designed a separate flow for item purchases, outlining a few straightforward steps, from browsing and selecting an item, to confirming the purchase and receiving feedback.


Creating these flows early on helped me define how information should be structured and where potential friction points might appear in the player’s journey.

Wireframes

Wireframes

With the user flows defined, I moved on to creating wireframes for the shop screens. This stage focused on testing layout ideas and button placement to find what felt most intuitive for players. I went through several iterations, adjusting the positioning of navigation elements, purchase buttons, and key information areas to improve readability and flow. To validate some of these design choices, I ran a small A/B test where users compared two wireframes with identical content but different button placements. Their feedback helped me understand which layout felt more natural and aligned with their expectations. The final wireframes below reflect these insights and form the foundation for the high-fidelity design.

High-Fidelity Design

High-Fidelity
Design

With the structure and layout finished, I moved on to developing the high-fidelity designs. In this stage, my focus shifted toward bringing the shop’s gothic atmosphere to life through color, typography, and visual detail, without compromising on clarity or usability. I refined the interface with textures, icons, and elements inspired by hand-drawn, slightly eerie aesthetics similar to Don’t Starve. Each element was styled to feel cohesive with the game’s tone, while maintaining strong contrast and readability for a smooth player experience.

"HOT" Screen

"HOT" Screen

This is the first screen players see when entering the shop. It highlights limited-time offers that can be purchased with premium currency. All offers share a visible countdown timer, giving a sense of urgency and rotation as new deals replace the old ones. The layout was designed to make these offers easy to browse while keeping the time pressure clear but not overwhelming.

"SHOP" Screen

"SHOP" Screen

The main catalog view is designed to help players easily browse items and understand which currency applies to each one. On the left side, players can switch between different currency types, such as Coins, Tickets, Gems, and Crystals. While the top navigation bar organizes items into clear tabs like Potions, Food, Cards, and Keys. This structure makes it simple to filter items and move between categories. For now, the wireframe uses placeholder text and images, but it already includes key information like where item stats and pricing could be. The layout focuses on readability and clear navigation, making it easy for players to compare items and plan their purchases.

"TOP UP" Screen

"TOP UP" Screen

The currency purchase screen displays six crystal bundles with their corresponding prices (from $0.99 up to $99.99). Each card clearly shows the amount of crystals the player will receive and the dollar price beneath it, no “best value” highlight, just simple so players can quickly compare raw value. The grid layout keeps spacing consistent and makes it easy to tap and continue to the payment flow.

Overlays

Overlays

In addition to the main shop screens, I also designed several overlay elements that appear when players interact with different buttons, for example, viewing detailed item information or confirming a purchase. These overlays help maintain a smooth flow without taking players away from the main shop interface. I’ll demonstrate how these interactions work in the final prototype video to better show the overall user experience in motion.

Prototype

Prototype

To bring everything together, I created an interactive prototype showcasing the main flow of the shop. In the short video, I demonstrate how players can navigate between the three frames, Hot, Shop, and Top Up and how a purchase interaction works. The flow focuses on buying a limited-time item, and when the player doesn’t have enough currency, it naturally guides them to the top-up screen. This prototype helps visualize how the different parts of the shop connect and how players move through key actions within the interface.

Analysis & Learnings

Analysis &
Learnings

Looking back at this project, I’m really happy with how it came together. It was a lot of fun to design my own take on an in-game gacha shop, especially since I’ve been a fan of these types of games for a long time. Even though I would’ve loved to spend more time refining the visuals and conducting proper user testing on the prototype, the process gave me valuable insights into balancing usability with strong thematic styling.


I can see that my final frames are quite information-heavy, with many visual elements and details happening at once. While that fits the genre, it might feel a bit overwhelming for new players. This is something I’d love to explore further through testing, to see how players actually respond to the layout and flow.


In the future, I’d like to take a deeper dive into monetization design, especially how shops handle cosmetic items and player spending habits. Since those are the kinds of purchases I often make myself, I’m really curious about how design choices influence that experience. Overall, this project reminded me how much I enjoy designing systems that combine functionality, player psychology, and a strong sense of style.

I will definitely pick up this project again later on and refine it!

Thank you for reading!

Thank you for reading!

© 2025 JB

Josefinberntsson91@gmail.com

© 2025 JB

Josefinberntsson91@gmail.com

© 2025 JB

Josefinberntsson91@gmail.com