⋅Admin Interface Redesign⋅
Role: Information Architecture, Interaction Design, Visual Design, CSS, HTML
⋅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.
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?
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⋅
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.
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.
Front-end/back-end engineering by Maxwell Rebo.