Product Comparison

Owned by Beata Komorowska (Deactivated)
Last updated: Dec 21, 2022
3 min read

Prototype: Click here to view the prototype


The comparison tool allows users to compare between 2 and 4 products.

  • To compare products, the user must click the checkbox at the top right corner of each product (flow 1 in Figma file). When the user is on the listview, the checkbox to compare is located on the left in each row (flow 2 in Figma file).  

Note: Products that can be compared on the prototype: Farmer Hotline, Aajevika, Aarogya Setu, AccessMod.

  • Products added to the comparison will appear in the list at the bottom of the page. 

  • To view the details/overview of each product user has to click on the eye icon of the product on the tile/list view or on the logo of the particular product at the bottom bar. 

  • To delete a product from comparison, the user has to click the “X” located at the bottom bar next to each product or by unclicking the checkbox located on the given product”

 

The user must click the "compare" button in the lower right corner to see the comparison table. Once clicked, a new view appears, allowing the user to compare selected products based on the following parameters:

  • Sector

  • Software Code

  • Copyright

  • Building Blocks

  • Certifications

  • Evaluation Rubric

  • Use Cases

  • Location of Deployments

  • Pricing Cost

  • SDG Targets

 

The user can hide the parameters that do not interest him by clicking on the "filters" button in the upper left corner and unchecking them in the "show" section. The unchecked parameter will appear at the bottom in the "hidden" section.

In addition, there is a possibility to highlight differences in products by clicking the “highlight differences” checkbox below the filter.

By clicking on the Evaluation Rubric toggle arrow, users can view and compare the specific numbers on the maturity of the products.

Below there are screens for comparison tool features:

  1. Mark as main product - when the user clicks the “Mark as main product” button, the specific product will be the main product that the rest will be compared to. Once selected, the chosen product will be visible in the first comparison column. selecting another product as the main one will make it appear first and the previous one will be deselected and moved to the right.

  2. The overall maturity score diagram for each product is located in each row, which allows users to compare this parameter directly in the comparison tool (flow 3 in Figma file).

  3. In addition, on the left side, next to the "evaluation rubric," there is an expand to compare the detailed parameters option of the maturity diagram. The overall maturity score chart is visible directly in the table; clicking on it will bring up a modal with an expanded view of the diagram, and clicking on the background or the X" will close it.

  4. Fixed scroll: both the product windows and the left bar have fixed positions. This means that scrolling is enabled only inside the column rows. This will help the user track the details assigned to a specific parameter and product (please go to the prototype to view the fi scroll functionality)

 

Recommendation wizard page:
The comparison functionality will also work on the same principle in the recommendations wizard. Checkboxes will be next to each product allowing users to select them for comparison. The panel of products selected for comparison will be displayed at the bottom of the screen, and clicking the "compare" button will take the user to the comparison tool.