04 Prototyping

Goal:”Recreate an existing OpenIMIS frontend module using the developed design guideline to improve the user experience. Compare the updated module with the existing one”

01 Idea

The development of the Prototyp should support the created Design Guideline by providing a working “first look” version. Therefore, the introduced components should be implemented. Secondly, the prototype should support further discussions about the design of OpenIMIS and how to deal with user-centered-design in the future.

The current version of OpenIMIS already includes a lot of best practices as well as a standard design framework. That's why, the new developed prototype will not completely renew the user interface, moreover it should enhance current and new developed modules with some missing potentials.

The prototype will be focused on the insuree-module of OpenIMIS.

02 Approach

The prototype will be implemented using the defined software engineering process described in https://openimis.atlassian.net/wiki/spaces/OP/pages/1425473537. Hence, a dedicated Jira Ticket was created with a short description of the user story as well as a more detailed information on the scope.

After creating the Jira Ticket, the development environment was setup. Since the implementation would mainly focus on the Frontend modules, the PostgreSQL database was served via a docker-container. The Backend was setup to run locally inside WSL2 environment on a windows client. Furthermore, the needed Frontend Components were setup also inside the same environment.

openimis-fe_js

As the new version of https://mui.com/material-ui/ was implemented it was necessary to update the existing dependencies in the openimis-fe_js module. Therefore, the package.json file was updated and the needed dependencies installed.

Used dependency = npm install @mui/material @emotion/react @emotion/styled

openimis-fe-core_js

As mainly all components in the additional modules are dependent on the “core components” it was needed to update them in the openimis-fe-core_js module. Hence, the needed dev-dependencies for material-ui were added. Additionally, some configuration in the .babelrc file neede to be updated as the mui-package includes the “optional chaining operator”.

Finally, core components as the TextInput, SelectInput and Table could be updated to use the newly imported mui-package. Furthermore, they were changed to align with the developed guideline.

To comply with the guide for “List components” a new core component was created. It should be used whenever an information is needed inside a List. Therefore, the component renders just a Label which makes the usage of form-controls like Inputs and Selects not needed anymore.

The changes can be found in the related branch on Github: https://github.com/openimis/openimis-fe-core_js/tree/feature/OP-2322

openimis-fe-insuree_js

The changes in the already developed insuree-module included a new render for the poverty status in the family-overview list. Hence, the used Checkbox was overwritten by an Icon. Secondly, the MartialStatus and Gender information was changed to use the newly created core component. Therefore, no more Form-Controls were rendered inside the family-overview list.

Since the design guideline also suggests to change from the Overview-Screen to the Detail-Screen by just clicking once at the entry, the change was implemented in the prototype. Beside that, also the selection via a checkbox at the beginning of each row was activated as default in the already developed “InsureeSearcher”.

The changes can be found in the related branch on Github: https://github.com/openimis/openimis-fe-insuree_js/tree/feature/OP-2322

03 Evaluation

The developed prototype could already introduce the suggested changes from the developed design guideline. Furthermore, it was possible to implement the newest version of the material-ui package which would improve the maintenance of OpenIMIS as the old used package was deprecated in 2021. Some of the components were updated and published in the feature branches feature/OP-2322. All of the published changes were executable.

On the other side the prototype did not satisfy the acceptance criteria defined in the, above mentioned Jira Ticket. Not all ui components could be updated as well as not all navigation enhancements could be implemented. The defined duration in the project plan was too short to fully develop the scoped enhancements. This leads to an partly finished prototype. Also the expanded scope of the prototype (updating the material-ui package) lead to delays in the development.

In the end, the AS-IS version provides the following results:

• The suggested guidelines for the ui-components can be implemented in the current OpenIMIS version.

• The material-ui package can be updated to the latest version with all existing dependencies

• Already developed components can be reused and customized to comply with the UI Guideline