Creating innovative IT products is an extremely difficult task, as it requires exceptional creativity due to the lack of benchmarks. The same was the case with the design of the academic staff application, which we executed in December 2022, January 2023.
Tools and technologies used
Project description
The task in was to create a prototype application for mapping scientific results. The development process began with meetings with the client, during which we learned their exact expectations and assumptions. The application is designed to help search and analyze collections of scientific articles for specific variables selected by the user. The client wanted simplicity in use and an aesthetically pleasing, lightweight design while maintaining all the necessary functionality.
Design stage
The next stage of the prototyping process consisted of low and high detail mockups. In the first part, we focused on the approach from the UX side. Taking into account the client's expectations, the part of the application responsible for inputting files and filtering them was divided into 4 steps. The first involves uploading PDF files of scientific articles to be analyzed. The second step involves selecting keywords, or variables by which the user wants to analyze publications. Steps 3 and 4 are used to filter papers sequentially by industry and country.
The result of these steps is the second part of the prototype, in which we see a map of the connections between the selected variables and their causes/antecedents and consequences of the phenomenon/variable. The challenge at this stage of the design was to present all the information about the connections in a way that was clear to the viewer. The results of the analysis were to include the aforementioned connection map, as well as the statistical nature of the relationship of the phenomena in question (positive, neutral, negative). In each article it can be described in a different way, and consequently the results of the analysis can also differ from one article to another, so it was necessary to show a table with statistical values in specific articles, as well as links to publications, so that selected parts of the analysis can be explored in depth.
The question of statistical correlations was resolved using colors: positive relationship - green, neutral - blue, negative - red. When you click on a field with a given word, a table with specific values and articles is displayed on the side of the screen. It is also important to navigate the map, as its size depends on the number of uploaded publications the volume of data in them. Therefore, in the lower left corner there is a reduced version of all the variables distributed on the map.
Creating a prototype
The final step was to create an interactive prototype. To build the front-end layer, we used React CRA along with the Material-UI component library which provides ready-to-use visual elements such as buttons, text fields, lists, menus, tabs and more. In the application, we used the react-use-form library to create a multi-step form. This library allows easy management of the form's state, validation and error handling. Next, we focused on displaying the results in the form of a diagram. For this, we used the React-Flow library, which allows easy creation and management of graphs and diagrams. Once the implementation was complete, we tested the prototype for functionality and performance, and then delivered the finished prototype to the client.
Previous project
GrowTent - MVP product development