Asset Manager

Company
imgix
YEAR
2019-2020
ROLES & RESPONSIBILITIES
Lead Designer, Research, UX, Visual Design

With Asset Manager, imgix would move beyond offering just an image API, and provide users a platform to visually search, browse, and organize visual media.

At the end of 2018, I would help to forge a new path for imgix, then just an image optimization API and CDN, towards becoming a visual media platform with Asset Manager. As the lead designer at imgix, I created a brand-new product that would serve as the foundation for a critical shift in direction for the company's future.
‍
Asset Manager offers imgix users the ability to visually search, browse, and organize their visual media. Although this new product would eventually be placed inside the existing imgix customer dashboard, imgix didn't have any product like this to build off of, so it was researched, designed, tested, and implemented from scratch.
Final visual comps of the Asset Manager thumbnail view selected state (left) and mobile thumbnail view (right).
Final visual comps of the Asset Manager details view with expanded image tags (right) and the mobile details view (left).
A sample of some of the final UI elements and interaction states designed for Asset Manager.
Knowing that Asset Manager would be the start of a new product platform, I focused on designing a future-proofed product with a design language and system that could grow and adapt to changing goals and user needs. Since its initial launch, Asset Manager has provided real value for new and existing users, and I've led the imgix design team in launching new and expansive features within the Asset Manager platform.

What problems does an asset manager solve for imgix and its users?

Long-standing pain points for imgix users, discovered user behaviors, and competitor pressures were all factors that played into the decision to build Asset Manager. After early technical proof of concepts proved that imgix would be able to integrate an asset manager into our product offering I began to focus on identifying the core problems this product would aim to solve.

01

External cloud storage buckets frequently have a poor user experience.

In order to use imgix, users must connect to an external cloud storage bucket. Even after the initial setup, users have to interact with these platforms in order to organize, browse, and upload new assets. Many of these experiences are clunky, text-based, and generally unfriendly to non-technical users.

02

imgix users can't see their images in the customer dashboard.

The imgix customer dashboard offered robust tools to manage your sources and view image analytics on the number of origin images you are serving, but no way in our own dashboard to visualize what those images are. As imgix's pricing is based on unique origin images being served, this often proved confusing.

03

Without an asset manager, imgix can't expand to other product offerings.

Without a way to visualize and search images through the imgix customer dashboard, expanding our product offering would be difficult. Asset uploading, image editing, and per-asset analytics mostly require a visual representation to best serve users.
Once I started to get a clearer picture of the problems Asset Manager would be attempting to solve, I started to generate user flows to help guide early conversations with engineers on what we would be trying to accomplish. Below you can see an example of the old user flow and the user flow we would start to move towards.
Adding a watermark to an image is easy with imgix, but only if you have been able to first locate the asset.
Once we started to collect data points from existing customers we realized that Asset Manager would bring a new focus to a kind of user that had previously been a secondary concern, non-technical users. With most of our product offerings to date being API-focused and made for developers or developer-centric designers, it was important to identify their specific needs and areas of expertise, and better understand how they might use products similar to what we were building.

While still providing value to our more technically-minded and developer-oriented users, many of their needs would be met with the Management API that was being developed at the same time. The Management API is also the tool that powers much of Asset Manager.
In designing Asset Manager for non-technical users, our product dashboard would begin to provide value for creative, marketing, and support teams.

User interviews, competitive research, and honing in our initial product focus.

We knew we were making a product that our users and specific customers had requested we build. So naturally, I then set out to research the existing products varying from file hosting services, DAMs, asset managers, and even a few image editing applications.

After thoroughly testing out various products and summarizing my findings it became apparent to me that many of the digital asset managers in the market certainly had more features and customization than file managers like Dropbox or Google Drive, but they were typically sluggish in performance. It became clear to me that we needed the features of your typical DAM, but a user experience that was more streamlined and to the point more like a high-end file manager. Here are a few other key takeaways from my product research.

01

Don't make users navigate into subpages to complete small tasks.

Certain competitors DAM's bury important actions like adding or viewing metadata deep into sub-pages. This causes simple tasks to take longer, and in some cases makes it harder to view basic information about an asset such as file size, file type, or the original file location.

02

Contextual side panels improve the product experience.

When researching certain applications such as Dropbox or Google Drive, one way they stood out was by using contextual side panels. This UI pattern was only used in these products to display information, I saw potential to create a more robust side panel that would also allow for adding and editing.

03

Precise text based search is difficult, but filters and tags can make up the difference.

Relying on a text-based search isn't a recipe for success. Simple string searches are better viewed as another filter to narrow down results. Adding interaction to tags or metadata can also speed up searches in an intuitive way if users are looking for similar results.

04

Focus on the product foundation, then build out the feature list.

In my research, there were many DAMs that boasted rich feature lists, but many of them lacked a consistent user experience. We knew we could eventually match the features our users required and would set out to do so by first creating a design system that could support them.
Congruently, there were also efforts to interview current imgix customers of note in order to allow us to better refine our early features for our initial product launch. Customers who used asset managers were asked to provide us with their "can't live without" features, while customers who weren't currently using an asset manager were asked to tell us about what features they would most like to see in our upcoming product offering.
Most imgix customers wanted very specific features out of an asset manager, with only a few features commonly achieving a majority "must have" status.

Designing the core Asset Manager user experience.

Having honed in our initial product focus and conducted user research and customer interviews, it was time to put pen to paper and begin sketching out low-fidelity wireframes. At this early stage, we knew there were going to be core features such as search, browsing, metadata, and filtering, but my first goal was to design the framework that these core features would function within.
A sample of my early sketches of Asset Manager with an emphasis on the overall structure of the product and different search related concepts.
After rapidly iterating through sketches and user flows, I would generate higher-fidelity wireframes to test out some of our initial concepts. At this point, I determined that we would need to make serious updates and additions to the preexisting dashboard design system we had in place. These concepts would be typographically sparse but focused on structure and hierarchy with basic click-through prototypes to test interactions.

Asset Manager Thumbnail View

This featured wireframe showcases a layout that would come to reflect something very close to the final design of Asset Manager's main page. This layout allows users to accomplish a number of key objectives without having to navigate deeper into the application. Search, asset source selection, and even metadata editing.

Table View

From the very start of this project, we had assumed that users would want to browse content via thumbnails, but was this true? Yes, it was. After testing I discovered that users don't typically retain information like file names or sizes, but do remember much more frequently based on visual cues. Therefore, we decided to cut this feature.

Information Panel

This is a contextual side panel that changes what content it displays depending on what is or is not currently selected. When interacting with assets this panel will display different kinds of metadata, and will also allow users to add or edit certain kinds of metadata depending on the type of asset they have selected.

Simple Search

Our initial research indicated that search filters and sorting were absolute must-have features, but many users would still prefer to search by simple text strings or folder extensions. With simple search, users can do just that, and see some of their most recent searches just below the text input area, with advanced filters located below that.

Advanced Filter Search

With advanced filtering, we wanted to give users the ability to add filters to any search such as upload date, tags, categories, color, content alerts, face detection, and more. Ideally, users wouldn't ever have to navigate to another page to access these filters, they would be accessible from the simple search dropdown.

Asset Details View

Sometimes it is helpful to see an asset in a larger view, and that is what this view would accomplish for the initial product launch. Knowing that we would seek to expand what Asset Manager could do post-launch, I made sure to design further into the future mainly for the eventual "Image Editing" product.

Content Moderation

This layout represents what would have been a viewing mode for content moderation. Through further user research, it was discovered that this feature was of little use to imgix users, so this view was cut for the final product. However, I did include image censoring and content alert features in the final designs.

Narrowing down the product focus and key takeaways before visual designs.

01

Reduce the scope of content moderation features.

After testing and research, the current user base just did not have enough content moderation needs to justify building out this feature for launch. However, I did push to keep content alerts and image censoring as features. Alerts are useful for search and filtering, and allowing image censorship reduces exposure to sensitive or upsetting imagery to users, especially technical support staff.

02

Testing proved that "table view" is not helpful for user needs.

Simply put, users want to browse for their assets in a visually based way. This product was being built for non-technical users and we frequently found in testing and research that most users in this classification might not even know the filename of the image they are searching for. Those that might have that information could take advantage of our simple search feature.

03

The information panel should always be present.

When researching different kinds of products that featured information panels, almost all of them could be toggled on or off, or only appeared based on a selection state. We decided that keeping the panel present at all times, and simply having the information inside of it change based on different contexts (selection states, source information, etc) would result in a more streamlined user experience.

Solving roadblocks with search and advanced filters.

For a moment let's jump ahead in time in this project. After the visual design was complete and the project had moved into the implementation phase we ran into a roadblock. The original concept for advanced search filters was proving difficult to implement while maintaining our high standards of optimization and quality. In order to meet our launch deadlines in a reasonable time, an alternative solution needed to be designed and tested.

Original Proposed Search

The originally proposed search had both "Simple Search" and "Advanced Filters" existing in the dropdown modal that would appear after selecting the search field, and then selecting the advanced filters dropdown. The Advanced Filters view simply wasn't living up to our performance standards.

Rapidly iterating two alternative solutions for Advanced Filters.

Being knee-deep into the implementation phase of this project, I was working directly with the lead front-end engineer to identify the pros and cons of various solutions. I narrowed concepts down to two different approaches. The first being Advanced Filters on a new page entirely, and the second breaking down the filters into individual drop-down modals in their own toolbar.

Filters as Dropdown Concept

Strictly from a UX perspective, I had a lot of confidence in this concept. It would bring advanced filters to the forefront of the experience and reduce the number of interactions required to search via filters. This concept would likely be less impactful for mobile users and reduces the number of assets that can be displayed in one view.

Separate Filter View Concept

This concept essentially takes the original user experience of the advanced filters dropdown and puts it in a new view. The clear downside to this view is adding a new page and more interactions to searching by filters. We did feel confident with the UX on this view, and it would be a more consistent experience for mobile users.

The separate filter view concept provides a higher impact, coupled with better performance.

Given more time and resources, the dropdown concept could work and provide some compelling benefits to users. However, there would be little time to adequately test this new UX, and it had some of the performance concerns of the original search concept we were attempting to replace. With the separate filter concept, we knew that we had an experience that we could ship confidently with little concern of repeating any performance issues.

Testing out the updated filters experience, and some of my best practices for collecting feedback.

After settling on a final direction for advanced filters, it was time to get this project to the finish line. Continuing to work with the front-end team we were able to implement the new user experience for search and begin a new round of user testing before the product launch. Helping to lead our internal testing efforts, we identified various bugs and performance issues, giving this new product experience the best stress test we could before putting it out into the world.

01

Create a glossary to stop any potential miscommunication before it occurs.

With any new product, it is important to be consistent with feature naming conventions not only for documentation but also for gathering feedback. You will save time and gather more feedback if everyone is speaking the same language.

02

Let people deliver their feedback in whatever way they are most comfortable doing so.

It might seem easy to ask someone to create a ticket in your issue-tracking software, but you're sometimes just adding another barrier to collecting feedback. Let testers give you feedback however they are most comfortable, and then add the tickets in yourself.

03

Always include engineering when prioritizing what bugs to tackle after testing.

Far too often I've seen designers or product managers prioritize bug fixes without including engineering, and it rarely saves time. Estimation is a team sport and what you might view as an "easy fix" could have greater underlying technical complexity.

Final designs, launch, and closing thoughts.

Having spent countless hours researching, exploring, designing, implementing, and testing Asset Manager was ready for launch. First released in beta and then to enterprise customers, and eventually to all users, Asset Manager has allowed imgix to grow beyond just offering an image rendering API. Asset Manager has also successfully started bringing non-technical users into the fold, making imgix a more essential product for customers who have design, marketing, and content teams in addition to their engineering teams.

As a product, the structure and user experience of Asset Manager has simplified the addition of substantial new features such as asset uploading, image editing, and video support. As imgix continues to shift from an image-rendering API service to a visual media platform, Asset Manager continues to serve as a critical foundation to build that platform around.

01

With the success of Asset Manager, imgix has been able to successfully pivot into a visual media platform.

Without Asset Manager, imgix would not have been able to transition away from being just an API & CDN service. During this critical juncture, when both competitive pressures and a changing customer landscape were causing uncertainty about imgix's product offering, Asset Manager opened the door to new users, new growth, and new product offerings.

02

Asset Manager reduced new user churn by improving the imgix onboarding experience.

For imgix, the biggest indicator of new user success is determined by serving their first image. Users who successfully serve an image are likely to continue to use imgix. By reducing the amount of time a new user needs to spend in their cloud storage bucket, we were able to improve this metric and retain more new users.

03

The Asset Manager platform allowed imgix to transition to a growth-oriented pricing model.

With the dramatically expanded product offering through Asset Manager and improved onboarding, imgix was able to shift its pricing model into a tiered subscription-based service. Not only did this allow imgix to increase revenue, but the new tiers offered more flexibility for users and added a generous free tier for many of our existing self-service customers.

Breaking down the final interface details and interactions.

Asset Manager UI Boards

Despite having an established design system for the imgix product dashboard, the unique needs of Asset Manager necessitated a major update to an aging design system never intended to be used for a product like Asset Manager. Updates were extensive and included new approaches to typography, custom modals, input field styles, interface modules, and more, all with an emphasis on creating a UI language better suited for complex and feature-rich applications.

Iconography

After locking in the final UX for Asset Manager it was clear that we needed to add a number of icons to the imgix dashboard design system. These icons cover a wide range of features and actions such as image tags, content alerts, or even image censorship.

Advanced Filter Tags

Early on I wanted to make sure that search filters looked and functioned differently from a plain string search, and as such behave like building blocks in a way. Each filter tag has unique icons to help a user quickly determine what kind of filter is enabled.

Filetype Iconography

Not having any control over what users put inside their cloud storage bucket, we needed to have a way to visually differentiate between media types in the information panel. Because SVG, AI, and PDF files interact with imgix in unique ways they are designed to stand out.

Interactive States

Here are a few examples of refinements I made to button interactions for Asset Manager. Where appropriate, I feel that spending time on these fine details can make learning a new product easier for many users.

Asset Manager Mobile Examples

At imgix being performant and responsive aren't just a part of the product, it's a part of the brand identity. So even though a majority of imgix users interact with the product dashboard on devices with larger screens, I always made sure that any product we designed would function at any reasonable screen size. These examples showcase how different features of Asset Manager still fully function at smaller sizes with the goal of changing the user experience only when absolutely necessary.

Changing Sources & "IX Select"

The two comps above showcase how users can select between different sources to browse their assets. Having assets always grouped with their source not only dramatically improves search, but also removes organizational work for imgix customers that are client based. This custom dropdown also represents "IX Select", the name of the imgix dashboard modal system I worked with our front-end team to design once we realized that system default drop-downs and modals were not going to continue to be ideal based on the more complex user experience of Asset Manager.

Image Censoring & Content Alerts

Even though most of the content moderation features were cut early on in this project, I believed there was still value in giving users this kind of metadata. It would also function as a great way to gauge potential customer interest in expanded content moderation features. After getting feedback from the imgix technical support team, I also pushed hard for automatic image censoring when using Asset Manager to help lower user exposure to potentially harmful content.

Advanced Filters Search Flow

This flow demonstrates how users can add advanced filters to search assets in their source. in this view, users can create complex search queries by stacking different filters together before. For certain input fields like Image Tags, users can add as many filters as they would like. For more simple filters such as face detection, users have only a few limited options to choose between.

Refining Image & Editing Tags

Asset Manager image tags are generated via machine-learning, so in order to give users relevant and useful tags I needed to make certain decisions about how to limit what tags we would surface to users. Working with the front-end team we identified a confidence level that we felt struck the right balance, but there were still going to be times when an incorrect or undesirable tag would make it through. By allowing users to disable or "disagree" with a tag, we could then use that information to improve future tag results when an asset was automatically reanalyzed.

Empty States

Asset Manager had two types of empty states that needed to be solved. The first is when users have a source with imgix that doesn't appear to have any assets, so in this case, we prompt and teach users how to upload assets using imgix. The second was for a search that doesn't return any results.

Thanks for taking a look

If you're interested in learning more about me or my work, you can contact me on LinkedIn, or email me at stegalldesigns at gmail dot com.

© Tyler Stegall 2023