[{"data":1,"prerenderedAt":138},["ShallowReactive",2],{"case-study-pl-eplano":3},{"id":4,"title":5,"body":6,"client":122,"cover":123,"desc":124,"description":111,"extension":125,"figma":122,"link":122,"meta":126,"navigation":127,"order":128,"path":129,"product":130,"role":131,"scope":132,"screens":122,"seo":133,"stem":134,"tag":135,"tools":136,"video":122,"__hash__":137},"caseStudies_pl\u002Fpl\u002Fcase-studies\u002Feplano.md","Redesign platformy SaaS — Eplano",{"type":7,"value":8,"toc":110},"minimark",[9,14,18,22,25,29,36,40,43,47,51,62,66,69,73,76,81,84,89,93,96,99,103,106],[10,11,13],"h2",{"id":12},"kontekst","Kontekst",[15,16,17],"p",{},"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.",[10,19,21],{"id":20},"odkrycie-jak-zdefiniowałam-problemy","Odkrycie — jak zdefiniowałam problemy",[15,23,24],{},"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.",[26,27],"case-tiles",{":items":28},"[{\"title\":\"Brief klienta i deweloperów\",\"desc\":\"oczekiwania biznesowe, kontekst funkcji i znane ograniczenia techniczne.\"},{\"title\":\"Zgłoszenia użytkowników\",\"desc\":\"potrzeby i problemy raportowane wcześniej w aplikacji produkcyjnej.\"},{\"title\":\"Własny audyt UX\",\"desc\":\"przegląd istniejących ekranów pod kątem spójności, hierarchii i powtarzalnych wzorców.\"},{\"title\":\"Konsultacje z zespołem dev\",\"desc\":\"weryfikacja wykonalności i tego, jak funkcje działają „pod maską\"}]",[30,31],"case-split",{":leftItems":32,":rightItems":33,"leftTitle":34,"rightTitle":35},"[\"Przeciążone panele i niska hierarchia informacji.\",\"Niespójne wzorce między ekranami.\",\"Powtarzające się i zduplikowane akcje.\",\"Kolorystyka przycisków rozpraszająca uwagę.\"]","[\"Uporządkować panele i wzmocnić hierarchię.\",\"Ujednolicić wzorce i położenie kluczowych akcji.\",\"Uprościć interfejs — usunąć duplikaty i redundancję.\",\"Zbudować spójny, czytelny system wizualny i ikonografię.\"]","Problem","Cele",[10,37,39],{"id":38},"proces-okno-wybierz-opcję","Proces — okno „Wybierz opcję\"",[15,41,42],{},"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.",[44,45],"case-steps",{":items":46},"[{\"title\":\"Wejście od klienta\",\"desc\":\"Wstępny pomysł na działanie funkcji „dodaj \u002F zastąp planogram\"},{\"title\":\"Wczesna iteracja\",\"desc\":\"Surowy układ: duże, mocno kolorowe przyciski akcji i mało czytelna hierarchia.\",\"image\":\"\u002Fassets\u002Feplano-modal-early.png\",\"imageAlt\":\"Wczesna iteracja okna „Wybierz opcję\"},{\"title\":\"Porządkowanie\",\"desc\":\"Ujednolicenie kart „Dodaj \u002F Zastąp \u002F Anuluj\",\"image\":\"\u002Fassets\u002Feplano-modal-variants.png\",\"imageAlt\":\"Warianty hi-fi okna „Wybierz opcję\"},{\"title\":\"Wersja finalna\",\"desc\":\"Czysty modal zgodny z systemem: jasny nagłówek, przewidywalne CTA i wyraźne stany podmiany.\",\"image\":\"\u002Fassets\u002Feplano-modal-final.png\",\"imageAlt\":\"Finalna wersja okna „Wybierz opcję\"}]",[10,48,50],{"id":49},"przed-i-po-panel-planogram-sides","Przed i po — panel „Planogram sides\"",[52,53],"compare-slider",{"after":54,"afterAlt":55,"aspect":56,"before":57,"beforeAlt":58,"caption":59,"hint":60,"maxWidth":61},"\u002Fassets\u002Feplano-after.png","Nowa wersja panelu Planogram sides — uporządkowana, spójna lista","1737 \u002F 1794","\u002Fassets\u002Feplano-before.png","Poprzednia wersja panelu Planogram sides — zagracony układ z kolorowymi przyciskami","Nowa wersja: czytelna lista sektorów, stonowane akcje ikonowe, wyraźny stan zaznaczenia i uporządkowana hierarchia zamiast kolorowych, konkurujących przycisków.","Przeciągnij suwak (lub użyj strzałek), aby porównać poprzednią i nową wersję panelu.","720px",[10,63,65],{"id":64},"kluczowe-decyzje-uiux-panel-planogram-sides","Kluczowe decyzje UI\u002FUX — panel „Planogram sides\"",[44,67],{":items":68},"[{\"title\":\"Sides\",\"desc\":\"Wybrany Side został wizualnie wyróżniony, co ułatwia użytkownikowi szybkie zrozumienie, w którym obszarze aktualnie pracuje.\"},{\"title\":\"Kolorystyka\",\"desc\":\"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.\",\"substeps\":[\"do oznaczenia wybranego Side lub wykonanej akcji,\",\"do identyfikacji sektorów.\"]},{\"title\":\"Przyciski\",\"desc\":\"Duże, kolorowe przyciski zostały uproszczone i zastąpione mniejszymi linkami z ikonami. Akcje typu „+ Add new side\"},{\"title\":\"Auto-generate sectors\",\"desc\":\"Przycisk „Auto-generate sectors\"},{\"title\":\"Segment setting\",\"desc\":\"Przycisk „Segment\"}]",[10,70,72],{"id":71},"system-ikon","System ikon",[15,74,75],{},"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.",[77,78],"case-figure",{"alt":79,"src":80},"Zestaw autorskich ikon Eplano: markers, merchandising, perforation, planograms, PDM model, measure 3D, collision i inne","\u002Fassets\u002Feplano-icons.png",[15,82,83],{},"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.",[77,85],{"alt":86,"src":87,"caption":88},"Eksploracja i testowanie stylów ikon Eplano — przełącznik outline \u002F solid \u002F twotone \u002F duotone w działającej aplikacji oraz matryca wariantów (standard, sharp, rounded)","\u002Fassets\u002Feplano-icon-steps.png","Eksploracja i testowanie stylów ikon — warianty przygotowane do porównania oraz przełącznik outline \u002F solid \u002F twotone \u002F duotone w realnym interfejsie.",[10,90,92],{"id":91},"moja-rola-i-wkład","Moja rola i wkład",[15,94,95],{},"Odpowiadałam za zmianę warstwy wizualnej aplikacji w kierunku dojrzałego UI oraz za dopracowanie okien funkcyjnych pod kątem UI\u002FUX — 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.",[26,97],{":items":98},"[{\"title\":\"Styl wizualny (UI)\",\"desc\":\"Rewizja i ujednolicenie stylu wizualnego interfejsu.\"},{\"title\":\"Okna funkcyjne\",\"desc\":\"Przeprojektowanie kluczowych okien funkcyjnych.\"},{\"title\":\"Autorski system ikon\",\"desc\":\"Dopasowany do domeny — projekt, warianty i testy w aplikacji.\"},{\"title\":\"Współpraca z developmentem\",\"desc\":\"Konsultacje wykonalności i wsparcie przy wdrożeniu.\"}]",[10,100,102],{"id":101},"efekt","Efekt",[15,104,105],{},"Zmiany zostały wdrożone produkcyjnie po testach wewnętrznych — finalne wersje sprawdzał zespół, a programiści nanosili poprawki w razie potrzeby.",[26,107],{":items":108,"variant":109},"[{\"title\":\"Spójność\",\"desc\":\"ujednolicone wzorce między ekranami\"},{\"title\":\"Prościej\",\"desc\":\"usunięte duplikaty i scalone akcje\"},{\"title\":\"Czytelniej\",\"desc\":\"wyraźna hierarchia i stonowane akcje\"}]","stats",{"title":111,"searchDepth":112,"depth":112,"links":113},"",2,[114,115,116,117,118,119,120,121],{"id":12,"depth":112,"text":13},{"id":20,"depth":112,"text":21},{"id":38,"depth":112,"text":39},{"id":49,"depth":112,"text":50},{"id":64,"depth":112,"text":65},{"id":71,"depth":112,"text":72},{"id":91,"depth":112,"text":92},{"id":101,"depth":112,"text":102},null,"\u002Fassets\u002Feplano-cover.png","Eplano to narzędzie SaaS do budowania planogramów i wizualizacji ekspozycji produktów w 3D. Redesign objął uporządkowanie interfejsu, ujednolicenie wzorców i uproszczenie kluczowych akcji — tak, aby codzienna praca z aplikacją była szybsza, bardziej spójna i czytelna.","md",{},true,1,"\u002Fpl\u002Fcase-studies\u002Feplano","SaaS · planogramy 3D","UI\u002FUX Designer","UX, UI, system ikon",{"title":5,"description":111},"pl\u002Fcase-studies\u002Feplano","saas · ui\u002Fux · system ikon","Figma","Tt_9vADWBGTj25aIb8RM666hkuSva7_6VFQarIDMsNU",1785355749157]