Case Study
MTG Deck Manager tool
Magic: the Gathering (MTG) is a collectible card game created back in 1993 that’s grown in popularity and now boasts “approximately fifty million players worldwide”. It has many different formats and ways to play, and now has tie-ins with properties like Marvel, Star Trek, Warhammer 40k, Doctor Who, and Avatar: The Last Airbender.
As a former game designer, I’ve been enraptured for about 3 years now. This case study is a mix of UX design as well as my introduction to AI Coding to build an actual usable tool from end to end.
MTG is a worldwide phenomenon, especially since it has a strong presence in the physical world.
Discover
The Brief
MTG is officially the world’s most complex game, and the most popular format known as “Commander” has players building 100 card decks, with very sophisticated limitations on which cards can be used depending on the choices they make. There are also 39,000 unique cards to choose from.
There are many indispensable tools for managing MTG Commander decks; Scryfall, Moxfield, Archidekt, and much more. However, when it comes to managing my actual collection of cards and how that interfaces with my decks? There is not a great solution out there.
In this project, the client is me! There are hundreds of thousands of MTG Commander players and as one of them I have a shortcut to understanding the real world problems they face.
Which cards do I own? Which cards do I need to acquire? Which decks are using which cards?
At the same time, AI Coding is becoming more and more essential as a modern Product Designer and I wanted to build an actual functioning tool. I’d been exposed to Local LLMs in the Experience Haus Product Design course and took this opportunity to explore a free-to-use AI assistant for making this tool a reality.
The MVP Deliverable is to have a working web app that compares my deck lists against my card collection to identify missing cards. As a user, I can then take that shopping list of cards to a marketplace to acquire them.
However, this is a loose and dynamic personal project so we’ll be expanding beyond the MVP over the course of this case study.
It’s okay, I don’t understand what’s going on here either and it’s my current set of MTG Decks.
Managing decks and your collection online can be a frustrating and confusing experience.
Discover
Market Research
I have digitized my entire MTG collection; all 5611 cards. The website Moxfield is my deck-building site of choice. It’s powerful, aesthetically pleasing, and the way information is categorized and presented works well for me as a user.
MTG has ~39000 unique cards as of September 2026 so it’s very likely that when someone builds a deck, they will need to acquire cards that are missing from their collection.
Moxfield has a Collection feature which allows adding cards, sorting into “Binders”, filtering, and sharing. Users can also manage which printings of cards a they own and their physical condition. It is designed primarily around the Collectible Card Game side of MTG.
Moxfield is my deck-building website of choice, and has functionality I can piggyback off.
Moxfield’s primary feature is its tool for building decks. Players can create a deck, search for cards using sophisticated classification, and make decisions about which 100 cards they need to achieve their strategic goals.
Where Moxfield lacks in the overall User Experience is managing physical decks; the interface between the deck builder and the collection. Moxfield indicates which cards I am missing (see below), but there is no way to conveniently acquire a usable list and absolutely no way to compare two different decks to see which cards may be included in both of them.
As an MTG Deck Builder I am manually listing out missing cards based on visual checks and misusing the “Primer” section as a notepad to track which shared cards are in which deck.
It costs me hours of my time each week when I update or create new decks for game night, it makes acquiring cards a laborious task, and it makes sharing my decks online harder because there’s a messy text dump in the area that’s supposed to be helping someone understand my deck design!
One of my decks on Moxfield, blue and grey ticks are cards I own, missing circles are cards I’m missing.
There really is nothing else outside of Moxfield worth considering.
- Archidekt has a decent deck builder but poor Collection feature.
- TappedOut is outdated and feature-poor with no Collection feature.
Scryfall is an important tool that we can likely hook into, as a foundational API that provides access to Card Data that other sites use (including Moxfield).
Cardmarket is the leading, and only, service in Europe that supports importing a big buylist of cards and searching for them in one go. Compare the Magic is an amateur tool that supports searching for 10 cards at a time, which is highly limited. In the US there are services like Card Kingdom and Mana Pool but I don’t live in the US so my primary card acquisition method is Cardmarket.
Define
Task Analysis, Problem Statements & User Stories
As a Deck Builder. I go through the following steps on Moxfield...
- Create a new empty deck
- Pick a Commander (a valid card that acts as the lynchpin of the deck and determines which colors of cards are legal in the game rules)
- Choose 100 unique cards from the tens of thousands of options across various categories
- Tag, sort, and filter those cards to make strategic decisions and ensure the deck is functioning appropriately
At this point, many people will test their deck using digital tools (Moxfield includes a playtester too) or will then decide to put the deck together in paper so they can play with it in real life with their friends.
Playing with the deck in real life means having a physical copy of each card in the deck list. So my task continues...
- I find all the cards in my collection that are not already in a deck and sort them into categories
- I count how many cards are missing from each category
- I use Moxfield’s Card Search in the ‘Your Decks’ view to see which decks contain a card I’m looking for.
- I use my memory to determine which deck to hunt for it first. I pray that my memory is correct.
- I go into the Primer of each deck I touch, and manually write down each card that is in another deck (so I can recall where it is if I return to the old deck)
This is when the high level admin is complete. Then for Game Night there’s even more...
- I set up the decks as best I can in preparation for Game Night.
- During Game Night, when I switch decks, I will log back into Moxfield on my phone and look at which cards need to be switched.
- My friends sit and wait as I move all the cards around. I feel bad.
A couple of my MTG Commander Decks, with plenty of empty sleeves for cards living in other decks
In a utopian deck builder’s world, MTG cards would be very cheap or free and players could create physical cards easily in their own home. I could have as many copies of a card as I wanted and would never need to switch cards between decks.
However, this is not reality and Wizards of the Coast, the company that owns MTG, have business goals that commercialize the game and create scarcity. This means that financial and logistical limitations contend with a player’s desire to build decks with any cards they want.
For example, I own a card called Teferi’s Protection. It is worth around £30. If I want to have Teferi’s Protection in more than one deck, I would either need to buy an extra copy of it or move the physical card from one deck to the other.
This means that while I can have a beautiful digital collection of my cards and decks, that doesn’t translate into a beautifully organized and manageable collection of cards and decks in real life.
And MTG is a game that is typically played in real life.
High Level Problem Statement
MTG Deck Builders struggle managing their decks and collection when actioning digital designs into paper.
At the highest level, the key problem is the transformation from a digital design to paper assembly. When the current digital experiences stop, there’s a chasm before shuffling up to play a game and that chasm is what I want my App to bridge.
I have 5 user stories, with 3 top priorities that cover the MVP version of my user experience and 2 stretch goals that cover more facets of the Problem Statement.
- As a deck builder, I want to know which cards I need but don’t own, so I can easily acquire them in my preferred marketplace.
- As a deck builder, I want to upload my collection from Moxfield, so the app knows what I have available.
- As a deck builder, I want to save my decklists, so I don’t have to manually import them every time I use the app.
- As a deck builder with limited funds, I want to know which cards are in which decks, so I can conveniently switch cards around.
- As a deck builder with limited funds, I want to create proxy cards, so I can test out a card before investing.
I’m currently missing 20 creature cards in my Durnan deck. 3 of them I don’t own, 4 of them are in ‘MLK’ and 1 is in Riku. And this doesn’t even add up to 20. This is all information I’m manually updating.
Develop
AI Coding Setup and Iteration
The impetus for this project, outside of being a frustrated MTG Deck Builder, was to introduce myself to AI Coding. I started this back in April 2026 so at that time there were two solid AI coding tools that I was aware of; Claude and Lovable.
I’ve found Lovable to be very impressive. It’s effective, asks good clarifying questions, and seems to be genuinely capable of building relatively bug-free interactive experiences. Unfortunately it’s very expensive. I would give it one prompt per day before I had to wait 24 hours, and after about 7 days I’d have to wait for the next calendar month.
Claude also seemed very effective but seeing as it had similar limitations, I wanted to be free from paying for compute.
Local LLMs are slower and dumber, but they are unlimited outside of the power of my GPU and the context of the project.
Deliver
MTG Deck Manager Prototype
Outside of addressing the Problem Statement and User Stories, there wasn’t much formal ideation ahead of time.
With AI Coding I wanted to build step by step, iterating as we went and fixing bugs to ensure the foundations were stable to build on top of. It was akin to how I worked in video game prototyping periods.
Video Walkthrough
Below is a short video introducing the tool and showcasing what it can do.
Walkthrough of the tool. Also identified a bug with the amount of overlapping cards 😉
Feature List
Collection Upload & Storage
- Users can export their collection CSV file from Moxfield to import into the tool
- This is saved in Local Storage
Import Deck List
- Deck Lists can be imported by pasting a Plain Text clipboard export from Moxfield
- The Commander is identified automatically and used to name the Deck List
- The user can Save the deck list in Local Storage
- The user can create a new Deck List input box to add multiple lists at once.
Saved Decks
- Clicking ‘Save’ in a Deck List input will store the deck in Local Storage.
- It will use the Commander’s name and display the Color Identity of the deck.
- The feature works with partner Commanders.
- The amount of cards missing from the Deck will be displayed alongside the name once the Missing Cards feature has been triggered.
- Saved Decks can be loaded, by clicking the Load button which will automatically populate an empty Deck List input box or create a new one.
- Saved Decks can be deleted from local storage.
Missing Cards feature
- Clicking the ‘Missing Cards’ button will look at all the Decks currently loaded into the Deck List boxes and compare the individual cards to the uploaded Collection
- If there are cards in the pasted deck list that were in the Sideboard of Moxfield, they will be culled automatically.
- This feature works with double-faced cards.
- Results are shown below, totalling up the missing cards
- The amount of missing cards per deck list are displayed
- The complete list of missing cards are displayed
- Clicking ‘Copy to Clipboard’ will copy the list for future use (e.g. going to Cardmarket to paste into a shopping wizard)
- ‘Generate PDF’ will create a printable PDF of the missing cards, with the data taken from Scryfall’s API. This process can take time, so there is a progress animation.
Overlapping Cards feature
- If multiple decks are input, users can click ‘Overlapping Cards’ to see which cards exist in each combination of decks.
- Overlapping Cards are sorted by Card Type, a process that uses the Scryfall API and requires a delay with progress animation due to some failsafe features.
The main view; Deck List inputs alongside Saved Decks for easier access.
Post-Missing Cards Analysis: Total missing cards in each deck, list of missing cards, options to copy to clipboard and generate a PDF.
Example of a PDF generated with missing cards
Post-Overlapping Cards Analysis: The total unique cards, which decks are being assessed, and a list of cards organized by Card Type
Deliver
Moxfield Integration (Coming Soon)
Ideally this tool would be integrated into a leading website like Moxfield.
As a design challenge to flex my skills using Design Systems and integrating into existing products, I plan to mockup this tool as if it was an official Moxfield feature