Deep Dive
Slate UI Case Study

User Interface designed for Slate App — A content managment system targeting to the needs of large media managment across all file types. Made with ♥ at NB LDN


The
Objective

Prior to the redesign of the UI, Slate CMS had always been handled in a patchwork manner — adding functionality ‘on top’ per client request and rarely revisiting the UX when doing so. As Slate grew in users, so did the need of providing support and taxing bugs made it clear that both UX and UI were in need of an overhaul.

Key
Challenges

Functionality
Analysing what had been added in the past without UX thinking or process. Learning from client feedback to improve the experience for the user.

Redesigning Menu Navigation
Slate continued to grow in users - as did the feature set. The existing horizontal navigation had hit capacity, was complex and was a tiresome experience for the user.

Search, Filtering + Introduction of Search Presets
User research and feedback had shown the need to improve search and filtering. In particular for the super user, as media libraries constantly grow. To greater the experience we also introduced presets for commonly used search terms.

Design Aesthetic
A UI which complemented the re-branding of the Slate aesthetic.

Crafting
the UX

Liaising closely with the head of product — we set objectives, ideation around improvements to the user experience and researched visual inspiration.



Functionality Design
Re-thinking the functionally and interaction, how to better cater for the needs of the user resulting in a more pleasant experience.

The product differentiation of slate is its focus on media managment, allowing users in the easiest possible way to handle all types of media. There were many ways which we could progress the UI which coincided with newly added functionality.

Core Product Values
Revising core product values allowed us, when brainstorming and designing to keep in-line with the overall vision for the product. The main values were; Ease of functionality, Content first, Simplistic whilst being intuitive.

Initial
Wire-frames

Once cataloging visual inspiration and establishing an initial approach. For the first phase of wire-framing, we refined Slate down to an MVP status. Focusing only on it’s core feature set in order to begin momentum.





Wire-frames
The focus is solely on global, local, and contextual navigation elements of the page design.

Mock Ups
& Flat File

The process was iterative, choosing to keep each concept true to the nature of a mock up — thus encouraging a collaborative effort between design + the engineering team.



Mock Up → Version 1


This was initially a great start but during the process of completing the re-brand of Slate, this aesthetic become out dated.



Mock Up → Version 2



Incorporating the aesthetic from the recent rebrand, we also continued to refine how we presented the information - sliming down imagery whilst keeping to a 16:9 ratio and generally being more concious of spatial enviroment.

Design
Focus Points

Improving Menu Navigation


Goal
Create a menu navigation system which comfortably houses Slates feature set whilst being concious of scaling within the near future.


Menu Reveal
Our first iteration to improve this was to create a side panel nav, which the user would click each time to expand a relative info panel. Although much was improved by this solution it also felt quite labouring when testing. The use of icons were also a little too broad of a communication.


The Solution
We designed the navigation to reveal on interaction (although now days a quite common pattern) and to have this active state transition over the content at all times.

This was a very effective way to enrich the experience —we were now able to visually bundle menu items more intuitively whilst having the core features expanded. A refined iconography language which felt more descriptions and which also felt more inline with the new aesthetic.






Search Filtering Presets


Goal
Slate’s clients are predominantly made up of post-production houses. The need for the user to efficiently search, filter and find content through ever growing libraries is a necessity. Our goal was to streamline this process.



The Solution
From usability testing we noticed that users were making repetitive search keywords and filter combinations when finding specific content. Our solution to streamline this experience was to create search presets, giving the user the ability to save their most used keyword and filter combinations.




Bulk options: Delete Selected, Add to Spotlight etc.


Goal
When progressing the UI interactions such as drag+drop to create showreels and revealing menu system — we saw an opportunity to carry over this consistency in experience when selecting multiple items/clips within the library. Visually we also had real estate issues once the user begun to interact and expand new search functionality.



The Solution
Earler design versions saw bulk actions always visible but once search functionality progressed (introducing expanding dialogs and new UI elements) — we felt the need to to save on real estate and to simplify. The solution was to relocate bulk actions, house them within the library table and finally have them visible only when multiple clips were selected.

Feedback &
Parallel Testing

Our testing often reflected our feedback loops — short and fluid. Keeping it this way means we're able to adapt the process quickly.



Short feedback loops / engaging everyone
Internally —Feedback loops were kept agile, short and as fluid as possible. Posting via discussion channels such as Slack and gathering feedback using Conjure -- allowed a constant stream which in-turn was used to adapt quickly throughout the process.

Heuristic Testing
We integrate testing at every turn and have it incorporated where possible. This is often as we're gathering feedback internally -- this spans from 'per mock-up' to flat file state. Common testing methods were based upon experienced / educated guess, common sense and using intuitive judgment.

Summary

Although I've displayed the process we took in a structured manner - this project in particular was nothing like a waterfall process at all. Internally we had a very passionate head of product who was at all times deeply involved. But we would constantly invite varied skills to get involved and join the process.



A process that caters for collaboration
We really did throw out a lot of ideas, left things open for collaboration throughout the course of the project. I saw this created a 'culture' almost around the project from the very beginning... we'd pitch ideas, thrash them, even pick the good ones apart but I think everybody involved realized it was always for the betterment of the product and that we were working together in the same direction. Establishing such a realization from the very beginning really made the process easier and less frustrating.
Case Study
  • Altitude Music Screen