Ad Builder - Asset Modal


Ad Builder - Asset Modal

the Asset Modal is used to import images and videos into the Builder. These assets are then used in layers on an artboard. In the old edit page, the asset modal consisted of a vertical scrolling list of assets which displayed the asset name and size. Below that, there was a drop zone for uploading files. The modal could be opened in a general browse mode, to organise and upload. It could also be opened from a layers file setting, with the difference that it would display a checkbox next to each asset in order to make a selection.

Wireframe recreation of the old Asset Modal

The modal proved to have several friction points.

The drop zone had no feedback when a user dragged a file over it, this caused hesitation and uncertainty that made the user unsure their upload would be successful if they dropped files.

There weren't any hints or indications to differentiate between browse mode and asset selection mode. If the user forgot why they opened the modal, they would have to close it to remind themselves which layer they were selecting an asset for.

The vertical list of assets also didn't offer much room for asset thumbnails. So unless the user named the files pretty well, it was likely hard to find what they wanted.


After thinking about how to improve the vertical list of assets, I mockup up designs of horizontal rows of assets and immediately saw there was space for much larger asset thumbnails. I figured that a shapes dimensions is one of its most distinguishable traits. So I had the asset thumbnails fit within their containers such that the dimensions of the asset were maintained. This would help the user find what they are looking for faster.

To improve the drop interaction, I had the drop zone fill the whole modal but made it hidden until needed. When a user drags a file over the modal, a visual prompt appears to let them know the gesture has been recognised and they can drop them. In the prompt there is also a message detailing the folder the files are going to be uploaded to.

Once dropped, I display an indeterminate style progress bar to reassure the user that the upload is happening. The reason for an indeterminate style progress bar was due to technical limitations of the front-end that it didn't know how many of the files had been uploaded, only whether the whole job had finished.

Asset drop to upload demo

To help keep the user more informed, I decided to add a message at the bottom of the modal which would remind them which layer they are selecting a asset(s) for. The modal’s Done button would be disabled until a selection was made. Choosing to position the layer message next to the Done button makes the message more visible and also reminds the user why the button is disabled.

Layer reminder messages


I was pretty much sold on the horizontal asset list idea straight away and although it was an improvement on the old version, it had it’s problems.

As someone who uses a trackpad most of the time, I hadn't considered that it wouldn't be obvious how to scroll the horizontal list with a regular mouse - or even possible. A quick fix for this was to make the scrollbar always visible. The bar could be dragged as you would a vertical one to navigate through the assets.

If I were to work on this further, I would design a control that allowed the user to vary the size of the thumbnails so they can view more assets onscreen at a time. This is a valid point that came up during internal testing and it would definitely increase accessibility.

I think it would have been nice to show the names of the remaining files being uploaded. Also the ability to cancel an upload in case the user knows they uploaded the wrong file. These interaction considerations help the user to feel in control and thus more at ease.

The finished Asset Modal. Mountain photo used in the demo designs by Michael DePetris on Unsplash. 

I learned that, especially early in the project, I should spend more time on alternative solutions to explore their possibilities. Favouring one solution early on makes you biased towards it and you could end spending a lot of time fixing its flaws, when looking into other options could be more productive.

User feedback early in the design process is vital to help discover problems. For example, the horizontal scrolling of the assets and the thumbnail size; areas that might have been found after even just describing the interactions to someone.


Other case studies:
Animation Timeline
Settings Panel