Senior Product Designer 2017

Search is one of the most used tools on We focused on making a search that was more visual and expanded to more content types.


There are two different ways to search. The first is what we call "Lookahead." This is a mini search dropdown that the user can access from any page on The Lookahead allows the user to quickly see search results without leaving the page they are currently on. For all users, the most popular searches are listed before anything is typed. For logged in users, the five most recent searches are listed on top, as well as the popular searches.


As the user types, the two most popular matches of each category are displayed: artist, video, and playlist. The user can heart a video or playlist from this dropdown, which adds it to their favorites for later viewing. Hitting return or clicking "See All" takes the user to a detailed search results page.


The second way to search was the detailed search results page. I wanted the user to be able to find the artist, video, or playlist at a glance. It took me a few versions to get a good balance of making the thumbnails the right size versus text legibility. Around this time my teammate was working on the Vevo Design System. We both worked together to use this project as an example design pattern to help define the ontology our content elements. We also used this opportunity to clean up the grid system. These steps helped define how the layout was designed for section.


The detailed search results page displays the search results in a large, visual format. The search can be filtered by category: "All", "Artists", "Videos", and "Playlists". The "All" section displayed the top 20 of each category in long scrollable rows. Clicking one of the category tabs filters the results to just that category.


As I was designing the front facing experience, another team was building the backend of how the search functioned from scratch. One of the reasons we were doing this was to be able to search for playlists, something we had never been able to do before.  

The Vevo Content Team creates and updates video playlists daily. The only playlists the users could access were the ones featured on the homepage of There are thousands of playlists created not only by Vevo, but from the users as well, that were not being seen. Making playlists searchable was very exciting to me as it would allow the users to get access to these amazing curated playlists.

As we started implementing this search feature, I started to realize how cluttered the playlist data was. There were many repeat playlists, playlists poorly labled, and playlists with only one video inside. I decided there needed to be a ranking of what an acceptable playlist was and suggested that we make rules on which playlists were a higher priority than others. 

The ranking went like this. 

Tier 1: Playlists created by Vevo were ranked higher than playlists created by users, as the quality of the playlist could be trusted more.

Tier 2: I found there were many playlists that were named with just one or two letters. It seemed as if they were test playlists and the videos inside were a random dump. So I determined that playlists with titles longer than five characters would help filter out these "test" playlists. 

Tier 3: Playlists with a higher number of videos would be ranked higher than ones with less videos. This one was tricky, which is why it's the lowest ranking. Some of Vevo's curated playlists had over 300+ videos, but so did some of the random dump playlists. This helped filter out the playlists with only one or two videos in it, but having the playlists by Vevo ranked higher (Tier 1) helped filter the dump playlists.

Lastly, I kept finding a bunch of playlists with titles labeled with "Test" and "Do Not Use" created by Vevo, which were some very old playlists that were suppose to be private that were now being surfaced in the search results. A task force was launched to find these and remove them from the CMS. 


I was also tasked with refreshing search on iPhone and Android. Improvements included enlarging thumbnails and general clean up to the elements to match the new design system.