Library

Duration

Apr 2016 – Feb 2017

Role

Product Designer

Team

Lead Product Designer, Project Manager, 4 Web Developers

Hero

Table of contents


About this project

This project kicked off my role as I joined Adstream in April 2016, at a time when the company was experiencing significant growth and a chain of many important events such as the acquisition of Dubsat, massive growth in Brazil due to a partnership with Globo, their expansion in the US market, big businesses won from both P&G and Disney/ABC, amongst other stuff.

As part of a big push to modernise the entire Adstream Platform, some preliminary ideas had already been concepted for the Library which served as my starting point.


My role

I worked as part of the Product & Development team alongside the Senior Interaction Designer, a Product Manager, 4 Developers / Engineers and the Analytics team. I worked on all UX, UI, visual and interaction design pieces from the ideas/concepts to final implementation of all individual stories.


What is Adstream

The Adstream Platform is the world’s leading cloud-based advertising workflow and collaboration software (SaaS) tool used by brands, agencies, studios and broadcasters worldwide to manage and deliver global creative content in both traditional and new media formats, connecting content to over 40,000 global destinations in over 116 countries. Everything on the Adstream Platform is searchable and reportable.


What is the Adstream Library

The Adstream Library is one of the main modules of the Adstream platform and it allows users to keep all their finalised assets in a central repository. It is Adstream’s Digital Asset Management (DAM) solution, used by hundreds of clients around the world to store, manage, track, and deliver marketing and advertising content.

It allows users to tag each and every asset with fully customisable metadata regardless of media type, making their libraries fully searchable and accessible from anywhere, at any time. It offers full reporting capabilities and provides visibility on how many times each asset has been shared, viewed, downloaded, by whom amongst other data points.

It is also fully integrated with our advertising Delivery workflow, making it very easy to digitally deliver final assets to broadcasters anywhere.


The problem

The previous version of Library (v5), was developed in 2012 on CHT, a custom framework developed by an internal engineer. This framework was great at the time, as it was tailor made for the very specific needs of the business. However, as time went on, it became harder and harder to implement new features or even revisit existing ones because so much of our platform relied on legacy code that was no longer being maintained. On top of this, very few of our engineers had the necessary knowledge of this framework to make any signifcant contributions to the code base.

Our chief architect pushed the idea to modernise the entire code base as a way to make Adstream flexible and scalable and the Library was chosen as the first module to be redeveloped due to its relative simplicity in comparison to other core areas such as Delivery and Projects.


Objective

Besides simply modernising the Library and aligning its visual design to the Wayfinder Design System we had been developing, this was also a great opportunity to reevaluate some of the core functionality and add support to more modern workflows that had been neglected due to platform limitations, ie. Video on demand (VoD) and digital publishing that became more common in recent years.

Image of Library v5
This is what v5 looked like.

Research

Analytics

We started out by working with our Analytics team and pulling reports on various areas of the Library v5 to learn more about how users had been working up until that point.

Your old site is the best prototype of your new site.

Hoa Lorangers,
Director at Nielsen Norman Group

We found one of the most helpful indicators of usability was to look at a breakdown of all possible actions a user could take in the Library — things like uploading an asset, sharing it, previewing it, downloading it, etc. — and made our initial assumptions on what’s working vs what’s not, which actions should have more prominence and set our priorities based on those figures.

Certain features were hardly ever used. ‘Add to a work request’ for example had approximately 3-4 uses each month. Alongside product managers, this was essentially how we decided which features would be a priority for an MVP and which ones would be pushed back or removed entirely.

Report data
One of our usage reports.

Competitive analysis

I looked at other similar tools to try and pick out interesting patterns and get a sense of how similar tasks could be completed with slightly different approaches. I also wanted to see whether there was a gap in feature set when comparing our Library to other tools.

My analysis comprised simple aspects such as:

  • Selecting a file and how that affects the actions that are exposed to the user.
  • How additional details such as activity / history logs are presented.
  • How files can grouped, tagged and therefore searched, sorted and filtered.
  • Opening vs previewing a file.
  • Hierarchical structure — folders and subfolders vs groups or collections.

To more complex interactions such as:

  • How the file browser aspect of each platform functions and behaves. There is a huge divide between it feeling like you are in an internet browser vs feeling like the platform is a native file browser like the Mac Finder or Windows Explorer. The latter approach is the current trend as it’s a lot more intuitive and usable overall, hence it was favoured for this project. It offers things like context menus, off-canvas elements, actions that are exposed based on your selection, drawing a shape to select files and using keyboard hotkeys to select multiple ones, single / double / right click functionality, to mention just a few.

Long story short, most of my inspiration for this project came from the products below. Even though the only direct competitor in this list is Bynder, the others provided me with ideas on how to approach certain features such as displaying assets in lists vs tiles, selecting, sorting, previewing different types of media, etc.

  • Dropbox
  • Dropbox Paper
  • Google Drive
  • OneDrive
  • Outlook
  • InVision
  • Bynder
  • Getty Images
Inspiration line up
Quite a lineup. Props to them for being such amazing digital products!

IA & Sketching

It was paramount that the architecture, structure and language of the new Library matched the priorities of our users.

We started those explorations with simple sketches and wireframes as these were the quickest way to test new concepts and get them to a stage where layout, messaging and the flow could be assessed. This happened over many sessions with the team.

Here we were aiming at structuring content, reviewing navigation patterns, testing layouts and screenflows in a way that made sense while not straying too far from what made the Library such a powerful tool.

You can use an eraser on the drafting table or a sledge hammer on the construction site.

Frank Lloyd Wright
Sketches
I love how sketches and wireframes abstract details away and force you to focus on what really matters.

Prototyping & user testing

Once we were happy with our results — and after a few internal usability and feedback sessions with members of other teams — it was time to do our homework so we could properly test things out and hear directly from our users — which is the most exciting part!

This being enterprise software we had to keep in mind most of our users don’t actively choose to use our systems, their organisation often chooses it for them.

Because of this, it can be difficult to get a hold of users for testing, but once you get access to them, they will often have a lot to say about your product and most the time are quite happy to provide feedback on things that could potentially make their lives easier.

For this particular case, we approached a few agencies and asked for a few contacts that would be willing to participate in our tests. We explained they would be sent a link with a script to try out the new Library.

All we had to do was prepare a script and a prototype they could play with. Long story short, we snuck some analytics scripts into our prototype and measured them on completion times, dwell times and total task completion. We tested things like uploading an asset, tagging, sharing, searching and sorting which cover 90% of what users typically do in the Library.

Adstream Library – Prototype
Preview it here.
Made with: Axure

Prototype
This is what our prototype looked like.

Results

We found that most users were able to complete the tasks quite easily and were mostly happy with the new version of the Library.

The only pain point raised was creating and managing collections, which essentially work as ‘smart folders’ or ‘rules’ in Outlook. You set a few rules based on metadata and every time something is added to your Library that matches those rules, that new asset automatically becomes part of the Collection(s) it matches.

We learned that users needed a clear visual distinction between what is a ‘loose’ asset and a collection. This led us to effectively split both into their own areas, which is reflected on the visual designs you see below.


Visual design

We now had everything we needed to start refining the visual design and making sure this wasn’t just a UI refresh but a chance to improve upon the overall experience for our users.

Final visuals
All asset (grid and table) views, collections view and asset preview (document, video, image, audio).

At this stage I also produced some prototypes to save us a few headaches and have a chance to test and refine things like layout and interactions before the developers started writing code. Here are some of them:

Adstream Library
Preview it here.
Made with: Angular Material framework — HTML, CSS & JS

Collection view tree navigation
Preview it here.
Made with: Angular Material framework — HTML, CSS & JS

Collection view masonry layout
Preview it here.
Made with: Angular Material framework — HTML, CSS & JS

Collection tiles proof of concept
Preview it here.
Made with: HTML, CSS & JS

Tile view
Preview it here.
Made with: Angular Material framework — HTML, CSS & JS

List view
Preview it here.
Made with: Angular Material framework — HTML, CSS & JS

Audio player
Preview it here.
Made with: Angular Material framework — HTML, CSS & JS


We also reviewed and documented some smaller stories such as the frame grabber (pretty self-explanatory, only avilable on video files) and devised systems for things like comments and activity feeds in a way that made them more contextual.

Frame grabber
Screen flows done for the frame grabber tool that is avilable on video files.
Activity feeds
The spec document for our activity feeds.

Specs & production

We then documented every story in this epic to allow the devs to start bringing the Library to life. We used Zeplin for specs which saved us a lot of time and did weekly catch ups to make sure we were all on the same page and could spot inconsistencies early enough to fix them.

Zeplin docs
All different views and layouts have been documented and described in Zeplin where we keep all our official design documentation.

Shipping

We are currently rolling out the new version of the Library to a few selected groups of users and are monitoring adoption and usage to iron things out as a beta test before a full roll out to all users.

Roll out plan
The system we used to roll out the trials. Users are asked to try the new Library and later asked to provide feedback via a quick survey.

Conclusion

The new version of the Adstream Library highlights and surfaces its real strengths — a powerful industry-leading digital asset management tool, backed by an amazing new user interface that speaks to our users and responds to their most specific needs.

In our tests, we found that not only were users able to understand the new ways to complete tasks they were used to doing a certain way in the past, they were also able to take it up a notch and create their own new, modern workflows based on the Library’s new — and more solid — foundations.

AdstreamDAMLibrary

Want to see more?

Here are my other case studies.