Overview
Playing Marvel Snap and identifying the core game loop. Deconstructing the home screen and identifying 3 pain points and providing solutions for the same and what KPI’s they’d affect.
My Role
UX designer
Design Process
Define
About the game
MARVEL SNAP is a fast-paced card battle game. In the game, you will be able to choose members from the Marvel multiverse to build your own super hero team. MARVEL SNAP unleashes the complete MARVEL Multiverse into a fast-paced, adrenaline-pumping, strategic card battler.
Core game loop
Marvel Snap’s core gameplay loop is all about playing more matches to get Boosters and Credits. These allow you to level up your cards, which allows you to unlock more cards. The in-game purchases don’t do much for progression, so it really is a game that rewards you for playing rather than paying.
Requirements
- Increase Usability.
- Improve aesthetics.
- Easy Navigation.
Research
Pain points ( Home )
- Navigation menu
- The bottom Navigation bar ideally has 5 options Shop, Collection, Main, Season pass, News.
- But each of the option can only be identified on clicking them.
- Also the icons that have been used are not universally recognized, so the user might face a lot of problem while starting of with the game.
- Yes the user will learn it by using it 100’s of times ( Which one will ) but initially would face a lot of problems with it.
2. The News option
- The news option mainly shows the Inbox, news and the latest videos of the game.
- But it has actually been repeated twice.
- The main menu is already super packed and I don't see the use of 2 news option with the same motive behind it.
- Unlike the Season pass option which also has been repeated twice but both have different use cases. The one on the top indicated the progress as well.
3. Main slide indicator
- The main menu has an image in the center indicating parts of the game and news or new updates.
- But what users don't notice is that there are images as a slide function which the user don't even notice until an other image comes up after delay.
- A indicator for the slide is what is missing here.
Twitter Survey
Because I only had 2 days to complete the task I had to get the survey answers quick, I posted a question on twitter and the community didn't fail me.
The replies came pouring and these were the some that I think were accurate.
Answers
Pain points ( In- game )
- Location of the End turn and Surrender options
- Fits law teaches us that targets should be easily accessible.
- The surrender and end turn options are are placed in a bad spot and most of the users tend to click them by mistake.
- The Surrender button are is misplaced for the left handers and the End turn for the right handers
- This also happens in the case of the navigation bar on the home screen where the news and shop options are placed.
2. Atrocious timer feature
- The timer feature in the game is just bad.
- People don't tend to notice the timer feature that is right on the end turn button.
- The light purple moving out from the darker one is not a visible. It took me 3 days to even find out that the game had a timer in it.
3. Who’s turn is it to play?
- The highlight for the user who has to play next is also a bit confusing.
- A small beam of light on the frame of the name is what indicates it.
- Though the user gets a hold of it with multiple use. It is a bit confusing at first.
Ideate
User flow ( Starting a game )
User flow to start a game
Sketches
Sketches of the home screen
Wireframes
The home and the In-game Wireframes
Solution explanation
Home page
- The problem faced was that the user has to click the Bottom nav bar option to identify. But by naming each option the user can get an idea before clicking it and intern it also makes the navigation smooth.
- The problem was that the news option has been repeated twice even while having the same function. The home menu is already a bit intimidating to the user, so by removing the top news option and rearranging, it looks a bit cleaner now.
- The images in the center of the home page is actually slider and on swiping other images come up. But there is no indication for that. So by adding an indication the user now is able to or knows that he should swipe to see different images.
In-game
- The problem faced was that user tend to click the retreat and end turn buttons by mistake because they have been a bit misplaced. Keeping this in mind, I decided to use a grid system and use 35px as margins. Now the user would not click the buttons by mistake.
- The problem faced was that the timer was not visible to most of the users and only after playing it many times would the user get an hang of it. So the solution I did come up was to bring in a timer when only 20 sec would be left on the clock.
- The problem was that the user does not get to whose turn is it to play next. So the solution was to to create a pop up indicating whose turn it would be next.
