Junction
Production management tools for game developers
Skills Focus
> UX Research
> Product Strategy
> UX Design
> Usability Testing
01 —
Situation
Our team was in the middle of designing a unique web app to support game teams infrastructure and accelerate development. While product design and implementation was generally going well, stakeholders had concerns about the underlying game dev framework the project was built upon. Early prototypes needed testing to validate the interface was intuitive and aligned with the teams’ objectives.
A Single Source of Truth
< < <
A Single Source of Truth < < <
— 02 —
Approach
Designing a tool for teams with unique games and processes demanded an in-depth understanding of their differences. Interviews with team leads and producers led to improvements in the foundational systems. Subsequently, we crafted a prototype interface to accommodate those changes within the application. Testing played a pivotal role in refining the design, optimizing it for our primary user, and tailoring a seamless mobile experience. The introduction of a new visual theme infused the design with heightened clarity and a more delightful user experience.
— 03
Result
Testing revealed approval from both target personas. Our team's design received positive feedback for its intuitive interface and scalable structure. Despite external factors confining the product to an internal scope, the app showcased its potential to revolutionize game development operations. Valuable insight gleaned from our team’s approach became a cornerstone for subsequent central engineering projects.
Adam Parsons and Danielle Hibbs initial concept wires.
Research
I started by working with our product manager to set up a series of one-on-one interviews with leaders across the organization. We were aware that some team leads had already expressed concerns. We assured everyone that the interviews would be kept anonymous to ensure we captured honest feedback from all parties. I collated the notes using an affinity mapping strategy to find pain points and opportunities, while also noting patterns of sentiments from all the participants.
Common Pain Points
Lack of onboarding and intermittent support
Lack of transparency and ownership in the process
Onerous documentation
Misalignment between development goals and review requirements
Personas
These interviews uncovered a bifurcation of responses to these pain points. One group of leaders, those with previous experience using a similar framework, considered these gaps as opportunities; they preferred direct communication with executives to adjust requirements to match their team’s priorities. Leaders in this camp generally focused on the overall goals rather than any one element. In many cases, they expressed a desire for even more structure in the process accompanied with more support.
Alternatively, the second core persona viewed these processes as counter-intuitive and restrictive. This group primarily consisted of leaders coming from large studios with very different core development steps. This persona would resist the established company process and skipped steps without communicating. They were frustrated with the lack of flexibility and preferred to build their own structure around the specific needs of their team.
Problem Statement
The business struggles to get consistent results from the given tools because team leadership is not bought into a uniform process across studios.
Proposed Solution
We knew early on that simple usability improvements to the application would not solve the strategic level business challenges we uncovered. It was clear that any update to the system would need to be co-created with our target persona to garner buy-in from both leadership styles. We also had to account for the investment already made to engineering the tool under the previous system. Keeping as much code as possible would get us to launch much faster.
Considering the constraints, we opted for a scaling strategy to address the concerns that would impact the most users. For this reason we focused on the framework first as these changes would affect both the teams using them and our development teams already at work on tools.
Crawl
Establish the updated framework and align with team leads. Start to flesh out just the critical web app features to facilitate minimum development needs. Allow teams to review the current goals in and upload recommended documents, making manual adjustments as needed.
Solved for pain points:
Lack of onboarding and intermittent support
Misalignment between development goals and review requirements
Walk
Update the web application to bring in customization for individual milestones without needing manual changes from producers. Allow leaders to update documentation as needed and reference best-in-class work from other teams to speed up each process and review.
Solved for pain points:
Onerous documentation
Lack of transparency and ownership in the process
Run
New and improved features for the production management app, including end-to-end customization tools. Teams can set their timeline and unique goals, while providing transparency for executive leaders about where and why changes are needed.
Solved for pain points:
Further reduce misalignment between development goals and review requirements
Further reduce lack of transparency and ownership in the process
Applying the Strategy
Working closely with the principal producer, I helped to distill the research outcomes into tangible improvements for both the underlying framework and our product. Production would move away from hard gates to development, instead favoring more regular checkpoints. Executive leadership and producers would establish high level goals for projects success, with recommended documentation. Each project GM would be empowered to adjust those documents and timelines to fit their unique project and team needs. This encouraged leaders from both personas to see the process as a flexible framework rather than an assembly line. It also gave transparency to what leadership felt was actually necessary to understand teams progress with less guesswork.
Translating these milestone changes to our web app was also critical. We utilized the ORCA (Object, Relationships, Calls-to-action, and Attributes) framework to uncover opportunities for simplification. Implementation had already started, so we needed to align our work to existing code. Retrofiting the new objects to existing backend data structures saved significant refactoring time. Many interface components, especially our tables, carried over to the new design. The redesign focused only on views and user flows for milestones and goals. Other features of the web app went unchanged.
Object-oriented design assessment (ORCA) to understand the data.
Early Exploration and Wireflow
Prototype Testing
Testing our prototype with real users yielded overall positive feedback, but there were some great learnings captured below.
Navigation Challenge
The accordions confused users. They expected to be able to visit the parent pages and find games. Users pointed out that their primary focus would be on their own project, leaving much of the existing navigation irrelevant.
Tracker Clumping
Our initial prototype only featured the default schedule for checkpoints. As a result, users would move dates so close together they would be indistinguishable and not be able to accurately select specific nodes.
Lack of Context
Testers appreciated the clarity of the timeline view, but also wanted to see key dates for the company. Milestones like quarterly financial timelines, all-hands, board meetings, and company play-tests helped teams contextualize their goals.
Not Responsive
Executives wanted a responsive app for mobile viewing to quickly check the status of projects to prepare for 1:1s and meetings with partners.
Addressing the Feedback
To address the navigation issues and move to a mobile-friendly interaction pattern, I refactored the information architecture. Our testing showed that users had a project-first mental model that conflicted with the feature-first design of the prototype. Users expected to find their project first, then navigate between the elements of that project. Collaborating with another designer, we built a new IA tree that reflected this more intuitive way view of content.
Tackling the UI for this new architecture was next. After experimenting with many navigation patterns, I ultimately landed on one similar to Discord. I extrapolated this design to desktop by moving section tabs to the top of the page. This organization was best because it left more room for content and scaled well with future features. It is optimized for our primary users, GMs and producers, who focus on a single project and need controls to be snappy and consistent. At this point in the project, budgeting factors changed the scope and not all of the following made it to the final application.
Diagramed in collaboration with Kirsten Bauman
Blocking Navigation Options
New Feature: Pinning
In this iteration, We included a new feature called "pinning” aimed at power users. Users could pin up to three projects in their side nav, giving them instant access at all times. This feature addresses the feedback that users only care about one project. It also helps central services users who may work across multiple projects, to quickly swap between their top priorities. To prevent tedious setup, the app would pin any project in which a user’s login was already associated. This way, users could take advantage of the feature from the first login. We knew as the application and company grew, it would become even more vital.
Visual Design
The visual design was developed in parallel with these UX changes. I collaborated with another designer to create a component library with scalable elements for easy integration in new designs. Beyond just design, I also worked with our engineering team to establish a StoryBook and map out a governance model to maintain the design system as it grows.
Original Style Exploration by Danielle Hibbs
New Theme Exploration
We always intended to have multiple custom themes. I started designing these new themes with abstract exploration of general components and assets. I explored dozens of different styles, ultimately narrowing the options to the three themes shown below.
The “Smooth Energetic Modern” theme showed promise. This was my take on the core concept of the calm theme, but incorporating modern dashboard trends and more energy. I designed a few demo screens for the user to explore and click through for testing. The final design is shown below. Please note that to protect company IP, these screens use demo logos, names, and projects.
Learning and Growth
This project featured the largest shift in the foundational system of any product I’ve worked on. The moving target made for an inefficient path to success, but also spurred some interesting innovations. Once the team at large stepped back to understand the evolving organizational needs, we were able to address them with our product updates.
