Search Experience 2

Search Experience Enhancement

Improved the search experience by enhancing filter visibility, refining search interactions, and making the search box always accessible. These updates helped users find relevant assets more efficiently and increased engagement.

About Alamy

Alamy is a global visual content platform with over 150,000 contributors, offering diverse stock images, vectors, 360-degree images, and videos. Founded in 1999, it connects creators with businesses and brands worldwide.

Team

Designers

Product Manager

Solution Architect

Engineers

SEO Analyst

My Role

Collaboration

UI/UX Design

User interviews

Data Analysis

Design System

Tools

Figma

Mural

Dovetail

Usertesting.com

Google Analytics

User Journey Map

When I first joined Alamy, I created a User Journey Map to analyze the e-commerce experience and identify areas for improvement.

Why the map includes data in it?

I faced a significant challenge in recruiting participants, as only three were interviewed. As a result, I turned to quantitative data while exploring better participant recruitment strategies. While learning and using Google Analytics, I also incorporated insights from previous surveys and collaborated with an SEO analyst to create a data-driven journey map. This provided a clear overview of the user journey, backed by data insights, and helped align stakeholders on key areas for improvement.

A KEY AREA FOR IMPROVEMENT

Search Experience

The journey map highlighted an opportunity in the Consideration phase—specifically in the ‘Discover Assets’ step—where improving the search experience could help users find the right assets more effectively and encourage more organic visitors to add images to their cart.

99.24% new visitors from organic traffic didn’t add items to the cart

More User interviews and Research Conducted

While I was working on the Zero Search Results Page, I conducted competitive analysis, user interviews and testing on various aspects of the search results page.
‍
Through observations, I discovered that users often leave the site after reaching the bottom of the search results without finding what they need. At the same time, quantitative data from the SEO team showed an increase in mobile browsing activity. Given this trend, improving the mobile experience is essential.

KEY INSIGHTS

Search Disruption

User testing revealed that the static search box required users to scroll back to the top to start a new search. However, many wouldn’t think to do so, as their focus was on browsing results. The extra effort and lack of visibility disrupted their workflow, often leading to abandonment.

Increasing Mobile Usage For Image Browsing

SEO data shows an increase in mobile browsing activity, indicating a shift in user behavior.

Preference for Desktop Purchases

User interviews confirm that while customers browse on mobile, they prefer purchasing on desktop due to better visibility and confidence in decision-making.

Problem #1

High drop-off at the bottom of search results for both desktop and mobile.

DESKTOP ISSUE

Users are more likely to leave the site than refine their search after reaching the bottom of search results, leading to missed engagement.

MOBILE ISSUE

On mobile, the smaller screen size causes users to take longer to browse, increasing the chance of abandonment.

SEARCH BOX ISSUE

The search box was small, discouraging users from refining their search

The camera icon on the right didn’t clearly indicate image search functionality to users.

DESIGN SOLUTION

Sticky Search Bar

Redesigned the search box UI to be larger and made it sticky on both desktop and mobile, ensuring the search bar is always visible and accessible while browsing. This allowed users to easily modify search terms, apply filters, and refine results without interrupting their browsing flow.

BEFORE

(DESKTOP)

AFTER

(DESKTOP)

BEFORE

(MOBILE)

AFTER

(MOBILE)

Results

Keeping the search box always visible improved user engagement on both desktop and mobile. Users could easily refine searches while browsing images.

+35.8%

increase in user interactions

+23%

increase in overall searches

+48%

increase in mobile searches

Problem #2

Many users didn’t notice the filter option or realize they were in a filtered view, making it hard to find assets they wanted and leading to abandonment.

Applied Filters and Filter Visibility Issue

Applied filters were only visible when the filter panel was expanded and hidden when it was collapsed.

“I thought ‘Sort by’ was the only filter…”

User testing revealed that most participants didn’t notice the filter option or found it hard to see as they focused on browsing.

Disappearing Filters on Scroll

When the filter panel was expanded, scrolling to the bottom caused the filters to disappear.

Licenses and Releases Filter Issue

The ‘Licenses and Releases’ filter confused users due to pre-selected greyed-out options. Users misunderstood this as disabled, though all licenses were included.

DESIGN SOLUTION

Improved Filter Experience

Applied filters are now more visible, staying sticky with the search box for easy refinement. The filter button is now easier to notice, and the filter panel scrolls separately from search results. ‘Licenses’ and ‘Releases’ are now separate, with ‘Licenses’ redesigned as a selection filter, defaulting to ‘All licenses’ for clarity.

Results

After separating the “Licenses” and “Releases” filters, clarifying license options, adding a sticky applied filters section, and enabling independent sidebar filter scrolling, filter interaction increased significantly.

However, filter interaction per user decreased, likely due to improved clarity, allowing users to find what they needed without adjusting the filters as much. Further investigation is needed to confirm this.

+79.1%

increase in filter interactions

-32%

decrease in filter interaction per user

Problem #3

Based on previous findings from the User Journey Map, we observed that few users, especially new ones, are adding images to the cart or saving them to the Lightbox.

Image Thumbnail Hover Icons Issue

Captions lacked sufficient contrast, making them difficult to read.

“Add to Cart” icon lacked prominence, impacting conversions.

The “Add to Lightbox” icon, represented by a “+” sign, confused new users, and they didn’t understand the term “Lightbox.”

The “Images” icon isn't clearly indicate its purpose of viewing all images from the same contributor.

DESIGN SOLUTION

Hover Icons Improvement

Hover icons have been updated to the new designs and added to our design library. User testing revealed that new visitors didn’t understand the term “Lightbox” or the previous add icon. Based on participant feedback, a heart icon was chosen for better clarity. Icon positions were adjusted and tested through A/B testing. Additionally, user interviews highlighted the importance of captions for specific user types, such as picture researchers. As a result, captions are now more accessible with improved color contrast.

Results

There was an increase in user clicks on hover icons for “Add to Cart,” “Save,” and “Download” on image search pages, but a decrease in clicks on the Contributor icon. Further user interviews are needed to understand whether users expect to see similar images or all images from the same contributor.

+12%

increase for “Add to Card”

+34%

increase for “Save to Lightbox”

+21%

increase for “Download”

-26%

decrease for “Contributor”

Takeaway and Next Step

A challenge I faced during this design was experiencing a creative block while juggling multiple tasks. To overcome this, I collaborated with other designers to gain fresh perspectives, which led me to the idea of changing the search bar interaction and redesigning it to be larger and more modern. A big thanks to my line manager, Jon, who reminded me to revisit my competitive analysis, which ultimately sparked the idea to make the search box sticky! Communication and asking for help when needed are key to overcoming challenges!

Moving forward, I discussed with the product manager the plan to conduct an A/B test with three variants: Sticky Search Box only, Sticky Search Box with applied filters, and Sticky Search Box with the search collections tab. By testing these different combinations, we can identify which design most effectively supports users in refining their search and improves overall usability.