Project Completed:
August 28th, 2019

Brief

MindTouch's search is easily one of the most important parts of our product. This being my first product design (and customer-facing) experience, it's near and dear to my heart. What started as a recognized opportunity turned out to be the project that revealed my love for product design. Read on to learn about my involvement, my method, what it was like to lead user testing, and my final design.

The Problem

Our Search had been facing problems for a while.

To name a few:

  • Customers' main complaint was that the search results weren't always relevant to their problem or what they would expect
  • The look of our search was dated
  • The search experience itself felt clunky and disjointed
  • Using filtering and tags was difficult at best

Before experience

My Role

I worked as the Product Designer to produce to following:

  • 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

The Solution

Familiar 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.

Filters! 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.

Showcasing the redesigned filters section

Testimonial

"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." — Dan Bartow

Read the full testimonial

Behind-the-scenes

It all started with a design jam

On June 28th of this year, our Product department held a design jam for a redesigned search experience. Now, I'm not in Product. But weeks prior, the company said goodbye to our only UX/UI designer. To help pull the weight, a few designers were invited to put our heads together to sketch out what we each envisioned for a new search. Though there were only a handful of us, the ideas we came up with in those three hours not only sparked important questions and challenged us to view our search in a completely different way, but we left with a incredibly good idea of what we wanted—considering it was our first session.

Gathered around, coming up with cool ideas

An opportunity recognized

The design jam was supposed to be my only involvement. But when it was stated that Product had no clue who would be helping with prototyping the new search—and that's what I specialize in—I couldn't just sit there. My workload in Marketing had been slow, and I knew I had the bandwidth to help. So I stuck around afterwords, helped clean up, and expressed interest in lending a handle (so long as we could get sign off from my department.)

I didn't think much of it, truthfully. I'm just good at recognizing an opportunity when it's in front of me.

Entering the realm of Product

Temporarily—of, course.

For the next two months, I was fully immersed into Product Design (while simultaneously completing my Marketing duties.) Our company is relatively small at about 90 people, so I had a lot of voice in design direction, and I solely executed on all design work for those two months—until we hired on the lovely and talented Dan Bartow. His onboarding brought such a vast amount of knowledge to the project, and getting to hand off the work I had done to him was an honor.

But, let's rewind. What did those two months look like?

Behind the Scenes

(of design)

All of my wires from the prototype

Grids are cool. You should use them.

Zoom meeting with our Engineers so they could keep us in line

Reflection

I throughly enjoyed my time spent on this project, and definitely grew a ton as a designer. Maybe someday in the future I'll get my hands dirty with more product work.