MediaHive

MediaHive is a fictional brand we created to conceal the identity of a major project we did for one of the largest media companies in the world. Due to our confidentiality agreement, we’re unable to share the original work or the name of the client we spent over two years working with.

Instead, we completely re-imagined this complex product and redesigned everything from the ground up, leaving behind many of the restrictions we faced during the project. Then, we gave it an entirely new look and feel, and established a new visual identity for the system.

The goal of this project was to take a massive and complex system built in Microsoft Silverlight and redesign it as a modern web application. However, this outdated system was the cumulative result of appeasing thousands of editors and producers over the course of nearly a decade. It had become increasingly difficult to use and maintain.

The product was unintuitive and it took weeks of training and extensive documentation to teach new employees how to use the system. The average user sits in a dark room in a production studio with 3-4 widescreen monitors.

Since MediaHive was intended for a highly unique audience, the design had to be accommodating, yet feel familiar and intuitive — all while not straining the eyes of employees looking at 3-4 monitors for 8+ hours a day in a dimly-lit studio.

MediaHive is a robust multimedia management system powerful enough to enable thousands of producers and editors to create and publish audio, video, and graphics content to a variety of outlets.

Imagine if Google Drive, Google Analytics, Trello, and Buffer were all bundled together in one platform and coupled with a content delivery network (CDN) — that’s MediaHive. This incredible product features a:

• Media Repository
• Media Production Dashboard
• Media Transcoding Service
• Media Object Server Gateway

To effectively redesign such a system required an in-depth strategy phase coupled with extensive user research and testing. We began with detailed flowcharts to map out the intended user experience and page flows throughout the system.

From there, we spent time interviewing users and asking them what have been the most frustrating parts of using the old software and what they’d like to see in a newly designed system. Not surprisingly, we learned they’d appreciate a dark interface.

However, they also wanted the ability to configure the interface to their liking and move parts of the screens they use the most to a secondary or tertiary monitor.

Since we were now designing a web-based application, we could take advantage of browser tabs, which naturally allow users to open components in new tabs and move tabs to their own separate screens. By making clever use of the built-in browser functionality, we were able to save the client’s development team significant time and resources.

Next, we rebranded the product. While this is a fictional brand and was never created for the client, we’re proud of the way this visual identity turned out and how authentic it looks.

The name MediaHive was inspired by beehives, where thousands of workers come together to create a complex system (the hive) and produce multimedia content (the honey). From there, we designed a simple, recognizable, timeless, and memorable logo using a honeycomb shape to further reinforce and illustrate the concept of a “hive”.

Everyone using MediaHive has different needs. Editors want to see new work orders assigned to them. Producers want to see the status of work orders they created. Publishers want to see a daily content calendar. Managers want to see progress and efficiency over time.

That’s why we designed a powerful dashboard that lets each user choose what widgets and components they want based on their role in the company. Users can choose from a variety of predefined layouts and easily select from a gallery of widget options, then configure each widget to show the most relevant data.

After we finished the strategy and branding, we conducted an intense wireframe initiative to bring the workflows to life and experiment with layouts.

One of the most challenging parts of this project was controlling the information density. Every screen contained seemingly endless amounts of metadata and the power users of this product wanted to get their jobs done in as few clicks as possible.

Trying to appease thousands of users across dozens of teams was a tremendous task, but we were able to design the interface in a way that made it feel simple, intuitive, and extremely configurable.

We also made it a priority to design the entire product in “dark mode” to help reduce strain on users eyes in low-light production rooms.

As you might imagine, MediaHive is capable of managing millions of media assets at any given time. That means users need extremely advanced search capabilities — and they need them all on one screen.

Our layout for this page allowed users to expand and collapse the entire filter menu as needed, change the layout of the search results page, and get live inline previews of the media content without leaving the page.

When the user clicks into a specific media asset such as a video, graphic, or audio file, we needed to display an enormous amount of metadata along with even more advanced functionality.

Keeping the in-page navigation simple and controlling the information density was paramount. We also needed to account for various types of content. For example, an audio asset would not display a video player, but rather an audio spectrum and the content below would be moved up higher on the page.

More advanced editing can be done inside a robust modal that slides out from the right side of the page.

We made a strong effort to ensure every part of every screen was designed as its own component. That allows users to arrange nearly any part of any screen in their preferred configuration. Each component can also be opened in its own window or browser tab which allows users to make the most of the expansive monitor real estate they have in front of them.

MediaHive is one of the most complex and intricate interfaces we’ve ever seen, let alone re-designed. It seems inconceivable that something designed to be used on multiple widescreen monitors could ever work on something as small on a phone.

But due to our strategic design process and modular approach, we were able to successfully make the entire system mobile-friendly with minimal loss of information at small screen sizes.

Our dark theme also carried nicely through the simpler screens such as the login and team selection screens like the one below. This was our first major project designed in a dark interface and we’re proud of how soothing and approachable it feels.

Producers and editors can now stay laser-focused on this interface for hours a day without any major visual or cognitive strain.

Most importantly, the users appreciated the thought and care that went into redesigning an application they use all day, every day. Our goal wasn’t just to redesign an outdated interface, but to improve the efficiency and usability of a product used by thousands of media experts around the world.

MediaHive was an incredible project that we worked on with our client for over two years. The unique nature of the project and the target audience forced us to push the limits of design.

With a new web-based software product optimized for efficiency, our client’s employees will be happier and more productive for years to come — without the need for another redesign in the foreseeable future.