Aug 10, 2016

Battalion Site Design

Bulkhead Interactive, the developers behind Battalion 1944, have done a great job connecting with the community and including the fans in the development of the game. The team now needs a platform to share news and updates with their growing fan base.

Battalion Site Design, project thumbnail

Exploring The Homepage

I decided to separate website users into two categories: those who know about the game and visit for specific content, and those who come to the site to learn more about the game. The homepage should cater to both of these users, as it is likely to be the first place they land.

Above the fold refers to the section of the site a user can see before they scroll down the page. This is valuable screen space because it is where many users decide if they are going to invest time into exploring your site, or leave.

Before users scroll down they need to see imagery, have some understanding of the game, and know where to go from here. People consume images much faster than text; many users also don’t take the time to read the content. So, it is important that the image selection supports that message and keeps the user engaged long enough to invest time into the site.

Bulkhead Interactive have some gorgeous character models and in-game art, which is clearly portrayed in Battalion 1944. Although any imagery from the game may be visually appealing, the homepage has an important job (especially above the fold). Consequently, I decided to loop a short video clip depicting the beauty of this game. Additionally, the developers wanted to show off some quotes from people who have spoken about the game. Overlaying quotes means users will be exposed to them as they watch the footage.

Continuing down the homepage, I included large content sections to communicate the developers’ goals for the game. I decided the site should reflect the personal and direct connection the developers have with their fans, which is why each section directly expresses what the developers’ want to communicate with the fans. This accomplishes my original goal of creating an informative, interactive homepage that allows seamless communication between Bulkhead Interactive and the fan base.

Reading from left to right means that we typically scan the page from left to right before scrolling down to find what we need. This is why the button to buy the game is placed at the top right of every page.

Dynamic Content

Through the homepage and information pages users are taught about the game, its history, and its features. The type of user who visits the site for a specific reason is often looking for an update–be that the latest news article, video, or image.

Cards are a great way to communicate information to the user clearly and consistently. They act as an overview or summary for a larger body of content.

Throughout the Battalion 1944 website I used cards for both articles and videos. These will help returning users find the content they want and encourage users to browse and explore more.

The developers pride themselves on communicating directly with their fans. Using developer names on article cards highlights that connection.


Backed by THOUSANDS on Kickstarter, this game is truly powered by its fans. The developers have a duty to their fans and have been directly communicating with them in forums, chats and on Twitter. They have also been updating their followers on the progress of the game. Their new website should complement their dedication and put a spotlight on the content they share, this is why their news articles are particularly important.

The header of article pages is pitch black, both to reflect the branding and to put more focus on the title and featured image or video. The big black region adds contrast to the following white canvas for the article. This contrast allows the author to take complete control and present the space however they like.

The footer is a powerful tool that is often under-utilised in websites. It is a constant element that appears on all pages and so the user knows what they will find there. One important part of this footer is the latest news. For users exploring other parts of the site it gives them another avenue to explore, and highlights what was otherwise hidden in another page behind the main navigation.