Typ
Redesign UX/UI wewnętrznego systemu faktur i płatności, z którego korzysta dział księgowości Rainbow, polskiego biura podróży. Od wywiadów i user flow po wireframe’y, projekt hi-fi i testy użyteczności.
Zespół
2 UX/UI Designerów i Project Manager w BandIT.House, w bliskiej współpracy z działem księgowości Rainbow i wewnętrznym zespołem programistów.
Obowiązki
- Wywiady i sesje obserwacji z księgowymi i managerami
- Mapowanie obecnych i idealnych ścieżek rozliczania faktur
- Projekt poczekalni dokumentów, widoku rozliczenia, przypisywania kosztów i katalogu produktów
- Wireframe’y, prototypy hi-fi i testy użyteczności z pracownikami
- Przekazanie projektu programistom
Streszczenie Projektu
Rainbow to jedno z największych biur podróży w Polsce. W każdym sezonie dział księgowości rozlicza tysiące faktur od hoteli, linii lotniczych i lokalnych partnerów, a każdą pozycję przypisuje do właściwego kierunku, produktu i kosztu. Od września 2022 do czerwca 2023, w BandIT.House, przeprojektowałem wewnętrzny system do tej pracy: poczekalnię dokumentów, rozliczanie faktur, produkty i płatności.
Problem
Stary system był trudny w obsłudze i pełen ręcznych kroków. Rozliczenie jednej faktury wymagało nawet 6 ekranów, pracownicy wielokrotnie przepisywali te same dane i musieli pamiętać kluczowe liczby, takie jak kody kosztów i salda. Prowadziło to do błędów, opóźnień i straty czasu oraz pieniędzy.
Rozwiązanie
Nowy, spokojny interfejs zbudowany wokół jednego zadania: rozliczyć dokument. Poczekalnia dokumentów z czytelnymi statusami, jeden widok rozliczenia z postępem dla każdej pozycji, okno przypisywania kosztów prowadzące od kategorii przez produkt do kosztu oraz automatyzacja, która uzupełnia dane ze skanu faktury.
Research
Zrozumieć
użytkownika
- 12 wywiadów z księgowymi, kierownikami zespołów i managerami produktów, z pytaniami otwartymi o codzienną pracę i największe frustracje.
- 6 sesji obserwacji przy biurku pokazało, jak ludzie naprawdę korzystali ze starego systemu i jakie dane trzymali na karteczkach.
- Razem z PM pogrupowaliśmy 41 problemów w tematy i zaprojektowaliśmy idealną ścieżkę, która je rozwiązuje.
Kluczowe
odkrycia
- Mniej ekranów: rozliczenie faktury zajmowało nawet 6 ekranów. Zeszliśmy do 2, pokazując dokument, jego pozycje i status przypisania w jednym widoku.
- Więcej automatyzacji: większość pól formularza można było uzupełnić ze skanu faktury albo z poprzedniego dokumentu od tego samego partnera.
- Lepsze wyszukiwanie i filtry: pracownicy musieli w kilka sekund znaleźć dokument po kontrahencie, dacie, managerze i statusie, bez zalewu zbędnych informacji.
Design
Wireframe'y
Na podstawie idealnej ścieżki stworzyliśmy wireframe'y dla 4 kluczowych obszarów: poczekalni dokumentów, rozliczania, produktów i płatności. Przeszliśmy przez 3 iteracje, każdą omawianą z klientem i działem księgowości, zanim przeszliśmy do projektu hi-fi.
Font i kolory
Z systemu korzysta się przez cały dzień, dlatego postawiliśmy na spokojną, neutralną bazę: Inter, smoky black w nawigacji i jasne tło Cultured.
Niebieski Aero służy tylko do akcji i stanów aktywnych, a kolory statusów (do weryfikacji, wstępnie przypisany, zatwierdzony, odrzucony) od razu pokazują, na jakim etapie jest dokument. Wszystkie pary tekst/tło spełniają kontrast WCAG 2.1 AA.
Testy z użytkownikami
Przeprowadziliśmy 2 rundy testów użyteczności z 8 pracownikami działu księgowości, najpierw na wireframe’ach, a potem na klikalnym prototypie. Na podstawie ich opinii wprowadziliśmy kilka zmian, takich jak:
Efekt końcowy
Nowy system skrócił czas wykonania zadań o ponad 40%. Rozliczenie faktury zajmuje teraz 2 ekrany zamiast 6, a ręczne wpisywanie danych spadło o 65% dzięki automatyzacji. Wynik użyteczności SUS wzrósł z 52 do 84. Interesariusze oszacowali oszczędności na tysiące złotych w sezonie na samym czasie pracy, a dział księgowości był szczerze podekscytowany prezentacją finalnego projektu.
