SolDevelo has improved design of DIAL Catalog of Digital Solutions and increased its efficiency. In this case study we will describe what DIAL Catalog is, what kind of changes were requested by the client, and how our team applied them. We will also provide a visual comparison of the previous and the current design.

Our Client

Digital Impact Alliance (DIAL) is an organization that focuses on increasing access to digital solutions, and on supporting digital transformation around the world. They use their resources to contribute to achieving the Sustainable Development Goals (SDGs) by 2030.

DIAL’s mission is to provide equitable access to life-enabling services and sustainable development digital tools for all global communities. They believe that everyone, everywhere should have the opportunity to use the essential services they need to thrive. To make it possible, DIAL engages in many initiatives aiming at increasing accessibility of technologies.

DIAL Catalog of Digital Solutions

DIAL Catalog of Digital Solutions is an online database of digital solutions. It was created with the purpose of serving as a trusted and comprehensive source of information for implementers, policy makers, donors, technology and ICT ministers and Product Owners.

The Catalog is designed to provide the user with a detailed overview of the landscape of digital solutions. In many places around the world information on existing solutions is not easily accessible. Since people don’t know about already created tools and where to find them, they end up developing new ones. In result, the work put in solving one problem is needlessly doubled. 

The Catalog aims at preventing this problem. It allows the user to first explore the existing tools, get to know who is using them and what they are helping with, grasp a deeper understanding on the possible solutions to their problems, and only then decide whether those problems can be addressed by some of the tools listed in the Catalog, or if they require a new product to be developed. This way users can save time, energy and resources, and utilize what is already available. Additionally, the more institutions are using the existing tools, the more chances they get to be tested and improved to serve on a high-quality level.

DIAL Catalog of Digital Solutions is a vast source of information on digital solutions. It provides an easy access to the following data:

• Sustainable Development Goals (SDGs) – 17 goals and 169 targets representing global priorities for investment in order to achieve sustainable development. DIAL Catalog allows to search for digital products that can help achieve SDGs; 
• Use Cases – steps that an individual or system will undertake in order to achieve a business objective; 
• Workflows – generic business processes that can be applied to SDG Use Cases across multiple sectors; 
• Building Blocks – enterprise-ready, reusable software components providing key functionality facilitating generic Workflows across multiple sectors;
• Open Data – data that anyone can easily access, use, analyze, share, and redistribute;
• Projects – implementations of digital platforms in a specific context and/or sector;
• Organizations – institutions that support the development and/or implementation of digital technologies to address the SDGs;
• Playbooks – tactical guides that help different actors approach common digital initiatives. They provide step-by-step instructions and highlight key technical and operational considerations;
• Maps – locations of projects’ implementations shown on a map.

 (Source: https://solutions.dial.community/)

To help the user navigate through the Catalog, it was equipped with a collection of various search features that enable filtering information in many different ways. The user can browse through the Catalog by any of the above categories (each one of them is placed in a separate tab) to easier find the solution that they are looking for. The Catalog also offers further assistance by providing the Recommendations Wizard tool. It automatically searches for solutions based on the individual needs of the user, helping to find the most suitable options.

The Catalog also provides the user with information about each of the solutions available. All of the data is gathered from official sources: WHO’s Digital Health Atlas, Digital Square’s Global Goods, DPGA Registry, GIZ’s Toolkit, New America, OSC, Principles of Digital Development, and GitHub.

More information on how to use DIAL Catalog can be found in this series of tutorials.

The Challenge

DIAL is continuously working on the Catalog by adding new features and enhancements. In order to fulfill this year’s roadmap on time, they requested additional help in software development, QA, maintenance and support services. We’ve decided to take part in the project and contribute to this valuable solution.

Our team was responsible for the following tasks:

• Development of the Catalog’s features:
  • Migration of administrative features from Rails to React;
  • Development of products’ quality metrics, based on their repositories;
  • Creating a design system to ensure consistent look of the application and to improve UX;
  • Improving admin UX;
  • Implementing form validation feature;
  • Implementing a built-in comments section;

• Delivering a high-quality code and taking care of the application’s stability:
  • Testing;
  • Code review;
  • DRY;

• Best Practices implementation:
  • Securing the features and pages with restricted access;
  • Defining DoD;
  • Automatizing CI/CD;
  • DX improvement;
  • Documentation development;

• SEO optimization and application performance improvement;
• Scrum processes improvement;
• Improving UX of existing features and ensuring good UX of the new ones.

The Process

We’ve created a highly self-organizing team composed of a Project Manager, four Developers (fullstack, frontend, backend), and additionally supported by the Head of Enabling Team. Each person in the team was actively engaged in the whole project, not only participating in the technical tasks, but also managing the contact with the client, with whom we discussed the details of our solutions. It was a challenging experience for a team composed mostly of developers. However, it helped us grow and learn new things. We have also gained testing skills, since there was no Quality Assurance Specialist in our team. The high self-organization allowed us to be more independent, and plan Sprint Reviews, Backlog Refinements and tasks’ pre-estimations by ourselves, increasing the team’s efficiency and flexibility.

We were challenged with many research-oriented tasks that were necessary to construct an architecture plan and find new satisfying solutions to some of the Catalog functionalities. It required a detailed understanding of the results that needed to be achieved. Due to that reason, our team put a lot of care into composing tasks descriptions to make sure they are complete. 

Each research task began with verifying if any part of the target functionality is possible to achieve internally – by extending the code of the existing application. If it was not possible, we’ve continued the research externally, firstly in the used framework’s and libraries’ documentation, and secondly among available open-source JavaScript libraries. Research-oriented tasks were assigned to the most experienced developer in our team; however, all of us actively participated in the process, exchanged ideas and offered support.

One of the more challenging aspects of this cooperation was the time difference between our team and the client. It resulted in limited opportunities to meet and discuss the progress of work. However, such a situation also had its upsides – since the time for consultations was short, we were highly focused, not to waste a single minute. It positively influenced our efficiency during the meetings.

We have also developed effective methods of communication with the client that have significantly improved over the course of our cooperation. It included written stand-ups, where we shared links to comments that await being answered, blockers and merge requests. Another tool proved useful were flags in Jira – by flagging issues we could mark the ones that required the client’s attention.

The Solution

Since our work mostly revolved around design changes, the best way to illustrate it is a visual comparison. Below you can see the look of DIAL Catalog components before and after our redesign. Each image will be followed by a brief description of benefits for the user.

Custom design system 

We were required to introduce a custom design system to ensure the consistency of all inputs’ look. It included the following steps:

• Creating a library of reusable components which follow the style guide;
• Replacing each input with a suitable reusable component.

Changes are visible for: end-users and admin users.

The comparison:

Benefits for the end-user and the admin user:

• Removed distractions by providing consistent look of all inputs in all states, that is when inactive and focused;
• Improved accessibility due to consistent look of all inputs in focused state – it is now easier to see which input is currently focused, no matter if the user is navigating with a mouse or a keyboard.

Forum enhancements

To make sure that a forum dedicated to DIAL Catalog users is a safe and accessible space, we’ve made some enhancements, such as:

• Replacing a link to an external forum with a built-in comments section; 
• Introducing deletion functionality for admin users.

Changes are visible for: end-users and admin users.

The comparison:

Benefits for the admin user:

• Enabled the admin user to see other users’ comments and respond to them directly in the application;
• Enabled the admin user to delete any inappropriate comments directly in the application.

Benefits for the end-user:

• Enabled users to participate in discussions, without having to leave the application and create accounts on an external forum;
• Made it easy to notice and contribute to an ongoing conversation, as all comments are displayed directly in the application.

User-friendly product maturity scores chart

Previously, product maturity scores were displayed in a form of a list of categories with scores assigned. It proved to be not clear and accessible enough for many users. Therefore, we were requested to improve this page’s design and admin functionalities by:

• Replacing maturity scores table with a user-friendly product maturity scores chart;

• Introducing scores updating functionality for admin users.

Changes are visible for: end-users and admin users.

The comparison:

Benefits for the admin user:

• Made the data more readable and, therefore, easier for the admin user to notice incorrect values;
• Enabled the admin user to update maturity scores directly on the product page.

Benefits for the end-user:

• Made the data more readable and easier for the user to:
  • Understand overall product’s maturity – product’s strengths and weaknesses;
  • Compare products’ maturity.

Form field validation

The Catalog faced some issues with invalid data submissions. To solve this problem, we’ve made changes to the form field validation, such as:

• Implementing invalid state for all inputs – when invalid, its border turns red;
• Creating a reusable component for displaying validation error messages.

Changes are visible for: end-users and admin users.

The comparison:

Benefits for the admin user:

• Decreased amount of invalid data saved in the database;
• Ensured that all mandatory fields are filled.

Benefits for the end-user:

• Ensured end-user makes a valuable contribution by filling in all mandatory fields with valid data;
• Made it easy for the end-user to understand why some data is invalid by displaying a descriptive error message underneath a corresponding input.

Migrated and enhanced admin functionalities

In order to improve design efficiency for the admin users of the Catalog, we’ve completed the following tasks:

• Migrating forms for creating and updating the Catalog entities (Products, Organizations, Projects, etc.) from Ruby on Rails to React;
• Establishing a template for forms created in the future (which follows the style guide).

Changes are visible for: admin users.

The comparison:

Benefits for the admin user:

• Improved usability by providing a consistent look of all forms;
• Decreased need for scrolling by decreasing amount of whitespace; splitting form into two columns and moving a lot of inputs out of the form and into the entity page.

Improved UX for the admin user

One of the goals of this redesign project was to increase the admin user experience by:

• Enabling updating of additional entity data without having to leave the entity page.

Changes are visible for: admin users.

The comparison:

Benefits for the admin user:

• Decreased time needed to fill in additional entity data by enabling filling in this data on the entity page;
• Decreased time needed to update additional entity data by enabling updating this data on the entity page.
  

The Result

We have successfully applied all of the required changes to the DIAL Catalog of Digital Solutions application, making it more efficient and user-friendly. Thanks to the experience and commitment of our team, as well as the client’s trust and openness to our ideas and solutions, the cooperation was a prosperous and pleasurable one.

DIAL Catalog of Digital Solutions is a highly needed initiative in the realm of digital solutions. We were happy to contribute to this project and make it even better. We hope that it will continue to grow and help people around the world find tools that they need.

Download Case Study (PDF)

About us

SolDevelo is a dynamic software development and information technology outsourcing company focused on delivering high-quality software and innovative solutions. An experienced team of developers, customer-oriented service, and a passion for creating the highest quality products using the latest technology are the undeniable advantages of the company.

ISO 9001 confirms our dedication to the highest quality and ISO 27001 shows that we treat security extremely seriously. Over 70% of our team members are certified Scrum Professionals, over 35% are Oracle Certified Professionals and 100% of our quality assurance team has ISTQB certificates.

If you’re interested in our work, we invite you to read our other case studies.