Subway GameZone - Work in Progress

Summary This was a client-specific game created for Subway. A preview of the Subway GameZone can be found here: Subway GameZone

Marketing Concept Win probability was a feature the company had been aspiring to integrate into the products. Marketing created the initial concept and presented to clients. The image shown is the initial marketing concept. Once the mock was handed over to the product development team, we began recreating and restructuring elements to improve usability. This process began with sketches.

Sketches I began the process of restructuring elements by creating sketches of a general layout of elements. This solution needed to be responsive so I needed to account for breakpoints between desktop, tablet, and mobile versions. With each breakpoint, the display of elements needs to be consistent, but obviously as a user moves down to mobile dimensions, elements will need to display differently.

Creating Wireframes Once requirements were established and sketches were completed, I began creating wireframes. I had to account for responsiveness so wireframes were required for desktop, tablet, and mobile views of the page. There were also tabs contained in the page with different content that needed to be established for responsiveness.

Click on the image shown to view other wireframes.

HTML/CSS Template While working with another interactive designer, we created the HTML/CSS template for developers to integrate. Using the Highcharts plugin, I created the donut chart showing win probability and the game timeline showing significant events throughout the game.

Asset Creation The client requested to have a 3-dimensional field for the game status. We did not have a graphic that was large enough to handle a responsive site so I was responsible for creating the high-resolution version of the field and pitch tracker graphics. Shown is a screenshot of how they look in action.

Overview This project is still a work in progress, but will be launching soon. I am currently helping to support design clean-up and general maintenance. A preview of the Subway GameZone can be found here: Subway GameZone