The web design for the smartphone and tablet game, Vainglory, is a great example of how to sell a product online. There are some advance techniques at play here, as well as some amazing visual design.

Developed by Super Evil Megacorp, Vainglory is a MOBA (multiplayer online battle arena) designed specifically for mobile touch enabled devices.

In a world where “hardcore” gaming is almost 100% exclusively for PC and console gamers, Super Evil Megacorp have a different idea:

”We challenge the notion that touch screens are for harvesting crops and slicing fruit. Secretly, tablets are all deadly weapons waiting to be put to use.”

Super Evil Megacorp is determined to shatter preconceived notions about tablet gaming and they seem to be doing a good job given that they have the biggest mobile-only eSports tournament, giving out $150,000 in prize money.

For the purposes of this study, I will be mainly focusing on the Game page.

Meet the Designers

With each Learn from Great Design, I do as much research as I can to learn more about the company behind the website and, where possible, find out more from the designers. Often, the designs are outsourced to an agency or an individual freelance designer rather than from an in-house team.

The Vainglory site was designed by Basic, a design agency based in California and luckily for us, they’ve written a case study on the work they did for Super Evil Megacorp.

“Through quantitative and qualitative research, talking to the team behind the game, and playing the game ourselves, were able to learn as much as possible about the gamer community. During this process, we identified a few things”

This is music to my ears and the most important take-away from this study. The design team at Basic immersed themselves in the world of Vainglory, including, most importantly, learning “as much as possible about the gamer community”.

During their research, they discovered six key aspects to focus on that drove the design:

• Two User Types: “There were two key gamer types that we would need to speak to and connect with: new gamers that wanted to learn more about Vainglory, and returners who were seeking updates, news, and community tools.”
• Portray Realism: “Vainglory is what Apple considers to be the best example of gaming graphics on a mobile device. While competitors advertise unrealistic representations of their games, we realized we could differentiate and drive consideration by bringing realism to our efforts with a “what you see is what you get” approach.”
• Community Matters: “There are many MOBA gaming options available and gamers invest a lot of time and money into them. With this in mind, we wanted to reassure gamers that Vainglory was a well established platform with a large community that is growing everyday. Along with this, we set out to connect Vainglory players with each other.”
• Mobile First: “Using analytics (as well as playing the game), we realized approximately 85% of the site’s traffic was coming from the in-app newsfeed during game play. Because the app is mobile and ‘designed for touch’, we determined the website, UX strategy and technology should be as well.”
• Glorify the Heroes: “Early on, we realized that players choose characters for various reasons. Characters are also a key revenue generator for Vainglory. With this in mind, we made it a point to present heroes in a way that showcases their unique characteristics through beautiful graphics and video that highlight their skills, story and personality.”
• Simple is Best: “The world of MOBA gaming is complex. We realized that we needed to simplify things in order to properly showcase Vainglory. To do this, we established a site architecture that supports both discovery as well as direct access to key pages. We also made the content easier to consume by reducing the page count and combining information.”

Constraints create a clearer vision and puts you on an easier path towards creating great design. The research Basic have done here has helped put them on the right track.

Know Your Audience

A sign of great design is when it’s clear the designers deeply know the target audience of the website they’ve designed. Speaking directly to a specific audience with language they understand can be the difference between nice design and great design.

The Vainglory design team is clearly aware of this.

Trying to appealing to everyone will only result in a message that doesn’t appeal to anyone.

You want people to think you’re reading their mind and the only way to do that is write using the exact words they use themselves.

Imagine if they targeted this game at everyone. No “hardcore” gamer wants to play a game that tries to attract 7 year old kids or 60 year old grandparents. In fact, that would turn them off from even downloading it. They would close the window and say, “this isn’t for me”.

Basic’s research found two types of user:

“There were two key gamer types that we would need to speak to and connect with: new gamers that wanted to learn more about Vainglory, and returners who were seeking updates, news, and community tools.”

Copywriting

Now that Basic know the Vainglory audience, they can write copy that specifically appeals to them and gets them excited about the game.

Take this example about the technology behind the game:

“Immerse yourself in a vivid world with ultra-high fidelity graphics at 60 frames per second. The MOBA perfected for touch boasts sub–30ms control responsiveness with 1.3 million polygons in the game map!”

Only serious gamers know what “60 frames per second” and “sub–30ms control responsiveness with 1.3 million polygons in the map!” mean. They’ll also be the only ones to know what a MOBA is, so much so, they don’t even need to let visitors know it stands for multiplayer online battle arena.

Risk Reversal

Everything about this design is of course trying to express the excitement and the fun of the game but there’s also an advance tactic at play here known as risk reversal.

When you’re talking to serious gamers, they’re going to be hesitant about a “hardcore” game on smartphone and tablet devices because they just don’t currently have that association. Games on mobile devices tend to be thought of as casual, but it is changing.

They’ll be asking: “Is this for real?”, so you better believe they need convincing.

“VAINGLORY IS A FREE TO PLAY MOBA PERFECTED FOR TOUCH”

“Outplay real opponents in this deep, uncompromising real-time MOBA”

The key words here are “perfected for touch” and “deep, uncompromising” to catch the attention of the gamers who typically see mobile gaming as an inferior experience.

One way to build trust is to highlight the experience of the people on the team.

“Dive into intense MOBA action by developers formerly at Riot Games & Blizzard Entertainment”

Riot Games is the development team behind the biggest MOBA in the world at the moment, League of Legends, and Blizzard have their own successful MOBA called Heroes of the Storm as well as a rich history of creating fantastic games. All series gamers will be familiar with these two giants.

Testimonials

Testimonials are a proven way to help build trust and help convince people to download and play Vainglory.

Top of the list is an Apple Design Award and impressive words from Apple:

“Vainglory is selected as an Apple Design Award winner because it delivers beautiful, high-fidelity graphics and animations, offers an incredibly polished and immersive experience, and enables a fast-paced, endless multiplayer experience on iOS that’s all about the highs, lows, excitement, anticipation, friendships, and competition.”

Super Evil Megacorp even had the opportunity to demo Vainglory during an Apple keynote event with Apple even creating a dedicated US TV ad featuring Jimmy Fallon and Justin Timberlake playing the game.

Apple seem to see this as a big opportunity to bring more serious gamers into mobile gaming on their devices.

As good as it is to get Apple on board, testimonials from gaming industry experts like IGN are more powerful to sell to the more serious gamers:

“This is one of the best multiplayer experiences on mobile. Vainglory is a totally legit MOBA experience, available any time in the palm of your hand.”

Visual Design

Vainglory is definitely in the high-end bracket of graphics and visual design in the mobile gaming world.

Looking back at one of the six key aspects Super Evil Megacorp identified at the start of the project, they wanted to “glorify the heroes”:

“Early on, we realized that players choose characters for various reasons. Characters are also a key revenue generator for Vainglory. With this in mind, we made it a point to present heroes in a way that showcases their unique characteristics through beautiful graphics and video that highlight their skills, story and personality.”

Characters are integral to their business model, with a select few characters available for free and the rest only playable as in-game purchases.

Not only are the characters important for the business model, they’re also a key part of a game like this as they all have different play styles. Choosing a character in Vainglory dictates how you will play the game more than anything else.

The individual hero pages give you more information about them and is probably the most interesting looking design. The artwork is beautiful and the giant hero images really bring the characters to life.

Interactivity

Games are interactive so it makes sense to use interactivity on the web to bring people into the world of Vainglory.

That’s exactly what Basic have done with the part that makes the most sense. Here’s a video of the map exploration, where you drag the map around and find out more about key locations:

They’ve certainly fulfilled their goal of glorifying the characters. From the “Meet the heroes of Vainglory” screenshot above and the video of the play styles interaction below, the characters are given the stage they deserve.

Game On

I probably used to be what is known as a hardcore gamer myself, until I suddenly became terrible at first-person shooters overnight. I don’t know what happened!

I now mostly play games on mobile devices which makes me an interesting case study because Vainglory’s marketing has worked on me and now I’ve started playing it. Who knows how long I will keep playing it for but the website has definitely done the job.

The Importance of Research

We’ve learnt that getting into the minds of a website’s audience makes it much easier to create great design and Basic did that to great effect for Super Evil Megacorp and their game, Vainglory.

Source: Inspect Element