Gather | Interaction Design



Personal Project | Interaction Design

Tools Used: Sketch, Photoshop, Framer

 Southpark episode featuring a Magic game

Southpark episode featuring a Magic game

My friends and I like to play Magic, a card game. To make the game more fun, there are options to buy companion cards or apps that randomize the rules. But the apps available right now weren't easy to use so we wanted to see if we could make it better suited for our needs.



How might we make the companion app feel more flexible and less disruptive?


To better understand some of the issues with the current apps out there, I decided to observe my friends playing this game and take notes by drawing out their process.

Observational Research


The major problem with the existing app is that its design made it really hard to focus on the game.

  1. Flexibility: Two virtual card decks (one for planeschase and one for archenemy) should be flexible to play any game type.
  2. Reference Point: Need easy way to remember card rules or access history of cards played.
  3. Back and Forth: Should be easy to go through the deck as if the deck of cards was physically there.

Defining Requirements

Desktop Copy 8.png

First Iterations: Music Inspired

I knew I needed to make it easy to go back and forth within the deck while also making it easy to read. So the first few sketches I took inspiration from music apps like Pandora and Spotify. Just as how a user may go through songs in a playlist, so too does a user go through cards in a deck. The current card would be displayed the largest (making it easy to read) while the next/previous buttons make it easy to go through the deck.



Redefining Requirements


Next Iterations: Running into Problems

But, after sketching out all these ideas, I realized that if a user decided to play multiple game types at the same time, these music-inspired sketches wouldn't work anymore.

There's also the uncommon, but possible situations where MULTIPLE cards can be in play at the same time; not just one or the other at one time.


Although I tried sketching out ideas under these new requirements, I wasn't getting anywhere. So, I decided to start ripping up pieces of paper.


Using Paper


Getting Unstuck

Ripping up the paper to symbolize the card types helped me understand how to design the flow in a way that reflects how it feels to use real decks of cards. Especially when confronted with the challenge of how to represent different card types with different orientation directions, it was helpful to view this gameplay in terms of a dynamic "board area" rather than a static, single-card view.

(The green, horizontal deck of paper represents planeschase cards and the orange, vertical deck represents archenemy cards.)


First Iteration

In the first version, I tried to have as much play board space as possible by placing the decks in the upper right hand corner. The user can then hover over the card deck to draw cards. However, this way was very difficult to see previous cards and did not allow for too much flexibility in terms of navigation.



Second Iteration

So, in the second version, I tried a vertical sidebar since it would allow for more space to put information such as card history while still leaving enough room for multiple cards in the play space. 


Visual Design



Drawing and Removing Cards


Viewing History of Cards


Because this was designed with my friends as the primary users (we designed and developed this for own personal use), I decided to design for a laptop. However, I think it would also be interesting to see how the interactions might differ if this was on a tablet. There could be more "drag and drop" type interactions to make it feel more similar to real decks of cards.

For the purposes of trying to learn Framer, I focused only on two design challenges: Removing and Drawing Cards and Viewing History. However, this project is still missing basic features like Restarting the Game or Customizing the Decks to make it an actual full scale web app.

Next Steps