The goal of the task was to design universal tool for a product comparison engine for different types of online market stores. The comparison tool seamlessly integrates with the appearance and style of every webpage, allowing for customization of colors, fonts, and layout without the need for involving a programmer. The tool allows you to compare 2 to 5 products from the same category on one card and should be able to write CSS code.
The tool consists of 2 parts:
In order to broaden my knowledge about online comparison websites, I tested 3 standard websites with the highest opinion location. Tests from support, origin, and data source. I searched many internet sources for information on the use of websites on CMS and choose one of them.
In order to broaden my knowledge about online comparison websites, I tested 3 standard websites with the highest opinion location. Tests from support, origin, and data source. I searched many internet sources for information on the use of websites on CMS and choose one of them.
The next step focused on creating three key views in the product comparison path and designing consistent templates for both websites.
The images illustrate Website 1, a women’s clothing store.
Observation 1:
There is no information on how to use the comparison engine. Introduced an auxiliary button
with a wizard.
Observation 1:
There is no information on how to use the comparison engine. Introduced an auxiliary button
with a wizard.
Observation 1:
There is no information on how to use the comparison engine. Introduced an auxiliary button
with a wizard.
Observation 2:
Incorrect logic regarding automatic sizing (probable problem with database integration).
Observation 2:
Incorrect logic regarding automatic sizing (probable problem with database integration).
This User Flow outlines the step-by-step process of comparing products on the website, illustrated with slides that include comments explaining each stage.
I searched internet sources for information on the use of websites on CMS platforms and choose WordPress. The solution’s logic enables the installation of a plugin for any WordPress-operated store. The administrator can choose specific categories where the comparator operates or leave the default setting to compare every product category. The plugin maps all attributes within a given category, allowing for comparing each product parameter. The customer only needs to select a product (with a unique ID) for comparison, up to a maximum of 5 products at once.
For example, in Marllen’s online store, a customer adds a product – such as a shirt with a specific size (each size of the shirt being a different product in the store’s database) and is redirected to the comparator.
I created the most important views for the editing tool.
In the paper-based tests, three people participated.
Task for the test: Edit the object (Name) and change its font to a different one.
Observation 1:
Not everyone knew that (Product Name) and (Name) are the same objects.
Observation 1:
Not everyone knew that (Product Name) and (Name) are the same objects.
Observation 2:
Only 2 comparator elements are visible.
Lack of editable elements like:
– Comparator icon
– Info button
Observation 2:
Only 2 comparator elements are visible.
Lack of editable elements like:
– Comparator icon
– Info button
Observation 1:
Based on the second iteration, changes have been made to the Admin Tool interface.
After conducting tests and noticing the inability to modify other objects, new elements were introduced:
-Comparator icon
-Info button
Observation 1:
Based on the second iteration, changes have been made to the Admin Tool interface.
After conducting tests and noticing the inability to modify other objects, new elements were introduced:
-Comparator icon
-Info button
Observation 2:
Another challenge was navigating the new interface. Not every user knew how to return to the main menu after selecting one of the comparator elements. To address this issue, a one-time wizard was introduced with instructions on how to navigate the application.
Observation 2:
Another challenge was navigating the new interface. Not every user knew how to return to the main menu after selecting one of the comparator elements. To address this issue, a one-time wizard was introduced with instructions on how to navigate the application.
The User Flow show step by step how users compare products on the website. Below you can find a few slides represents how it works.
The prototype was created with e-commerce site administrators in mind. The design is tailored so that each user can independently customize the comparison tool to match the appearance of their own store, without the need for developer intervention. Based on research, functionalities important to both customers and administrators have been added. One of the significant challenges was designing a clickable object editing feature for the admin tool, allowing easy changes to individual objects.
I believe that my work meets all project requirements, and the solutions implemented make it more user-friendly.
Please feel free to contact me by email or social media.
Copyright © 2025 Ula Prusak
