UX Process

Inside my UX process from research to implementation

Introduction

I approach UX design with a focus on behavioural patterns, systems thinking, and long term player engagement. My background in game systems design helps me connect the dots between game mechanics and player interactions, ensuring that features are intuitive in the short term and cohesive within the larger game loop.

In this case study, I will walk through my typical process, from research and identifying player needs to collaborating with cross-functional teams, prototyping, and adapting to shifting priorities, all while solving player-facing problems. While I recognize that design is rarely linear, I treat my process as a flexible framework that allows space for feedback, experimentation, and iterations.

Due to NDA, I am unable to share my current work. The work examples showcased below are a mix of previous work and generalized/redacted representations of my current work.

Role
As an Experience Designer, I am responsible for the end-to-end design for the feature. My responsibilities include competitive analysis, creating flows, wireframes, interactive prototypes, and delivering finalized mockups with detailed annotations and documentation for implementation.

Tools
Figma, FigJam, Miro, Adobe XD

Where It All Starts

Understanding the Context

My first step before any design takes place is to understand the full context of the feature or the problem that I am trying to solve. It starts with:

  • Reviewing game design documentation to understand core functionality.
  • Meeting with game designers and product managers to align on goals, acceptance criteria, and intent.
  • Asking clarifying questions to uncover unknowns, edge cases, and system dependencies that may impact the player’s experience.

Identifying the Player Needs

Once I have an understanding of the feature’s design, I look into identifying the player’s needs and how players will be interacting with the feature.

  • Referring to previous research and behaviour patterns to identify player motivations.
  • Identify when and how players are likely to engage in the feature and any pain points they may encounter.
  • Competitive analysis of comparable features across similar genre games to identify best practices and any usability issues.
A snapshot of a design deconstruction of the core loop
Interaction analysis breaking down interaction points

Defining UX/UI Goals

Establishing clear UX/UI goals is a key part of my process. It helps align the team, guide design decisions and ensures we are focused on solving the right problems. These goals serve as a foundation for evaluating design choices and prioritizing features.

A sample template I include in all design documentation that
outlines the feature overview, UX/UI goals, acceptance criteria,
use cases, and technical requirements.

Mapping Out the Experience

Once UX/UI goals are defined, here is where the framework of the design starts to come together.

Navigation and Flow 

Creating flow diagrams helps define navigation, structure, and how players might flow through the feature. These diagrams also help with guiding discussions and alignment with design and engineers.

Mapping out the user flow for how players access the end game mission content for Kill Shot Bravo
User flow showing access points and navigation paths for purchasing items in the store.

Information Architecture

I take a look at organizing content in a way that supports comprehension and flow. This involves:

  • Identifying and prioritizing key information based on what players need to understand.
  • Surfacing what’s relevant in the moment to reduce cognitive load.

Systems and Components

Taking a look at the structure as a whole, I identify areas where consistency, resuability, and scalability can be brought into the design. 

  • Creating templates with adaptable and modular components that can be easily assembled that support the product’s needs and player experience.
  • Consider scalability of the feature to ensure the system can grow in future updates.

Wireframes

I build out wireframes to explore hierarchy and multiple layout options. These are then reviewed with the key stakeholders and refined through ongoing feedback loops before any mockups take place.

Additionally, the wireframes are also used to build an interactive prototype, which can be used for usability testing, communicating flow, and shared with the team to gather feedback.

Wireframe exploration of the mission map for Kill Shot Bravo’s end game content, showing states and progression
Early wireframe layout for objectives showcasing multiple things players can do, progression states with clear CTAs to take players where they need to go.

Interactions and Visual Feedback

With a structure in place, I take a look at how visual and interaction feedback can enhance the experience while guiding players. 

  • Identify key actions where players would expect feedback.
  • Using visual feedback like animations or visual effects to reinforce success and signal errors. Every action should trigger a form of feedback.
  • Consider also audio feedback to help convey status changes.

Collaboration, Feedback, and Iteration

Collaboration is a key part of my process. I work closely with game designers, product managers, and technical designers early on to ensure we are aligned with the goals, content, and constraints.

Iteration Loops and 30/60/90 Framework

I structure feedback loops around the 30/60/90 framework to guide collaboration and gather feedback where:

30% – Early Concepts
At this stage, it is aligning with goals and early brainstorming sessions, initial flows and wireframes to ensure we are on the right track. Anything and everything can change.

60% – Structure and Interactions
This is where the structure and interactions are more fleshed out. At this stage, I seek feedback on how things work, clarity, and to account for any game design or scope changes. This is also the stage where quick usability testing occurs to validate assumptions.

90% – Final Polish
This is where the design is near final and ready for handoff. Any feedback gathered helps with visual polish or catching edge cases before handoff

Throughout each stage, I stay in close communication with game designers, product managers, and engineers to ensure designs meet the design requirements, player’s needs, and technical constraints.

Prototyping and Internal Testing

A quick method I use to test ideas and validate assumptions is through internal usability testing.

  • Prototypes are built from wireframes or mockups to simulate the flow and interactions.
  • I conduct informal internal testing sessions with a small group of participants to discover any friction points and gather usability feedback. Each session has a set of research goals of what to validate such as comprehension, navigation, or information hierarchy.
  • Insights gathered are then used to iterate on the design.

A usability testing template created together with my lead to help guide testing efforts. Includes pre-written scripts and messages that help guide the session. Before any testing takes place, research goals and tasks are defined.
Insights gathered from an internal user testing session. They are used to help prioritize revisions and inform the next round of iterations.

Bringing it All Together

Mockups

Once the structure and functionality are solidified, mockups are created based on the defined visual style and components from the design system.

Supporting the Design System

I contribute to the design system by identifying new patterns or components that are needed and ensuring they are flexible enough to be reused across other features.

  • Reviewing and refining existing components to maintain consistency and scalability across features.
  • Leveraging existing components in mockups to streamline the design process and improve consistency across designs.

Detailed Annotations

I add detailed annotations to mockups to communicate functionality, type of content, states, and interactions.

Annotated store mockup (visuals blurred) outlining core interactions, and component structure for handoff.

Kickoff and Handoff

Once the design is finalized, a feature kickoff is scheduled where I will present the design to the team. During the session, I walk through the feature’s flow, functionality, and address any questions or concerns that may arise. While the design is mostly finalized at this stage, there can be iterations based on feedback or any technical constraints.

As part of the handoff, a detailed Figma document and all supporting documents are shared with the team so that all who is implementing the feature has everything they need and a place for them to facilitate conversations or questions.

Iteration Loops

The process does not stop at handoff; it is ongoing, with additional iteration loops and updates driven by player feedback (especially in a live game environment).

Key Takeaways

Player-Centred Design Decisions

  • Every design choice supports the intended game design but also ties back to the player’s motivations.
  • Designing flows and content structured on the when, why, and how players will be engaging in the feature.
  • Build for first-time players and returning veteran players.

Collaborate Early and Often

  • Creates alignment and ensures everyone is on the same page about goals, design intent, and priorities.
  • Creates a space for feedback loops and iteration.
  • Allows for early prototyping and testing to validate flows and assumptions.

Systems and Scalability

  • Building foundations for feature scalability and future updates.
  • Thinking in patterns and components to build a system where elements can be reused and to maintain consistency.
  • Ensures that the design can scale with evolving design needs and players’ expectations.