UX PROJECT: product site

 

To champion the newest video game from the client's studio, we set out to create a unique, immersive site that would get players excited about trying out the new game "Breakaway". The game studio wanted an experience that celebrated the characters, game play, new ways for Twitch broadcasters to interact with subscribers and viewers alike. 

To minimize customers having to sift through a lengthy navigation system, we simplified the experience focusing on a mosaic of news articles that could inform customers anything from new patches to upcoming competitions. These widgets are interchangeable and can shrink or expand to meet needs depending upon device (hand held devices to desktop screens):

 

One of the challenges was trying to skin a video game where none of the visuals had been locked down. Because the game team was constantly tweaking, and reduxing everything from character style to background scenery, we had to take tremendous guesses about what the final approved game would look like. Here is a mosaic collection of quadrants (see above) with some visual additions:

 

 

 

 

 

News pages had to have symmetric layouts that could be repurposed across other platforms, sites, etc. We also wanted customers to be able to keep reading articles without having to backtrack to the main news page, so we always add at least three articles at the bottom of each page so the information keeps flowing effortlessly. 

 

In conjunction with news pages, look for scenarios like a "Home Page Takeover" whereby the characters will do just that...take over the page, as if to invade the real estate. This becomes an opportunity to showcase new characters or new skills while integrating with additional information (other articles, etc).

 

As the site and the game evolve, look for more adaptive personality including stats about the customer as a player or information about opponents or twitch broadcasters:

On the left is a wireframe, on the right, the design is slightly more visualized.

On the left is a wireframe, on the right, the design is slightly more visualized.

Wanna see the site as it looks now? Check out the site and the new game here: Breakaway