POND5
Top Navigation
Project Overview
I had the opportunity to tackle the redesign of Pond5’s top navigation. Based on the data, there had been a decrease in conversion, and users were dropping off on the search results page. We wanted to uncover why this was happening.
Scroll down to discover how we made data-based UX and design decisions, which has led to improving the top navigation on the search results page.
My Role
UI/UX Design
User Research
UX Strategy
Our Goals
Understanding User Behavior
Determine user behavior and gain a better overall understanding of how our users are currently interacting with Pond5.
Improve Usability
Increase the utility of the website.
Overall experience
Increase the speed at which we are able to guide users from search to checkout which will increase conversion.
Pain points:
Remove roadblocks by identifying pain points in our customer experience.
User Research
Competitive & Non-competitive Analysis
I looked into some of Pond5’s competitors and non-competitors. By looking at different website’s results pages, I asked myself a few questions and also took note of key elements:
How can I get to the results page?
How can I continue my search?
This isn’t what I want, how can I narrow or change my search?
Where does this page take me?
Treatment of the search bar
The layout of the top navigation
Scrolling
Usability Testing & User Interviews
We have used a mixed-channel approach to this research.
Usability tests through UserTesting.com that were focused on both organic and non-organic users
Usability testing through UsabilityHub.com where we focused on the iconography used on the media types
Conducting several interviews within our own customer base through a triggered email opt-in
Results of After Effects icon and Sound Effects icons
This icon usability test was conducted by Marco Grasso
The test conducted has demonstrated that the After Effects icon can easily be confused for the footage icon when displayed individually.
With 62% of votes, the Sound Effects icon is well recognized, but could be confusing for some users with music.
Original Desktop View
Users were having a hard time looking for the search bar. They were able to locate the pink search button, and would just click the button without inputting a keyword search.
A lot of users were not aware the media type icons were clickable, nor understand what some of the icons meant. They were mainly ignored.
User is looking for the search bar to type in the search bar. Thinks that he needs to sign in to search. He wants to stop and go back to Google search.
User doesn’t like how the search bar is set up, the Search Pond5 is light grey and eye draws the pink button.
We Instructed the user to show how she would continue to search other Timelapse clips to find what she is looking for. She clicks on the pink search button to be taken to the general results page, unaware of the search bar input field.
Usability testing findings
“You can do another search somewhere..but can’t quite find where.”
Original Mobile View
From the testing of media-type icons on the desktop, it felt irrelevant to have them at all. On mobile, the size of the icons takes up a lot of space, which pushes down the rest of the links
Users were struggling to find the Join Now and Log In CTA. On certain devices, it is below the fold.
Confusion as to why Membership and Social Studio have more emphasis than Join Now and Log In.
Findings: Who Our Users Are & Jobs to be Done
In order to determine user behavior and gain a better overall understanding of how our users are interacting with Pond5, we must understand who our users are.
From our user interviews, we have validated the following:
Our customer profiles actually haven’t changed (Our users are still Freelance Editors, Producers, Creative Directors, etc)
A lot of our users were freelancers who had both high-end and low-end clients, which meant, their jobs ranged from large budgets to small budgets
We believe we need to allow users to segment content on their own with ease.
“Numbers give the illusion of certainty, but they can be misleading if not verified with qualitative findings.”
Solution & Designs
Initial Wireframes
Final Designs
In order to further validate the designs, get more accurate feedback, and test with more users, we screen-shared and compared designs with the original setup and asked users how they would take certain actions.
The designs were then A/B tested with the original top nav for about 1 month. This was enough time to collect data to see if there was an impact on conversions and drop-off points. After 1 month of the A/B test, we were confident enough to push the top navigation to 100% of our users.
In Conclusion
Key Takeaways
We need to continue to vouch for validating assumptions. The importance of user testing was an eye-opening experience for us all.
Work closely with the teams around you. We became a mega-team when we joined forces with the Growth team. We were able to work together and present powerful data to the executive level.
Learnings
Take into consideration future cases where we want to include specific segmentations and make sure any redesign will account for the future projects on the roadmap.
Next Steps
Make improvements to the overall search experience
Help users find the best content they need easily and quickly
The media type navigation drop-down can be overwhelming with keywords for the user. How can we organize the keywords in a clean and easy-to-navigate manner?
There is confusion for new users when they come to Pond5 with how to shop. Pond5 offers a la carte, credit pack, and membership options and there isn’t a mention of our options.