How SolDevelo created The Comparison Tool design for the DIAL Catalog of Digital Solutions

digital-impact-alliance
united-nations-foundation

The main goal of the project was to create new designs for DIAL Catalog of Digital Solutions – a tool designed to support governments, donors, and non-governmental organizations (NGOs) in the discovery, selection, and evaluation of software products that have been developed to address the Sustainable Development Goals (SDGs). We’ve already shared a case study on this topic as well as an article dealing with more technical aspects of the project. If you’re interested to gain fuller understanding of our collaboration with DIAL, we invite you to read the blog posts mentioned above.

In this article we will focus on the UI/UX designer perspective. The project involved creating designs for the following three market features: vendor storefronts, RFP opportunity radar, and a product comparison tool.

Authors: Beata Komorowska, Beata Zwidryn

The main components of the DIAL Catalog project scope:

  • Refreshment and restructuring of the layout of the Catalog

The Catalog has been divided into two parts. The three new functionalities (Storefronts, RFPs, and Products with the Comparison Tool) have been moved to a new space called “Marketplace.” 

  • Design of a new landing page for the Catalog 

The landing page introduces both the Catalog and Marketplace features. 

It contains guidance for less advanced users and explains all the functionality and possibilities that the DIAL Catalog provides. 

  • Creation and design of a storefront feature

Its main function is to let the organization owner display their portfolio more elaborately by adding more sections, motivating the page owner to improve the page, and highlighting the information better. The storefronts consist of fourteen editable sections that allow organizations to present their activities in detail. In addition, there is an option to create a new vendor storefront in the storefronts list view.

  • Creation and design of a request for proposal (“RFP”) radar opportunities feature on the Catalog that focuses on offers from the governors/donors so they can post an offer on a specific solution with the possibility of applying.
  • Creation and design of a product comparison and evaluation rubric tool that allows all users to view products and compare them based on multiple parameters. 
  • Creation of a style guide in Figma that would include all the mockups, interactivity descriptions with examples, components library, color palette, and typography of the Catalog for both designers and developers.

Comparison Tool Features process creation

This article will focus on the functionality we created from scratch – The Comparison Tool. Our goal in developing this tool was to give users as much freedom as possible to navigate through the tool’s functions without limiting previously available features. It had to be intuitive and easy to use. 

The project was carried out according to the following process:

  1. Research – conduct relevant discussions with clients to meet the business’s requirements and get to know users’ needs. This phase is also about analyzing the market.
  2. Design – this phase includes creating personas (representations of a user’s profile), brainstorming all the ideas, sketching the first ideas on a piece of paper, and making the first wireframes in Figma.
  3. Prototype – the result of the previous stage is to create a prototype version of the project to help users understand how the website will work and provide a sample user flow.
  4. User testing – combining all the previous phases leads to creating the clickable version of the project and handing it over to users to test it and get feedback. 
  5. Design adjustments – this phase consists of taking into account gathered feedback – that is, making appropriate changes to the mockups and sending them back for re-approval. 
  6. Developer handoff – once everything is accepted, the final stage is to create a style guide and hand over all the necessary documentation to the client.

Visual representation of the process:

dial catalog

The creation of a “compare” button on the products tile and list view 

The user should be able to select the products to compare directly from the main “Product” page. An important issue, which also had to be taken into account at the stage of designing the button, was its location on the product tile. We were using the current layout, so the button needed to be intelligible, not take up a lot of space, look well among the many symbols used on the product tile, and match the layout in the product list view. 

After many discussions and research, the outcome was a checkbox with “compare” text next to it. In addition, the effect of adding a product to comparison has been enhanced by an orange border around the product tile.

dial catalog
The “Compare” checkbox on the tile view

A simplified version of the tile view, the “Compare” column with a checkbox, was added in the list view. 

dial catalog
The “Compare” checkbox on the list view

Adding products – user flow

  • The first step in the comparison process is to select all the products we want to compare – the user can compare a maximum of four products. 
  • When the first product is added, an information that at least two products must be added to run the comparison tool is displayed.
  • When one product is added to the comparison engine, a bar will appear at the bottom of the screen with information on which product has been added.
  • The user can leave the comparison mode by deleting the products from the comparison toolbar or by clicking the “Delete the comparison” link on the left.
dial catalog
View of the bottom bar when one product is added
  • The “Compare” button will appear when we add more than one product, allowing users to view the details.
View of the bottom bar when two products are added
  • The maximum number of products that can be added to the comparison is four. When the user wants to add a fifth product, a message is displayed as on the following screen:
Message displayed when a user tries to add the fifth product to comparison tool

Preview products feature

The user can preview the details of a particular product. Thus, the user can preview basic product information by clicking on the “eye” on both the tile and the list view. Once the “eye” icon is clicked, an overlay appears on the screen’s left side, which the user can close – by clicking on the background or the “X” located in the upper right corner of this overlay.

dial catalog
The “view”  icon located on the product tiles view

dial catalog
The “view” icon located on the product list view

The “eye” icon has also been placed on the bottom bar – after hovering over the product logo, the eye appears and works in the same way as mentioned above.

dial catalog
The “eye” icon is located on the bottom bar with products selected for comparison.

dial catalog
The overlay appears when clicking on the “eye” icon. 

Comparison Tool page

Based on the users’ research, the following needs were specified: 

  • Possibility to display only selected parameters;
  • Selecting the main product that the rest of the products can be compared to;
  • Showcasing the differences between the products;
  • The evaluation rubric for each product should be displayed;
  • Possibility of exporting results;
  • An option to access the product details directly from the comparison tool.

Once the user has selected the four products they want to compare, they can click on the “Compare” button at the bottom bar to access the comparison tool.

The comparison tool is divided into two sections. On the left sidebar, the user will find a section with buttons where they can perform various actions, such as:

  • exporting a comparison;
  • filtering parameters;
  • highlighting differences in parameters. 

The second part (on the right) is a list of products selected for comparison, along with their parameters based on which the comparison is made. The product windows (right section at the top) and the left bar have fixed positions. This means that scrolling is enabled only inside the column rows. This helps the user track the details assigned to a specific parameter and product.

Filters

Based on the list of parameters provided by the client, the comparison table was created.  We decided to add filters to allow users to choose which parameters to display. The user can hide the parameters that do not interest them 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, and the list will immediately be changed according to selected filters. 

The “filtering” feature in the comparison tool

Highlighting product differences

Below the filter button is a checkbox with the option to highlight differences, which will highlight in blue all differences in the parameters.

dial catalog
The “Highlight differences” feature in the comparison tool (blue color in each line)

Maturity score

In addition, an important issue for the client was the inclusion of a chart with an overall maturity score. We decided to place this diagram directly in the table – so that users can also compare products on this basis directly in the comparison table view. The user can also enlarge it – clicking on it opens an overlay with an expanded view of the diagram. It is also possible to expand the detailed parameters of the maturity level by clicking on the arrow next to the “evaluation rubric” parameter on the left side.

Evaluation Rubric – expanded view

Main product selection

The user can also select a main product and, based on it, rate the other products selected for comparison. The user must click the “Mark as main product” button next to each product’s logo at the top of the comparison table. It will appear on the left side of the table. Selecting another product as the main one will result in moving it to the left side and deselecting the previously selected product.

dial catalog
One product selected as main

In addition to the functions described above, the user has the option to remove products from the comparison tool using the “X” icon located next to each logo, the option to preview the product description (after hovering over the logo, an eye is displayed, which, when clicked on, works in the same way as described above – that is, it opens a window on the left side of the screen) and the option to return to the product list view.

Video of how the comparing functionality works:

Conclusions

The DIAL Catalog project was interesting in many ways. On the one hand, we worked on the already existing layout and brand guidelines; on the other hand, we had a lot of freedom to create the comparison tool itself. Weekly meetings with the client allowed us to understand their vision for each functionality better. We had time to discuss any questionable issues and immediately implement solutions to move forward with creating new functionalities. The project was very engaging in terms of user experience; during an in-depth session with users, we were able to discuss any doubtful issues, ask users questions and clear up any doubts about the solutions used, which was very valuable for creating the final version of the project.

Author

Scroll to Top