Asset Modal Redesign

Air.inc / August 2021

Air is a creative operations tool for visual assets (images, videos, files, etc) designed for productivity, collaboration, and storage and the asset modal is a core area of the Air.inc product. Each asset can be viewed in the asset modal which serves as a hub for all the information and functionality related to the asset such as commenting, version control, custom fields, tags, and more. I lead a one month redesign to create a more flexible, modular asset modal that would support future features and create a more delightful user experience

The problem

Since I had joined in 2019, the asset modal had many features added to it, but relatively little support. It had become bloated, inflexible, difficult to use, and was often buggy. It also lacked some key features that our users needed such as the ability to view assets without the accompanying information, zoom to less than 100%, focused public versions of the asset modal, and a full screen asset modal. In addition, internally, the asset modal was difficult to work on. The code was fragile and due the number of additions that had been haphazardly added, it was often problematic to design for. We as a team decided to tackle this problem with a quick one month redesign that would allow us to fix the existing problems with the asset modal as well as building a more stable version both in terms of code and design.

Designing a flexible & focused asset modal

I set a few goals for the design of the new asset modal based on the user problems and existing issues. Since this is such a core area of the product and I wanted to make sure it was easy to use, clear, and functionality while hopefully giving the users a delightful way to work with their content. In the scope of this project, we decided not to add new features to the asset modal, instead we wanted to improve the existing experience and be able to add new features in the future.

I jumped into some grounding principles for how the modal could be structured by sketching at high level what the modular groupings could be. I then explored layouts via wireframes to get a sense of what would work best for this space, experimenting with how we could structure information especially within our existing tabs.

After the initial wire framing and sketching phase, I moved on to a rough prototype that would allow us to evaluate as a team how much information we wanted to allow the users to see at a time. At this point, I knew we wanted to make the asset modal be full screen and have a dark background effectively making it our first dark mode area of the product. This would allow users to focus and allow the assets to shine within the modal. However, it was too time intensive to translate all of the existing tabs (such as comments, custom fields, & tags) to dark mode so we compromised as cross-functional team and decided to bring only the info & versions sections, which were receiving major and long overdue updates to dark mode with the intention of revisiting the rest of the tabs later. I prototyped 3 major concepts for the amount of information that could shown at a point in time.

We decided to move forward with the 3rd concept, it felt like the right amount of information, allowing users to still prioritize what they needed to see without overwhelming them. I also wanted to make sure that when users were in a workflow they could continue to focus, especially when moving between assets, so when a tab or tray was open it remained open as you switched to a new asset. This helped address users wanting to go through and add tags, comments, or custom fields to multiple assets while in the asset modal.

The new & improved asset modal

After a few quick rounds of iteration we landed on the final design for the asset modal. As part of this project, I created the dark mode design system and implemented in throughout the asset modal. I also cleaned up the various tabs to make them feel unified as well as addressing any hierarchy issues. Because of the large amount of variety in asset types, I made sure to account for and address any variations within the modal including the public shared versions and mobile web. To make sure the asset modal felt snappy, I fine tuned the animations with the engineering team to make sure it felt responsive and delightful. The redesign was a success and we received positive feedback as well as fewer bug reports and user issues. You can also check on the final prototype in Figma.