Dreamsocket CMS is an analytics and media hosting + serving platform designed and developed to be instantiated for individual client products of Dreamsocket which is an Emmy winning agency based in Atlanta that provides digital (mobile and web) solutions for media companies like Turner, NBC, Disney, etc.
First things first
Since almost all of these solutions revolve around serving video content the digital solutions have to depend upon various third party services to host and serve that digital content. This dependency presented several constraints in terms of how Dreamsocket served content.
Since different media companies relied on different third party solutions, Dreamsocket would have to always modify their products to suit the platform they were dealing with.
Furthermore, if the company changed platform, that would require Dreamsocket to change each and every product that uses that platform
Furthermore, apart from adding constraints and increasing dependencies, relying on third party services posed a problem to ensure the security of copyright content while being served.
To solve these problems, while producing a new product that would add to their business model, I was tasked to design the v1 of this product while I was interning with them in the Summer of 2016. Such a new product would allow Dreamsocket to control the backend as well as the front-end aspect of all the products they develop.
Goals and constraints
Based on the problem space that we were tackling we had the following goals to achieve
Create an end-product that can be instantiated for every new product (app, website, service) etc.
Provide comprehensive analytics and reporting mechanisms for the product it is related to.
Support media management features for different kinds of media
Create and implement a minimal design language for providing a functional, non-cluttered interface
The final solution
Details about the process
Before starting to wireframe ideas I had about the product, I decided to do a competitive analysis of 5 similar products for the following reasons
Since these were the products that we hoped to replace, I wanted to get a clear sense of what were their strengths that we could incorporate and what were their weaknesses that we could improve upon
Since I was on a small team with limited budget for this project, I did not have the resources to conduct extensive research and interviews so I decided to leverage the resources at hand to gather as much data about features, goals and constraints as I could before starting the design process
I decided to analyze the following platforms - Brightcove, JW Player, Kaltura, Ooyala, Vimeo.
My learnings from this exercise were as follows
Visualization of metrics related to data collected
Apply filters to get an in-depth understanding of trends and data
Saving and generating reports from analytics
Batch operations for media management
Opportunities for improvement
These platforms had highly cluttered interfaces with multiple widgets for controlling similar aspects
These platforms considered all media to be the same, causing movies, TV shows and collections to be handled front-end rather than in the CMS itself.
After gaining a better understanding of the what the features and constraints were for this product, I began to wireframe possible solutions. Provided below are the high fidelity wireframes that I iterated upon in the later wireframe stage of the process.
In these mockups, I not only brought a higher fidelity to the designs but also defined the visual language for the interface
The interface uses a dark theme
The interface follows the principles of flat and minimal design to avoid clutter
Established a common font across the board - Avenir Next
The interface uses line icons to reduce clutter and color noise
The interface establishes a visual language for drop downs
In this interface, color conveys interaction possibilities
After Version 1, I sat with my team for a design critique exercise to get some feedback on the mockups. The following items were pointed in the exercise
The time picker needs to be simpler and more traditional with multiple interactions to select the time rather than a single drag operation that would select a range.
The curved solid graphs make it difficult when comparing different variables. Moving back to sharp vertices with translucent body color would make it more usable.
There is drop-down to change the type of data on the Y axis but there is no way to change the time period on the X axis
The bar at the bottom is confusing and does not provide enough information about the change, it would be better to move that to a traditional tabular model.
Also, the final important feature of being able to save reports was also added
In this version, I established the Information Architecture and other visual mechanisms of showcasing information like
Using banner images to provide context about the content including the title.
Using separate iconography for movies, tv shows and collections (TV shows and movie collections) which are ultimately the different kinds of content that are going to be uploaded
Using click to view and edit details in the ribbon view interaction mechanism for a single page interface.
After designing the mockups, I again sat with my team for further critique on the design to get feedback for the next iteration
The navigation structure is complicated and there is too much happening on one screen, it would be better to move to another screen on every content piece for navigation and editing purposes.
I also incorporated batch operations in this version of the interface
Over the course of the entire design process, I went through several iterations and design critique sessions where I learnt a lot about information architecture, visual hierarchy and cognitive workload while applying my interaction design skills to design the analytics and the media manager of the Dreamsocket Media CMS.