Contact Us
Contact Us

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.

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 1

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 2

Information Architecture

Information Architecture

Step 3

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 4

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 5

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 6

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 7

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 8

Final Result

User Interface

Testimonials.

Aaron Evans USA, California

For Blizzard, we had a functioning and powerful product (TheMIX) but the graphic user interface was basic and not as user-friendly. We shared some rudimentary wireframes with Cieden and what we got back blew us away! Not only did they provide us with the layout functionality we were shooting for but they also made it look fantastic. The new UX has smooth functions with intuitive transitions, great layout, and a flow to optimize user interactions. The dashboard was a key upgrade. It now presents the data and statistics in various dynamic graphs and surfaces urgent alerts that a user can easily act on. Preventing issues going into a live production— Amazing! Ciden did a great job at taking TheMIX to a new level at Blizzard.

The map with a pin on California
Simran Butalia USA, California

Katya and the UX team at Cieden did an excellent job at bringing new life into a legacy application. The new UX has boosted confidence in the project at Blizzard and opened up new possibilities for its use. Cieden was exceptional in every step of the process.

The map with a pin on California

prev.

ux/ui design
UserNurture

next.

ux/ui design
Desktop Lie Detector Software

start your project with us.

Getting in touch
is easy.

what are you looking for?