Adjust your search results with a simple drag and drop.
With Yext’s entrance into the eCommerce market came a new persona, the merchandiser needs to tweak search results to meet a business objective while not necessarily knowing about the inner workings of search like our usual users. Our current users had to edit search results through Query Rules, which required a time consuming flow configuring pairs of criteria and actions.
Create a simple drag-and-drop WYSIWYG interface where a user can directly reorder and manipulate search results. Query Rules will be auto-generated based on where the user drags search results. This solution was two-fold:
It enabled Yext to be a stronger option for current and potential eCommerce clients, such as Samsung, by having a tool essential to their business needs.
It greatly reduced the time needed to complete the task of modifying search results. This was a welcome improvement by our current users who often interacted with Query Rules.
Michael Cho
Senior Product Designer
Max Davish
Product Manager
Max Shaw
SVP of Product
Jessie Smith
Upward Analyst
Daniel Bagel
Upward Analyst
Jim Henris
Software Engineer
Emily Zhang
Software Engineer
New Feature
4 months (Jan '22 - Apr'22)
Figma, Snowflake
As the product designer on the team, I conducted a competitive analysis, took part in brainstorming sessions, created mockups, gathered feedback, built Figma prototypes, performed user testing, and participated in a bug bash.
Ensure certain products appear at the top of the search results when users search a specific query.
Sort each type of result to add an extra layer of customization at a higher level.
Approve, reject, or modify the answer to the query so that the search algorithm gets better over time.
Max, our PM, created a Snowflake dashboard for us to see our users’ current usage for key-related features involved. Jessie, our analyst, provided great insights through her experience working on Walmart’s eCommerce platform. I performed a competitive analysis on other brands to compare different approaches.
The team brainstormed multiple approaches to how we wanted this feature to look and operate, and I designed rough mockups of some ideas that we had.
After receiving feedback from stakeholders, designers, and engineers, I increased the fidelity of the mockups of the approaches and develop the key flows. Given that the feature required many net-new design components, I took the opportunity to update the aesthetics to better reflect today’s UI trends.
Our PM and SVP quickly built a basic prototype that mirrored the functionality of my designs that used real data from our platform.
I conducted and recorded a few tests with active users within Yext that would more closely match the merchandiser persona. They performed basic tasks and gave valuable feedback.
Test Recording
User Testing Slack Channel
I updated my designs based on the feedback to help address issues that our participants came across, and I prepared my Figma file for engineering handoff through utilizing Figma's interactive components to provide clear organization and annotation.
Old Empty State
New
Old Warning
New
Old Drag-and-Drop Interaction
New
Organized Figma Handoff
Interactive Components
(Go ahead and click around!)
Throughout development, I regularly QA’d the feature to ensure everything matched my designs and to catch any edge cases. We also hosted a bug bash that presented both bugs and UX feedback that we could address within the last weeks before launch.
QA Sheet
Bug Bash Slack
After making final fixes and some adjustments to the design, we successfully shipped Edit Mode as a major part of Yext’s Spring 2022 release.
Our team collaborated with the Analytics team to come up with a database schema that will help us answer important questions about adoption, retention, and ease of use.
We received many slack messages about our users praising the new feature! However, I had left Yext right after this project, so I did not get to take a look at the numbers to see measured impact. I would have been interested to see how we could iterate on the feature to improve it further.
Database Schema
Questions
We simplified this feature to have a limited set of capabilities to not overwhelm users. There are more advanced editing options that are very powerful but we decided not to include those to simplify the flows and edge cases, reduce scope, and launch an MVP version.
Most eCommerce sites provide a grid view of search results, and ideally, we wanted our feature to do the same. However, this would have increased the scope by creating/developing two separate designs for list and grid view results. Due to time and resources, we kept the list view as our MVP approach since the vast majority of our customers use it.
I was proud to have collaborated with my team to create this feature as part of Yext’s emergence into the eCommerce market. In addition, adding an updated design aesthetic that increased the platform’s perceived value was a great contribution to the company’s design.
Take a look through the actual file! Things can get pretty messy as always.
Survive various levels based on your in-game activity.
We reduced user acquisition cost and came closer to profitability! Also, our beta test hit our N-day user retention goal with 38.6% for Day 10 and 20.5% for Day 30, which helped increase Customer Lifetime Value.
Casually win cash and prizes through the game you already play.
Among DAU and MAU increases, our N-day user retention improved by 95% for Day 7 and 160% for Day 30. Users coming back each day and paying entry fees more often meant increased revenue!
Tweak AI Search results with just a drag and drop.
Its launch made Yext more compelling for securing new deals and renewing current ones, such as with Samsung. It also significantly improved efficiency and satisfaction by saving valuable time completing tasks.
Businesses connect to customers via a network of freelance salespeople called “Drummers” who earn commission with each sale.
We launched in New York and Atlanta and earned a 4.5-star rating on the App Store!
