Covidopoly App Game Development
Covidopoly is an online version of Monopoly Deal with a fun twist to provide entertainment and bring friends together during the coronavirus pandemic. During the COVID-19 pandemic, it has allowed friends to gather together and socialize while having fun. Over 1,000,000 games have been played so far around the world! I joined the team as a User Experience Design Intern for the summer of 2020. Our task was to design the game for mobile use, both on iOS and Android. Prior to this project, Covidopoly could be played only on desktop.
Process
The Team
Introduction of the founders and workers for Covidopoly.
Users
Covidopoly has users from all around the world, most coming from the United States, South East Asia, and Europe. From social media activity, most users were primarily high schoolers to young adults. Given the wide variety of users, the team had to account for different smartphone types Covidopoly could be played on.
Number of cities in each country Covidopoly has been played in and the percent of audience from each country
Constraints
- Since there are many different kinds of smartphones, the mobile application had to adapt to various screen sizes from small as iPhone SE to large as Galaxy Note 20.
- There is no mouse cursor; users have to use their fingers instead, meaning the mobile application can’t have any hover or hold-down capabilities.
- In order for the game to be better suited for one hand play, it was decided that it would be designed in portrait mode, rather than the landscape aspect ratio on desktop. The team still looked into other landscape games to get inspiration.
Competitive Analysis
Before ideating, the team first looked at other different games on the market to see how they went about dealing with smaller screen real estate and displaying information. Some takeaways:
- Games make use of smaller screen sizes by incorporating various minimization features and scrolls to make the playing screen feel like it has more dimensions.
- Apps utilize interactive tutorials when first opening the game to make sense of all the features and buttons — making the game more intuitive without needing an obvious signal during gameplay.
- Any aspect of the game that belongs to your own self is located at the bottom of the screen, while opponents are at the top — a flow common throughout card apps.
Brainstorming
The team first broke down the user interface components in the desktop version and categorized them into two groups: primary and secondary. Primary components directly affect the gameplay experience while secondary components are more of assistive roles.
Sketching & Ideation
The nature of this game requires a lot of information to be displayed on the screen. This meant maximizing the screen real estate as much as possible for the primary components and minimizing the space taken by secondary components. Rather than displaying everything on the game page, the team decided to have buttons that would lead to separate pages where users can chat with other players or change the game settings.
Ideation
The first iteration of the home screen, translating the sketches into an initial digital mockup.
User Testing
Based on testing with users in the game’s Facebook group, the team had users take them through how they think basic functions would be carried out. Key insights found:
- Different sections of the game are visually clear, though some people got their arena confused with the opponent’s arena.
- Control center flow is understandable at first glance without interaction.
- Opponents’ hands felt too small to read cards and didn’t clearly show the opponent’s game information — this needed more priority.
- Users felt uneasy about being able to see the top half of cards in their own hand.
Updated Mockup
The team added a modal with three scroll locations to the bottom half of the screen for the players’ arena, turn information, and player’s cards — so users can change what they see depending on what they currently want more of at that moment.
- Your hand is compressible
- Location of the timer, # of turns, and end turn
- Larger opponent arenas
- More visible cards
- Minimized negative space
- Location of player names
- More opponent arenas visible
Branding
Pages taken from the created brand style guide informed typography and color choices carried through the final mockups.
Features of Final Mockup
Final Product
The app is now ready to push on the app store, but Apple has not approved its release because of how it mentions Covid-19. The team is currently working to fix this with Apple.
Additional Desktop Implementations
Profile Page
The team is working to code this design mockup for profile, friends, badges, and game history features to be implemented in the “my account” tab — so users feel more of an identity with the game and are dedicated to building up their activities and accomplishments.
Tournament
Users in Covidopoly’s Facebook group began running self-organized tournaments, so the team decided to make this feature available in the game. Users can join a tournament with a code, customize the bracket, watch live games of other players, and keep up to date on game progress with the organized bracket.
Reflection
Working on Covidopoly has been far different from any other UX project. Through working with a team of engineers who coded the work, the team had to be cognizant of real technical restrictions and regulations and stay in constant communication with software developers and other team members to execute the design. One thing I wish I considered more during this project is the need to consider accessibility with every feature of the game.
Key Takeaways
Importance of Iteration
Throughout this project, the design was never “finished” — each week, feedback was given and the design was tweaked based on critiques and user testing. Prioritizing many iterations allowed for vast improvements.
Flexibility
Working closely with designers from other universities meant everyone learned design differently. Everyone had to stay flexible and open to change, which led to learning a lot about different design capabilities.
Simplify Mobile Experiences
Mobile card games are popular on the app store, but this app needed to showcase significantly more information compared to those. It was important to strategize ways to simplify the game experience while also showing all the details needed, which led to the implementation of slide bars, modals, and more.
Constraints
Since the app was being coded each week after presenting the designs, the design ideas needed to be accessible and realistic for the developers — real understanding of the practical constraints designers face on a daily basis.