Instructables is an online community for people who like to make things. The website hosts over 350,000 projects, with more constantly being added, so finding the right project can be a real challenge.
• Goal: Help users more easily find what they're looking for on the site by overhauling the search and browse experience.
• Time: Design began Oct 2022, new search released late 2022, header navigation followed in early 2023.
• Role: Planned, ran, and analyzed user research, created mockups, gathered feedback, iterated to reach final designs, worked with product manager to break up the work and write up specs, and collaborated closely with development.
Navigation research
I led a round of user research so that we could better understand how users experience our site and what pain points they had. I ran UserTesting.com tests to get a feel for how a new visitor navigates through the site. I also sent out a survey to all of our existing users and conducted live video interviews to hear from long-time members of our community. I used the research findings and my own heuristic evaluations to highlight navigation pain points.
• User testers had difficulty navigating to parts of the site and on mobile there was no way to get back to the main homepage.
• Many users struggled with search. It is a bit small and hidden in the header. Also searches showed lots of irrelevant results with no way to filter or refine.
• Site visitors lacked awareness of our parent Autodesk brand.
Navigation brainstorming
There were many decisions to make with the header including how to display our main categories and how to handle search. I explored countless potential layout ideas for the main top bar as well as potential mega-menu drop downs.
Final navigation design
• Improve hierarchy of information by collapsing top links into a centralized "Projects".
• Make it easier to get home and treat the main logo consistently from page to page.
• Make top search bar larger and more prominent. On mobile, put in main header.
• Update the logo and footer to clearly connect with the Autodesk brand.
Search research
From the surveys we learned about a third of people visit the site with a clear idea of what they are looking for but many were struggling to find it with our search. One of the biggest pain points was not finding relevant results and not being able to filter the view to narrow down the results.
Another problem was that we were using two completely different search engines for logged in vs logged out visitors. Our old Google search only showed 10 results at a time, had no way to filter or refine the results, and showed stale content due to caching. Our Solr search had a slightly better visual layout but worse relevancy.
User quotes about the old search experience:
"Search resulted in far too many extraneous hits no matter what criteria I used making it nearly impossible to find something relevant."
"Search resulted in far too many extraneous hits no matter what criteria I used making it nearly impossible to find something relevant."
"When I did browse, I got frustrated because it was difficult to narrow down what I was looking at."
"The images are smaller, more text based. I'm not into reading text right now, I'm trying to find what appeals to me on a visual level."
Search brainstorming
In thinking through possible improved search experiences there was a lot to consider. Should search and browse be the same or different? Should search live in the new top header or not? How can we balance simplicity with clarity? I explored a lot of different treatments for filters such as having keyword tags or a left filter bar. Ultimately I decided on a series of dropdowns because of the ease of use and clarity of what is selected.
Search final design
• Switch to a new search engine for consistent user experience and improved relevancy, ranking, sorting controls.
• Display results in a large image grid format for easy visual scanning.
• Add new filters and sorting options to help users hone in their results.
• Implement autocomplete to display real-time project results as the user types.
