Design

Adobe

Advanced image search πŸ”

by John Canelis, Product Designer
Project Topics
  • computer vision
  • prototyping
  • interaction design
  • usability testing
  • product design
  • search

Search imagery on Adobe Stock using computer vision.

Empowering users with new ways to find the right image in a database of millions of assets.

An example of the browsing experience on Adobe Stock.
An example of the browsing experience on Adobe Stock.

Adobe Stock is a marketplace for finding great content for your creative projects. From 2015 – 2018, I was the lead designer for the browsing experience on the site. This includes the navigation, search input, saved items (β€œMy Librariesβ€œ), and filters panel. The majority of those design implementations continue to live on the site today.

Adobe Stock zoom
Adjust size and position of objects in search.

One of my favorite things I worked on for Adobe Stock was advanced search. Users needed tools for sorting through the massive amount of content provided in a search result and Adobe had some interesting technology becoming available for identifying objects within images.

πŸš€ This is a feature that continues to live on the site.

Adobe Stock search result
Select an area of the image.

Adobe Image Search
Select, move, and resize objects.

Problems

⛔️ Users felt a deep lack of control over what content they saw from performing searches on Adobe Stock and similar sites.

⛔️ People often need to find imagery with space for text to be added.

Opportunities

πŸ‘οΈ Emerging capabilities of computer vision technology.

Prototypes

I did a lot of prototyping and usability testing for this. Because of the complexity in the interactions and animations, I needed to use a tool like Framer (Framer Classic, RIP πŸ˜”) that allowed me to fully control the interaction design.

Some of these early prototypes are conceptual and exploratory, but the movement of objects within a composition continued to be a focus.

Throughout this process it was important to confirm that concepts worked well using the actual image content in our database. It's one thing to create a concept with hand-picked imagery, and another to put it to the test using real data.

The project required collaboration with the internal Adobe Search team to understand technical constraints and possibilities. It involved reviewing their prototypes and creating my own concepts. We (design, product, engineering) continuously shared ideas of what could be possible.

Goals

🎯 Increase user confidence in their ability to find the right images for their projects.

🎯 Deliver functionality not available on similar products. Provide a new reason to switch from a competing product to our product.

🎯 Design an experience that illustrates Adobe's powerful technology and deep understanding of what people need to do their creative work.

Outcome

I worked as the lead designer for this project before ultimately (moving to New York) passing it along to a designer whom I had originally worked with when they were an intern (they were hired as a new graduate πŸŽ“ πŸŽ‰). We shared ideas, built prototypes, and they ultimately pushed it into production about a year after I left Adobe in 2018.

A few years later the experience continues to live on the site.

Image search on Stock
A screenshot of the current experience.


One more thing…

Building Adobe Stock for Framer. Product as a service.

One of the most interesting aspects of working on Adobe Stock was thinking about the product as a service rather than just a website or an app. A product can live in so many places. Google Slides, design applications, or even a CMS. You can deliver the β€œproduct” directly to users within the context of their workspace.

Adobe Stock for Framer
Adobe Stock for Framer

A few years ago I built a plugin for Framer that allows a user to search for content within a design file. It uses the Adobe Stock API. I made this before the beautiful world of Figma plugins came into existence. We see much more of these kinds of tools available today.

Recently, I put the code for this on open source. You can also play around with an example of it in action here.