about

The Project

When developing a new version of the main product site Totalwar.com I was tasked with designing and creating a series of Pages. There would be one of these pages per product. These pages had to give information on the game, but also be a way of generating excitement in the title and of course ultimately converting the view to a sale.

The Challenges

The main challenge was building an exciting page that also got the information across. It also had to fit into the current look and feel of the site, based on the new style guide. The last challenge was that it had to incorporate the sales widget from humble bundle.

Skills used

I mainly used design and frontend skills in this development, with some Wordpress when doing the implementation. The bulk of the design work was carried out in Sketch, with some artwork done in photoshop.

Work

I started off by looking at some other product pages and talking to people that were on the brand team into what they wanted to see. This page was only meant to be a temporary interim between the current site and when we did a complete redesign. For that reason, I didn’t spend a huge amount of time on it.

I started by designing a basic layout of blocks, using Wireframes. The first section used some of the amazing key art for the game as a way of getting users interests. The top section I decided that a Trailer saids 1000 words, so I put the trailer front on the top block. I also added in the logo and a small description to peak the user's attention.

The next section would be a media gallery. This is it is important for gamers to see screenshots of the game, as that is going to help them find out more about how the game plays, and what is involved this will cause them to want to learn more.

After that, I used a general text section to allow the user to discover more detailed information about that game. I then completed the page with the sales point.

The product page was basically designed to be a journey to get the user hooked into the games proposition and ultimately guide the user through to payment.

Using Photoshop I created the assets that would go into each of these sections and started building out designs for each of the individual product pages. This was important and it meant that game assets could be customised to the layout of the page making sure it was shown off at its best. The other reason that this step had to be done is that all assets generated have to have brand approval.

Once the designs had been completed, I then built out the page into Wordpress. Making use of the Advanced custom fields Wordpress plugin to allow me to build into reusable modules. I had to build it within the current architecture of the site this meant that I used SASS in order to generate the styles.