Adobe

Nav, Search, Filters

Evolving Adobe Stock to support new content types, powerful search filters, and improved discoverability.

banana

The Story

This project was all about helping Adobe Stock accommodate its expanding digital content offering and setting up a path to support new search features, like Depth of Field and Copy Space. Also, it was an opportunity to solve existing usability issues, make the site offering more clear to users, and provide an easier path to browsing and discoverability.

Our team learned a lot about prototyping, usability testing, presenting, building consensus, and responding to product analytics.

This design was shipped in summer of 2017. It continues to live (and evolve) on Adobe Stock today.

Problems & Opportunities

Our design team defined the problems to be solved and the opportunities to focus on through conversations with the Adobe Stock product team, our usability testing of the current site, and from collaborating with our internal user researcher. We partnered with product management, engineering, and marketing to improve the product.

Scaling Content

Growing the content offering was a goal for the product team in 2016. That goal became a reality in the summer of 2017 when we launched editorial imagery from Reuters and additional premium content contributors.

That launch was preceeded by a project focused on overhauling the site structure. Although we had recently evolved the site to add support for video, address usability issues, and clean up the interface, it was starting to become clear that if we continued to add new content types to the site, things would start to break.

Adobe Stock (2016)

current-site-nav-search-2

As you can see above, the site was getting cramped. We didn't have much room to scale as far as adding additional content and search functionality. The site at that time also had no paths for browsing content instead of performing searches. More on that below.

Search Tech

Our user researcher interviewed a stock photography user and they referred to each search on a stock site to be like “a thousand tiny knives.” Oof.

While ideally great content would be available at all times, it’s also important that users feel empowered and that they have control over their search results. Providing a powerful searching experience was another key focus of the team for enabling users to find the right content. It was also important for us to communicate our understanding of designers’ needs, while also demonstrating Adobe’s technical prowess in areas like machine learning.

We were running out of horizontal space to support adding new basic and advanced filter functionality. We had plans to explore new technology that would likely exist within the search filters, so being able to scale that area was important for the long-term strategy.

Browsing

While we needed to provide a way to view new content, that wouldn’t be enough. For example, with our 3D tab, and the lack of 3D content available, this interaction would often lead users to a “no results found” experience. Even if it provided results, a user might not know what this new 3D content is about and how they can use it. A browsing path would be needed, especially with content types where search isn’t the first action users typically take.

The current site had almost no browsing experience. It was primarily a place to perform searches. However, this wouldn’t translate as well to the new content types being added. While search queries are the primary was most users find images, assets like graphic templates tend to start with browsing. Through browsing experiences, we could also educate users on the content, explain pricing, promote artists, and guide people to the right sub-categories of content.

Discoverability, SEO

Improving the site itself is not enough. How do users get there in the first place?

While SEO is always something needing improving, it’s critical for the stock content experience because so many people start their journey on Google.

Our product experience at the time took a user from a Google search like, “stock videos of awkward business party” to a paid Google search ad that sent them to the Adobe Stock homepage, which showed almost no details about the video offering. It would be much better to have it direct a user to a page tailored for the video experience and communicate our offering for that type of content. Having content-specific landing pages would also improve our SEO for more organic site traffic.

We also heard some users express that they didn’t realize Adobe Stock had more than just images. This made it clear that we needed to make our content offering, and the full value of the product more immediately visible.

Saving and Usability

Beyond accommodating business goals for the future, we also needed to fix some issues with current functionality.

We had seen that users were struggling with saving items. Usability testing of the current site had shown some issues with people not knowing where their files were after completing a task that involved saving a set of images and then viewing the saved files to compare them.

After saving a few images from a search to a Library (where users can save files), people expressed being confused with statements like, “I’m not sure where the files are…?”

Libraries is particularly important because it’s a key factor in long-term commitment to Adobe’s offering. Someone that utilizes Creative Cloud Libraries is far likely to remain a customer.

Goals

With the problems defined, the goal became designing a more discoverable and browsable stock content experience that supports the continuous addition of new content types and search functionality.

User goals

  • Search quickly, often, and iteratively
  • Save content to view later
  • Have control of the content
  • Find the best content for their project

Business goals

  • Scale to add content
  • Scale to add search tech
  • Increase discoverability (SEO)
  • Communicate the full Adobe Stock offering
  • Promote Creative Cloud Libraries functionality / integration
  • Support global Adobe account header / navigation UI

Success Metrics

Obviously, we wanted to increase metrics like subscriptions and overall revenue. However, the focus of this site design overhaul was more about updating the structure to support where the product was going rather than focusing on improving a particular metric. Projects like updating the checkout experience or the pricing page were more directly connected with improving sales.

With a lot of changes happening to the site at one-time, it would also be difficult to identify exactly what might be the cause of any particular significant increase in metrics.

It can be unclear whether a new user starts a subscription because of the value they see made available to them in the search filters or from new content types being added.

Time spent on the site can also be difficult to evaluate as a metric. If someone is on the site for a long time, it can mean they’re finding a lot of great content and evaluating quality options, or it can mean they’re having a hard time finding the right asset for their project.

The key focus here was on avoiding any negative effects on core metrics like subscription conversions and overall revenue. If we updated the site to be able to accommodate more content and search functionality but the key metrics go down significantly, the design would not be considered successful.

Initial Concepts

We struggled in the beginning with exploring concepts that were somewhat of a dramatic change to the site structure. There was a few routes to take, whether it be a simple search box followed by filtering, similar to Google, or something where you’re choosing your content type first.

nav-search-3

It was tempting to reduce the dark top-level navigation bar and the white search bar into a single, simplified header component, but issues arose with how to consistently handle links to landing pages vs. filtering content. That UI structure also broke down on other areas of the site.

nav-search-777

There was an issue with duplication of content. If we used tabs to filter into a particular content type, how would a user browse to a landing page? For example, there was a redundancy in having a 3D filter functionality component while also having a separate text link to a 3D landing page.

nav-search-filters-66

Mega Menus

Mega menus were a short-lived consideration for filtering into sub-categories. For example, accessing 4K within videos.

However, with the limited content available in sub-categories of other content types, it felt like adding more filtering options outside of the filter panel itself would cause complexity.

In addition, we tested some mega-menu experiences on competitors' sites and we weren’t convinced they ultimately brought users much value, at least not with our current situation of limited many sub-categories of content. Perhaps it would be appropriate in the future if the amount of subcategories grew.

nav-search-555

Dark or Light UI

Initially, we explored a dark UI for the filters panel to look more like an Adobe application experience, similar to Photoshop.

The darker approach felt a bit too strong against the lighter background of the rest of the site. Also, with new Adobe apps like XD and Dimension being released with a lighter UI, we felt that it would be appropriate to follow that internal trend, as well as avoid moving towards a less-approachable style, which the darker UI often evokes.

Lastly, since the site was obviously an experience outside of Adobe applications like Photoshop, and considering that many stock users aren't designers inside of Photoshop application panels, a lighter UI approach felt like the right approach.

It would be interesting to see how this darker UI could potentially be integrated in the future through Dark Mode, now available on Mac OS. Safari has started to implement support for detecting if a user is in dark mode.

nav-search-8

nav-search-2

Vertical Space

We had conversations with data scientists about considering the vertical spacing. Each piece of UI pushes content further down the page, which can potentially have a negative impact on key metrics. This image shows the vertical spacing of similar sites from the top of the page to where search result content appears.

nav-search-4

Filters Positioning

We had user research evidence that showed many users appreciated filtering and seeing their results count getting lower and lower as they progressed through the content.

We also had analytics data that showed an increase of filter usage by nearly 300% in some cases when we moved a filter icon from the far-right to the top-left of the UI.

Many Adobe apps have panels on the right side of the canvas, but with this data and the common pattern and expectation of placement on similar sites for filtering, we felt the left-side was appropriate.

nav-search-6


Prototyping, Testing, Presenting

One of the main takeaways from this project was the effectiveness of building consensus with the team by building high-fidelity prototypes. This was important not only to communicate concepts, but to perform usability testing, and present designs with evidence of user success.

Our usability testing involved having people go through a simple task, like finding an image to use for a blog post on a certain topic. We also wanted to see that users could understand the site structure, specifically our new landing page links, and how to filter content. The reason for abandoning many of the initial concept explorations was due to less than stellar testing results.

Once we could present our product team designs we believed in combined with clips of real people performing tasks successfully, we could more effectively build consensus on the proper solution.


Solutions

search-nav-framer

stock

nsf-3

nav-search-20

story-60

nsf-10

nav-search-21

nav-search-9

nsf-1

nav-search-10

nsf-8

nsf-6

driibble-artists

Ultimately, we arrived at something that was a bit closer to the original layout than we had initially expected. Although, I suspect this alleviated a lot of potential concern and lack of commitment from the product team. Change can be scary.

The new design solved many problems we identified after exploring concepts. We could have links to the content landing pages for specific content types, but have them sit appropriately in the background, as they were less critical to the main experience. They didn’t need to be in the user’s eyes at all times. The links to those landing pages would also be visible at any point where the user user landed on the site, which helped to communicate the full content offering.

The dark navigation bar at the top could also adopt the potentially upcoming requirement for our team to add the Adobe “global header” UI component, which would allow users to manage their Adobe account information and quickly switch to other services or accounts within Creative Cloud.

nav-search-gif

After scrolling to view content, the user had important functionality just a click away at all times. They could start a new search from the sticky search bar, save an item and understand how to access it, navigate directly to a specific library, and even scroll through filter options without scrolling away from the search result content.

KPI warning!

With this new sticky search bar design, users will likely be scrolling to the top of the page less often, and therefore, spending less time looking at the large, blue, “Get 10 free images” promo at the top of the page. It was important to monitor if the updated design negatively affected our promo conversions.

More on Filtering

nav-search-11

nsf-4

nsf-11

nsf-5

The horizontal filters layout would become problematic when adding new filters in the future. It was also an opportunity to visually match an Adobe application panel layout. By using a vertical panel layout, the filters could be accessible at all times in the users’ view while browsing content, allowing them to make adjustments, and it allowed for better scalability for adding more filters options in the future. It also would allow for an easier transition to mobile devices. This is also an area where we started to use UI pieces from our maturing internal Adobe design system.

Opportunities Addressed

  • Educate users on what certain filters do
  • Begin to adopt UI components from the internal Adobe design system
  • More control, filter while scrolling
  • Evaluate new search tech within the filters panel
  • Match lighter UI style of new Adobe apps like XD

Saving

nav-search-12

While many people don’t know about Adobe Creative Cloud Libraries, which allow you to save content in the cloud and use it within your Adobe apps, many love it and preach its benefits. Beyond Adobe enthusiasts, almost everyone browsing through large amounts of media content needs a place to save items they buy or items they’re thinking about purchasing.

The current site didn’t have messaging about what benefit Libraries would provide. We could use this as an opportunity to present messaging about the feature. We had also seen a lot of usability issues in testing related to this feature. After saving an item users were confused how to access it.

nav-search-13

nav-search-14

Bringing libraries forward and adding it within the sticky search bar (combined with a toast notification upon saving), solved this lack of clarity. Usability testing with the alternate design showed a dramatic improvement in usability and completion of the saving and evaluating task. It also was a step forward in separating your Adobe Stock account items from your general Adobe account.

Opportunities Addressed

  • Saving usability issue
  • Promote saving, a core user need
  • Faster access to individual libraries
  • Promote Creative Cloud libraries, a key value of our product and indicator of future retention
  • Separation of Adobe Stock account items from general Adobe account

Results

In the end, we shipped something effective, usable, and elegant that achieves many business and user goals. Of course, we also ran into a few snags along the way. More on that below.

Something we encountered that we didn't expect was that after we launched the update to the site, we saw a dramatic decrease in search engagement on the homepage.

We had moved the search bar to the top of the page, similar to what you see on Amazon.com and many other sites. No issues had been seen in usability testing and it seemed like a common placement pattern to follow. While we progressively rolled out the updated design to larger and larger percentages of users and monitored the results, we didn't see any significant issues in the data.

However, once the new design was available for 100% of users, for some reason, significantly less searches were being performed on the homepage. This resulted in us needing to switch back to a design where the search bar is front and center. However, the way the site was structured on search results pages in the new design made sticking a search bar in the middle of the page much more difficult. We had a disconnect that we didn't anticipate.

Ultimately, we found an effective solution but it just wasn't something we were considering before launching.

Today, the search bar continues to be in the middle of the landing page.

Many iterations

While time can be a huge luxury, for a designer it can also be a crux. We had a lot of time to iterate on the site structure layout design.

Looking back, I think it would have been better for me to set myself a stricter timeline with defined checkpoints to create time constraints. At times I felt I was spinning in circles, coming up with solutions that 'could work,' but then constantly finding what I thought was a 'better' approach, then reverting back to a previous concept.

Some of this is just a natural part of the design process, but this project showed me that a more open-ended timeline can be tricky.

Typekit

Parts of the design even made their way into other Adobe products like Typekit.

nsf-6

The top-level landing page structure (dark navigation bar), along with the space for Adobe product branding ("Adobe Typekit" within the white search bar), and separating individual product sections from the user's higher-level Adobe account were effective in these contexts.

Continued Evolution

The design that came out of this project lives on over a year after its 2017 launch on Adobe Stock. It solved usability issues and laid a framework for adding search filters like Depth of Field and Vivid Color, as well as new content like Editorial.

Today, Stock is a strong contender within the ranks of digital, creative marketplaces and I'm excited to see how it evolves in the future. Thank you to the fantastic engineers, product managers, and marketers that made it possible!