Online Card game
LOOT
Figma, Slack, Zoom, Excel, Photoshop
7 weeks
Thalia, Sumire, Sabrina
Client work
Overview
-
Transforming a card game "LOOT" into an engaging online experience
-
Creating MVP
-
As a Sub Leader, I was supporting Leader and other team members, and organizing ideas
Our Process
Desk research
User research
User Flow
Site Map
Wireframes
Prototyping
Usability test
Improvement
What is LOOT?
LOOT is a card game designed by Reiner Knizia, published by Gamewright. It’s a pirate-themed strategy game where players compete to capture merchant ships using pirate ships and attempt to defend their own merchant ships. It blends elements of strategy, luck, and player interaction, making it suitable for both casual and experienced gamers.
Our Challenges
Digital Transition Challenges
Translating the tactile and social aspects of a physical card game to a digital platform without losing the original charm can be challenging.
Maintaining Strategic Depth
Ensuring that the digital version retains the strategic complexity and decision-making aspects that made the original game enjoyable.
Ensuring a Smooth User Experience
Creating a modern, lightning-fast web application that provides a seamless experience without technical glitches or slowdowns.
Desk Research
Strategy games emphasize long-term planning and critical thinking. With the transition of classic board games to digital platforms, these games are experiencing a resurgence, attracting both new players and those nostalgic for the physical versions.
This shift is part of the broader growth in the digital gaming industry, preserving the essence of traditional strategy games while enhancing social interactions through digital features.
Real-time strategy (RTS) games, evolving alongside these adaptations, are making strategy games more accessible and engaging than ever before.
Global Digital Gaming Market
A sub-segment of the digital gaming market that has seen significant growth, especially during the COVID-19 pandemic, as players sought online alternatives to in-person gaming experiences.
Rising demand for cross-platform play, multiplayer functionality, and games that offer both nostalgic and modern gameplay experiences.
Understanding LOOT
Since this was our first time playing LOOT, we studied its rules to gain a deep understanding of the mechanics by playing this game with handmade cards.
Our focus was on identifying the core actions and strategies that drive gameplay, which are essential for mastering the game and optimizing player experience.
User research
Customer segmentation
Persona
Her Goals and Motivations...
Reconnect with Nostalgia: Emily misses the physical board game nights with friends but finds it hard to organize in-person meetups due to busy schedules.
Social Interaction: She enjoys playing games with friends and connecting with like-minded people online.
Strategic Depth: Prefers games that require planning, strategy, and competitive play.
Convenience and Accessibility: Looks for games that she can easily access on multiple devices, with quick and seamless gameplay.
User Flow
Site Map
Wireframes
We created wireframes based on site map.
Overall, we have two main flows which are onboarding flow and game flow.
Prototyping
Main features of Onboarding screen
-
Users are able to login with social ID or join as a guest
-
After logging in, they can create a room
-
Go through the tutorial of the lobby screen and play a practice round
-
Room creator can choose the number of player (2~6 players) and their character
-
They are able to share the ID or URL of waiting room to invite other friends
-
Before starting game play, the roulette automatically decide the order
Main features of Game flow
-
When you want to draw a card from the pile of cards, you just click the cards in the center
-
If you want to place a card, click the card and confirm the action
-
In the hamburger menu, you can see Chat, How to play, Hint, and Exit.
-
At the end of the game, you can review the result and choose play again or back to the lobby.
Usability test
We conducted usability test for 4 participants. This test has 16 tasks and 3 questions according to the main user flow.
The average usability rating was 3.5 / 5.
According to the result we got from usability test, we made some improvements for better user experience.
Pros of Design
-
Graphics and illustrations are clean and pretty
-
The tutorials helped a lot
-
Navigation was intuitive
Cons of Design
-
They found the lack of information (for cards, icons and game rules)
-
The layout of cards was sometimes confused
-
Too slow behaviors due to the size of the file
Improvements
We made some changes after getting feedbacks.
Some participants didn't understand what this icon meant, so we changed the shape and also we add the description of this icon to the game tutorial.
We added page number for the game tutorial to let them know the number of pages, so that they can skip this tutorial if they want.
The layout of the previous one looks not organized. We changed the location of the alignment of user icons.
Some participants were confused because they didn't get who placed a merchant ship card. So we added a hover action to ensure they can see who placed the card.
Feedbacks from Clients
After sharing our whole works, we have got some feedbacks from our clients.
-
We need to have more clear data for usability tests such as how much time did we take to go through whole tasks.
-
We don’t need confirmation for placing a card because it is also part of the game even if players are placed in an unexpected place.
-
Make the player who is playing more clear (i.g. When their turn comes, make their icon more bigger, emphasize with any color, or icon)
Next Action
-
Building the UI for mobile
Since we have desktop version for now, we would love to create mobile version
as a next step. The number of players for desktop version is maximum 6 players, however, it will be 4 players for mobile version due to the limitation of screen size.
-
Keep improving the UI
We need to keep conducting usability tests in order to make this UI more comfortable for users. If our clients are going to implement this interface for LOOT, we are going to keep updating this game UI.
Retrospect
-
Struggles
I was struggling with how to manage our tasks. Sometimes I felt the amount of tasks was quite different for each person, so I needed to divide our tasks with almost the same amount and make less working time for the members who had many tasks. Additionally, there was a difference between our teammates regarding the energy for this project, so it was our challenge as a team.
-
Achievements
We could track our schedule, complete the creation of a prototype, and conduct usability tests before the presentation day so we were not in a rush. One of the good things about our team was we could work on our project by playing each team member’s strength. We had responsibility for almost all processes, but for example one of my team members is good at art so she has more focus on graphics and illustrations. In terms of Design, we were paying attention to keeping consistency and precise alignment for the whole design. I was prone to put my design style into the interface, but it was good for me to create this design along with our persona and the result of the research.
-
Improvements
As a second leader, I believe I could achieve my responsibility by managing our project and supporting other team members. Also while working on this project, I was trying to be in person class so that I was able to discuss our project and design with my teammates more effectively. Other teammates were also trying to be in person so I assume that it helped us a lot.