Instructables is an online community for people who like to make things. I redesigned the site top navigation and search experience to help people more easily find what they’re looking for.
I was the sole UX designer on a small Agile team that included front-end and back-end developers, QA, and a product manager. I planned and conducted user research in collaboration with the product manager, then analyzed and summarized the research, provided design direction, and iterated based on feedback. I worked closely with developers throughout to scope work, prioritize, and track follow-up work.
Time: Design began Oct 2022, new search released late 2022, header navigation followed in early 2023.
Problem to solve
The Instructables website hosts over 350,000 projects, with more constantly being added, so navigating the site and finding the right project can sometimes be a real challenge. The main header had a confusing hierarchy of links and a very small search box. Our search also used two completely different search engines for logged in vs logged out visitors, so there was inconsistency as well as issues with visual display and 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."
Research
I led a fresh round of user research so that we could better understand how users experience our site and what specific 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.
Key research findings:
• 43% of survey respondents who visit the site have a clear idea of what they are looking for or are trying to find a specific project.
• 59% of respondents said they would go to the search box first to find something.
• One of the biggest search pain points was not finding relevant results and not being able to filter the view to narrow down the results.
• Our user testers struggled to find the search box because of how small it was and also had difficulty navigating the site on mobile.
• Both new and longtime visitors lacked awareness of our parent Autodesk brand.
Process
We knew we would need to switch to a new search engine to accomplish our goals. I worked with the team to come up with a basic list of requirements and then the engineering team did a research deep dive on technical feasibility of different options.
I also did a lot of divergent brainstorming to explore all sorts of different ideas for how to improve our search UX. There was a lot to consider - should search and browse be the same or different? Should search queries live in the header? What is the best way to handle filters on the search page? The exploratory mockups helped facilitate discussions of pros and cons so that we could decide and move forward.
Solution
Navigation highlights:
• Improved hierarchy of information by collapsing top links into centralized "Projects".
• Made it easier to get home and treated the logo consistently from page to page.
• Made top search bar larger and more prominent. On mobile, put in main header.
• Updated the logo and footer to more clearly connect with the Autodesk brand.
Search highlights:
• Switched to new Typesense search engine for consistent user experience and improved relevancy, ranking, and sorting controls.
• Displayed results in a large image grid format for easy visual scanning.
• Added new filters and sorting options to help users hone in their results.
• Added a new autocomplete feature to display matching results as the user types, saving time and getting people to what they are looking for faster.
Lessons learned
I learned a lot with this project. Search is complex and relevancy is even harder! We had hoped to provide suggested search query terms as the user types but realized that this is actually really hard - essentially we’d need a recommendations engine. Even remembering past or popular search queries raised data privacy concerns. We were able to add project results though which is a great shortcut for those trying to find something specific.
As usual we set a number of feature ideas aside for later. I’d love to revisit the filters to add in even more advanced filter options such as publish date and tools used. We’ve also discussed adding search support for additional content types like collections, authors, and help articles. In the end I'm so happy with this project because search was at risk of being removed entirely. Instead, our team was able to step in and not only save search but make it immensely better than it ever was before.