Ubezpieczenia
dla biznesu

System webowy wspierający firmy w zarządzaniu dokumentacją i rozliczeniami ubezpieczeniowymi — zaprojektowany z myślą o przejrzystości, dostępności i codziennej pracy użytkowników.

Kontekst Projektu

System, który porządkuje złożone dane

Projekt dotyczył stworzenia nowej wersji systemu dla płatników składek — osób i firm, które codziennie pracują z danymi finansowymi, dokumentami ubezpieczeniowymi i raportami. Naszym zadaniem było uporządkowanie złożonych informacji i zaprojektowanie interfejsów, które będą spójne z pozostałymi usługami administracji państwowej.

System bazował na wzorcach design systemu mObywatel, ale wymagał rozszerzeń dostosowanych do realiów pracy biurowej — dużych tabel, wielu pól, intensywnej filtracji i porównań danych. Nasza rola polegała na wypracowaniu takich rozwiązań, które ułatwiają codzienną pracę, a nie tworzą dodatkowej złożoności.

Wyzwanie: praca z dużymi tabelami

Mobilny układ zaprojektowany od podstaw

Kluczowym elementem systemu były rozbudowane tabele — z wieloma kolumnami, statusem dokumentów, datami, kwotami, identyfikatorami. Analiza wykazała, że to właśnie tabele są najczęściej używaną częścią systemu: użytkownicy sortują, filtrują, porównują i eksportują dane.

Trudność polegała na tym, że klasyczny model responsywności nie sprawdził się. Poziome przewijanie na telefonach utrudniałoby pracę i prowadziło do błędów. Potrzebne było rozwiązanie, które nie traci informacji, ale dostosowuje strukturę do małego ekranu.

Zamiana kolumn w pionowe bloki

W wersji mobilnej zrezygnowaliśmy z przewijania w poziomie. Każda pozycja z tabeli została ułożona pionowo i podzielona na sekcje odpowiadające kolumnom desktopowym. Pierwszy wiersz został wyróżniony jako nagłówek rekordu, dzięki czemu użytkownik natychmiast orientuje się, czego dotyczy wpis.

Efekt?

  • pełny dostęp do wszystkich danych,
  • brak utraty kontekstu,
  • wysoka czytelność na małych ekranach,
  • spójność między desktopem a mobile, ale bez kopiowania rozwiązań „1:1”.
Desktop view
Mobile view

Wyzwanie: dostęp do akcji w długich tabelach

Kluczowe operacje zawsze pod ręką

Użytkownicy często zaznaczają wiele pozycji jednocześnie i wykonują akcje zbiorcze: pobieranie dokumentów, zmiana statusu, eksport. Na desktopie przyciski akcji były umieszczone nad tabelą — ale znikały z pola widzenia po przewinięciu strony.

To powodowało dezorientację i niepotrzebne przewijanie w górę, tylko po to, by wykonać prostą operację.

Podwójna dostępność akcji: u góry i u dołu ekranu

Na desktopie użytkownik widzi główne przyciski nad tabelą. Natomiast na telefonach i w przypadku długich list wprowadziliśmy wyjeżdżającą szufladę u dołu ekranu — pojawia się automatycznie, gdy górne przyciski znikną z widoku.

To połączenie dwóch modeli interakcji znacznie poprawiło płynność pracy:

  • akcje są dostępne bez względu na długość tabeli,
  • użytkownik nie musi wracać na górę,
  • system jest przewidywalny i „zachowuje się tak, jak tego oczekujemy”.
Desktop view
Mobile view

Jak działa responsywność w tym module

Na koniec warto pokazać, jak cały układ zachowuje się w praktyce — szczególnie podczas przejścia między widokiem desktopowym a mobilnym.

Praca z tabelami to częsty problem w projektowaniu, a każdy przypadek jest inny i zależy od potrzeb użytkownika oraz kontekstu. W tym projekcie udało się stworzyć rozwiązanie, które działa wygodnie i przewidywalnie, niezależnie od tego, jak duża jest tabela czy gdzie na stronie znajduje się użytkownik.

Zakres współpracy

W projekcie Ubezpieczeń dla Biznesu odpowiadaliśmy za kluczowe prace UX związane z projektowaniem systemu webowego opartego o złożone dane i dokumenty. Nasze działania obejmowały:

  • prowadzenie warsztatów koncepcyjnych z zespołami merytorycznymi,
  • analizę potrzeb płatników i sposobów pracy z dokumentami,
  • opracowanie przepływów, zależności i logiki interfejsu,
  • projekt komponentów tabelarycznych i zachowań interakcji,
  • przygotowanie makiet UX (Lo-Fi i Hi-Fi UX),
  • prototypowanie i konsultacje z zespołami developerskimi,
  • projekt makiet Lo-Fi,
  • przygotowanie dokumentacji do implementacji.

Efekty

Zaprojektowane rozwiązania znacznie usprawnią codzienną pracę użytkowników, skracając czas przeglądania i filtracji danych. Dwupoziomowy dostęp do akcji oraz pionowy układ tabel w wersji mobilnej zostały szczególnie docenione w testach użyteczności — uczestnicy podkreślali, że system „nie przeszkadza”, „prowadzi przewidywalnie” i „po prostu pozwala pracować szybciej”.

Następny projekt

Pressroom

Odkryj, jak zaprojektowalismy panel do obslugi akredytacji i eventow prasowych, ktory laczy potrzeby organizatorow, biura prasowego i redakcji w jednym miejscu.

Zobacz projekt
Podgląd kolejnego projektu