Conversify SmartSearch - Casestudy

What is SmartSearch?

SmartSearch is a customizable search engine for webshops.

With SmartSearch webshop users get instant search results when typing their query in the website's search input field.

Websites owners using SmartSearch can configure and optimize search results with parameters such as synonyms, filters, boosting, etc. to increase search result conversions.

The Project

• Design the user interface of the SmartSearch product

• Design the control panel user interface of the SmartSearch product

• Build the HTML/CSS front-end templates of the SmartSearch product

Challenges

This project came with specific technical requirements that made designing and building the HTML/CSS templates extra challenging.

• The code of the SmartSearch will run directly in the customers website; no iframes allowed. This is achieved by loading the conversify javascript on your website which will generate the HTML/CSS code.

• The design of the SmartSearch UI must be completely customizable by the client so that it can match the clients brand and website.

• Because the design and code must be able to work on any clients website the default design must be generic, flexible and be able to run on any screen size or display type.

• The search results ranking rules of SmartSearch must be configurable by the client in the control panel.

Solutions

Custom CSS Reset + Scoped CSS styles

Because the code of this search product runs directly on the customers site extra care must be taken to make sure that the clients existing CSS does not interfere or change the design or layout of the SmartSearch overlay. And the same is true for the CSS of the SmartSearch overlay itself; SmartSearch CSS may not interfere with the clients website interface.

I accomplished this with a custom CSS reset stylesheet that prevents any CSS rules of the clients website to modify the SmartSearch interface.

To prevent SmartSearch's CSS to modify the clients website styling every element that needs to be targeted in the SmartSearch HTML has a CSS rule that is unique for each element.

After extensive testing with several clients of this CSS system, simulating edge-cases and fine-tuning we were confident that SmartSearch could be implemented on any website without causing UI issues.

Protoypes

To explore design options I built a number of HTML prototypes to test their suitability. This prototyping phase was also used to explore the optimal UI default options to feature.

The default design of the search results has to be generic so that it's easy for Smartsearch clients to customize the design to fit their brand and their identity/design system. It must also contain the features that clients and customers can expect based on current industry standard practices.

After testing several interface options and gathering feedback from beta-testing clients a full page overlay UI was chosen to develop into the final product.

Customizable design by using Sass variables

To enable design customization options for styling in the control panel such as fonts and colors are configured as Sass variables in the back-end. This is then compiled as a clients custom theme and appended to the default CSS theme.

To make it easy for the clients to change the interface elements to match their brand color I made a system with which the main color can be changed by changing just one color setting in the control panel.

For full control of the design the client can use Custom CSS to style any part of the SmartSearch interface.

Configure search results ranking rules in the control panel

To enable clients to configure how the search results are ranked there are a number of options that can be configured in the Conversify control panel.

I had designed and built the initial Conversify control panel for an earlier Conversify product; Notifications. When designed that I knew that more tools were to be developed later that also needed to be configurable in this control panel. For that reason I designed and built a UI system for the control panel that was extensible and flexible.

As the configuration options for SmartSearch increased on basis of client feedback and research it was easy to add these new configuration options to the control panel.