AI Clearing – Jak usprawnić analizę danych w branży ConTech?

Zobacz, jak przeprowadziliśmy redesign platformy Saas, służącej do monitorowania postępu prac budowlanych. Dzięki nowej warstwie wizualnej, ekrany pełne danych stały się czytelnymi i łatwymi w nawigacji dashboardami.

285

godzin pracy

miesiące

projektantów

Branża:

ConTech

Rynek:

Globalny

Produkt:

SaaS

aiclearing.com

O projekcie

AI Cleaing to sartup działający globalnie w branży Construction Tech. Oferuje platformę SaaS do monitoringu postępu prac budowlanych, opartą na technologii sztucznej inteligencji.   

Naszym zadaniem było przeprojektowanie poszczególnych modułów aplikacji webowej, tak aby poprawić czytelność całego interfejsu, unowocześnić go oraz położyć nacisk na prezentację wniosków z danych.

Redesign aplikacji

 W ramach współpracy zaprojektowaliśmy nową nawigację oraz przeprojektowaliśmy 2 moduły - Progress tracking oraz Schedule, jednocześnie wypracowując nowy styl wizualny produktu.

Design System

Rozbudowaliśmy i dostosowaliśmy do potrzeb klienta set komponentów wizualnych, z których powstaje interfejs platformy. Ułatwi to spójny rozwój produktu w przyszłości.

Zakres

Nawigacja
UX & UI 
Design system

Model projektowy

Czas: 4 miesiące

Kontekst projektu

Pod koniec 2023 roku AI Clearing postanowiło przebudować interfejs swojej aplikacji SaaS, aby poprawić doświadczenia użytkowników aplikacji.

Na tym etapie zostaliśmy zaproszeni do projektu. Naszym zadaniem było przede wszystkim uproszczenie skomplikowanych i przeładowanych widoków, tak aby użytkownik szybko mógł znaleźć informację, których potrzebuje. Z uwagi na charakter produktu - platformę do monitorowania postępu prac budowlanych - danych, które mogliśmy wyświetlać mieliśmy bardzo dużo. Należało jednak wybrać kluczowe informacje i tak je przedstawić, by ułatwić użytkownikom wyciągnięcie wniosków.

Drugim wyzwaniem było odświeżenie wizualne produktu - mieliśmy zaproponować nowy, spójny system wizualny. Naszemu klientowi zależało na nowoczesności oraz czytelności. Ważne było aby nowy system dobrze prezentował dane zarówno na wykresach, jak i na mapach, łącząc je z rzeczywistą przestrzenią.

Dariusz Cieśla

VP of Product

Zima skutecznie zaprojektowała nowy układ aplikacji, który zarówno poprawia doświadczenia użytkowników, jak i upraszcza korzystanie z platformy dla klientów.

Pierwszy moduł został już wdrożony produkcyjnie i jest dostępny dla klientów - zbiera pozytywny feedback.

Architektura informacji i nawigacja

‍

Użytkownik 1

‍Właściciel / Inwestor

Właściciel lub inwestor zarządza wieloma projektami jednocześnie, dlatego potrzebuje szybkiego dostępu do kluczowych informacji, takich jak postęp prac, budżet i najważniejsze alerty. Jako osoba, która zazwyczaj nie przebywa na miejscu, musi mieć możliwość błyskawicznego przeglądu danych z różnych lokalizacji. Kluczowym wymaganiem jest łatwe przełączanie się między projektami, co pozwala efektywnie zarządzać inwestycjami zdalnie.

Potrzeby nawigacyjne:

Intuicyjna nawigacja umożliwiająca szybkie przełączanie między projektami.
Wyświetlanie kluczowych informacji na pierwszy rzut oka, bez potrzeby wchodzenia w szczegóły.
Menu zoptymalizowane pod kątem urządzeń mobilnych, wspierające zarządzanie zdalne.
Łatwy dostęp do alertów i ogólnych danych projektowych z różnych lokalizacji.

Użytkownik 2

Kierownik budowy

Kierownik budowy nadzoruje cały projekt, skupiając się na szczegółach jego realizacji. Odpowiada za kontrolę wielu aspektów, takich jak harmonogramy, zasoby czy szczegóły techniczne. Zazwyczaj pracuje nad jednym projektem lub jego mniejszym fragmentem, co wymaga precyzyjnego dostępu do istotnych danych.

Potrzeby nawigacyjne:

Dostęp do szczegółowych raportów i danych projektowych.
Możliwość łatwego przełączania się między ogólnymi informacjami a szczegółami realizacji.
Intuicyjny dostęp do sekcji dotyczących etapów budowy, harmonogramów, zasobów oraz szczegółów technicznych.
Funkcjonalność umożliwiająca szybkie przejście między różnymi poziomami szczegółowości w aplikacji.

Zarządzanie widokiem

System pozwala na dostosowanie szerokości bocznego paska nawigacyjnego, panelu z danymi oraz mapy do indywidualnych potrzeb użytkownika. Funkcja zwijania wybranych elementów ułatwia koncentrację na kluczowych danych, zapewniając ich przejrzystość.

Przejrzysty dostęp do projektów

Nowy styl wizualny

Podczas projektowania nowego interfejsu aplikacji AI Cleaning całkowicie odświeżyliśmy warstwę wizualną, zastępując przestarzały design nowoczesnym i funkcjonalnym podejściem. Nowy styl łączy minimalistyczną estetykę z klarowną prezentacją danych, poprawiając zarówno estetykę, jak i użyteczność systemu

Kluczowe cechy wizualne  i funkcjonalne:

Zaokrąglone rogi: 
Obecne w kartach, przyciskach i ikonach, nadając projektowi nowoczesny i przyjazny charakter.
Kolorystyka: 
Dobrane na bazie brandu klienta, podkreślając istotne informacje. Dzięki ich oszczędnemu użyciu aplikacja zachowuje przejrzystość i minimalistyczny charakter.
Typografia bezszeryfowa: 
Prosty krój pisma wspiera czytelność i nowoczesny wygląd.

Kontrast wielkości tekstów: ‍Większe nagłówki i mniejsze teksty skutecznie nadają hierarchię informacji.
Odstępy i marginesy: 
Spore odstępy między tekstami i starannie zachowane marginesy zapewniają przejrzystość i wizualny porządek.
Hierarchia danych: ‍Sekcja z danymi (np. postęp prac) jest podzielona na hierarchiczne widoki, co wspomaga analizę złożonych informacji.
Czytelne wizualizacje:
Proste linie wykresów i kolorowe paski w wykresach postępu ułatwiają interpretację danych.

Moduł Progress Tracking

Moduł Progres tracking to jeden z najważniejszych modułów. Umożliwia śledzenie postępów projektu budowlanego. Największym wyzwaniem była zmiana środka ciężkości z prezentacji danych na pokazywanie częściowo zinterpretowanych informacji. Zobacz, dzięki jakim rozwiązanim to osiągnęliśmy. 

Wizualizacja danych, która wspiera wyciagnięcie wniosków: Zamiast surowych tabel i cyfr, dane zostały przedstawione w formie intuicyjnych wizualizacji. Postawiliśmy na pokazywanie danych w kontekście, a nie suchych liczb.
Wprowadzenie hierarchii w prezentowanych informacji: Wprowadziliśmy strukturę prezentacji, w której użytkownik najpierw widzi podsumowanie, a następnie może zagłębiać się w szczegóły, co eliminuje problem przeładowania ekranu nadmiarem informacji.
Czytelny i spójny styl wizualny: Konsekwentnie stosowanie rozwiązań wizualnych oraz spójnej palety barw ułatwia rozumienie wykresów i poruszanie się po dashboardzie, redukując uczucie chaosu.

Rozbudowa Design systemu

Nasz projekt wymagał innowacyjnego podejścia do projektowania komponentów w celu przejścia od ekranów zatłoczonych danymi do czytelnych i intuicyjnych interfejsów. Podjęliśmy wyzwanie rozbudowy istniejącego design systemu FlowBite. Pomimo jego pozornego kompletnego charakteru, głębsza analiza wykazała, że nie w pełni spełnia nasze potrzeby pod względem estetyki i czytelności danych.

Rozbudowa setu komponentów FlowBite

Zdecydowaliśmy się wykorzystać istniejącą strukturę FlowBite, koncentrując się na rozwijaniu obecnych komponentów i dodając nowe funkcje, takie jak różne stany komponentów oraz zaawansowane interaktywne systemy wykresów. Naszym celem było zachowanie podstawowych elementów FlowBite, rozwijając je o bardziej zaawansowane możliwości, które były niezbędne do naszego projektu.

Dzięki temu podejściu uniknęliśmy potrzeby stworzenia zupełnie nowego design systemu od podstaw, co przyniosło klientowi oszczędności zarówno czasowe, jak i finansowe. Ostateczny rezultat to design system, który jest bardziej responsywny, funkcjonalny i lepiej dostosowany do naszych wymagań dotyczących czytelności i prezentacji danych.

Rezultaty

Nowy interfejs aplikacji został zaprojektowany z myślą o usprawnieniu doświadczenia użytkowników, oferując intuicyjną nawigację i elastyczność widoku, co może sprzyjać efektywniejszej obsłudze platformy na różnych urządzeniach.

Dzięki przejrzystym wizualizacjom oraz spójnej architekturze informacji, przyszli użytkownicy będą mogli łatwiej analizować dane i podejmować trafniejsze decyzje. Oczekujemy, że interfejs spełni potrzeby inwestorów oraz kierowników budowy, dostarczając narzędzie dopasowane do ich wymagań.