The Back Story
Vainglory, from Super Evil Megacorp, is the first MOBA (multiplayer online battle arena) gaming platform made for mobile and perfected for touch. Touted by Apple as having built the best gaming graphics engine on iOS, Vainglory had an upcoming launch of their first Android build and were looking to grow their 1.5 million strong monthly user community. The lead team at Super Evil Megacorp engaged us to help them refine their brand and build an all new Vainglorygame.com.
The team at Vainglory had some big expectations for the direction of their brand. They wanted to better engage and serve their users, as well as establish a design system that was flexible and consistent across their brand marketing efforts. These expectations were what excited us about the opportunity and helped us lay the foundation for our approach for their brand.
Understanding Vainglory and The Gaming Community
In order for us to help Vainglory establish a direction for their brand and digital platform, we needed to immerse ourselves in their world so we could better understand their audience and what they desire.
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:
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.
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.
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.
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.
Designing a Platform to Educate & Engage
The new VaingloryGame.com brings a visual aesthetic to the digital experience that complements the beauty and detail the game exhibits. It inspires new players to jump in, casual players to learn more and dedicated players to delve deeper into game and community news.
When it comes to game websites, most competitors lean heavily towards overly themed design elements and unrealistic portrayals of the in-game graphics and characters. While these are visually stimulating, they're not suited for longevity or ease of use (especially for the client).
For Vainglory, we set out from the beginning to give them a design structure that was highly adaptable for their content needs and portrayed a realistic representation of the graphics behind the game. We also wanted to provide them with a framework that let their content dictate the aesthetic of the site with big imagery and video highlights bringing the site to life.
To facilitate the discovery of content and information for both current and new users, the pages are treated as portals with access to various content types, and were brought to life in a manner that showcases updates and events through a more intriguing execution than competitors in its space. Cross linking and related content strategies are also heavily leveraged to improve the UX as well as for SEO considerations.
'Designed For Touch' & Beautiful Across All Devices
Considering that 85% of Vainglory's traffic is on a mobile device, we designed the site with a 'mobile first' mindset. The site features various interactions and touch gestures that resemble the in-game experience and make browsing the site more experiential as well as familiar.
For the UX, our mobile strategy was to simplify content and make sure users can move between pages and sections with ease across all form factors including mobile, tablet, and desktop devices. For each form factor, we adapted the responsive functionality and overall design aesthetic to ensure business as well as meeting user expectations on usability and load times.
Highlighting the Characters of Vainglory
Because the characters are a key revenue generator and a pivotal part of the game experience, we worked closely with their team to not only bring the characters to life online, but to also establish standards around how they should be presented.
A primary goal for the character section of the website was to make options easy to discover and filter based on "hero" type. To accommodate this, we crafted a visually driven character landing page that displays all characters within the game and also enables Vainglory to push their frequent updates regarding skins, new releases and other information.
At the character detail page level, we made it a priority to set up a framework that enables the user to immerse themselves in the personality and capabilities of each character. The page provides Vainglory with content sections to highlight large hero graphics, statistics and other details about each character.
Bringing the App & Web Experience Together
Within the game, the newsfeed is a critical part of the experience and Vainglory challenged us to make it easier both for users to consume and their marketing team to populate. With this in mind, we set out to bridge the gap between the game app and the web experience.
For the players consuming content, we designed a news landing page that aggregates updates and surfaces them in a manner that can be filtered based on interest. Users can now simply scroll through content in a chronological manner and, when reading an article, a modal overlay surfaces the content in a reading pane above their current location on the site which enhances the overall user experience. This reading pane utility was used throughout the experience which enables Vainglory to push updates and relevant news to any page on the experience.
Promoting the Community and Connecting Players
Community content is heavily leveraged on the new platform through an aggregation portal to help connect players with one another. Reddit, Twitch, Youtube, Vainglory forums, and other social outlets have all been pulled together within a centralized stream to provide users with a utility to view all the "live" content related to the Vainglory game with ease.
Our strategy behind the community page was to not only connect players, but also to show new players that Vainglory is a large MOBA with a very evolved and connected community.