Brief
My task was to develop a tool that allows to compare all products/services of a given company. Offered for implementation as a third party tool or plugin, will be fully customisable to particular needs of a company and relevant to its branding.
Customer expectations:
• Creating a tool for independent creation and management of a comparison website.
• Universal use.
• Intuitive operation of the Admin Tool.
• Possibility to adapt the functions and appearance to specific branding.
• Possibility to compare up to 5 items.
MVP
Comparing services and products can be time-consuming, especially when you’re flipping back and forth between pages, websites, and information. This is especially harder on mobile, which helps explain why most industries have higher traffic from mobile, yet a higher conversion on desktop.
The solution to this problem will be a tool that allows within one website to compare products/services and can be customisable without a need to use a code or programming.
The second task was designing Admin Panel, i.e. implementing the tool so that it is easy and intuitive for people with no coding experience. At the same time it needs to be generic and versatile so that
it could be adapted to any company and product group.
Compare.it – admin tool panel
Now let’s look on the other side of the screen and see how the comparator widget can be controlled by the admin.
Designing an admin CMS (Content Management System) from a UX point of view is essential to ensure that administrators can efficiently manage content and perform tasks without confusion or frustration.
I decided to to look at popular website visual builders like Elementor, Beaver, Divi or Wix that help to develop a website without a need to know programming. Visual web builders often use drag-and-drop components that work on front-end, so all changes are shown in real time.
Customising our Comparing Tool
The control panel on the left side allows to change the appearance of the comparator tool in a intuitive way. Clicking on the appearance it shows us options to customise the colours of the table and CTA, we can change typography, add a custom logo or even paste our own CSS code.
Creating a template
Video below shows how the user can create his own template to compare different categories of products. First step is define specification of a template. Next step is adding parameters of a comparison: categories and features of the products, adding or excluding products. At the end user can preview how the comparator will look like and approve it.
Front end wireframe
The comparison tool must allow to compare any products, but of course within one category and up to 5 products at a time. It needs to include a photo, a name and a few main ones parameters, good if in form of infographics.
It should also be easy to add or remove a product, display the differences and allow the user to change the display order in case we want to conveniently compare product 1 and 5. This functionality is very useful while browsing on phone’s screen where the view is limited to 2 products at one time. Also it should allow the user to save the comparison to PDF and save to the clipboard when logging in to the account.
Additionally, it is important to enable sticky parts with product names when scrolling down to view lower content on the website (sticky header).
