Designed for Success

Today I will be talking about the successful mobile game product titled Clash Royale, from game developers Supercell. Clash Royale is a strategic, card based, player vs player brawler. You collect troops (cards), setup your team (total of 8), and fight against your opponent. The main objective of the game is to destroy your opponents towers (total of 3), whoever ends up destroying the most towers wins the match.

If you end up winning a match, you are rewarded with a random chest (silver chest, gold chest, giant chest, etc.). Chests in this game reward the victorious player with cards, gold, and gems. Depending on the type of chest you receive, it will provide either basic, rare, epic cards or a combination of all. There is also a waiting time for the chests to open, if its a low end chest it would take just a few hours, if its a high end chest it would take up to an entire day to open.

Cards: Troops used to brawl and expand your inventory. When you collect enough troops of the same type, you can upgrade them to a higher level making them stronger.

Gold: Used for upgrading cards to a higher level.

Gems: Used as in game currency to buy chests, upgrade troops, or open a chests ahead of time.

You are also rewarded with crowns! That specifically reflects on how many towers you were able to destroy in the previous match. For example, if you destroyed one tower you would be rewarded with one crown, if you destroyed all three towers you would be rewarded with a total of three crowns. What is the point of collecting crowns? Well when you collect a total of 10 crowns, you are granted the right to open the crown chest resulting in a bigger reward of card quantity and rarity.

The reason for explaining all of this was to orient you about the product, before talking about its design. The design of this product contributes to its success, a great idea is just an idea if you don’t have the right team to design and develop it to success. Without further delay, I will be talking about its usability and accessibility behind the product.

Visibility & Feedback — System should make it clear what it is doing. First screen shows it is loading, it is currently at 50%. It’s important to make it clear what’s happening, showing progress reduces friction for the person waiting for his app to load.

Navigation Bar — A set of buttons or images in a row that serves as a control point to navigate between screens. This is not only a design for usability, but also for accessibility for people who are color blind. Looking at the second screen at the bottom, the navigation bar is located. Depending on what screen you are in, the navigation bar will emphasize on the icon and name by scaling it bigger.

Mapping — Clear spatial mapping, the content and buttons are arranged in a way thats relevant to each other. This is not only a design for usability, but also for accessibility for people who have vision impairments. Looking at the second screen at the very top, it shows your kings level, gold, and gems. This set are relevant because it is a cycle that keeps revolving, the kings level is gained through experience from upgrading cards, the gold is used to upgrade cards, and the gems are used to buy more chests or immediately open a chest to gain more gold, gems, and cards.

Affordances — Properties or objects in the interface that show it can be used. Looking at the second screen in the middle section, it shows a Battle button and a 2v2 button. You can tell these are buttons for its perception of depth and drop shadow, making it natural to want to click it.

Constraints — Limits to the perceived operation of an action, it is typically a greyed out button showing its disabled. Looking at the second screen near the bottom, it shows a silver chest occupying one chest slot out of a total of four. The three remaining slots are disabled because no further matches have been won, until then they will remain empty.

Consistency & Standards — A grid used to create consistency in the layout. Looking at the second screen, it looks as though its a six column grid. Starting from the top, the free chest and crown chest are divided into 2, the bottom chests are divided into 4, and the bottom navigation bar is divided into 6. Its clear that there is some kind of consistency within this layout.

Memorability — When a product makes you use less of your memory, providing all of the work for you. This is not only a design for usability, but also for accessibility for people who have a hard time remembering things. Looking at the second screen near the top right, there is a section for the crown chest. It demonstrates the progress you have made collecting crowns from your victims, so far I have collected eight out of ten crowns. Two more crowns and I will be able to open the crown chest, this is a good way to have users keep playing the game.

Usability and accessibility are necessary designs in order to ensure success of a product. It is recommended that both design solutions are incorporated at the start of a project, meaning if interviews are being conducted, people with disabilities should also be included. So there should be two types of personas developed, (one with and without disabilities) this is necessary in order to develop two well constructed empathy maps. This process is what helps create a successful product like Clash Royale, a design made for the users, power to the users.