Making Game UI Easy
Target: GameMaker Studio
​
​​​​My Role included:​
-
Defined use cases
-
Comparative research
-
Wireframes, mockups
-
Full documentation
Problem: Game UI could only be implemented through code, locking out inexperienced Users and preventing quick prototyping.
​
Solution: ​Launched UI Layers & Flex Panels - front-end tools to rapidly create menu interfaces and preview changes in-editor. With flex panels, menus also scale with the game's window size.
Design & Communication
-
Wrote initial pitch & design documents for these features. I would regularly present pitches and design updates to key stakeholders for approval.
-
Updated regularly as a living documentation. This was used by other designers to create high-fidelity mock-ups of the IDE.
-
Regular point of contact for UI designer, developer and QA, providing context for their work and adjusting designs for system constraints.

UI Layers at release

Early wireframe of UI Layers

UI designer's mockup based on design documents

UI Layers at release
Comparative Research
​​​​​​
-
Flex Panels were a new tool some were unfamiliar with, so I identified real-life game examples and visualised key behaviours our Users would benefit from.
-
When Yoga was integrated to ease development, I helped demonstrate CSS behaviours & the framework’s specific quirks.
-
I researched existing examples of flex box tools in web design, game engines, etc. to see how complexity is sacrificed to be more beginner-friendly.

Example of how flex panels can organise game UI

Visually defining flex panel's components

Demonstrating how Stretch to Fit impacts a contained asset

Example of how flex panels can organise game UI