INDEX
PROBLEM →
MindTouch's search experience was majorly lacking. From clunky UI, to irrelevant search results being returned upon query—customers (and their customers) could not efficiently solve their problems in a timely manner.
The before experience
The original design was riddled with icons that were much too large (with no real value) and would hide important information behind unintuitive ellipses.
MY ROLE→
I led the redesign of this project, and was the main operational designer.
- ✕Research (competitive + UX/UI)
- ✕UX Artifacts
- ✕Pitching concepts to stakeholders
- ✕Low-fidelity mocks
- ✕Prototypes
- ✕Presenting to C-level stakeholders
- ✕Iteration
- ✕Quality control with engineering
Timeline
1 month
TESTIMONIAL →
Dan Bartow
Dan is a Product Design Leader in Data and Analytics with 20 years of experience. He has worked at companies such as TurboTax, SOASTA, conDati, and—most recently—with me at MindTouch.
ADOBE XD WIZARD"When I received Kate's Adobe XD prototype for MindTouch's search, I immediately realized that I'd just opened up the best XD file I'd ever seen from another designer."
WONDERFUL TO WORK WITH"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."
A NATURAL TEACHER"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."
SOLUTION→
The solution below is the prototype that I built to highlight specifically the faceting panel—thus, the search area is purposely left in low-fidelity.
A bold yet familiar search interface
- ✕Left filtering/faceting panel for ease of use + familiarity
- ✕Removal of unnecessary icons
- ✕Added a hierarchy navigation within the faceting panel
- ✕Enhanced mobile experience
- ✕Improved accessibility (link color + button sizes + better UX copy)
- ✕Introduced subtle micro-animations
- ✕Added page count to faceting panel
- ✕Readjusted spacing to allow for better breathability
USER TESTING→
Gather feedback as early as you can
I led user testing with customers that expressed problems with the search experience.
I decided to go with a guided test sessions—where I'd ask smaller questions like: "If you were to filter your search by category, how would you do so?" Then, track their mouse movements and listen to their thought process.
CUSTOMER FEEDBACK →
Due to legal reasons, I cannot disclose who this customer is.
WHITE-LISTED CUSTOMER"Thank you for working on search and making improvements. Our first impressions are very positive. We very much like the new locations over the old facets. The way it is laid out is a big improvement and will help user find their search result more quickly and easily. Also the result counts are very helpful. Great design overall!"
PROCESS→
Validate the problem by talking with customers
One of the biggest hinderances in design is assumptions. Seeing that I was closely involved with the initial launch of this feature, I felt that I was too close to the project. To keep a clean, unbiased perspective, I listened carefully to our customer feedback; then, I collaborated with other designers in the company to put our heads together.
Research + UX artifacts
Ah, yes, the research phase—arguably the most important one.
My research process begins by deciphering customer feedback, followed by understanding which customer persona(s) this (re)design impacts.
Pictured are some user flows that I created following my research. These not only outline roadblocks that customers are having, but hits on the emotional side of their pain points. I believe that it's important to understand both thoroughly; I'm designing for the human on the other side of the screen, not solely their workflow.
The sketch was done in Procreate, the complete user flow was done in Adobe XD using the Whiteboard plug-in.
Early designs + iterations
In product design, I believe 50% is research, 10% is designing, and the remaining 40% is iterating off of that design. Here are the designs throughout different phases.
From too simple, to too complex—this solution alone saw 10+ revisions (prototyped, too!)
To begin, I knew that I wanted to implement a side navigation for faceting—seeing that this follows familiar placement that is universally understood.
In the first example, you'll see what we thought to be our MVP; in the second example, we allowed scope creep to deter our original train of thinking.
The most complex Adobe XD file(s) that I've ever built
Throughout these iterations, I really got to spend some good, quality time with Adobe XD.
Here, you'll get a look into how I layout my design files. You'll notice the grids being used (I can't design without them!) as well as the natural flow of progression with my artboard animations.
Revisiting the problem with a low-fi MVP
Sometimes, you'll get deep into a project, when you and other stakeholders come to a realization and need to revisit the drawing board.
Better sooner than later!
In our case, it was realizing how complex the project had become. We made the decision to push out certain features at a later date and circled back to our first idea—which ended up being our final solution.
