Redesign platformy SaaS — Eplano

Kontekst

Interfejs Eplano rozrastał się organicznie wraz z kolejnymi funkcjami. W efekcie pojawiły się niespójne wzorce, zagracone panele i powtarzające się akcje, które utrudniały obsługę zaawansowanego narzędzia. Celem redesignu było przywrócenie porządku i spójności — bez odbierania mocy narzędziu.

Odkrycie — jak zdefiniowałam problemy

To nie był projekt oparty na formalnych badaniach z użytkownikami. Punktem wyjścia był brief od klienta i zespołu deweloperskiego oraz potrzeby zgłaszane wcześniej przez użytkowników wewnątrz działającej aplikacji. Na tej podstawie przeprowadziłam własną analizę UX istniejącego interfejsu i skonfrontowałam wnioski z działem developmentu — żeby oddzielić realne problemy projektowe od ograniczeń technicznych.

Proces — okno „Wybierz opcję"

Dobrym przykładem sposobu pracy jest przeprojektowanie okna dodawania i podmiany planogramu na regale. Klient dostarczył wstępną wizję działania funkcji, a ja przełożyłam ją na kolejne iteracje UI — od surowego układu z dużymi, konkurującymi przyciskami, przez uporządkowanie hierarchii akcji, aż po spójny wariant zgodny z resztą interfejsu.

1. 01
   Wejście od klienta

   Wstępny pomysł na działanie funkcji „dodaj / zastąp planogram

2. 02
   Wczesna iteracja

   Surowy układ: duże, mocno kolorowe przyciski akcji i mało czytelna hierarchia.

   

3. 03
   Porządkowanie

   Ujednolicenie kart „Dodaj / Zastąp / Anuluj

   

4. 04
   Wersja finalna

   Czysty modal zgodny z systemem: jasny nagłówek, przewidywalne CTA i wyraźne stany podmiany.

   

Przed i po — panel „Planogram sides"

Przeciągnij suwak (lub użyj strzałek), aby porównać poprzednią i nową wersję panelu.

⇄

Nowa wersja: czytelna lista sektorów, stonowane akcje ikonowe, wyraźny stan zaznaczenia i uporządkowana hierarchia zamiast kolorowych, konkurujących przycisków.

Kluczowe decyzje UI/UX — panel „Planogram sides"

1. 01
   Sides

   Wybrany Side został wizualnie wyróżniony, co ułatwia użytkownikowi szybkie zrozumienie, w którym obszarze aktualnie pracuje.

2. 02
   Kolorystyka

   Jaskrawe, mocno nasycone przyciski zastąpiono neutralnymi kolorami. Kolor jest teraz stosowany wyłącznie jako akcent, a redukcja barw zmniejsza wizualny chaos i pozwala użytkownikowi łatwiej skupić się na najważniejszych elementach.

   • do oznaczenia wybranego Side lub wykonanej akcji,
   • do identyfikacji sektorów.
3. 03
   Przyciski

   Duże, kolorowe przyciski zostały uproszczone i zastąpione mniejszymi linkami z ikonami. Akcje typu „+ Add new side

4. 04
   Auto-generate sectors

   Przycisk „Auto-generate sectors

5. 05
   Segment setting

   Przycisk „Segment

System ikon

Autorski zestaw ikon zaprojektowany specjalnie pod domenę Eplano — planogramy, merchandising, pomiary 3D, kolizje czy modele PDM. Jednolity styl, grubość linii i siatka zapewniają spójność w całym interfejsie.

Zanim wybrałam docelowy kierunek, przygotowałam kilka wariantów stylistycznych (m.in. outline, solid, twotone i duotone w odmianach standard, sharp i rounded) i przetestowałam je bezpośrednio w działającej aplikacji. Przełącznik stylu pozwolił porównać czytelność ikon w realnym kontekście interfejsu, a nie tylko na siatce w Figmie.

Moja rola i wkład

Odpowiadałam za zmianę warstwy wizualnej aplikacji w kierunku dojrzałego UI oraz za dopracowanie okien funkcyjnych pod kątem UI/UX — z uwzględnieniem potrzeb użytkowników zgłaszanych wcześniej w aplikacji. Pracowałam w ścisłej współpracy z zespołem deweloperskim, konsultując wykonalność i wdrożenie kolejnych zmian.

Efekt

Zmiany zostały wdrożone produkcyjnie po testach wewnętrznych — finalne wersje sprawdzał zespół, a programiści nanosili poprawki w razie potrzeby.