5 UX/UI Lessons from Designing a Card Game
I created Fray, a small card game published by Smunchy Games earlier this year (2020), and I continue as lead game designer on its future expansions. It’s a fast-paced strategy game wherein players contest over a 3×3 battlefield, playing powerful units and spells to gain control. It’s a standalone game that can also function as a companion to the larger tabletop role-playing game currently in development, Paths: World of Adia. Since that RPG is going to be a deep experience with a great deal of lore and story and game mechanics, we wanted Fray to be something players could very easily learn and play a game in just a few minutes. Simply put: it had to be accessible.
Early in the production of Fray, I was tasked with creating the design of the cards. It went through a few changes, and I’d like to take a few minutes to cover each major change via a weird, pseudo-stream-of-conciousness discussion. Their design was essentially the main way players interacted with the game, and I found after the fact that a lot of the thoughts applied to UX/UI design. Hopefully we’ll all learn a little something from this.
Before we get into that, I want to quickly mention that the changes/decisions shown below were either driven by restrictions of the medium as physical card game, or by player feedback. Just as in UX/UI design, which employs user testing to verify and study how users interact with applications in development, we needed playtesters. They helped us find pain-points in the game. They helped us balance the cards so that none felt unfair to play against, or unimpactful to play with. And, of course, whenever we updated the card’s visual design they were the first to tell us what they liked—and what they didn’t.
Version 1: Assembling the Pieces
When I began working with Smunchy Games on Fray, I used an existing template from one of the games in the same IP we would be using so that they would have a similar look. It was a temporary measure, as I’d initially been told they would have somebody else design the cards, but I needed a way to test the new version.
This first iteration of the cards put the their Power values (shown as 3, 4, 5 above) on the top right, next to its suit/faction icon. We didn’t know what the visual style of the game would be yet, hence the blankness to the cards, but we knew to leave space for artwork and were able to fit all of the important things on this version.
As you can probably tell, though, this wouldn’t work for very long. The text is small and hard to read. Even the larger text at the top lacks contrast. Plus, when players held their hands in their hand, we noticed all of the important information—the Power value and suit icon—were hidden by other cards in their hand. Basically: these cards were illegible.
When you’re designing anything that people need to read, they shouldn’t strain to read it. There will always be issues such as those who have worse eyesight or who simply can’t read as easily, but I wanted to design with them in mind as much as possible. I wanted people to spend more time thinking about their choices for the turn, rather than trying to decipher a small passage of text. The same thinking can be applied to a website or app—reading it should be one of the easiest things to accomplish for the user. I needed to go back to the drawing board, and this time I would make my own design rather than use anything given to me by the publisher.
Version 2: Finding a Style
For the first redesign, we explored multiple styles for Fray. This was the one we were most excited about, in large part because it added so much color and had a really unique frame for the art. I’d been inspired by the Taj Mahal while making this one (I can’t remember why in the slightest) and wanted to bring in some elements of that into the card, hence the mix of angular and curving lines.
In addition, I moved the Power value to the top left corner, added higher contrast, and enlarged it. That made it stand out far better, and now you could see the values of each card while it they were fanned out in the player’s hand. Adding the Power to the bottom-right of the card, shown in reverse, was inspired by traditional playing cards that you might play Poker or Blackjack with. The other players should be able to read that value easily, and in theory this design would help them do that.
However, a few issues persisted. The text, while clearer and larger, still felt small—especially on the title. Additionally, keeping the suit icon on the top-right kept it out of view when in the hand. Colors helped make them all distinct, but that wasn’t particularly helpful for the players who were colorblind. About 4.5% of the world has some form of colorblindness, and while I wanted to use color to help inform players about the card, there needed to be other ways for them to interpret information. So that icon needed to move to the top-left as well, and the titles needed to be larger. I’d planned on implementing all of this onto the current design, but before I was able to find the best way to enact those changes I was asked to redesign the cards again. While the current version was working, it didn’t convey the game’s simplicity well. So in addition to all of the aforementioned changes, I needed to find a way to display the information in a simpler way that still was respectful of the IP’s style.
Version 3: Simplify
The concept for this version came from the idea that the cards were created by people from the fantasy world of Adia, sketched on pieces of paper and used as a way to relax during the First Abyssal War—a major event in the lore of Adia. The main part of this design took inspiration from that: the paper-colored space where the majority of the information went as well as the sketch art. The title also became larger to improve readability and the suit icon was moved to the to-left right underneath it.
During this time we also resized the cards so that they would be ready for printing, and changed the suits from groups from modern-day Adia to instead represent the first three peoples who called the world of Adia their home: the Duanine, Dwarves, and Bjorn.
In an effort to create multiple ways to tell cards from one another, I also designed new borders for each suit. So long as the general style stayed the same—the gold frame colors were lifted straight off media from Paths: World of Adia—we could create some fun variation on each suit. For example, you can see the Dwarves have a spiky, almost mountain-like frame; whereas the bjorn’s resembles leaves spread out around them. It was just one more way along with the color of the frame and the suit icon to help differentiate between the cards.
However, it was hard to tell the Bjorn frame from the Dwarvish one at a glance, since the colors were so similar. Additionally, the cards looked a bit flat to me. If these were supposed to be created by people from Adia, and used by them, wouldn’t they have a bit more wear to them?
Version 4: Add Detail
This is the version of Fray that went to print. In it, I made a few minor changes to improve legibility and better sell the idea that they are from Adia.
First, I changed the font of the body text. The sans-serif version read fine, but didn’t really fit in with the title font or the fantasy look of our art. We found the serif font a bit easier to read as well, especially with the bold text, which appeared to blur together a bit before.
Secondly, I added the roughness and folds of the paper to the card, and gave the frames a bit of an appearance as though they had been worn, stained, or scratched off in some areas. I had to avoid doing this too much—the shape still needed to be easily readable—but it helped a great deal to give each card a better feeling of uniqueness since all of the wear is different on every card in the game.
We also added a small icon in the lower-left. This would be the icon for the set, which would be important later since we were planning expansions to the game. In fact, we’ve already announced one—The Tassradan Trail—which introduces a new and dynamic way to play the game.
During this last phase of design, we also realized that we needed a simple way to help players orient themselves on the field of play. Since the game required cards to be played in specific locations, we didn’t want each game to begin with “I’ll play this card in the left-corner, the one neat me, not you.”
That even sounds awkward when I type it.
The solution was this placement card. It solved a few issues—most notably the aforementioned awkwardness at the start a game—but it was also surprisingly intuitive, since players were already using cards anyway. For those without the play mat shown above, it’s an invaluable addition.
Putting the Pieces Together
So where does all of this leave you? With the terms “UX” and “UI” in the title I’m going to assume those who clicked might help create apps or websites. Let’s say you’re given a task to work on. The steps used for the design of cards in Fray translate pretty well to that sort of work:
- Assemble the important information. For this step you just need to know what it is you’re making, and what the user needs to get from it. This might involve some research into your competitors, to see what they’re doing well, or what they aren’t quite successful with. Your first version likely won’t be pretty, but it will get conversations started, and when you know what all of the pieces are it’s easier to design for them.
- Find your style. If you already have a style guide, or some other form of pre-designated style for the product, you’re starting off well ahead here. However, if not, you need to spend some time exploring what the product should look like. For example, we wanted people to see high fantasy when they looked at our cards. That’s part of the reason we didn’t illustrate any humans, and used vibrant colors. If you’re designing a banking app you might want to consider what feelings you want those users to have as well—probably something associated with safety, security, and smart finance. There are certain colors, such as greens and blues, associated with those ideas. Of course, that’s not the end-all. For people who are colorblind—just like those who have any issue using your product—you need to design for them as well. You can refer to resources such as WebAim to check for issues in contrast/color. They also have a number of helpful articles that can assist with other visual, auditory, and more accessibility issues people who use your application may have.
- Simplify. It’s easy to over-design. I certainly did in my second version of Fray. While I loved the unique look of my cards, the shape of the frames created problems with small text and pushed important information into odd corners. When iterating on your design always be looking for redundant or overly complicated elements that you can strip down. More often than not, these are just barriers to the user. Simplifying the Fray cards allowed me to make text larger, improving legibility of the text. Simplifying your banking app might streamline the process to move funds around, allowing the user to accomplish tasks easier. Even if the simplification requires more work on our end—such as designing an auto-fill capability for certain forms—if it makes the user experience easier on the user, it’s worth it.
- Detail. While this may appear contradictory, after I’ve simplified a design, I like to work in ways to add new and subtle details. Adding the roughness to these cards helped sell the fantasy that they were from the world of Adia, but didn’t create any new visual complexity that got in the way of reading or using the cards. Small touches on your banking app like adding in some microinteractions could help inform the user of what their actions are doing without getting in the way of their progress, such as a meter that fills up as you complete parts of a form.
- Stay open-minded to change. The final version of Fray printed as you see it above, but it is not without some small faults. Playing with my family recently has exposed some legibility issues. This is made worse by the fact they’re relying on me to tell them what the cards do, rather than reading them, but I’ve found this is likely because of the fact that they have trouble reading the text. The smallest text at the bottom of each card is practically illegible to some people. That’s no great loss, because there’s no vital information there that can’t be found elsewhere, but I’m already working on plans to fix that in future expansions. Starting with The Tassradan Trail, which will likely be released later this year or the start of 2021, I’m increasing the size of body and footer text on all of the cards. I’m also looking into some additional resources so that people can learn how to play in multiple ways. The game may be released already, but that doesn’t mean we can’t make some small iterations on future versions to give players a better experience. It’s not as efficient as a software update, but it’s certainly better than letting these issues persist.
Thanks for reading! If you’re interested in Fray, it’s available now on our shop! You can also grab a copy of our first expansion, which totally changes the way you play the game.
The art on on the cards you see above are by Peyeyo and Leonardo Giordano. Check them out—they do awesome work!
Connect with me on Twitter, LinkedIn, or visit my website to check out more of my work.
