- RINO App
- Gambit App
Gambit: A TCG Scanner and Planner
Summary
I chose this particular project because trading card games are something that I really enjoy! One particular game I’m fond of is Magic the Gathering, or MTG for short. It’s a game with massive, global appeal and many resources to help participants into collecting!
And in my pursuit of trying to digitize my personal collection, I found that the apps that were out there just weren’t up to snuff…
Something I want to note right away is that there are a number of trading card games that exist in the current market, but I will be focusing on showcasing MTG to stay within scope.
I chose this particular project because trading card games are something that I really enjoy! One particular game I’m fond of is Magic the Gathering, or MTG for short. It’s a game with massive, global appeal and many resources to help participants into collecting!
And in my pursuit of trying to digitize my personal collection, I found that the apps that were out there just weren’t up to snuff…
Something I want to note right away is that there are a number of trading card games that exist in the current market, but I will be focusing on showcasing MTG to stay within scope.
Roles and Responsibilities
This capstone was my final solo project where I was responsible for the research, design and deliverables. That being said, I couldn’t have done without the help of the MTG community and my cohort members so big props to them for some amazing feedback.
Our goal was to create a prototype that solves a problem of our choosing. We had month to complete the final product alongside a presentation and case study.
Wireframes and Prototypes were created in Figma while presentation and infographs were created in Google Slides and Canva.
This capstone was my final solo project where I was responsible for the research, design and deliverables. That being said, I couldn’t have done without the help of the MTG community and my cohort members so big props to them for some amazing feedback.
Our goal was to create a prototype that solves a problem of our choosing. We had month to complete the final product alongside a presentation and case study.
Wireframes and Prototypes were created in Figma while presentation and infographs were created in Google Slides and Canva.
What Am I Solving?
Through survey research, market analysis, and product testing I’ve concluded three major areas that could use improvement.
1. People want an app that does what it’s supposed to. It needs to scan first and foremost, and if it can’t scan because of a programming issue, we need to find ways around that.
2. It needs to have robust organization functions that are easy to use, customizable and responsive.
3. It needs to be designed in a way that’s both visually appealing and easy for the user.
Through survey research, market analysis, and product testing I’ve concluded three major areas that could use improvement.
1. People want an app that does what it’s supposed to. It needs to scan first and foremost, and if it can’t scan because of a programming issue, we need to find ways around that.
2. It needs to have robust organization functions that are easy to use, customizable and responsive.
3. It needs to be designed in a way that’s both visually appealing and easy for the user.
Target Audience
This app is meant to be used by anyone interested in digitizing their trading cards, but the demographic of interest had people aged between 18-34 as was shown in other data from our surveys (18 was the minimum especially considering a market function to our application).
This app is meant to be used by anyone interested in digitizing their trading cards, but the demographic of interest had people aged between 18-34 as was shown in other data from our surveys (18 was the minimum especially considering a market function to our application).
RESEARCH PHASE
Market Analysis
In order to understand the current user experience, I went and looked at two of the most popular TCG scanning applications on the market. Overall, Delver Lens ranked higher despite its more barren UI. It had an excellent camera function which was the most important feature for both applications.
User Survey
I took some survey questions to the r/MTG sub-Reddit to get an idea of what it is people found valuable about apps like TCGPlayer and Delver Lens. It also gave me great insight into things I didn't consider like organizational tools and the fact that most people didn't mind having separate apps for different games.
79 people responded total to the survey while 45 had previous knowledge in using these applications. I've included some more data in the image below.
IDENTIFYING OUR USERS
I’m going to share some more data from the previous survey I posted. A little over 69% of the surveyors identified as cis male which makes sense--that is the predominant demographic based on the card game. However, 14% identified as cis female and ~9% as gender nonconforming or trans. While it’s important to remain within scope of your target demographic, I think that bringing inclusivity to a game like this is very important. These players EXIST, and it’s worth our time to value their space in the MTG community.
Sabrina || 34yo NB || Gameshop Owner
Values: Creating fun, safe spaces for LGBT folks and POC, technology that runs smoothly, form and function in aesthetic choices
Pain points: Inaccurate information, complicated organization tools, no communication from creator
Values: Creating fun, safe spaces for LGBT folks and POC, technology that runs smoothly, form and function in aesthetic choices
Pain points: Inaccurate information, complicated organization tools, no communication from creator
Eren || 22yo cis-male || TCG Hobbyist
Values: Having fun with friends, finding new gaming tech, findings ways to engage with the community
Pain points: Online seller accountability, accessible resources, said resources not functioning
Values: Having fun with friends, finding new gaming tech, findings ways to engage with the community
Pain points: Online seller accountability, accessible resources, said resources not functioning
Journey Mapping
I created this user journey to see where and how the pain points interact with the overall experience by using something like TCGPlayer.The steps involve what a typical transaction or interaction might look like for Sabrina. Based on this flow, we can see that there is a struggle to scan the cards (as is the unfortunate case with these apps…).
Something to look at is that the end of the transaction isn’t where the experience ends. If the cards didn’t scan properly, Sabrina is going to have to just log them later manually which is a lot of time better spent elsewhere. We DON'T want this experience to end on a negative note.
I created this user journey to see where and how the pain points interact with the overall experience by using something like TCGPlayer.The steps involve what a typical transaction or interaction might look like for Sabrina. Based on this flow, we can see that there is a struggle to scan the cards (as is the unfortunate case with these apps…).
Something to look at is that the end of the transaction isn’t where the experience ends. If the cards didn’t scan properly, Sabrina is going to have to just log them later manually which is a lot of time better spent elsewhere. We DON'T want this experience to end on a negative note.
THE DESIGN PROCESS
Sketching Some Solutions
Working on paper gave me the opportunity to get all my ideas out in a messy way without having to worry about going back to fix anything. I made the app goals front and center on the first page along with the key takeaways from the survey. From there I looked into how I might want to organize how the card info page would be constructed. It’s a lot of details on a single card, and I wanted to make sure it had the name, price, and image clearly shown at the top.
Working on paper gave me the opportunity to get all my ideas out in a messy way without having to worry about going back to fix anything. I made the app goals front and center on the first page along with the key takeaways from the survey. From there I looked into how I might want to organize how the card info page would be constructed. It’s a lot of details on a single card, and I wanted to make sure it had the name, price, and image clearly shown at the top.
Crazy 8s
(Pardon the image quality, but this was the best image I could get from my scanner for now). For this exercise, I worked specifically on designing the main page. I wanted it to be simple with all the features available to the user but also include information pertinent to the game itself because it refreshes 4 times a year and has official rule changes for specific cards within sets periodically. While sketching out the components, I wanted to make full use of the real estate by making icons and text large for visibility and the hopes in avoiding misclicks as much as possible.
(Pardon the image quality, but this was the best image I could get from my scanner for now). For this exercise, I worked specifically on designing the main page. I wanted it to be simple with all the features available to the user but also include information pertinent to the game itself because it refreshes 4 times a year and has official rule changes for specific cards within sets periodically. While sketching out the components, I wanted to make full use of the real estate by making icons and text large for visibility and the hopes in avoiding misclicks as much as possible.
Wireframes
Normally, I would have spent more time creating a paper prototype but was limited by time, so I made sure that I put extra care into my high fidelity wireframes.
As somebody who likes darker UIs (as do a lot of people), I made sure that my wireframes include the type of contrast I might want in the final product. It helps get an idea of the values that will eventually aid in making the app more visually accessible. Once again it was important for me to make the text legible and the icons large enough to avoid misclicks.
Link to Wireframes.
Normally, I would have spent more time creating a paper prototype but was limited by time, so I made sure that I put extra care into my high fidelity wireframes.
As somebody who likes darker UIs (as do a lot of people), I made sure that my wireframes include the type of contrast I might want in the final product. It helps get an idea of the values that will eventually aid in making the app more visually accessible. Once again it was important for me to make the text legible and the icons large enough to avoid misclicks.
Link to Wireframes.
Branding
Because I specialize in visual design, this is probably my favorite part other than adding colors to the finished prototype. I think people associate the fantasy trope with deep earth tones or neutrals which makes sense for the genre! But that doesn’t mean that you can’t have fun with the colors. I’ve included some cards as inspiration to show that you can have these vibrant colors against a dark background to make the subject pop or add a bit of liveliness to the illustration.
The text I had chosen for the Main headers were meant to evoke a fantasy style font, the logo title reminiscent of an epic fantasy book or game. While I’m not a 100% sold on the 3-card image for the logo, It goes very well with the current colors and fits the theme of this being a trading card application.
Because I specialize in visual design, this is probably my favorite part other than adding colors to the finished prototype. I think people associate the fantasy trope with deep earth tones or neutrals which makes sense for the genre! But that doesn’t mean that you can’t have fun with the colors. I’ve included some cards as inspiration to show that you can have these vibrant colors against a dark background to make the subject pop or add a bit of liveliness to the illustration.
The text I had chosen for the Main headers were meant to evoke a fantasy style font, the logo title reminiscent of an epic fantasy book or game. While I’m not a 100% sold on the 3-card image for the logo, It goes very well with the current colors and fits the theme of this being a trading card application.
Summary of Usability Testing
I was able to get 6 participants to try my application. They were tasked with trying to Scan a card, check out the market, and then also create a new list. Only one person was slightly confused on how to proceed with the camera section, but figured it out fine once clicking the question mark (that’s mostly a programming thing where it would scan it automatically) Everyone mentioned that it was easy to use and that the color palette was very appealing with visible contrast! They enjoyed the structure, feeling that it wasn’t cluttered but the buttons were accessible as they went through.
I was able to get 6 participants to try my application. They were tasked with trying to Scan a card, check out the market, and then also create a new list. Only one person was slightly confused on how to proceed with the camera section, but figured it out fine once clicking the question mark (that’s mostly a programming thing where it would scan it automatically) Everyone mentioned that it was easy to use and that the color palette was very appealing with visible contrast! They enjoyed the structure, feeling that it wasn’t cluttered but the buttons were accessible as they went through.
Final Thoughts
A cohort member of mine mentioned that something like this would benefit from a tutorial! I really wanted to put one in but because of time was unable to.
I’ve been learning how to animation in Figmotion, and think that the app would benefit greatly from small bits of polish like that.
Lastly, I would love for this to become a reality and would want to reach out to developers or perhaps existing apps to see if they’d like to refresh their UI.
A cohort member of mine mentioned that something like this would benefit from a tutorial! I really wanted to put one in but because of time was unable to.
I’ve been learning how to animation in Figmotion, and think that the app would benefit greatly from small bits of polish like that.
Lastly, I would love for this to become a reality and would want to reach out to developers or perhaps existing apps to see if they’d like to refresh their UI.
2022 UPDATES
After being in an interactive UX/UI designer position for a few months, I wanted to make some updates to screens based on my experience I had gained.
In an attempt to improve the overall UI design, I removed the background boxes and additional borders to allow for a more open feel/less constricted design.
After being in an interactive UX/UI designer position for a few months, I wanted to make some updates to screens based on my experience I had gained.
In an attempt to improve the overall UI design, I removed the background boxes and additional borders to allow for a more open feel/less constricted design.
.png)