Building a network of community powered sites to host and share files

Challenge

In 2014, I had to convert the basic Joomla site for Just Cause 2, into a fully fledged community site with various communication tools, such as private messaging, forums, live chat and commenting. The main attraction had to be the mod database, which would have extensive search filters, images, videos and a rating system for uploaded files. The site would have to become a network and cater for many more games.

I noticed a few small communities that were struggling to find a free site to host their 'mod' files, which would range anywhere from 2mb to 100mb, leading to frustration among those who wished to download files being hit with bandwidth exceeded limits. To be successful I needed to deploy a fast server with plenty of storage and users had to be able to upload their files faster than the competing sites.

Plan

Using WordPress as a platform, I started by designing my own bespoke theme, which could be adapted for many games. I wanted each site to look and feel the same in terms of layout and functionality, but then have its own colour assigned to it with its unique artwork to clearly define the game it was focused on.

I would install various plugins to achieve the functionality I wanted then style them completely to using Materialize CSS framework. Backend PHP work involved editing and manipulating plugins to behave exactly how I required, filling in the gaps of functionality that the plugin did not natively provide.

Inspiration

VGM members are mostly teen and adult males aged between 11 and 35, with their common interest being in video games, from this I can take away that they will be slightly more tech savvy than the average user.

I wanted to create an interface that felt familiar to them, and so I looked to popular platforms such as Steam and GOG Galaxy for inspiration, these were game launchers that most likely 99% of users would have installed on their system and already use every day. Mimicking layout based on this would prove to work effectively, the display of game covers bares resemblance to mod tiles.

All three sites below have important navigation on the far left, this I think is a great modern trend as screens only get bigger. It really maximises screen real estate allowing content to sit centre, YouTube is the best example of this.

Solution

I sketched a few layouts and experimented with what I thought would work best, using all the screen real estate I was inspired by YouTube’s thumbnail style layout, which many of my members were accustomed to. I then coded the entire theme and placeholder elements in pure HTML and CSS, like a live mock up enabling me to test its responsiveness on mobile phones. I really wanted the site to look and behave more like an application rather than a website.

Once the theme was complete, I began installing WordPress and all the required plugins, ensuring they all worked in tandem.

Current design

Eventually the design evolved and I created the current layout. I wanted the sidebar on the left to contain the 'games' own links that separated it from VGM and overall pages such as the forums.

Using Adobe XD, I created a more updated version of how I wanted everything to look, this helped me nail down the proportions of the sidebar while managing to fit six tiles in a row on a 1080p screen.

Results

Members have loved the new update; the page load speed has plummeted from 6 seconds to just under 3 seconds which is a huge advantage. The new design and layout are instantly familiar since YouTube has popularised the left sidebar. Overall, I think many gamers also preferred the darker tones that resemble their PC Gaming platforms of choice.