top of page
UI/UX Process Example
Archer Danger Phone - UI/UX Leadership & Implementation
Archer Danger Phone was an idle mobile game with character collection mechanics. I was primarily responsible for setting art direction, UX direction and the over-all theming of the game. Here I go through the various steps and process for setting up the UI/UX for the project. For Game Design and a Prototyping example check it out here.
Research & Audience
We partnered with Eastside Games and acquired their Idle engine to increase velocity of development. We studied the Idle game market to see what was working.
We also worked with Fox on audience insights to the type of players interested in an Archer game. We knew that the game had to be a combo vector graphics and filtered backgrounds in look and feel.
Normally I would create player personas as well but insights were limited.
Game Map & Game Theming
Very high level I started with a site map of the game and systems we knew we needed to include. This helped outline core loops and identify clear incentives for the player. It also helped the larger team see the larger picture.
We also explored different layouts: portrait and landscape, 3D depth and character scene placement.
Themes ranged from virtual reality, the actual office space and world of Archer, and Archer hallucinations/dreamscapes.
Wireframing & Prototyping
Software: XD and Sketch
I directed and wireframed out several systems and screens across the project and created both landscape and portrait prototypes to prove out usabilty.
Wireframes, flows and prototypes are then used in quick guide documents for reference with the much larger team.
UI Style Guide & Component Library
I take those UI pieces and elements from wireframes to build out the larger component library in software like XD or Figma. Pieces are exported directly into Unity where I create prefab components that create consistency across all elements on screen.
UI guides are created with do's and don'ts, color pallets, sizes, margins, and key element breakdowns. Rules for window and element interactions.
These guides and components allow my teams to implement and create new screens and elements quickly, often in only a few days depending on complexity of the system.
Implementation
When implementing in the game engine all components are built with scalability and flexibility in mind. In Archer there were events that would reskin the entire UI based on theme.
Therefore, I had to develop a system that would identify what elements changed and what remained the same, and make sure everything was in performance budgets. Unity's prefab system made this fairly simple. We found a combo of texture overlay swaps and color swaps key to making each event feel unique.
Playtesting and Refinement
Playtesting different areas of the game and refining usability in engine for quick turnaround was key to successful development of Archer.
Playtesting happened frequently throughout development, both internally and externally. Prototyping was always tested both with XD and in Unity.
Developing to play as soon as possible is always the goal.
Archer was fully developed in under a year.
bottom of page