Mobile event finder app

BandiTCG+ Re-Design

About

One Piece’ is a popular Japanese comic, and Bandai recently launched a trading card game based on it. This app helps users find events, build decks, and buy products for the game.

I aimed to simplify the app by refining screens and streamlining actions. This project is still a work in progress and took about one week to complete.

Role: Researcher, UX & UI design

Tools used: Figma, Photoshop, PrimerePro

Reasurch

Understanding the community

Community was my first priority. I attended a local event to connect with players, hear their thoughts on the Bandai TCG app, and understand their needs firsthand.

“The app is slow and lacks intuitiveness, with many actions feeling repetitive and tedious. Additionally, some event information may be incorrect or misleading.”

I've struggled with the deck builder feature because everything is so cramped, causing me to make frequent mistakes.

Goal:

The app was overblopatred with actions for the user to take. I wanted to identify each screen's primary action and simplify the number of actions per screen.

Inital Design

Inital design

From the research I gathered, I wanted to ensure each screen was helpful in its way. I started with notebook sketches and then refined them in Figma to create a functional prototype. Below are my early drafts and the thinking behind my design decisions.

Re-Design

Deck Building

The deck-building screen was cramped, with a split view showing both the card pool and the deck being built. My focus was to simplify the flow by creating two separate screens: one for the card pool and one for deck-building. This approach enhances the user experience and visually elevates the design.

Re-Design Concept

Re-Design Consept

Event Finder

The 'Find Event' screen was cluttered with unnecessary information. My goal was to streamline it, allowing users to focus on a single key action. To achieve this, I added a map, enabling users to easily visualize the proximity of events, making the screen's primary focus on helping users find events.

Original

Original

Prototyping

Components and Tokens

In Figma, I explored interactive components to refine prototyping. Below is a look at my filter dropdown design.

Animation

Below is another process I developed in Figma: an interactive deck builder prototype. Users can engage with it to add a sense of interactivity. It was built using tokens and variables in Figma.

Next Steps

Next Steps

Overall, I believe my designs improve the app’s original framework, though more user testing is needed. Moving forward, I’d love to gather more feedback, refine the designs, and continue iterating.