Redesigning The Content Management System For Improved Usability

Redesigning The Content Management System For Improved Usability

Elevator Case Study

For the time sensitive amongst us.

image
image
image
image
image
image
image

Project Deep Dive

Read more about this project in detail
image

Content Management Interface (Pre Redesign)

About Content Management

Content‌ ‌Management‌ ‌is one‌ ‌of‌ ‌the‌ ‌most‌ ‌requested‌ ‌features‌ ‌by‌ ‌‌Disguise‌‌ ‌users‌ ‌and‌ ‌will ‌allow‌ (upon completion) ‌the‌ ‌ability‌ ‌to‌ ‌transfer,‌ ‌transcode‌ ‌and‌ ‌distribute‌ ‌files‌ between media servers ‌on ‌a‌ ‌‌Disguise‌‌ ‌network session,‌ ‌removing‌ ‌the‌ ‌need‌ ‌for‌ ‌third-party‌ ‌software‌ ‌to‌ ‌perform‌ ‌these‌ ‌actions.‌ ‌

My role in this project was to work with lead developer on the previous project Andy Briggs and use my expertise to identify usability issues with the feature, redesign the interface as a web interface and document its new functionality.

Deliverables

Research
Heuristic Analysis
Redesign
Wireframes
Prototyping
Mockup
Style Guide
Documentation
Workflow Guide/Manual

Research

Discovery

In 2017 the development team conducted research; interviewing customers about their needs for the content management in their Disguise systems, conducting competitor analysis and on-site observations. This research informed requirements although despite being well informed the team skipped a design phase and straight into implementing solutions. As the project complexity grew; time constraints meant the team struggled to implement the UI as they had hoped and its usability suffered.

3rd party software replacement
This image shows the intended replacement of 3rd party software using internal Disguise Designer processes.
This image shows the intended replacement of 3rd party software using internal Disguise Designer processes.

Cross Referencing

Using the manual I operated the interface and noted any areas where usability may have suffered. I cross referenced my findings against the product requirements and created slides to present my findings to the team for discussion.

Cross Referencing Slides

Cross Reference Slides

Re Writing Requirements

Usability suffered due to a small team and high project complexity; the team strived to implement a full version for first release. We discussed what might a minimum viable redesign look like and adjusted the product requirements to reduce project complexity and ensure we could deliver a usable product on its next iteration.

New Requirements
  1. Content is distributed to all rackmount machines.
  2. Content can be pulled from a remote location.
  3. Ability to suspend all in progress transfers and disable content distribution.
  4. Transferring content should not adversely affect editing, may affect playback if not disabled.
  5. Progress per file and total should be shown.
  6. Ability to prioritise/allow transfers per file.
  7. Ability to view the current state of media across all d3 machines.
    1. File name and type
    2. File meta-data (codec, fps, resolution, has audio)
    3. Versioning information
    4. File location at source and on each machine.
    5. Asset usage in Bank/Slot or Track/Layer.
  8. Ability to remove files from d3. This could be a soft delete or archive to cold storage, the result is that the file cannot be played back by d3.
  9. Thumbnail previews of staged media to be available in UI.

Heuristic Analysis/Competitor Analysis

Third party tools used to manage content such as Free File Sync, F-Track, Adobe Bridge and Adobe Media Encoder all had a common theme, categories of control were clearly separated into separate areas of screen. We reflected on this theme and identified the opposite in the content management UI. We hypothesised that the lack of separation was a major point affecting usability.

Visual Grouping

Visual Grouping

User Interviews

The lack of a product for managing content in Disguise meant our users experienced pain, effort and expense in creating their own systems using 3rd party software. Using tools like Airtable and Free File Sync to record and move files increased mental load as they flipped different interface paradigms. I spoke to users about how we could alleviate these pain points in a redesign to ensure usability was paramount and discover any unique product opportunities. I no longer have access to the interview data.

Content Inventory

The disguise data model of representing video information was complex and unfriendly. Users had to bury through several lists of expanding windows to access the information they needed. To ensure that I could represent this data in a friendly way I exposed every data point in the UI and documented it in a table. I used this table to create close analogues of real data later in design comps.

Design

Wireframing

Wireframing for this project was not a linear process, I worked in several stages of fidelity throughout the project. I usually start every project with a pen and to sketch out wireframes, I find it fast and I don't get too precious about aesthetics. I experimented with how a modern creative application may be styled using Sketch but without a in house library of UI assets to quickly build wireframes from I switch to Balsamiq for low fidelity wireframing. The process of designing wireframes was iterative and involved feedback from users and stakeholders along the way.

Wireframes

Wireframes

Visioning

During the wireframing process we needed to get buy in from the CEO for the project. Presenting wireframes at this point may not have given the desired effect so I spent some time creating mockups in Sketch of how the finished UI could look to create appetite for the project. I took inspiration from video industry design leaders such as Adobe and Blackmagic for how the Disguise UI could eventually look.

Visioning Examples

Visioning Examples

User Workshops

I printed out the visioning exercises and wireframes and stuck them on a wall, whenever there was a sales opportunity for the company I would ask for some time with the user to get user impressions and get them tyo record their feedback on post-it's and attach it to the images. This was really useful in motivation as you coul tell if the project was on track or not. Most feedback was discussed at the time by the team and implemented as wireframe changes.

User Workshops

User Workshop Images

Journey Mapping

Using a combination of my own and previous research I wrote several user stories of detailed tasks a user would need to perform within the content management system. I used these stories as the basis of creating a map that contained features required for a user to complete their task. This helped us build a complete picture of all the features needed by the system. Orgainsed left to right, features on the left being more important for our MVP the map also becamne a useful tool as a roadmap.

Journey Map
image

User Flow Diagrams/Prototyping

I Created user flows mapping of every screen out all the ways a user will interact with the product, these diagrams eventually became user clickable prototypes which I used to record user feedback.

Prototyping example
image

Workflow Guide

During the whole project we wrote a workflow guide. It would contain all of the latest wireframes or comps depending on their level of fidelity with a detailed description of functionality, if a design changed, the guide changed. This document would not only serve as a record of my designs, a manual, a guide for developers implementing designs and QA but also a vital messaging framework for sales, marketing and product to begin telling our customers what's coming up next.

High Definition Comps

After looking at many leading creative applications from Adobe and Blackmagic I took inspiration from their dark mode aesthetic, our users often worked in low light conditions and dark mode was less fatiguing on their eyes. I created high definition comps using Sketch of several of the main interfaces described in the wireframes. User feedback was positive and some even asked if this kind of styling could make its way back to the Designer UI.

High Definition Comps

High Definition Comps

Style Guide/Design System

Complimentary to high fidelity mockups I designed a library of re-usable UI assets for use in Content Management and new Disguise web interface products and eventually contribute to creating a CSS framework with a goal of standardising user interfaces in the Disguise application suite

Style Guide/Design System

Style Guide/Design System

Challenges

  • Sole UX designer on large redesign project.
  • Difficult to get time with other project stakeholders.
  • Complex data model behind the interface.
  • First external web interface designed by the company.
  • Was made redundant before the implementation of the project (which sucked)

Impact‌ ‌

  • Will deliver the most requested feature for Disguise users.
  • Will contribute to the standardisation of future user interfaces in Disguise application suite..