Mindtouch's Search Experience

A project highlighting my experience as a solo product designer—conducting research, designing the interface, leading user testing, and collaborating with Engineers to come up with the best search experience possible for MindTouch.


Project details

Mindtouch's search experience was majorly lacking—from a clunky UI, to irrelevant search results being returned upon query. We heard from customers for a while that the experience was poor.

Tools used:
My roles:
Web Design
User Testing
Product Design
Web design
"When I received Kate's Adobe XD prototype for MindTouch's search enhancements feature, I immediately realized that I'd just opened up the best XD file I'd ever seen from another designer. I was impressed with the bold yet familiar ways she'd pushed MindTouch's search experience to the next level."
—Dan Bartow, Product Designer to inherit the project

The before experience

With clunky filtering, huge icons (when they weren't necessary), and confusing, hidden dropdowns...it was really quite the undertaking.

My tasks

  • Contribution of initial ideas, thoughts, and possible solutions
  • Sketches to visualize those ideas
  • Low-fidelity mockups
  • High-fidelity mockups
  • Fully functional prototypes
  • Prepared and conducted user-testing with a customer

Creating the new interface

I focused on crafting a bold, yet familiar, user interface. You'll see usage of grays, pops of blue for URLs, and a nice amount of whitespace. There are no vibrant colors, graphics, or crazy animations. This allows all of the attention to be on the content. Why create distractions when users are simply trying to find answers?

Optimized for content digestion

It's best to keep characters between 60-75 on a line when designing for the web. So, by creating a 20/80 split on the page, the content is narrower and allows for less characters on a line. The blocking of each result with a light gray also promotes scannability.

Enhanced ease of use

Filters were a major pain point before this redesign, so I knew I needed to focus a lot of my efforts here. I started by researching leaders in ecommerce—for example, Amazon, Target, EBay, and Walmart—because people are already used to this type of search. By introducing familiar features, such as filters on the left hand side, and results akin to Google, I ensured a comfortable experience for users.

User Testing

This project was my first experience with user testing. While I was nervous, I did my best to prepare accordingly. I come from a storytelling background so, naturally, I wrote a script. Below you can find the intro to it.

Dan's Testimonial

Dan Bartow was hired after the first round of user testing as our official Product Designer. He has twenty years of design experience with companies like TurboTax and SOASTA–so you can imagine how honored I was to work alongside him. This is a testimonial he was kind enough to write for me after inheriting the project.

When I received Kate's Adobe XD prototype for MindTouch's search enhancements feature, I immediately realized that I'd just opened up the best XD file I'd ever seen from another designer.

The first thing that stood out was the thought that went into laying the correct groundwork for a project of this complexity. There were 35 artboards covering all of the functionality for this feature, for both desktop and mobile. They were all named logically and were laid out left-to right by the major animation paths. This made it really easy to figure out which sets of artboards mapped to what functional path the user was on.

The next thing that immediately caught my eye was that Kate had set up a 12 column grid system for all of the desktop screens, and a 4 column grid system for mobile. The grids were turned on for every artboard making it obvious how every component was intentionally laid out. I could see the groundwork that had contributed to such a well balanced design.

Additionally, the corporate Mindtouch site uses a 12 column grid system, and this added a new level of design consistency between the marketing web site and the product that hadn't existed before Kate began working on the product.Clicking through the prototype, I noticed that Kate had used some of XD's more advanced features, like auto-animate, timed transitions, and mask animations in order to make the prototype look ultra-realistic in eluding to the desktop and mobile experiences they were trying to convey. I'd never even seen auto-animate, but Kate was gracious enough to teach me how to use that feature, which I've been using ever since.

Kate's great at teaching new concepts to people and sharing her knowledge with others in order to make them better designers. That's just one of the many reasons she's so wonderful to work with.

Diving into the design itself, I was impressed with the bold yet familiar ways she'd pushed MindTouch's search experience to the next level. The most obvious element of the design was the introduction of a new e-commerce style filtering component that was added to the left side of the screen. Search is a very complicated field of study and interaction, and many people dedicate their entire career to working in just this one area. Kate had produced the perfect component to account for all of MindTouch search's various filtering and search refinement use cases.

Everyone who works with Kate comments on how talented she is, and how great the work that she produces is. She's made me a better designer in the few short months that we've worked on this project together.

I was blown away by how well thought out the addition of this component was. Placing on the left-hand side of the screen creates a familiar experience akin to e-commerce sites such as Amazon, Target, EBay, and Walmart. She made the bold but appropriate move of increasing the search content area from 1050 to 1440 width, allow for her new e-commerce style filter to fit on the screen while still allowing for maximum content area for the search results.  About 95% of the users that would consume this feature come from a desktop computer, so the increase in content area width was called for, and again matched the Mindtouch marketing site for consistency.