Zyro had a problem to tackle recently. We wanted to offer a more streamlined approach to building websites. 

Currently, when building a website, you choose a template from the template list and then modify it according to your needs: changing images, writing texts, adjusting the layout, and adding features. 

Zyro is fast, really fast, but this process was time-consuming. 

We decided to save our users some time by creating a new flow. Instead of selecting a template and adapting it to your needs manually, you just answer a few questions, and we offer custom generated templates based on the answers. 

You can directly jump into working on a template that meets your needs.

We called the new website creation flow Q&A Wizard (Question and Answer Wizard). It should offer some advantages over the current approach:

• Faster and more intuitive website creation
• Customized and dynamic templates
• Easy features selection
• More user input during the creation process
• Fewer “lost” customers

Here’s a simple flowchart of our initial Q&A Wizard website creation flow:

The user selects a category for their website, based on selection we know what images, texts, and layouts we should apply to the website. 

Later, the user selects features that he needs, like a blog or eCommerce functionality. Sometime later this might be selected automatically based on the selected website category. 

The last step is to choose color palettes and fonts the user likes. 

Output of this feature is three unique suggestions for a website user can continue building.

The main problem we were focusing on was the first step in the flowchart above was how to present possible website categories in an easy to use and understand way.

Our initial approach

The first approach we tried was to have 15 general categories that a customer could choose from, with a special “Other” category. 

After the feature was live for a week, we noticed that most customers would only choose the “Other” category. This told us that they couldn’t find the appropriate category they needed.

The second iteration

We thought that it might be possible to give our customers more freedom, letting them choose a category from a huge list of predefined categories. 

The user could input keywords related to their website into a text box and we’d present them the relevant suggestions. To implement this we needed some predefined general categories that we could base our suggestions on. 

So we came up with 10k different categories for our users to choose their website category from. These included: A Cappella Choir, Advice Blog, Tent Manufacturer, and Wedding Registry Site. 

Next, we thought about ways to implement the search itself. The easiest way would be just searching for occurrences of users’ input in category texts. For example, if the user types “pony” we perform a search in our 10k category list for “pony” occurrences anywhere in the text. 

Build, brand, and grow your business with Zyro

TRY FOR FREE

But what if the search term is not present in the categories list? One way to solve this problem is to just have a synonym dictionary or similar word dictionary. 

When a user inputs “pony” we look in the categories list and a predefined synonyms list and make suggestions based on those results. But that is not viable for maintainability reasons. It’s also inflexible since we need human labor to add new synonyms. 

At this point, we decided to combine two popular techniques in natural language processing to solve our problem. 👇

1. Directed Word Graph and Levenshtein Edit Distance to search in our category list for direct matches. First, we build a graph of our categories and use Levenshtein Edit Distance for calculating the final results

2. Word Embeddings – we perform similar word search in case users query is not present in our category list. 

For example, a user searches for the category “wizard”, but we do not have such a category in our list. Using the word embeddings technique we know that the term “wizard” is very similar to “magician” or “magic” categories that do exist in our category list. So as can suggest using those relevant categories. 

It is implemented by converting the 10k categories into vectors that represent words in multidimensional space. A search is performed by comparing the user query, converted to vector, to our 10k categories vectors to find the closest match by cosine similarity.

In general, we have the following process:

After this iteration, we have a search feature that can handle direct and indirect search queries from our users.

Deploying the search feature 

When deploying this feature we searched for something easy and quick that would not create additional headaches for our DevOps team. 

As we use Google Cloud as our cloud provider, we decided to go with Cloud Run. Cloud Run takes in a container with our pre-built app on it (we are using Cloud Container Registry to store images) and deploys it in a serverless environment. 

It eliminates the need to manage resources or create an infrastructure. 

“Pics or didn’t happen”

Here are a few query samples just to show the contextual and direct search: