PAGE UNDER CONSTRUCTION
PAGE UNDER CONSTRUCTION
PAGE UNDER CONSTRUCTION
PAGE UNDER CONSTRUCTION
xDurak
Client: Maxim Pertsov, Software Engineer
Role: UX/UI Designer
Tools: Figma, Sketch, Miro
Time Frame: 24 weeks
Design a more refined user flow and in-game experience for a digital card game.
I collaborated with a software engineer on an independent project to recreate a popular card game called Durak. I designed xDurak as a mobile app. Through several iterations, I simplified the gameplay, added more personalization to the app and made it possible to interact with friends. I improved the new player experience by adding a tutorial and implementing an interactive home page where users can create and join games.
Skills: Design Strategy | UX Research | User-Centered Design | Interface Design | Agile/Scrum Methodology
What is Durak?
Durak is a traditional Russian card game that is popular in many Eastern European countries and other parts of the world. The objective of the game is to shed all your cards when there are no more cards left in the deck. At the end of the game, the last player with cards in their hand is the "durak," which is Russian for "fool."
There are no Winners, Just a Durak.
Defining Goals
Clearly defined goals facilitate successful outcomes.
1
Client Goals:
-
Improve gameplay.
-
Add a tutorial for new players.
-
Build a multifunctional home page where users can create and join games.
-
Add a chat feature.
Client's Original Design
2
Design Goals:
-
Improve information architecture.
-
Make the website responsive and create a mobile interface.
-
Build a multifunctional navigation bar.
-
Design for web accessibility.
Edited Design with Mobile Interface
3
User Goals:
-
Clarify the game order.
-
Emphasize player roles.
-
Sort cards.
First Iteration after User Testing
Gender Breakdown of Mobile Gamers:
"People older than 45 years make up over a third of the mobile gamers."
Age Breakdown of Mobile Gamers:
Research Synthesis
After identifying the large population of older gamers, it became clear that I needed my design to be accessible to a group prone to vision loss - presbyopia.
"Presbyopia is a normal part of the aging process, and we’re all going to have to deal with it sometime after age 40."
Exploration of Gamer Archetypes
In order to design with the user in mind, I created two user personas within the popular demographic. They embody the attributes, pain points, and goals of two potential mobile gamers. Based on research conducted by GooglePlay, mobile gamers' "behaviors and attitudes can be framed as an aspect of social behavior and/or passion for gaming (Who Plays Mobile Games. GooglePlay, June 2017)." I explore these motivations in the personas of Sasha and Grace.
Meet Sasha!
Sasha is a social gamer. He sees mobile games as an opportunity to connect with people. Having played Durak growing up and teaching the game to his son, the xDurak mobile app would be a great way to stay in touch when his son goes back to college.
Frustrations:
Sasha is limited by technology because of his vision loss and color blindness.
Click to enlarge
Meet Grace!
Grace is a passionate gamer who enjoys spending her free time playing the latest mobile puzzles and card games. She is a competitive player who is open to exploring new mobile games, so xDurak would pique her interest.
Frustrations:
Grace lives a hectic lifestyle and gets distracted while playing. She also worries her limited English will keep her from learning a new game.
Click to enlarge
Problem Statement:
How might we streamline the card game experience, so that game actions are clear and accessible?
I conducted an analysis on desktop and mobile competitors to gain strategic insights into the features and functions of the direct and indirect competition. I specifically looked at how they organized their information, offered opportunities for users to socialize and taught users new information.
Examining Gaming Products
Direct Competitors
Desktop: Playok.com, Cardzmania.com
Mobile App: Durak Championship, Durak Card Game
Click to enlarge
Indirect Competitors
Desktop and Mobile: Duolingo (Language Learning),
Words with Friends 2 (Online Scrabble), Lichess (Online Chess)
Click to enlarge
Comparative Analysis
The analysis showed that direct competitors had several shortcomings:
-
None of the online Durak games I studied displayed each player’s role.
-
No other online game distinguishes the trump card from the other cards.
-
None of the competitors offer customizable card sorting.
-
Four out of the four competitors use a written rule book with no visual learning.
Knowing these competitor's limitations, I strategically set out to design my solution with the goal of making a superior product and experience.
Click to enlarge
I started my process by designing for mobile devices since there are greater restrictions and bigger challenges when it comes to mobile accessibility. I carefully studied the game and familiarized myself with the frequency of common game scenarios. By understanding this data, I was able to make informed decisions on how to design the mobile interface.
Studying Game Scenarios
* Based on a 4-player competitive Durak game
Brainstorming & Sketching
The most challenging part of the process was designing an interface that could best display a user's hand with an overwhelming amount of cards. I sketched out several ideas and chose the most practical concept that maximizes on card viewability and interaction.
Card Layout Sketches
Low Fidelity Wireframes
Through several iterations and rounds of user testing, I was able to determine what features to prioritize in order to focus on the minimum viable product.
Rapid Iteration and Prioritizing Features
Eliminated Features:
GAME TIMER
-
Reasoning: By improving the gameplay we can naturally speed up the game.
CHAT FEATURE
-
Reasoning: The feature was too difficult to moderate (cursing, racial slurs, etc.)
CUSTOMIZABLE AVATARS
-
Reasoning: Randomizing player icons and background color will set players apart from other players.
Evolution of xDurak
xDurak
Product Features
Version 1
User Goals:
Clarify game order
Emphasize player roles
Sort cards
01. Clarify Game Order
Multiple players can attack at once. So a red bar indicates a player taking action. A white bar indicates that a player does not need to preform an action.
02. Emphasize Player Roles
At the start of each round, each player is given a role:
LEAD ATTACKER
DEFENDER
ATTACKER
User Goals:
Clarify the game order
Emphasize player roles
Sort cards
03. Sort Cards
After conducting card sorting exercises with users, I concluded that there were three popular card sorting schemes:
By Rank/Trump
By Rank
By Suit
User Goals:
Clarify the game order
Emphasize player roles
Sort cards
04. Differentiate Trumps
Trump cards hold higher value in Durak, so making these cards stand out are crucial to the game. By inverting these cards users can clearly distinguish the trump cards from the rest in every game.
Client Goals:
Improve game play
05. Show Card Ownership
What makes xDurak unique from other Durak games is that there is no order of attack, so players can attack simultaneously. The attacker’s icon is displayed on top of the card they put down.
Client Goals:
Improve game play
Accessibility
MEETING SASHA'S NEEDS
With Sasha in mind, I wanted to design a user experience that accommodates users with different kinds of visual impairments.
Design Goals:
Design for web accessibility
Visual Loss
The new horizontal scroll layout (View A) and full-hand view (View B) optimize the card space. Cards are easy to view and interact with.
-
There are always six cards in view.
-
When there are more than 6 cards in a user’s hand, the user can swipe/click left and right to view all their cards (View A).
-
When there are more than 6 cards in a user’s hand, a bottom row of cards appears (View B) to show the full hand.
-
The user can slide the viewport in the bottom view (View B) to adjust the top view.
Color Blindness
By using contrasting colors and textures, I created a user experience that is cognizant of a color blind audience.
Deuteranopia
Protanomaly
Protanopia
Deuteranomaly
New Player Experience
MEETING GRACE'S NEEDS
Creating a new player experience that incorporates a visual tutorial separates xDurak from its competitors.
Client Goals:
Add a tutorial for new players
In-Game Rule Book
New players can refer to the “How to Play” dropdown option for a quick tutorial and reminders on how to play the game.
Quick Gaming
MEETING GRACE'S NEEDS
Busy users like Grace don't have time to play lengthy games. We created xDurak as a fast, fun and competitive mobile app..
Client Goals:
Improve game play
Speedier Game Decisions
By highlighting cards that successfully defend attacks and graying other cards, users can make faster game decisions.
Outcome:
-
The new features made the game easy to understand, improved game strategy and lead to faster gameplay.
-
The average time of a competitive 4-player game decreased by nearly two minutes.
Average Game Time
Before Changes:
0:11:59
Average Game Time
After Changes:
0:09:45
Client Goals:
Improve game play
Add a tutorial for new players
Add a chat feature
Design Goals:
Improve info. architecture
Create a responsive and mobile interface
Create a nav. bar
Design for web accessibility
User Goals:
Clarify the game order
Emphasize player roles
Sort cards
Multi-functional home page
Next Steps
The first version of xDurak focused on perfecting the game and releasing an MVP with basic user flow functionality. Moving forward, I will continue working on creating a multi-functional home page where users can invite friends to play. Additionally, I aspire to add more features that appeal to both gaming personas.
CHAT FEATURE
We want to make xDurak a social gaming space so that users like Sasha can play and socialize with friends and family.
PLAYER PROFILES
For a passionate player like Grace, we aspire to implement features that make the game more competitive and intense. We want to create player profiles that record player activity and rank their performance.
