DEVELOPER DIARY DECEMBER 2017

Welcome to the fourth of our ‘Developer Diaries’, keeping you informed about the progress of Reality Clash and the latest updates from our developers on the game.

For this developer update we wanted to focus on the User Experience and User Interface, moving from a Game Design Document, through to an interactive prototype.Before we begin what do we mean by UX and UI? At the most basic level, User Experience (UX) is the experience that an individual has as they interact with every aspect of a game. User Interface (UI), on the other hand, is a series of screens, pages, and visual elements – like buttons and icons – that you interact with. UI is about visual and information design around screens. UX is about the complete experience.

The Game Design Document (GDD) is a document that captures all of the features and mechanics of the game.Before any coding begins, we extract the key information from the GDD and create a visual flow of the entire game.

Using www.draw.io we defined the flow for each part of the game as defined in the GDD. A key of symbols was defined to aid user navigation through each screen; with each navigation, decision and interaction point being clearly defined.

The next step was to share, discuss and refine each flow diagram with all the project stakeholders. We iterated each flow diagram approximately four times over the course of a month. Flexibility and iteration is a key factor at this point, as you move from words on a page, to a more meaningful user experience.

Our next step was to rapidly move beyond these flow diagrams to interactive demo, for this we chose to use Adobe Xd. http://www.adobe.com/uk/products/xd.html

Xd allowed us to rapidly prototype and test the UX at an artist/designer level without additional code support. It was also at this point that the wireframing of each screen began. These wireframes will be the starting point of all future UI tasks, that is the placement, consistency, scale and priority of visual information across each screen.

At this stage we look only at functional design rather than the look and feel. Again, this allows us to share and iterate a functional prototype to ensure all behaviours met design expectations but with minimal visual distraction.

Functionally we now know and understand how the game will behave, having completed the first important steps of defining the user experience. In future diary updates we will cover what comes next; the refinement of each screen’s wireframe, the UI design and the application of the games’ art direction. This will bring the game to life and make it look beautiful!