Serious Games UI Research

Tubik Studio designed UI for a Mobile Game for a client. They first of all made a colourless wireframe with every item their design would need. This allowed them to play with layout and aesthetics without being committed to a design based off a particular colour. Designing like this enables a couple of things, firstly it lets segments of the app be designed as boilerplate items that can be reused across different organisations and simply recoloured and re-imaged to suit the new organisation. It also allows for colours to be changed depending on what the client prefers which is what happened with Tubik Studio. (Tubik Studio, 2018)

Designing UI for Serious Games requires a high level of domain knowledge. Thomas Bullard found that age did not seem to have any correlation to how competent the user was while using the software in his study and found that there was a “gradient” of competence across all of the users (Bullard, 2015).

Fitting this into my own experience produces similar results. From prior experience of having tested software and games with different age groups I have found that it is dependent on how easy to use and how fluent the design of the UI is. Bullard also said that having domain knowledge before and during the design of the UI is important and has a huge impact on the usability of the software by the client. Outside of Tesco, it would be important to visit and spend time with business’ existing materials to learn their design language AS WELL AS their actual training materials.

With that in mind, looking at Tesco’s branding on their website and training material gives off a very “Metro” or “Microsoft Design Language (MDL)” feeling, with basic geometry and simplified design (Foley, 2012). To keep it similar and bearing in mind this project will mainly target Tesco, the designs will largely follow their website and existing training design language. Examples follow, but unfortunately due to the fact that Tesco’s training materials are privileged it is not possible to show examples of those here.


The simple shapes and squared off corners are key attributes of the MDL (Tesco, 2019).


This shows the login form, which has the same feel to it (Tesco, 2019). Tesco’s eLearning login makes use of hard corners on the sign in button.

Bullard, T., 2015. Designing a user interface for serious games: Observing differences in user response between gamers and non-gamers within the West Yorkshire Fire and Rescue Service. [Online] Available at:

Tubik Studio, 2018. Case Study: Real Multiplayer Racing. UX and UI Design for a Mobile Game. [Online] Available at:

Foley, M. J., 2012. Microsoft Design Language: The newest official way to refer to 'Metro'. [Online] Available at:

Tesco, 2019. Tesco - Sign In. [Online] Available at:

Tesco, 2019. Tesco Online. [Online] Available at:



Game developer who studied at Solent University with some truly amazing people. Now studying a Masters of Game Design at UCA Farnham. Also Co-Founder of Stack Interactive.

Be the first one to leave a comment!