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.
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
This project came with specific technical requirements that made designing and building the HTML/CSS templates extra challenging.
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.
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.
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.