Designing the Previous Imports Component — GSoC 2022 Week 6

Piumal Rathnayake
3 min readJul 27, 2022
Visual design vector created by freepik — www.freepik.com

Hi all! I am back with the 6th week update of my GSoC project. During the week, my previous pull requests were merged and I worked on a new design for the Previous Imports component. This component will be used for displaying the details of the Import actions previously done using the module.

Previous Wireframes

Earlier, when writing the Proposal for this project, I created draft wireframes for this UI. According to that, initially, the user can see the list of previous imports from this component as a table. Also, it shows the basic details like Duration and the import status.

Previous Imports UI

When a user clicks on one import record, It should show all the details related to that import. The following diagram shows its wireframe. It includes the basic information like started time, duration, an overview of the result as well as the list of errors found. The errors and the respective error messages are displayed in a table and if a user clicks on an error record, it directs the user to the respective concept in the OpenConceptLab instance.

Import Details UI

However, this design had several problems. The paginations of the tables were missing. Also, it may be difficult for the user to go back after selecting an Import record.

Another Design

Due to the problems of the previous wireframes, I thought to create a new design for this component. So I created a new layout by combining the above two UIs.

Previous Imports UI

With this design, I added the paginations as well. At first, the right side of the UI is empty. When the user selects an import record from the Previous Imports table, the panel on the right side displays all the details related to the selected import. But when it comes to tablet view, it may be hard for users to navigate between these 2 sections. There may be issues with the responsiveness.

So I asked for suggestions from my mentors and the UX Design Lead of OpenMRS through Slack and OpenMRS Talk. And my mentor provided me with some existing OpenMRS3 designs to refer to.

With those designs, I got a brief idea about how this design should be. Therefore, I can start developing it in the next week. Also we have our mid-evaluations in the next week.

--

--

Piumal Rathnayake

I'm a Computer Engineering Undergraduate at University of Peradeniya, Sri Lanka. And I also work as a software engineer at Sustainable Education Foundation.