UX Design workout, Improve an existing product, app, game or website.

One of the best ways you can stay on top of your game and fresh is to do the work, but what if you don’t have any work? Make it up! Improve an existing app with the UX Design process. A great way to flex those UX Design muscles is to take an existing product, websites or app you use and make it better. Not because you’re going to send the designs to the company (even though you could) but to get into the process, research, sketch, think, design and see what you can come up with. The best way to learn anything is to do, so today I am going to see how I can improve the user experience of the well know game Plants vs Zombies.

Task: Improve the UX of Plants vs Zombies

Before I jump in and start doodling or taking notes, now would be a good time to plan out my process so I know what I am going to do. What is the best way to look at a game that was very successful at the time? you might think there would be no room for improvement, there is always room for improvement. Firstly I need to do some research to find out about the game and who plays it. Second I will need to play it myself and use the game to see if I can highlight any issues and problems for myself and other users. Then I think I will try come up with some solutions to those problems. By the end of the session, we should have built a better user experience, meaning more enjoyment for the users and potentially more revenue for the developers.

Research – Who even plays this game anymore?

As this game is over 10 years old, I thought there would be quite a lot of information and feedback on the game. All though I found a lot of discussion about the game itself nothing about usability really struck. The game itself has a unique appeal to both casual and hardcore gamers, as well as attacking players of all ages but most leaning towards kids and teens it seemed. During my research phase, I watched some gameplay videos, looked for data about PvZ or its social media accounts, read reviews, looked at some forums posts and read youtube comments. I found interesting data over on Customer-Profile about Plants vs Zombies which gave me a little insight. As well as looking at their social media following on sites like Depp Social or Google AdWords to see what demographics match with Plants vs Zombies keywords.

Overall the game was a pretty big success when it hit the app stores as it had been out on PC for quite some time before so they had time to refine it. I didn’t feel I could learn much more from google or youtube in this case so it was time to jump in.

Test – Time to play

I played the game for over an hour in total, I tried to do things as a user would do and thinking of the questions they would have when presented with a new screen. I tried to play the game as I normally would any game, so I might play for 10 minutes here, 5 here, 30 here, etc. I broke my experience into smaller chunks, I think it might be rare for most people to spend hours playing this kind of game non-stop. Its an app so people could be doing all kinds of things when playing, I think using the app in broken segments was important to understanding user behaviour. Using the app this way actually highlighted some important missing features.

Problems – Apart from the Zombie invasion

Surprisingly I did manage to find quite a few glaring UX issues. My main problem with the game was its confusing user interface and all over the place layouts. The structure of the UI is simply confusing, where the back button will be on the next screen is absolutely anyone’s guess. There is a reason best practices exist, this game shows little care for those practices. Not saying that a game shouldn’t have a unique and interesting UI, but navigations things should be located in places that make sense. If you’re going to use weird objects for navigation at least keep them in the same place and failing that at least make them look the same. Instead of writing a massive article about the issues I think the best bet would be to break it all down into some simple bullets for quicker reading, so here goes:

• Navigation elements change location. The back button is a prime example, it’s all over the shop!
• Inconsistent navigation style. Sometimes we have text on buttons, sometimes its just a potato or zombie hand.
• Confusing User Interface. This sums up to two above, the overall interface is confusing. Sometimes we have text, sometimes no text, a green arrow button, a neon pink bejewelled ad, zombie hand, random rock, it’s all over the place. Then on the opposite side, some buttons that do completely opposite things look identical. On the Leaderboard page on iOS, if you click any of the random objects it opens up windows in the default Apple UI with nothing on it, it’s very disjointed.
• Cannot view abilities when in game. This was one of my biggest issues, As a player who didn’t play for a long time straight, I could have easily forgotten what plants did what. It would be even worse in the later game and imagine what its like when you have a lot of plants unlocked. When you start the game you’d have no idea what on earth each plant would do.
• Advert layout, design and style all inconsistent. I feel like ads where slapped into the game with no user consideration at all. The buttons to skip or close the ad vary in time, shape, size and location. And if you users guess wrong, then whoops! off they go to another app or website.
• Unexpected Advert click result. Some adverts I clicked on go to the App store, others to a website.
• Unclear how to progress. If I click on the adventure I get the message: “Adventure unlocks at 2-2” Whats 2-2? How far is that? at this time I could see over the play button I had “1-8″… which is absolutely zero help.
• No real sense of level progression. Apart from unlocking new plants and it generally getting harder, I don’t see any kind of progression on the menu. If I come back after a break I’d like to know how far into the game I am until completion.
• An ad with no escape. One Ad I got actually had no exit, and I was forced to close the app. Cant get a much worse experience than this.
• Some pages scroll, some don’t. When you go to the Achievements, its fairly obvious I need to scroll. Whereas on the Leaderboard there is no such visual queue, the UI doesn’t indicate at all that I can scroll to my name on the leaderboard seemingly just disappeared.
• Button sizes on small devices. I mainly played on my tablet but I did think to give it a try on my small iPhone5 and it was a little tight. I would say my hands are not massive but fairly manly, and it was a bit fiddly trying to select some stuff and I could easily make mistakes.

Side note: While doing my user testing I did witness a player first start using the game and placing all his plants to the far right, obviously this is the worst method to win the game. This kind of thing could be explained in the intro, but I think a large part of why gaming is enjoyable is you learn. You have the challenge to overcome and understand how to beat it. Not everything needs to be explained all the time, let people learn from their mistakes. As long as its fun!

No way to show what plant does what unless you remember.

Ad layouts and close buttons all over the place.

Solutions – For all plant kind!

My biggest issues where the unclear and inconsistent navigation as well as not being able to check what plants did what while in the game.

• Navigation locations and style. If you want to use a zombie hand for a back button go ahead, but something that is a crucial part of the main navigation you have to keep it in the same place. Users should never be guessing what or where the basic navigation elements are.
  
• Confusing User Interface. I have no issue with creating a really unique UI based on a backyard like in PvZ, but you have to define your design and stick to it. Instead of having such a mix of elements and designs stick to one style of button, text, label, etc. PvZ needs a style guide. The in-game menu also stood out as the “Back to Game”, “Restart Level” and “Main Menu” buttons are all identical and very close to each other, simply adding icons and location adjustment could solve my instant confusion and mistake risk.
• Cannot view abilities when in game. When in the game and choosing my pants to give me a tooltip or option to slide out some more details about the plants. Players who are returning or new may not remember hat all those plants do. Solution image is below.
  
• Adverts. Ensure advert following the same design layout, don’t try to trick users and ensure if they do click they go to the right place.
• Unclear and no sense of progression.  The small text above the main play button just shows 2 numbers, but no real progression. I would like to see a percentage, remaining zombie hordes, gardens left to protect, something like that on the actual home menu. Some users love to complete games or just need to know how much longer until it’s done. It’s always good practice to show users how far they need to go and if done right can be like a carrot on a stick. If you’re going to show me an error that I need to complete something, but give me no way to find out ho far away I am, tell me. “you have to complete 5 more levels to unlock X” for example.
• Some pages scroll some don’t. I understand not all pages need to scroll, but if you do make it obvious. The Achievement page is just that, I can tell stuff is going off the screen. The leaderboard page has a scroll area but its hardly noticeable and very easily missed. either fit your information on one screen or make it really obvious that there is more.

Design idea for a tooltip to display what a specific plant does

The Good – What did they do right?

There is no doubt the game did a ton of stuff right, that’s why it was such a huge hit! The game is very simple and intuitive, it’s one of the most basic tower defence games of all time with the amusing charm of Plants vs Zombies. The object of the game is very clear and how to play it is very easy. There are some very good usability nuggets in this game so I will list a few things the game got right in UX:

• Drag and Drop or Click and place. Giving players the option to play as they wish and controls to caters to all players.
• Obvious Plant and Zombie designs. I have played tower defence games before and understand sometimes its hard to know which defence would counter which enemy. The game does a good job of making it obvious to the player what each zombie or plant will do as well as when a plant is upgraded. If you took a break from the game you may forget, but picking it back up wouldn’t take long.
• Plant cool-down timers. Its very easy to see how long you have to wait until you can plant your next plant, which is good for when you need to make quick decision to sort out those pesky zombies.
• Level progression. This is a very useful quality of life part of the interface to see how much longer you have on this level and when the bosses are coming. It gives players the opportunity to plan ahead.
• Age Verification. For some reason they need to confirm age when loading the app for the first time, I will assume there is some restriction or requirement for this. One thing I liked is that the slider only goes to 30+, this is a really nice touch to simplify some users experience when getting started.

Little easter-egg when you scroll all the way to the bottom of the achievement page.

Conclusion – Was it worth it?

In my opinion, the best way to learn is to do. If you don’t work a muscle it won’t grow and its the same for learning new skills. So if you’re a UX Designer try this method on your banking app, favourite game, music app, school website or whatever else you like to use. Using UX Design methods you can easily come up with User Experience improvements for anything, just take the time to sit down, think about your users, the problems and work on solutions.

If you have any thoughts on this method for practising UX  Design or if you have done it yourself let me know in the comments section below.