E-Binder | Alx Po

Trading cards around you

E-Binder is a mobile application that responds to the current trends in the Magic: The Gathering community. The absence of an alternative between stores with a large markup on cards and card-selling services that offer significantly less in return than what cards actually cost leaves Magic players with thousands of cards sitting on their shelves doing nothing.

The prototype means to resemble an app used by the players of Magic: The Gathering and potentially other TCGs (Trading Card Games) to trade cards locally.

Project: E-Binder Software: Figma Roles: Research, Design, Testing Duration: 3 Weeks

How many people do you usually see at your local game store on the day of an average tournament/event?

How often trading cards happens *randomly* for you (“I don’t know who can have what I’m looking for”) compared to planned (“I know where to look”)?

How much of your collection would you be willing to trade/get rid off?

Despite being close to the MTG community, I started with simple research that consisted of a survey and a competitive analysis to understand whether there are any similar existing solutions and to learn what pattern trading generally follows among the players. Some of the questions were:

E-Binder followed a typical plan for a design project: research, prototyping, and testing.

Development

Magic: the Gathering Convention - Blurred Background

Findings

Most players count their cards in thousands

The majority of the respondents mentioned that they have more than 1000 cards in their collection which they would be willing to trade or get rid of. This suggests that E-Binder needs to have an efficient way to quickly "digitize" a collection and present it online.

Players would rather buy cards they need instead

Trading takes effort, especially when you are trying to build decks that can require up to a hundred unique cards. Searching for them among players in a local game store can become a long adventure - with some visiting them less than once a month.

Local game stores rarely sell singular cards

Most stores cannot afford to sell singular cards. Unless they are a large or premium store, they can't manage and track the prices of thousands of cards on the secondary market. Those who can, also can afford to increase their price up to twice the market average.

Many marketplaces exist

Besides Amazon and eBay, both Europe and the US have their dedicated marketplaces for MTG needs: CardMarket and TCGPlayer, but your presence there is equivalent to being a seller, which comes with many implications. They are usually not the place to get rid of cheap and bulky cards quickly.

There are many ways to purchase or sell a card and their drawbacks often cost extra for the consumer. E-Binder can be a single alternative to them, particularly when it comes to having thousands of inexpensive cards.

Summary:

*Some frames are not present

The general structure of the app became clear - prioritizing certain systems and placing them in the bottom bar was a good direction. But the details of these features weren't thought through yet. How to minimize the number of clicks it takes to scan one card? What is the most intuitive step-by-step process of making a trade? Will the Explore feature (second from the top left) be used the way it's intended?

Iteration 1 - Frames

The idea went through 4 iterations, not including a paper prototype. At that stage, my main goal was to think over the potential features E-Binder could have, like scanning cards, trade systems, and deckbuilding. TLDR - Deckbuilding turned out to be too large of a feature to implement compared to the scope of the project. It had to be cut, for everything else to stay focused and consistent.

Iterations

While prototyping, the information architecture became a major challenge, mainly in the case of the Home Screen (top right). Since it is meant to be the first thing the users will see when opening the app, its design would shape a large part of how E-Binder will be used: whether they will be checking it once a day or several times and which information they would want to see or remember. The Home screen underwent another change, containing 4 buttons that lead to the most important features of the app and yet taking up a large portion of the screen.

Iteration 2 - Interaction

This iteration attempted to capture the entire experience of using E-Binder, which I started to test among those who do and do not play Magic: the Gathering. While testing was a continuous process during development, at some point it became clear that the trading feature only considered the perspective of one user, who could drag & drop cards they liked. That wasn't exactly the goal. Trading involves two parties, meaning that the feature should be accessible from both sides at all times while also keeping track of the changes.

Iteration 3 - Testing

Iteration 4 - Final Result

The final iteration became a testament to the skills I learned when working in Figma. The amount of frames has significantly decreased - instead, a lot of the content now takes the form of components (Section 1) - objects that can change states and be easily duplicated, while allowing to make changes in their single instance instead of editing all instances manually one by one. The prototype includes almost no variables since they would better fit a more polished prototype which would take longer to make. Additionally, a change in the state of a variable can not be reflected with animations, which contributed a lot to showcasing the overall experience of using E-Binder.

Instead of only showing cards around you, the Explore feature is also designed to highlist the cards you are looking for and show how far they are from the region you live in.

Scanning now takes one click per one or more cards, unless the card being scanned has a foil treatment. Instead of a popup confirmation window, a notification appears at the top, saying that the card has been successfully added to your collection.

A dialog is created to display how a potenital trade can happen. The trading feature is now designed to be available at all times, always waiting for confirmation from the user in order to become visible for the other party

Conclusion

E-Binder now contains the designs for:

Finding and saving binders with cards near you, highlighting those from your wishlist.
Scanning cards, or manually adding them to your collection.
A chat system that includes trading. Both parties can make changes to the trade any time.

The prototype can be found here.

Takeaways

It is unfortunate that the deckbuilding system did not fit the 3 weeks dedicated to making this project. While E-Binder does not limit the selection of cards you can trade, according to the research, E-Binder might find its niche among the cheaper cards. Going through them can be a hassle no matter how efficient this process can be made, thus the next question becomes what to do with them if they are not in high demand. Deckbuilding could still be a solution - instead of providing decklists for competitive decks, E-Binder can focus on the "kitchen table" experience and provide lists for smaller decks that can be picked up and easily mastered by the new players. The current most popular way to get into Magic is by obtaining a deck for Commander - the most complex format of play with matches that can last for hours and which allows using cards from the entire 30-year history of the game's existence. It may be the most popular way to play but not the easiest.

Just like any design project, E-Binder can be worked on forever. Understanding when to start aiming for a cohesive experience was certainly a challenge. If I were to do it again, I would've attempted to assess the scope of the project first, while making the paper prototype.

Since I didn't use a design system for this project, I learned a lot about making one, sometimes the hard way. I was discovering what Figma is capable of while I was developing E-Binder, and I took several wrong approaches to making designs simply because I didn't know how Figma's features could behave.

Thank you for reaching the end of the case study!

Is that Stockholm in the Explore feature?

Yes:)
Why is E-Binder black and white?

The choice of colors was my personal preference but I have nothing against adding more colors. Looking back at the project, I would perhaps add an accent color myself :)
Is there no keyboard in the prototype?

Yes, I decided to not implement one mainly because of time. Instead, a search field appears wherever it is relevant.
Did you make the cards too?

No, the cards are the game pieces created by "Wizards of the Coast" - the company that works on Magic. Same with art for the Chat section - it belongs to the corresponding artists. I do not own them.
Did you have any prior experience in the UX before this project?

I graduated from Uppsala University with a Game Design & Project Management degree. I haven't done any non game related design work before this project but I do enjoy exploring the similarities and differences between software and game design.