Marvel Snap is a collectible mobile card game specifically designed to be fast, fun, and approachable for players of all skill levels. Something that really sets Snap apart from other games is that it is not pay-to-win; while many card games focus on purchasing card packs and pumping out cards as content, Marvel Snap seeks to be an evergreen game with a focus on strategy and a little bit of luck rather than owning the most powerful cards.
One of my biggest challenges with this project was creating a UI that would be approachable for casual players, especially those new to the card game genre. Not being a card game player myself and finding many card game interfaces to be confusing, I frequently chose to try completely fresh approaches to solving problems instead of copying what was already out there. I'm especially proud of the deck building experience, which is notoriously unintuitive in many card games.
UI Design
One of the features that sets Marvel Snap apart from other card games are the many beautiful and cosmetically upgradable cards that can gain amazing parallax, frame breaking, height-mapping, and animation FX as the player progresses through the game. Together with the Art Director, we decided that the cards should always take precedent in the visual hierarchy, and that the UI should always serve the purpose of highlighting the cards whenever possible.
A key visual theme of all the UI in Snap is that of dark "piano glass," and buttons and other UI elements are made of light being projected as holograms. Another guiding principle we often thought about for the visuals was, what would comics of the future look like? Jumping off from this point, I incorporated half-tone dots as an homage to the Marvel IP's comic book origins.
The first UI I worked on at Second Dinner was in improving the UX of the main game board. I'm especially proud of the location borders and power gems glowing in the direction of the winning player to help communicate the current winner of a location, and the simplified bottom HUD that displays a lot of information concisely. For the turn banner and End Game screens, I created the visual targets and motion design concepts that I used to communicate my vision to VFX artists to implement.
Animation concepts for the Turn Banner and End Game sequences that I created in Photoshop. I created layer comps of individual frames, and then pieced them together with Photoshop's frame animation panel.
The collection menu is where players can view their Cards and make and edit decks. I created several prototypes for deck building, hoping to make a better and more intuitive user experience for casual players.
Players can upgrade their cards by collecting or purchasing boosters for them. Upgrading a card's quality introduces awesome cosmetic FX and visualization to cards that can be viewed both in their collection and in game by opponents.
The main menu of the game features several promos that cycle through on a carousel. I worked closely with Live Ops to develop Promo Templates and prefabs that could be fed data dynamically through Braze content management system.
The game's content revolves around monthly "Seasons," and each Season has a different Marvel lore theme. Using our wealth of card art, I created attractive marketing graphics for the Promo Carousel on the main menu.
Animation concept that I created in Adobe After Effects. I wanted to show our VFX and Tech Artist my vision of tapping on a button in the Bottom HUD, as well as how the generic background lights/halftones animated.
The game is rich with cosmetics to make your experience unique. Players can collect and purchase card backs that show up on their cards in game, as well as customize their player avatar.
The Season Pass functions as a Battle Pass, wherein players are rewarded for playing the game and increasing their Season Pass level.
Every month the Season's theme resets, and brand new exclusive rewards become available.
I built the shop to be modular, so that sections could be reordered or hidden depending on what products were available/what our data team wanted to A-B test. Players can scroll to sections manually or use the nav bar at the top to jump to specific sections.
I worked closely with our Live Ops team, engineers, and tech artist to hook up the News Menu to Braze content management system so that info and new content could be fed into the UI seamlessly. For articles, I utilized my web dev background to coordinate with a third party web developer and provided visual targets so that blog posts could be powered by a Wordpress site and layered over the game.
Players can earn new cards and other rewards by increasing their Collection Level by upgrading cards in their collection.
Animation concepts that I created in Photoshop showing what it looks like to purchase and redeem rewards. I worked closely with VFX and Tech artists to come up with animation clips that could be pieced together in different scenarios to better optimize our animations.
UX Design
Marvel Snap's gameplay is all about simplicity, and trimming down complexity to the core, most fun elements. I wanted a UI/UX that would match this simple elegance, and sought to keep menus as simple and clean as possible to ensure that the UI was easy to understand for a new or more casual player still getting to know the collectible card game genre.
Another principle I started to explore a lot more deeply was the evolving ergonomics of phones, and moving a lot more interactable elements closer to the bottom half of the screen to make it easier to tap. This project also marks my using of "color boxing" (creating wireframes with colors and higher fidelity) to better impart my vision, as well as using Adobe XD to create animated prototypes.
Reusability and modularity was also very important to me, as we had a robust data analytics team and I wanted to make sure we built prefabs in way that could leverage A/B testing easily to enhance our learnings.
When I first started, the game scene was still pretty rough and using all programmer art.
While simultaneously exploring the future UI art style for the game, I sought to clean up and improve a lot of things. I'm particularly proud of the glowing borders around locations to help show who is winning there. Explorations on how to display the turn timer, number of turns remaining, and playable zones can also be seen above.
Lots more visual refinement and looking much closer to the eventual shipped UI. I also started defining states of the End Turn button, including what it looks like as time starts running out.
A couple of font experiments that I put together as we were still figuring out what fonts to use in the game. I created a Photoshop template that let me easily export images to view on my phone, where I tested fonts for readability, aesthetics, and localization.
What the Main Menu, Collection Menu, and Missions Menu looked like before I started.
Some of my first redesign explorations of the Main Menu. This was challenging because we didn't have a concrete vision on how we intended to divide game modes up or what their requirements were.
Some of my first UX stabs at the Collection Menu and viewing a Card's Details. I did extensive research and many iterations on deck building to figure out a system that would be intuitive for new players.
The Card Details screen also went through a lot of iterations; at first, I had a lot more emphasis on navigating between the variants of a card that you owned, but this proved to be a much more secondary action, which gave rise to the Variants Menu seen on the left.
Snippets from my interactive Adobe XD clickthrough showing the Collection Menu, submenus, and Deck Selection. I love motion design and started concepting how I wanted the menus and UI objects to animate as you interacted with them.
More snippets from my interactive Adobe XD clickthrough showing various cosmetics menus, including Avatar and Card Back selection. One idea that was scrapped was the idea of collecting game boards, and at the time of matchmaking, one player's board would be chosen and they would be the "home" team.
Some more wireframes of various menus: Missions, Main Menu, and Matchmaking. I made a huge effort to create UI elements that were modular and reusable, which was helpful as the game design shifted quite a lot.
Some UI art explorations on the main menu in tandem with various game design changes. In the first two mockups, we had a concept of Tiers or Leagues, where the player needed a certain score to be eligible to enter.
