A CMS for Blizzard.

User Interface

Project Plan

Task

Transition a default, backend digital asset management library into a user-friendly interface that is better aligned with the unique pressures of live streaming events.

Team

3 UI/UX Designers, 1 Stakeholder

Duration

3 Months

Scope

75 Screens

Result

Design implemented in a functional product

Overview

BlizzCAT is a digital asset management system that handles the metadata, content and related assets for Blizzard, such as thumbnails, cover and poster art. While BlilzzCat has historically provided value to multiple teams, the actual interface was limited in its available functionalities and difficult to use.

Thus, Cieden worked jointly with Simran Butalia of Bebop Technology to identify features gaps, uncover stakeholder frustrations, and both design and program a fresh approach to Blizzard’s media management platform. As a result, it’s now much easier for multiple teams to track the progress of content as it passes through the digital supply chain while providing necessary metadata to OTT subscription services for end-user consumption.

Step 1

Benefits and Challenges

Benefits

  • Open and responsive clients
  • A popular field of expertise
  • Codebase already existed
  • Access to end-users
  • Many competitive products to analyze

Challenges

  • Creating a way to quickly troubleshoot errors during live events
  • Adjusting the product to be used by other companies with similar needs
  • Staying within the limits of the initial MVP
  • Staying within the backend library’s development limits

Step 2

Discovery Phase

To video gamers around the world, Blizzard is practically a household name. After all, its franchises have delighted millions of people over multiple decades, and its annual BlizzCon event has become both an industry leader and a standard.

With such fame comes added responsibility, and Blizzard identified the need to improve the content management system behind its on-demand and live streaming abilities. As a result, one of our client partners shot over a few screenshots of BlizzCat and asked, “Can you improve this?”. Naturally, our response was a resounding “yes!” After all, we’re born to improve user flows.

However, in order to ensure maximum results with the help they needed, it was important for us to dig much deeper into the list of features that were on the docket to be revisited. Understanding Blizzard’s most crucial workflows for ensuring seamless on-demand and live video streaming at their events was necessary for us to come up with the best solutions.

The old screen

Software Interface

Step 3

Information Architecture

Information Architecture

Step 4

User Interview

To begin our deep dive into Blizzard’s operations concerning multimedia management and video streaming, Simran Butalia of Bebop, Aaron Evans and Gabriel Grübaum of Innovative Dynamix, and we at Cieden conducted a series of interviews with different stakeholders.

Here were a few of our questions:

  • What happens before the Blizzard team uses its digital asset management software?
  • Where and how are the videos produced?
  • Who watches the videos? How and why?
  • What types of hiccups currently happen with the current software?
  • What is the physical environment that the videos are watched in?
  • What is the context?
  • What is the physical environment this software is used in? I.e. is it used in the live show producer’s room, or in regular office environments during preparation for the events?

And much more!

Thanks to these interviews, we thoroughly learned about both Blizzard’s operations and their end viewers’ engagement with the videos. It was crucial for us to learn how Blizzard employees process, store, and serve their content for streaming. It was equally crucial to learn how and why end viewers engage with the content, both at live streaming events and in regular on-demand settings.

A lot of screens

Step 5

User Journey Map

Armed with nearly exhaustive information on Blizzard’s video management ops, we proceeded to create a user journey map. Mapping out our Blizzard’s processes, while tying them to the potential emotions of their employees at each point in the workflow, helped us to document all the troubles in the current process. The result was a definition of jobs-to-be- done, ranked in order of priority.

This exercise helped us to:

  • Build a smooth workflow
  • Design new features that would highly improve the overall process

Step 6

Solutions

While our designs thoroughly addressed many different workflows, there are a few features that we are particularly proud of.

 

Filtering

 

We spent a lot of time and effort on filters, ensuring that everyone is able to find content quickly and efficiently, which can be critical during live settings.

The filters we designed are:

Quick but not intrusive
Are comprehensive but well-prioritized Understandable

User Interface

Search

 

Content professionals also need to quickly search through their bank of multimedia, especially in a live streaming environment. For this reason, we decided to add search suggestions and a results dropdown as a necessary feature for the next round of development.

User Interface

Error Flags

 

Even the most well-organized events can have their glitches, so we wanted to prepare the team over at Blizzard for any unforeseen troubles. Our goal was to help them quickly troubleshoot any issues both before (and even during) their live streaming events. In order to catch any issues ahead of time, we designed a set of visible error states with alerts for missing metadata or other issues. Then, to speed up the troubleshooting process, we designed the flags to include a link for quick fixes whenever possible.

User Interface

Step 7

UI Concept

Blizzard has a pretty established visual identity, yet we still wanted to flesh out a few iterations before honing in on the visual style that most vibed with the team.

Step 8

Dev Support

When designs are implemented into code, it’s common for bugs – and even UX issues – to appear. This is why our designers provide continued support throughout the development process. With the help of Simran Butalia of BeBop Technology, we identified additional error states to design while continuously reviewing the interface’s development to ensure that everything was ending up pixel perfect.

Step 9

Final Result

User Interface

Testimonials.

start your project with us.

But we
can’t do it
unless you
decide to
reach out

what are you looking for?