We started the project with a kick-off meeting to discuss the needs. World of Tanks is hard to get into for new players. The game is extremely complex and detailed, and there isn’t much of a tutorial, so a lot of new users drop off after the first battle or two. We needed a website with a series of tutorial videos to direct new users to order to ease them into the game. Videos needed to cover basics as well as advanced techniques so that users could grow with the site. Launch time frame was summer of 2017.

GATHERING REQUIREMENTS

Talk with stakeholders and identify necessary elements for application, including timing, features, copy, legal requirements and approvals.

We started the project with a kick-off meeting to discuss the needs. World of Tanks is hard to get into for new players. The game is extremely complex and detailed, and there isn’t much of a tutorial, so a lot of new users drop off after the first battle or two. We needed a website with a series of tutorial videos to direct new users to order to ease them into the game. Videos needed to cover basics as well as advanced techniques so that users could grow with the site. Launch time frame was summer of 2017.

We identified the primary users as newcomers to World of Tanks, secondary users has experienced users who are looking for more advanced techniques, and tertiary users as advanced users who are fans of anything World of Tanks. We utilized already established personas for the Wargaming brand to flesh out what each tier of users would get out of the site.

IDENTIFY USERS/CREATE PERSONAS

Decide who the primary, secondary, and if needed, tertiary users for the application. For larger scale initiatives, create personas to identify typical users and their behavioral patterns, needs and dislikes.

We identified the primary users as newcomers to World of Tanks, secondary users has experienced users who are looking for more advanced techniques, and tertiary users as advanced users who are fans of anything World of Tanks. We utilized already established personas for the Wargaming brand to flesh out what each tier of users would get out of the site.

The primary task for the site is to watch videos and learn how to play the game. We wanted the site to offer more.  We added a “Library” section that would hold information about the game not found in the videos, and a museum section that would hold historical videos about the tanks themselves, which creates alternate use cases for the site. The site also incorporates a reward system tied to in game rewards to encourage watching of all tutorial videos.

IDENTIFY CRITICAL AND NON-CRITICAL TASKS

Decide what critical tasks the application needs to accomplish for its users, and what non critical tasks or features can be a benefit to the application and its users. Develop work flows for these tasks.

The primary task for the site is to watch videos and learn how to play the game. We wanted the site to offer more.  We added a “Library” section that would hold information about the game not found in the videos, and a museum section that would hold historical videos about the tanks themselves, which creates alternate use cases for the site. The site also incorporates a reward system tied to in game rewards to encourage watching of all tutorial videos.

We already had the idea for a simple webpage with a list of videos, but the brand manager and I came up with the concept for an interactive campus map. I had previously come up with this idea for a project at Sega working with this same brand manager, so we knew it could work. I built out a set of wireframes showing the flow the users could take through the site.

WIREFRAME/ROUGH MOCKUPS

Develop wireframes in tools such as Balsamiq or Fluid. Develop rough mockups to add additional design suggestions (colors, fonts) traditionally not shown in wireframes.

We already had the idea for a simple webpage with a list of videos, but the brand manager and I came up with the concept for an interactive campus map. I had previously come up with this idea for a project at Sega working with this same brand manager, so we knew it could work. I built out a set of wireframes showing the flow the users could take through the site.

With the wireframes approved, I moved into development of a prototype. For this project I was able to handle the wireframe and prototype process with the same tool, Balsamiq. Click here to download an interactive PDF prototype.

PROTOTYPE

Develop functional rough prototypes in tools such as Balsamiq, Axure, Adobe XD or in working code if time allows. Prototypes should work through critical and non-critical tasks.

With the wireframes approved, I moved into development of a prototype. For this project I was able to handle the wireframe and prototype process with the same tool, Balsamiq. Click here to download an interactive PDF prototype (best viewed on desktops).

I presented the prototype and rough mockups to various groups within the company for review. I made sure to get it in the hands of people close to the game and those less familiar to be sure to get a wide range of feedback. In other projects, I’ve had focus testing agencies do formal testing on anything from art styles to functional working applications.

FOCUS TEST

Test prototypes and mockups for issues in design, functionality, and ease of use. Can be internal informal focus testing, or traditional agency organized formal focus groups.

I presented the prototype and rough mockups to various groups within the company for review. I made sure to get it in the hands of people close to the game and those less familiar to be sure to get a wide range of feedback. In other projects, I’ve had focus testing agencies do formal testing on anything from art styles to functional working applications.

FINAL MOCKUPS

Develop final designs based on requirements, feedback, testing results, and branding.