Opis projektu

Zadaniem w opisywanym projekcie było stworzenie prototypu aplikacji do mapowania wyników badań naukowych. Proces tworzenia zaczął się od spotkań z klientem, podczas których poznaliśmy jego dokładne oczekiwania oraz założenia. Aplikacja ta ma na celu pomóc przeszukiwać oraz analizować zbiory artykułów naukowych pod kątem konkretnych, wybranych przez użytkownika zmiennych. Klientowi zależało na prostocie w użytkowaniu oraz estetycznym, lekkim wyglądzie przy jednoczesnym zachowaniu wszystkich niezbędnych funkcjonalności.  

 

Etap projektowania

Kolejny etap procesu tworzenia prototypu składał się z wykonania makiet niskiej oraz wysokiej szczegółowości. W pierwszej części skupiliśmy się na podejściu od strony UX. Biorąc pod uwagę oczekiwania klienta, część aplikacji odpowiadająca za wprowadzenie plików oraz ich filtrowanie została podzielona na 4 kroki. W pierwszym wgrywane są pliki PDF z artykułami naukowymi, które zostaną poddane analizie. Drugi krok polega na wybraniu słów kluczowych, czyli zmiennych pod kątem których użytkownik chce analizować publikacje. Krok 3 i 4 służą do filtrowania prac kolejno po branży oraz kraju.

Case study Koźmiński  
Efektem tych kroków jest druga część prototypu, w której widzimy mapę połączeń między wybranymi zmiennymi a ich przyczynami/ antecedencjami oraz konsekwencjami danego zjawiska/zmiennej. Wyzwaniem na tym etapie projektowania było przedstawienie wszystkich informacji na temat powiązań w czytelny dla odbiorcy sposób. W wynikach analizy miała się znaleźć wspomniana mapa połączeń, a także statystyczny charakter związku danych zjawisk (pozytywny, neutralny, negatywny). W każdym artykule może być on opisany w inny sposób, a co z tym idzie wyniki analizy także mogą się różnić w poszczególnych artykułach, dlatego niezbędne okazało się pokazanie tabeli z wartościami statystycznymi w konkretnych artykułach oraz odnośniki do publikacji, aby można było zgłębić wybrane fragmenty analizy. 


 

Kwestia dotycząca zależności statystycznych została rozwiązana za pomocą kolorów: związek pozytywny - kolor zielony, neutralny - niebieski, negatywny - czerwony. Po kliknięciu w pole z danym słowem z boku ekranu wyświetlana jest tabela z rozpisanymi konkretnymi wartościami oraz artykułami. Ważna jest także nawigacja po mapie, ponieważ jej rozmiar jest zależny od ilości wgranych publikacji obszerności danych w nich zawartych. Dlatego w lewym dolnym rogu znalazła się zmniejszona wersja wszystkich zmiennych rozmieszczonych na mapie.

Case study Koźmiński  
 

Stworzenie prototypu

Ostatnim etapem do wykonania było stworzenie interaktywnego prototypu. Do budowy warstwy front-end wykorzystaliśmy React CRA wraz z biblioteką komponentów Material-UI która zapewnia gotowe do użycia wizualne elementy, takie jak przyciski, pola tekstowe, listy, menu, karty i wiele innych. W aplikacji wykorzystaliśmy bibliotekę react-use-form do stworzenia wielokrokowego formularza. Biblioteka ta umożliwia łatwe zarządzanie stanem formularza, jego walidacją oraz obsługą błędów. Następnie skupiliśmy się na wyświetlaniu wyników w postaci diagramu. Do tego celu wykorzystaliśmy bibliotekę React-Flow, która umożliwia łatwe tworzenie i zarządzanie grafami i diagramami. Po ukończeniu implementacji, przetestowaliśmy prototyp pod kątem funkcjonalności i wydajności, a następnie dostarczyliśmy klientowi gotowy prototyp.