top of page

Comparator — web & mobile

 
 

User panel wireframes & frontend example, admin panel UI

A tool for comparing products and services with the possibility of adapting to the company’s website.

A problem that often appears on websites offering services or products is the inability to compare them with each other. Users have to open new windows with different articles and search for differences of interest, which is inefficient and frustrating.

The tool I designed gives you the ability to compare five products of the same category on one tab. Its structure allows configuration for each service, depending on the customer's needs.
 

Assumptions:

  • The tool offers the possibility of adjusting the comparison engine for each website, it let a user to compare 5 products of one category and is adapted to the mobile and web view. In addition, it includes a photo, name and several main parameters of the products

  • Parameterization of the tool so it can be easily and intuitively adapted to the needs of a company and product group. This means not only any configuration of the comparison fields, but also the way to customize the appearance of the comparison engine. Adjustment should be done directly from the panel, without the need to involve the developer, but with the option to enter CSS code

     

Process:

Working on the tool was a challenge, because according to the information provided to me, the product would guarantee a very wide flexibility in configuration but it’s flow of use would be as transparent as possible for the user.

My assumption was to create a functional, intuitive, but also aesthetic and modern admin panel, which will provide the user with the pleasure of using. I compared several site-building sites to test their functionality and find good practices that would be inspirations for me.
 

After that, I created the wireframes of user panel of a sample web where he adds products to the comparator to see differences between them, according to the flow. He can add products to the cart directly, delate or add more products (up to 5 items).

    To show the possibility of customizing the tool for web and mobile, I designed frontend views of an example portal - the mobile view is adapted for iOS.
 

My next step was to design the UI of the admin panel, where I present the possibilities of configuring the comparison engine for the selected website. The scenario for this part is: After entering the Comparator’s admin panel, you want to edit your website's comparator. You see a lot of editing options and get familiar with the panel, however you decide to work with the code. You enter it and you publish your changes”.


 

I present two pages of Comparator:

  • User panel wireframes with descriptions of functions in the context of adding products to the comparator on a website, with the possibility of removing and editing

  • Admin panel, where the service provider can adapt the entire comparison engine to his website

 
 
admin panel UI.gif
mobile and web-01.png
bottom of page