ManyVids.com

Manyvids is a NSFW (you've been warned!) adult community and e-commerce platform with 1.3M active registered members and over 5 million monthly unique visitors. My role as lead UI/UX Designer was to create a seamless experience with each new feature roll out, capable of scaling and adapting to the site's massive growth. I worked closely with both the stakeholders and dev team to introduce major features like messaging, notifications, activity feeds, site customization and contest voting, solving core product problems and advocating for good user experience throughout. For the purpose of this case study, I've chosen to go over the search function.


RESEARCH KEY FINDINGS

User testing possibilities were limited so I relied on peer feedback to understand problems with the existing search box UI and functionality. Users were expected to enter their queries and select a category but this step was being overlooked often due to the styling and placement of the dropdown. Without a selected category the system would fail to respond, causing momentary confusion. Select user interviews also signaled a need for more sorting options and search filters from those available on both the main category and search results pages. 

ManyVids OG Search throwback

ManyVids OG Search throwback

PLANNING, DESIGN & TESTING

I designed the search box with two types of users in mind - those searching for detailed products and those open to discovery. An autocomplete mechanism was put in place to assist with ambiguity and input speed and accuracy goals. To solve the issue with the dropdown, the default category was changed to 'everything'. 

Autocomplete - 1st iteration  

Autocomplete - 1st iteration  

Autocomplete - final iteration

Autocomplete - final iteration

With the help of search query history data, additional filters were chosen based on the most popular search types. Users could now toggle between basic sorting and advanced search modes at any time, with several new filters to assist them in the latter. For testing, I created Invision prototypes and asked peers to perform specific tasks. From both observation and their feedback, I re-iterated the designs. 

Desktop Advanced Search 

Desktop Advanced Search 

Inspired by Google's Material Design, a floating action button opens the Advanced Search on mobile.

Inspired by Google's Material Design, a floating action button opens the Advanced Search on mobile.