Deck Editor

A individual project learning how to define UX problems

Duration: 2017.09 - 2017.12

UX Skills: Primary Research, Interviews, Sketching, Usability Testing


What did I learn from this project:

  • Defining a problem from personal experiences instead of researches that others did.

  • Designing for something I’m interested in is a good occasion to practice design skills.


BACKGROUND KNOWLEDGE

image source: https://shadowverse.com/

image source: https://shadowverse.com/

Shadowverse (SV) is a japanese anime style and free-to-play cards collection video game developed by Cygames in 2016. It was released for iOS and Android but now also available on Steam (Windows and Mac version).

Game Screenshot

The game plays similarly to Hearthstone, but the developers sought to minimize the impact of randomness on match outcomes.

There are three game modes of SV, main story mode is PvE and others are PvP. Matches are structured between two players taking turns playing cards from their deck.

Animation of “Evolving“

Animation of “Evolving“


BACKGROUND & PROBLEM

Deck editor

The deck editor is necessary.

Players of Shadowverse use the deck editor in game frequently to add new cards or remove current cards because the game is updated monthly, which means that new and better cards will be released. Players are always thinking how to improve their decks. However, there are few problems of the deck editor.

Inconsistent Experience

It is confusing that when you browse your deck on the top area using swiping actions but browsing all cards you have to taping the navigation buttons.

PROBLEM SPACE

How can we improve the deck editing experience for players?


INSIGHTS & DESIGN DIRECTION

Key Points of Using a Deck Editor

How do you add a card from the all cards?

How do you remove a card from your deck?

What information you need while you are browsing all cards you have?

How do you find more cards from all cards?

How do you add a card from the bottom?

Design Direction

Intuitive Interaction of moving cards

Consistent interaction on "deck area" and "all cards area"

Undo Button

Helping players rewinding the previous adding or removing cards action.


USER STUDY

I did a mini workshop testing deck editing experience and contextual inquiry to know the ideal position of the undo button.

Paper Materials

& Contextual Inquiry

My goal was to explore an intuitive way of sorting cards. Therefore, I did contextual inquiry by prototyping my concept with paper materials to observe how users interact with physical cards.

 

Co-Design Workshop

30-40 minutes

5 participants, who have played Shadowverse and other TCGs.

I tested to see how users add or remove cards between deck area and all cards area.

 

Undo Button Position Survey

surv.png

If there was a undo button, where it should be?

A: 0%,

B: 80%,

C: 20%

Result and Feedback

  1. Interaction test: 5 of 5 users like the idea that both deck area and all cards area using the swipe action rather than navigation buttons.

  2. Undo button position: 0 likes position A, 4 users like position B, 1 user likes position C.


FINAL DESIGN

1. Adding an "undo button" on the top-right side

2. Using swipe action browsing cards on the second row instead.

1. Adding an "undo button" on the top-right side  2. Using swipe action browsing cards on the second row instead.