Research operations in product development
Magic the Gathering Deck Simulator
My web app is a Magic the Gathering Deck Simulator, where people can build decks, load in already made decks, and play test their decks in an automated simulator.
I am the Product Manager, Coder, UX Designer, and UX Researcher for this project.
I have done 5 User Testing sessions, and plan to add more features to this site as time goes on
What I learned about myself
Throughout this project, I took on the role of Product Manager, Coder, UX Designer, and UX Researcher.
As I took on each role, I learned more about how the UX Researcher role interacted with the others.
Product Manager
Since this was a solo project, I was in charge of deciding the order in which to design the features of my site and when to do User Testing.
I also learned, after spending 2-3 days trying to figure out how to fix certain bugs or how to do things, what features to put on the sideline due to time restraints.
Coder
I used Chat GPT to start coding the features of my project, and over time I learned how to do some of the coding myself.
In my previous job, I would sometimes get frustrated when the Engineers didn't fix some of the bugs that occured in some of our studies.
But now I understand the frustration in some bugs being difficult to fix, and sometimes not understanding why there are errors at all.
UX Designer
I did the UX design of the site by myself, editing and rearranging the site as I added new features.
I got a better understanding of how difficult it is to try figuring out where to move certain buttons or image containers around and not have it conflict with other features.
UX Researcher
While I enjoyed taking on every role on this project, my overall experience showed me how much I enjoy User Research.
I got really into coding while doing this project, I would sometimes go days spending all my time trying to get certain features to work. But sometimes coding causes me to loose a sense of time, and I end up spending a long time trying to do something without realizing.
There were some parts of the Design process I liked, but some parts could be tedius.
The most enjoyable parts of this project was when I was perparing for and conducting the User Research. For me, the most enjoyable part was seeing people actually using my site, talking them through how they played the game, and figuring out how to improve my site based on my findings
Background
In early 2024, I decided to improve my coding skills by taking an online course on web scraping via Udemy. While the course was designed for Mac users, I managed to adapt the code to work on my Windows PC with the help of ChatGPT's translations.
This experience inspired me to delve deeper into coding and create my own project focusing on User Experience (UX) using ChatGPT for web app development.
I wanted to make something that I would enjoy doing, so I thought about what things I liked to do in my free time, and what problem I could solve.
I'm a fan of Magic: The Gathering, a deck building card game where you build decks and play against other people. I particularly like playing the Commander format where decks have 100 cards and games involve playing against 3 other players.
I enjoy deck building but find it challenging to understand how the deck functions without playtesting, which can be time-consuming with playing against people, using physical cards, or limited by existing apps.
The main issues I encounter are the randomness of computer-generated hands, the manual effort of dragging and moving around cards, and managing lands and playing cards. This makes it hard to get a smooth and efficient playtesting experience.
I always found playing testing decks a bit difficult, and building a deck and playing against people can take a lot of time. But to know how a deck will play, you need to see how it looks with other decks being played against it.
Decksim.in
Features
My site currently has three main features:
1. Importing Decks: Where users can load in their decks and add in card details.
2. Solo Game: Where users can test out how their deck plays out by itself. They can do it manuelly, but there is an Auto Feature where cards will be played automatically.
3. Multiplayer Game: Where users can load in 4 decks to simulate a game.
Using Chat GPT to help write the code.
Using JavaScript, I experimented with creating buttons and sections on the webpage to display card images.
I asked ChatGPT's help to generate code for textboxes to input card names, buttons, and sections to display card images.
As I continued to seek ChatGPT's assistance for coding functions and designing the website, I gained a deeper understanding of coding concepts and the potential fragility of code. However, adding more functions to the site also led to encountering errors during usage.
Eventually, I could only rely on ChatGPT for short functions, and had to get a better understanding of how each of the codes interacted with each other.
Development Timeline
January 2024
Learning basic Javascript and website features
The first couple of weeks of January I was experiementing on JavaScript and using ChatGPT to figure out how I was going to implement features to let people simulate how their deck works.
After playing around with putting cards onto the webpage and going back and forth between the HTML file, the Javascript file, and the CSS file, I decided to use Python instead of Javascript due to it being less complex, as I was just starting out.
Feburary 2024
Developing Game Mechanics in Python- Pygame
I spent about 3-4 weeks setting up how the game sections and buttons would be set up. I also did User Testing with players to go over their decks and how they play out. I explored how to make the cards be automatically played, using ChatGPT to help me with code so that the actions of simulator would act how users play the game.
March 2024
Translating Code back to Javascript/Setting up Domain and Server
After finishing my first draft of my game, I realized I wanted to put it on a website, Since Python doesn't translate onto websites easily, I had to translate my code back into Javascript. Due to having more experience in how coding works.
After about 2 weeks, I finished translating my code back into Javascript. Then it took me about 2 weeks to set up my domain, server, and implement the log in feature for my website.
User Interviews
Insights from Card Sorting of players decks.
01
User 1:
-
Apps like TappedOut are mentioned as valuable tools for conducting playtests and refining deck compositions.
-
Endgame cards are discussed in detail, focusing on their optimal activation conditions and their role in shaping gameplay outcomes.
-
The importance of support cards is emphasized, particularly their synergy with endgame cards to create powerful combinations on the battlefield.
-
Evaluating card effectiveness based on the number of creatures on the field and the turn of activation is a key aspect of refining deck strategies.
-
Early activation of powerful cards is identified as a crucial strategy for maximizing their impact and gaining a competitive advantage.
03
User 3:
-
I used Figma to have the User categorizing their cards into different categories like end game cards, theme cards, theme support cards, speed cards (for card draw and search), interaction/control cards (focused on opponents), staples (essential cards like Sol Ring and Rhystic Study), and lands (separate category for land cards). (Shown below)
02
User 2:
-
Discussion on the significance of having multiple options and choices in gameplay, particularly in the early turns of a game.
-
Importance of simulations in evaluating the number of options available per turn and how it impacts gameplay decisions.
-
Consideration of interaction and strategy in gameplay, especially in multiplayer scenarios where multiple decks are involved.
-
Exploration of the limited options available once a deck is built and the importance of making informed decisions based on the cards in hand.
04
Insights:
Originally, I was going to have a lot of customization for the cards in the players decks, with categories that I created, like support cards, end game cards, etc.
I realized that would be too much work for the user, so I made it more simple, with plans to add card details that are built into the card-data files so that players can see triggered effects without having to do it themselves.
Card Sorting
A/B Testing
01
First Solo Game page:
After finishing the Beta version of my Site, I had a Magic player use the site. As they were using it, they had questions on how things were set up. I did an A/B Testing session, where I showed two different formats of how the Image Sections looks, in order to see which one was easier to use.
02
First Multi-Player Game page:
The user found the Multi-Player Game page to be easier to use since all the buttons were next to the section, and they were separated far enough on the page as to not be confusing.
03
Re-formating the Solo Game page:
I rearranged the way that the Solo Game page was formated to be closer to the Multi-player page. The User said that my Web App has several features that others do not, like being able to move cards around more easily, They also liked how they could just click the Auto buttons and the cards would be played without needing to do anything. This could let Users watch how their game would play out without having to manually drag or click around the page.
This user said that this is a Deck Testing app that they would use more then others, once a couple more features are added to get rid of a couple of pain points.
Future Development
My current plan is to do an update each week, where I either add more features or make small edits to make the current features more refined.
I had some earlier ideas that I ended up shelving due to the complicated nature of them and me being less experienced in how coding worked. (Shown on the left)
I plan to revisit them to see if I can add more ways for players to see the statistics of their decks and ways to easily switch out cards to see which ones are better.