Credits Tool
Blizzard Entertainment
Creating AAA video games credits for a studio with 10,000+ employees is hard enough as is; it’s even harder when the tools you use are outdated and unintuitive.
The Project: a comprehensive web tool that allows both credits editors and general employees to address all concerns related to credits.
Background
Blizzard is one of the industry’s leading studios, so the process of crediting 10,000+ employees is important to get right. But, the credits tool in use is outdated, making credits production tedious and painful.
Time & Scope
Discovery
User Research
Iterative Design
Usability Testing
Time: 9 months
Tools:
Project Management: Miro, Jira
Design: Figma
Testing: Maze, Dovetail
Collaboration: Zoom, Slack
I was one of two UX designers designated for this project. I acted as a design lead, user researcher, content designer, and advocate for the user’s experience. I was an integral part of every step in this product’s development, from the brainstorming to the research to the many iterations of design to the branding.
I collaborated with a PM and engineers to create a web app for creating 10+ credits reports annually that credit 10,000+ employees each.
My Role
Workshopping, User Interviews + Research, Competitive Analysis
Affinity Mapping, Personas, Early Ideation
Interaction Design and Content Strategy
Iterative Design Approach: Double Diamond
Partnered with Co-UX Designer and Visual Designer for design system and brand (see Mosaic Design System Case Study)
End-to-End Design: Wireframing and Prototyping
What I Did
Context
After all the hard work it takes to launch a game, it’s exciting to find your name in the credits scroll to acknowledge your hard work.
my team and me in the Diablo IV credits!
But … making that credits scroll is an arduous final hurdle, exacerbated by an outdated tool that isn’t considerate of current administrator needs/wants.
Clunky UI, lack of flexibility to address many edge cases, inability to compare sections of the credits report, inaccessible list of unassigned employees, the list goes on. As such, the process of curating a credits report was incredibly tedious and the game project wrap-up experience unrewarding. It was abundantly clear that this tool was in need of a major overhaul.
How could we streamline the process of making a credits report to make it quick and easy, and how could we add delight to reward employees for their hard work?
2 Perspectives
At the root of this project, we set out to create a web tool that serves its users effectively. Through discovery research, we identified 2 main perspectives that we absolutely needed to design for:
Editors need a way to organize the structure of their reports and Employees need a way to verify and approve their placement and presentation.
When setting up credits, I need to be able to freely edit the structure of credits
When editing a credits report, I need a way to track who hasn’t been assigned accurately since I can’t personally track thousands of employees off the top of my head
When error-checking credits report caught by a employee, I’d like that error to be visibly flagged with additional documentation
Editors
When I qualify to be credited for a game, I want to know right away
When a credits report is ready, I want to preview where and how I’m presented to make sure that I’m presented properly
I want to keep track of what games I’ve been credited for and how I’ve been credited
After I’ve wrapped up work on a big project, I want to be congratulated and celebrated for the hard work
Employees
Dual User Flows & Experiences
To best accommodate to the needs of both perspectives, we ideated a credits report builder with 2 flows:
1. Editor Flow: create, edit, and submit credits reports
2. Employee Flow: view and verify/flag personal presentation in credits reports, opt in/out of credits projects, and track collection of credits
The Ideal Tool
Based off of this preliminary research, alongside some early competitive analysis and table research, we were able to identify some key characteristics that had to be in our tool:
A given requirement, but one that cannot be overlooked. Be considerate to different user styles and learn from what users are inclined to do.
Quick, Easy, Intuitive:
More often than not, employees will be placed next to their coworkers, who share the same departments and titles. Leverage patterns to support menial and manual tasks.
Group Together, Suggest, & Automate:
There’s 10,000+ employees to place. The tool needs ways to whittle down content so that editors don’t get overwhelmed.
Catered to the Individual:
Credits reports can look very similar from title to title. Editors can save time by building on top of pre-existing reports and sections.
Reuse Your Work:
Speaking the Right Language
We noticed that the topic of credits was stress-inducing for many editors. Digging a little deeper, we realized that these negative attitudes stemmed from a poor experience with a technically-limited tool and strict deadlines. It became abundantly clear that this new credits tool needed to be approachable and easy-to-understand; this begins with the wording.
After interviewing several admins, game owners, and editors, we observed that although technical verbiage sounded cool, it didn’t resonate with users and often confused them on what they were actually doing.
This feedback provided us with a guiding content framework of approachable, everyday lingo. We aimed to avoid technical and corporate jargon, and opted for casual terminology. Some examples include:
Credits Report Draft → Project
Blueprint → Sections
Point of Contact → Editor
Concepting & Prototyping
Understanding our base requirements, we were able to design our 2 user flows to accommodate all the information and tasks each user type required:
Editor Flow
Projects Status Page: view all projects with brief overviews to gain general context
Project Details Dashboard: projects need more detailed summaries with progress trackers and calls-to-action for next steps
Section Management: manage (create, edit, delete) reusable sections in a nested tree structure
Employee Flow
Updated Employee Information: show exactly how an employee will be named and presented in a credits report with the ability to request changes
In-Progress Credits: view a list of upcoming titles that employees qualify for and can choose to opt in/out of
Credited Games Area: provide a comprehensive list of all titles an employee has already been credited for
Deeper Into the Editor Flow
With the need for automation and flexibility, we had to design a system for editors that was robust in capability, but simple in execution. After experimenting with several visual models, such as nesting folder repositories, multi-tiered lists, we landed on a …
Nesting Tree Structure
Although most of these visual models functionally did the same thing, the Tree structure provided spatial efficiency and draggable nodes for easy structure manipulation.
Top-Level Sections → Subsequent Sections → Section Details
In order to accommodate the need for reusability, we opted for a reusable section structure for all credits projects. We split this into two parts:
Outside of the Project
Manage sections that define the nested structures that makeup the final report
Assign rules (department, job role) to these sections that automatically suggest appropriate employees
Inside of the Project
Refine list of assigned employees for the specific project by approving or moving suggested employees
After putting these prototypes in front of both types of users to play around with and give feedback on,
here’s what we learned:
With some many things to look at and do, editors need clear objectives and actionable information.
Directions Please!
Where Am I?
With 10,000+ names, it’s super easy to get lost … users need robust search and visual indicators that help them keep their place
Show Me What I Need!
Both editors and employees didn’t care for having everything credits-related at their fingertips … they just want the information pertinent to them.
Users have a large range of experience with other online tools, and thus might not be familiar with hotkeys that we might know … provide visual alternatives for those interactions, like drag-and-drop, checkbox multiselect, and a visual tool bar with undo and redo buttons
How Do I Do That?
Building The Tool’s Workflows
With all this input, we were able to refine our user flows into a comprehensive architecture that clearly defined each page and its functions.
An Investment for the Future
The final design solution was one that would take some effort to set up, but would build upon itself to become increasingly easier to use as time passed. The team put together its own developers, stakeholders, existing editors (our SMEs) in order to populate the initial version of the credits tool with enough data to build a solid foundation.
As Credits 2.0 remains in the hands of Blizzard’s editors, it will continue to evolve! As it is fed more employee data and learns what proper credits structure is, it will better be able to support editors and make more educated suggestions.
Projected Impact
Based on the feedback given by stakeholders throughout the iterative design process, this tool is predicted to make a huge impact once it is openly in the hands of all of Blizzard!
Making credits won’t be a tedious and traumatic process anymore! Having a tool that’s quick and easy to use, one that is learning and evolving as you use it, will shrink the timeline of a credits report from months to a few weeks!
Streamlined Credits
Game releases are extravagantly celebrated, so why shouldn’t employees feel celebrated too? Employees across Blizzard will now be able to easily track what games have released during their employment and what game titles they’ve been credited for!
Easy-to-Access Inventory
Identifying errors with credits placements and presentation was hard. Reporting those errors and requesting changes was even harder! With this new tool, editors and employees are more connected than ever and can more clearly communicate with one another if any concerns arise!