Hi! I'm Liz, a user experience designer out of Chicago.
I create compelling interactive systems that prioritize user's needs and bridge the space between technical and creative processes.
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.
DURATION
CLIENT
10 Weeks,
May to August 2020
Start Up
ROLE
UX Designer focused on
iteration of home page and the majority of the achievements and profile pages
Process
The Team
Introduction of the founders and workers for Covidopoly
Users
Covidopoly has users from all around the world with most of them coming from the United States, South East Asia, and Europe. From activities on social media, we have noticed most of the users were primarily high schoolers ~ young adults. Given the wide variety of users, we had to take into consideration the different types of smartphones that Covidopoly could be played on.
Number of cities in each country Covidopoly has been played in and the percent of audience from each country
Reply on graphics rather than text
Get creative with slang and millennial phrases
Evoke good vibes during uncertain times
Constraints
-
Since there are many different kinds of smartphones that meant 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. We still looked into other landscape games to get inspiration.
Competitive Analysis
Before ideating, we 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 we got:
Games make use of the 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. This makes 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. This flow is common throughout card apps.
Some other games we looked to for inspiration/comparison
Brainstorming
We 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.
Layout of desktop game screen and hierarchy of elements
Sketching
Ideation
The nature of this game requires a lot of information to be displayed on the screen. This meant we had to maximize the screen real estate as much as possible for the primary components and minimize the space taken by secondary components. Rather than displaying on the game page, we decided to have buttons that would lead to separate pages where users can chat with other players or change the game settings.
First iteration of home screen
User Testing
Based on testing with users in the game's Facebook group, we had users take us through how they think basic functions would be carried out. Here are some key insights found:
-
Different sections of the game are visually clear, some people got their arena confused with the opponent's arena
-
Control center flow is understandable at first glance without interaction
-
Prioritize opponents hands more, generally felt it is too small to read the cards, and do not have opponent's game information clearly visual
-
Felt uneasy about being able to see the top half of cards in hand
Updated Mockup
-
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
We decided to add a modal with three scroll locations to the bottom half of the screen for the players' arena, turn information, and player's cards. This way, users can change the screen functionality depending on what they currently want to see more of at that moment.
KEY CHANGES
Branding
Pages taken from created brand style guide
Features of final mockup
click to expand screens
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. A visual of the most updated version of the app is included below.
Proposed design for profile and achievements page
Tournament
Users in Covidopoly's Facebook began running self-organized tournaments with users, so our team thought it would be beneficial 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.
Proposed design for tournament mode
Additional desktop implementations
Profile Page
The team is working to code this following design mockup for profile, friends, badges, and game history features to be implemented in the "my account" tab. This way users feel more of an identity with the game and are dedicated to building up their activities and accomplishments.
Reflection
My experience working on Covidopoly has been far different from any other UX project I have completed. Through working with a team of engineers who coded our work, we had to be cognizant of real-technical restrictions and regulations and had to be in constant communication with the 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 accessibilty with every feature of the game.
Key Takeaways
Importance of Iteration
Flexibility
Throughout this project, we were never "finished" with our design. Each week, feedback was given and the design was tweaked based on critiques and user testing. Prioritizing many iterations allowed for vast improvements.
Working closely with designers from other Universities meant we each learned our skills and knowledge of design differently. We all had to be flexible and open to changes in designing, which led to me learning a lot about different design capabilities.
Simplify mobile experiences
Mobile card games are popular on the app store, but our 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 lead to the implementation of slide bars, modals, etc.
Constraints
Since the app was being coded each week after presenting our designs, the design ideas needed to be accessible and realistic for the developers. This gave me a lot of understanding about the real-world constraints designers face on a daily basis.