INTRODUCTION
Super Auto Pets (also referred to as SAP) is an auto battler game developed by Team Wood Games and released in 2021. There is a desktop version of the game available as free-to-play on Steam, as well as mobile versions of the game available on both iOS and Android.
I chose to do a case study on SAP to see what potential improvements could be made to the user's experience of the game.
All screenshots captured for this case study are from the iOS version.
1. LOG IN
Original
Redesign
Areas of Improvement:
The first thing that struck me is that there was no CTA - all fields and buttons are the same color and draw the users attention equally. To remedy this, I kept the vibrant orange for the primary action (logging in), and made any secondary actions a shade of blue similar to the background, but bright enough to stand out.
The next change that I made was adjusting the opacity of the email address and password text boxes, as well as the filler text within them. In the original, the filler text is the same as all of the other text on the screen, whereas the redesign makes it clear that they are filler text. I removed the word 'Enter' from the beginning of the prompts as I felt this was implicit.
Finally, I worked on small changes to the formatting such as making each button text the same size as well as writing all sentences in title case for consistency.
2. CREATE ACCOUNT
Original
Redesign
Areas of Improvement:
For this screen, I decided to do some testing to see what response the user would get when they've made an error. As shown in the screenshot, a small text pop-up appears in the top left corner of the screen showing the error message. The example I captured reads "The specified string is not in the form required for an e-mail address" due to the poor formatting of the email inputs.
I thought that this error message was a bit wordy and contained language the average user might not understand (i.e. "string"), so I shaved it down a bit. It also pops up and disappears after a few seconds - because it is small and dark, I thought users might not even notice it before it dissipates. I made the error text a larger size, with no black background, and would leave it at the top of the screen until the user submits a new attempt. The final change I made in relation to the error message was highlighting the fields where the error is occurring in red.
Some minor changes include making the submit button a CTA and increasing the width of the text input boxes so that they would be the same size as ones found on the login screen.
3. SETTINGS
Original
Redesign
Original
Redesign
Areas of Improvement:
The first change I wanted to make to the settings screen was to add a visual indicator in the navigation bar so the user would know which page they were on. The nav bar and the back button were placed on strips of black in a way that almost makes the screen look unfinished. Settings are the only area where the black bars appear, so I replaced them with the background image to maintain consistency.
I also noticed that adjusting the audio felt strange. Typically applications will use a darker color to indicate that the bar is being filled, and a lighter color to indicate it is being emptied, however this is reversed in the SAP app. I swapped the dark and light colors and felt it was more natural to adjust the sliders this way.
For finishing touches, I adjusted some spacing, made words title case, and altered icon sizes so they would match.
4. HAT SHOP
Original
Redesign
Original
Redesign
Areas of Improvement:
When I was using the app, the placement of the scroll bar immediately jumped out to me. Having it at the top of the screen not only causes the user to place their hand in a more unnatural position, but the rest of your hand is also blocking the screen while you're scrolling. To fix these issues, I chose to move the bar to the bottom of the screen.
I also felt that when a user scans the screen, its difficult for them to quickly asses which hats they own versus which they don't have access to yet. This is why I decided to add some light overlays on hats which the user doesn't own yet.
The last major change I made was putting the user's point balance in the top left corner of the screen as this is typically where I see currency placement in HUDs. Other than that I made some formatting changes to the cards that displayed the hats for sale - I felt the turtle image was taking up space inside the card without adding any value, and I wanted to put the hat titles inside the cards to reduce some of the clutter.
I then reworded the buy prompt and added a CTA to it, and added the user's point balance to the top left for easy visualization.
5. PACK SELECTION & OVERVIEW
Original
Redesign
Original
Redesign
Areas of Improvement:
On the original pack selection screen, the instructions for the screen appear in a white text box in the bottom right corner. This style of text box doesn't occur on any other screens and isn't very noticeable at first, so I decided to put the instructions in plain text at the top of the screen instead.
Like on the previous hat store screen, I thought it would be hard to tell which packs the user owns with a glance (especially if more packs are added in the future) so I added an overlay to those that need to be purchased before they can be selected. I also chose to add a button to buy the pack as it didn't feel clear how to do so on the original screen.
The first thing that jumped out to me on the pack overview screen is how cluttered the rows felt. The text descriptions were quite small and everything felt a bit squished. To remedy this, I made it so that the pack overview would load with just the image and header information displayed, and upon clicking a row, a description for the animal would then be displayed.
6. ARENA SELECTION
Original
Original
Redesign
Areas of Improvement:
In the original version of the screen, the button prompt will switch between "play against own pack" and "play against all packs" when clicked. In the redesign I chose to make both selections appear on the same screen, with an overlay placed on the inactive button. Other than this, I did small formatting changes such as switching the words to title case and adding some white space to give the prompt more breathing room.
TESTING & REITERATION
Once the updated screens were complete, I asked several participants to study them and then conducted interviews. This resulted in two screens needing to be reworked due to usability issues that were uncovered during testing.
1. PACK SELECTION
Pack Selection Redesign v.1
Noted Issues:
Overlay on view pack button makes it appear as though the user cannot view the pack before buying.
Buy button is clunky and does not follow traditional microtransaction designs.
Pack Selection Redesign v.2
Solution:
I removed the overlay from the view pack button to encourage users to check out new additions. I also chose to remove the buy pack button entirely and instead a buy prompt would be found in the pack overview screen if the user did not own the pack being viewed.
2. PACK OVERVIEW
Pack Overview v.1
Noted Issues:
Users would want to see descriptions for animals at a glance as the packs contain many animals and it would be frustrating to have to click each row to read the description.
Pack Overview v.2
Solution:
To avoid making the description text too small or have the rows be too cluttered, I decided to increase the width of the pop up. Now that I had larger rows, I decided to section them off with the left half being the overview info and the right listing details.
Originally I had all of the detail text written in white, but this made it hard on the eyes. I elected to color the levels in SAP's primary color, attack modifiers in the same gray as the HUD's fist icon, and health modifiers in the same red as the HUD's heart icon. I think these changes increased readability as well as the user's ability to quickly glean information.