Magnify Product Design Work

Having an intricate strategy for video is something that many media companies strive for, but it’s hard to achieve and build from scratch unless you have the engineering and design resources, the money, and the extensive timeline. Magnify is an enterprise product that houses your company’s videos (whether it be in-house or curated), and allows you to organize, monetize, and discover videos. Magnify ultimately allows clients to build dynamic templated video gallery pages and players on a truncated timeline (and resources).

I was hired in Summer of 2011 to do front-end development and design on Magnify video sites for our clients. After developing more knowledge of the interface behind the product, and seeing a lot of things that could be improved, I started working with the Engineering team on wireframes, designs, and early prototyping for a complete redesign.

Admin Interface Redesign

Role: Information Architecture, Interaction Design, Visual Design, CSS, HTML

portfolio

Beginning Stages: Interaction and Visual Style Guide

The Magnify engineering team began redesigning its entire product interface in Fall of 2013. The project was mainly driven by several motives: the existing interface depended on severely outdated technologies, its CSS stylesheets often conflicted with the stylesheets of our clients, and the (massive) platform had a bloated and unclear architecture that was hard to navigate.

First, I was responsible for developing a visual styleguide, as well as an interaction styleguide. Later on, I helped design some of the major tools in the platform. I also wrote the majority of the platform's CSS.

portfolio

A page from our interaction styleguide. This document, created before any code (or a visual styleguide) had been written, detailed basic, global interaction patterns, such as: How should pages containing a LIST of things behave and be structured? How should pages consisting mainly of UI input and form elements be structured, and how should the UI feedback when the forms are filled out behave?

portfolio interface
portfolio interface
portfolio

A section in the web styleguide. This internal site contained live examples that engineers could pull directly from. The goal was to maintain consistent HTML structure and CSS naming conventions from page to page.

Magnify Video Content Library Interface

portfolio interface

The Magnify content library is where all of a client’s videos are stored. This includes:

  • Video files created by the client (and which belong to the client), which are uploaded to our system
    Example: an original webseries on extreme ice fishing for an outdoor life magazine client
  • Videos curated by the client (videos from sources like youtube, vimeo, aol, yahoo, etc). These videos are added to our system by grabbing a URL or embed link.
    Example: cat videos from Youtube, the latest viral Miley Cyrus video

The functionality is similar to an iTunes library, or the camera roll on your phone. It's an interface that displays all of your available media, and provides means for further organization (playlists, tagging).

The interface not only has to showcase a lot of information (video titles, video descriptions, tags, video source, duration, posted user, video "status"), but also has to provide quite a few different functionalities, such as publishing, deleting, adding video tags, adding to playlists, and editing video metadata.

portfolio interface
portfolio interface
portfolio interface
portfolio interface
portfolio interface

You can click on a particular video to see all of its relevant information displayed in a modal. This allows users the ability to easily find out more about individual videos without having to leave the main library.

portfolio interface
portfolio interface

Project Credits

Front-end/back-end engineering by Maxwell Rebo.