Magic The Gathering Vending Machine UI


In trading card games such as Magic The Gathering (MTG), there are many cards with common and uncommon rarities that while are very common and not worth much, are absolutely necessary to a deck build. It’s because of this that many players often go out of their way to buy these cards despite their rarity and worth.


The MTG Vending machines streamlines the process of buying and selling common and uncommon cards by allowing customers to do it through the machine rather than waiting in line and getting an offer from the staff. When selling cards, the vending machine would scan the cards and compare them to a database where it would then use to offer price.

Customers would have to get their card from the staff that they could then use to build up a balance (either by selling cards or putting money on at the register) to use when buying cards from the vending machine.


Early sketches focusing on the layout

User Flow Diagram

A user flow diagram of the Interface

Before using the vending machine, customers would first need to get a card from the staff who would activate it. From there they can use the card with the vending machine to:

  • sell common and uncommon cards
  • buy cards available from the machine


A compound view of all the low-fi wireframes

Style Guide

A compound view of all the low-fi wireframes

For our final design, we decided to use the official Magic The Gathering colors along with the Beleren typeface, which is used in the game’s logo, as a display font.

Our initial design for card category selection too inconsistent and could confuse users so we updated those with large rounded tiles depicted each card type with color and symbols. We also spruced up the filters with the MTG logo rather than checks.

Final Prototype

Please note that at this time, prototypes do not display properly on mobile screens.

Jacob Scarani
Jacob Scarani
Product Designer

Seeking new Opportunities in UX Design, UI Design, Product Design, and Interaction Design.