Yext Search Design System:

Yext Search, now known as Yext Answers, is an AI-powered search platform designed for businesses to provide accurate and detailed answers to customer queries on their websites, apps, and other digital touchpoints. Unlike traditional keyword-based search engines, Yext Answers uses natural language processing (NLP) to understand the intent behind users' questions and provide direct, relevant answers.

The Problem:

We need to integrate search into the SSFCU site to improve the member search experience. We need the experience to be seemless within the SSFCU.org environment.

How might we utilize Yext Search to optimize the search experience on our website for our members?

Process:

  • Conduct a competitive analysis to determine how Yext implements into other Financial Institution's websites.
  • Review the documentation for Yext to learn the framework.
  • Design, build, and iterate a responsive design system for the front-end components.
  • Present a clickable prototype utilizing the designed components to stakeholders.

My Role:

UX Designer

Timeline: ~1 month

Tools Used:

Figma, Google, ChatGPT

Discover:

I started research with a competitive analysis of other FIs utilizing Yext Search. Yext is utilized in a lot of industries and I needed to see successful utilization of it in a financial web search space.

I looked at the following FI websites utilizing Yext Search:

  • Ent Credit Union
  • TDECU (Credit Union)
  • Webster First Federal Credit Unioin

Define:

Ent Credit Union was very relatable to SSFCU.org. I based the initial design and logic on their search. This would give us a great starting point, and as we gathered feedback from testing and discussion we could expand and tweak the overall direction.


Develop:

Prototyping was done in Figma. Starting with molecular-level elements such as colors, fonts, iconography, buttons, branding, and spacing.

I then built out the different card components, along with their corresponding states in 2 different mobile device sizes and desktop sizes, to gauge how the elements would behave in smaller viewports.

After some initial team/lead reviews, I removed the iconography, and dialed back the overall style, so that it was consistent with the look and feel of our current website. And with all of the feedback gathered, the overall direction became clearer. I continued to elaborate and build out the other components, and corresponding mobile sizes.


Lets talk about your next project!