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.
Improving Menu Navigation
Create a menu navigation system which comfortably houses Slates feature set whilst being concious of scaling within the near future.
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.
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
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.
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.
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.
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.