Rafał Zieliński

Product designer z okiem art directora.

Case study 1/4

Od darmowego narzędzia do płatnego SaaS.

Zredesignowałem lubiane, darmowe narzędzie inżynierskie w płatny produkt SaaS — bez utraty społeczności, która nadawała mu wartość.

Strona główna KalkulatorPro po redesignie — darmowy test i 40+ kalkulatorów inżynierskich
Moja rola
Lead UX/UI Designer / Doradca ds. strategii produktowej

Kontekst

KalkulatorPro.pl to darmowy zestaw kalkulatorów inżynierskich, który zbudował lojalną społeczność wyłącznie z polecenia.

Wyzwaniem nie było wprowadzenie paywalla — było przekształcenie zaufanego, darmowego narzędzia w płatny SaaS bez utraty tego zaufania.

3000+
Inżynierów
40+
Kalkulatorów
99,9%
Dostępności
PN/EN/DIN
Zgodność z normami
Strona główna KalkulatorPro przed redesignem
Strona główna KalkulatorPro po redesignie
PrzedPo

Rozwiązanie

Rejestracja wymaga tylko e-maila i hasła — „5 dni za darmo, bez karty kredytowej”, z płatnością odsuniętą do końca triala.

Prawdziwy numer telefonu został w stopce — tani wariant zapasowy dla mniej biegłych cyfrowo użytkowników, wciąż obsługiwany osobiście przez ownera.

Problem — „pływający formularz”

Mały formularz kalkulatora znajdował się w lewym górnym rogu, nad dużą, pustą białą przestrzenią. Brak instrukcji, wyjaśnień, treści pomocniczych. Strona wizualnie sygnalizowała „niedokończone”, co utrudniało uzasadnienie płatnej subskrypcji.

Rozwiązanie — „Content Stack”

Każda podstrona kalkulatora została przebudowana wokół pełnego zestawu treści — instrukcji w 3 krokach, zalecanych wartości inżynierskich, wzorów, tabel porównawczych i FAQ — otaczających formularz kalkulatora.

Podstrona kalkulatora gazu w KalkulatorPro przed redesignem — formularz z dużą pustą przestrzenią poniżej
Przed — mały formularz nad dużą, pustą białą przestrzenią.
Podstrona kalkulatora gazu w KalkulatorPro po redesignie — pełny content stack
Po — ten sam kalkulator otoczony pełnym zestawem treści.

Systematyzacja design tokenów

System wizualny został przebudowany w oparciu o Tokens Studio — tokeny semantyczne dla koloru, typografii, odstępów, zaokrągleń i cieni — zastępując dotychczasowe, punktowe stylowanie każdej z ponad 40 podstron kalkulatorów. Dzięki temu produkt zachowuje spójność w miarę skalowania, a wymagania kontrastu WCAG są wbudowane w system domyślnie.

Wyniki

Baza płatnych subskrybentów wzrosła z ~100 do ~190 po premierze — to skoordynowana zmiana, więc nie da się wskazać jednej przyczyny wzrostu.

Dedykowana sekcja B2B generuje teraz ~10 zapytań miesięcznie — kanał, który wcześniej nie istniał.

100 → ~190 (+90%)

Płatnych subskrybentów po wdrożeniu redesignu

~10 leadów / miesiąc

Zapytań B2B przez dedykowaną sekcję „Dla zespołów i firm”

Pytania z design review

To realny kompromis, podjęty świadomie. Karta przy rejestracji filtruje pod kątem intencji zakupowej, ale filtruje też dokładnie tę grupę, której produkt najbardziej potrzebował: dotychczasowych darmowych użytkowników, którzy nigdy nie płacili i musieli ponownie doświadczyć wartości narzędzia. Mając dane z użytkowania, chciałbym zobaczyć konwersję trial-to-paid w podziale na źródło pozyskania, zanim uznam sprawę za rozstrzygniętą.

Pozostawienie głównej interakcji bez zmian ograniczyło poczucie „zdrady” do minimum. Po uruchomieniu paywalla, studenci i pracownicy uczelni — nigdy niebędący celem monetyzacji — zaczęli odchodzić jako efekt uboczny. Nie było to przewidziane z góry; ścieżka darmowego dostępu dla tego segmentu była reaktywną poprawką, nie zaplanowanym działaniem łagodzącym. Nie mam twardych danych o churnie, które by to potwierdziły — mam jedynie jakościową ocenę ownera, że liczba rejestracji pozostała stabilna, a sprzedaż planów rocznych była mocna.

Nie twierdzę, że zmierzyłem wzrost — nie mam takich danych. Mogę obronić diagnozę: „pływający formularz” sygnalizował niedokończoną jakość dokładnie w momencie, gdy użytkownik decyduje, czy zapłacić, a strony bogate w treść to dobrze udokumentowany wzorzec budowania autorytetu właśnie w takim momencie.

Ponad 40 podstron zbudowanych ad hoc przez lata to dokładnie sytuacja, w której dług projektowy narasta najszybciej — a produkt nie zatrzymywał się na 40 podstronach, dochodziły ekrany konta, plany cenowe i płatności. Rezygnacja z warstwy tokenów oznacza, że każda nowa powierzchnia albo powiela niespójne stylowanie, albo wymaga późniejszego redesignu — drożej niż inwestycja w tokeny na starcie.

Case study 2/4

Dashboard kompetencji oparty na danych.

Przekształciłem ~400 realnych ofert pracy w interaktywny dashboard, który pokazuje grafikom wchodzącym do IT, jakich umiejętności rynek faktycznie oczekuje.

Moja rola
Product Owner / UX Researcher / Product Designer / DesignOps
Stos technologiczny
Notion / Apify / Google Sheets / OpenAI / Figma / Cursor / GitHub / Vercel

Kontekst

Graficy i projektanci analogowi mają trudności z wejściem do branży IT z powodu niejasnych luk kompetencyjnych.

Zanim cokolwiek zbudowałem, przeanalizowałem społeczności i fora projektowe, żeby zweryfikować ten problem.

Proces

Scrapowanie rynku pracy

Własne scrapery w Apify zebrały ponad 800 aktualnych ogłoszeń o pracę.

Filtrowanie anomalii

Odfiltrowałem szum (np. oferty frontendowe oznaczone jako UX) — zostało ~400 trafnych ofert designerskich.

Wąskie gardło ekstrakcji

Wyodrębnianie umiejętności przez API Gemini w Google Sheets zablokowały limity zapytań.

Zwrot

Przejście na OpenAI przez GPT for Sheets usunęło wąskie gardło.

Rozwiązanie

Zaprojektowane w Figmie: system wielu filtrów, który aktualizuje wyniki od razu, bez przycisku „Zastosuj”.

chcedo.it — UX/UI Designer: tabela wymaganych narzędzi z odsetkiem ofert dla Juniora, Regulara i Seniora
Wymagane narzędzia
chcedo.it — UX/UI Designer: tabela wymaganych umiejętności z odsetkiem ofert dla każdego poziomu doświadczenia
Wymagane umiejętności
chcedo.it — UX/UI Designer: tryb pracy (stacjonarnie, hybrydowo, zdalnie) według poziomu doświadczenia, z wykresem słupkowym
Tryb pracy
chcedo.it — UX/UI Designer: widełki wynagrodzeń (dolna i górna granica) według poziomu doświadczenia, z wykresem w tys. PLN
Widełki wynagrodzeń

Wyniki

MVP działa na żywo. Testy z użytkownikami wskazały cztery obszary do poprawy w kolejnej iteracji:

Interakcja i układ

Zmiana filtra nie dawała natychmiastowej informacji zwrotnej — użytkownicy musieli przewijać, żeby sprawdzić wynik. Poprawka: przyklejony panel filtrów.

Transparentność danych

Najczęstsza prośba: pokazać świeżość danych i wielkość próby dla każdej roli — 100% z 2 ogłoszeń to co innego niż 100% z 200.

Taksonomia i filtrowanie

Taksonomia umiejętności była zbyt rozdrobniona (mieszane terminy PL/EN, duplikaty). Użytkownicy chcieli też wielokrotnego wyboru ról, bo UX/UI i Digital Designer często się pokrywają.

Dostępność i spójność wizualna

Wykryte luki: niepełna obsługa klawiatury, kontrast tekstu poniżej 4,5:1 i niespójne kolory Junior/Regular/Senior między filtrami a wykresami.

Dalej: wdrożenie tych poprawek dostępności i UI, a potem analityka, która pokaże, jak ludzie faktycznie korzystają z dashboardu.

Szczegółowy log feedbacku, priorytetyzacja i plany kolejnej iteracji są udokumentowane w moim workspace w Notion.

Case study 3/4

Standaryzuję pracę AI w marketingu.

Buduję micro-SaaS, który daje AI rosnącą bazę wiedzy o marce każdego klienta — i waliduję go ręcznie z agencjami, zanim zautomatyzuję.

Aplikacja Klamra — widok Struktura z folderami klientów i polami copy
Moja rola
Founder / Product Designer
Stos technologiczny
Supabase / Adobe UXP / Google Stitch / Tailwind CSS / Cursor / Claude

Kontekst

Agencje codziennie używają AI do tekstów, researchu i strategii — ale AI za każdym razem zaczyna od zera. Bez trwałego kontekstu marki efekty są generyczne i niespójne.

Problem

Dwa powiązane problemy:

  • Brak trwałej wiedzy o marce — każde zadanie z AI zaczyna się od nowa, więc efekty są generyczne, a te same ustalenia trzeba powtarzać.
  • Rozproszona produkcja — zaakceptowany tekst jest ręcznie przeklejany między edytorem a Photoshopem, co generuje błędy i opóźnienia.

Rozwiązanie

Klamra składa się z czterech połączonych elementów — od wiedzy o marce po gotowy plik graficzny.

Baza wiedzy Głos marki

Ustrukturyzowane pliki dla każdego klienta: persony, zasady komunikacji i słowa zakazane. Mają dawać każdemu narzędziu AI ten sam kontekst marki, bez briefowania od zera za każdym razem.

Concierge MVP

Zanim zautomatyzuję proces, ręcznie przygotowuję pliki Głosu marki dla realnych agencji — żeby sprawdzić, czego naprawdę potrzebują, zanim napiszę więcej kodu.

Panel statusów tekstów

Panel webowy, w którym teksty przechodzą od wersji roboczej do zaakceptowanej — jedno miejsce, które pokazuje, który tekst jest finalny.

Wtyczka do Photoshopa

Wtyczka UXP zsynchronizowana z panelem tekstów: zaakceptowana treść trafia bezpośrednio na warstwy w Photoshopie, bez ręcznego przeklejania.

Walidacja

Pierwszy plik Głosu marki trafił do właściciela mikroagencji reklamowej. Jego ocena: to realnie skróciłoby research przy nowych klientach — wczesny sygnał, nie metryka. Obecnie prowadzę rozmowy z kolejnymi agencjami i pozyskuję pierwszych klientów.

Co dalej

W budowie: automatyczna analiza materiałów o marce i generowanie person (na razie makieta interfejsu). W planach: gotowe teksty na różne kanały z Głosu marki, zaakceptowane treści wracające do bazy wiedzy i konta organizacyjne.

Case study 4/4

Budowanie produktu od zera.

Zbudowałem narzędzie QA wspierane przez AI, które wykrywa literówki bezpośrednio na grafikach marketingowych — żeby skrócić pętlę poprawek między menedżerami a grafikami.

Aplikacja Micro SaaS — wyniki skanu z zaznaczoną literówką na reklamie piwa i przyciskiem raportu PDF
Moja rola
Founder / Product Designer / Strateg produktowy
Stos technologiczny
Figma / Cursor / GitHub / Next.js / Vercel / Cloudflare / Gemini 2.5 Flash

Kontekst

W agencjach reklamowych korekta bannerów, postów i reklam to ręczne wąskie gardło. Zaprojektowałem narzędzie, które zamienia ją w 60-sekundowy automatyczny skan.

Problem

Ręczne QA jest wolne i podatne na błędy — jedna pomyłka może oznaczać kosztowny przedruk. Zwykłe korektory pisowni nie odczytają tekstu ze spłaszczonej grafiki.

AnkietaWalidacja problemu

Czy problem, który rozwiązuje ta aplikacja, jest istotny?

100%Takn≈10

Nie 0%

Ankietowałem ok. 10 specjalistów agencyjnych — każdy potwierdził potrzebę automatycznej weryfikacji materiałów.

AnkietaStres i odpowiedzialność

Poziom stresu przy zatwierdzaniu dużych partii materiałów graficznych.

~33%
~67%
12345
Brak stresuEkstremalny stres
Ankietowani deklarowali wysoki stres przy ręcznym zatwierdzaniu dużych partii materiałów.

Rozwiązanie

Trzy proste kroki dla szybko pracujących zespołów kreatywnych — bez przepisywania tekstu i skomplikowanej konfiguracji.

Przeciągnij i upuść

Wgraj do 15 grafik naraz — aplikacja sama je kompresuje, żeby skan był szybszy.

Natychmiastowe wykrywanie błędów

W ciągu 60 sekund literówki są zaznaczone bezpośrednio na grafice pulsującymi znacznikami.

Raporty PDF jednym kliknięciem

Menedżer eksportuje raport PDF z każdą literówką — bez ręcznego wypisywania błędów.

Proces odkrywania i projektowania — ręczne szkice i wstępna koncepcja przepływu pracy
Mapowanie kluczowych ścieżek użytkownika i architektury technicznej przed rozpoczęciem kodowania.
Implementacja techniczna — kodowanie mechanizmu weryfikacji w edytorze Cursor AI
Pętla rozwoju full-stack: pisanie kodu w Cursor przy jednoczesnym monitorowaniu wdrożonych zmian przez GitHub.

Kluczowe decyzje — od MVP do działającego produktu:

01 — Wstępne założenia

Feedback pokazał, że sama lista literówek zmuszała do szukania każdej z nich na grafice — co przeczyło idei automatyzacji.

02 — Iteracja i UX

Dodałem wizualne mapowanie błędów pulsującymi znacznikami oraz wielostronicowy eksport PDF jako pomost między menedżerami a grafikami.

03 — Architektura chmurowa i bezpieczeństwo

Przy przejściu do chmury (Vercel + Next.js) usunąłem ochronę hasłem, żeby rekruterzy i testerzy mogli swobodnie testować — zastąpiła ją ochrona antybotowa Cloudflare i limit 15 skanów, który kontroluje koszty.

04 — Integracja analityki

Vercel Web Analytics pokazuje, jak i kiedy narzędzie jest używane — to materiał do kolejnej iteracji.

Co dalej

  1. Odkrywanie i strategia

    • Identyfikacja problemu
    • Badania użytkowników i benchmarking
    • Architektura rozwiązania
  2. MVP i Proof of Concept

    • Projekt UX/UI
    • Implementacja (Vercel + Next.js)
    • Działające demo i testy wewnętrzne
  3. Beta i integracja ML

    • Integracja modeli uczenia maszynowego
    • Zamknięta beta (testy grupy docelowej)
    • Zbieranie i mapowanie feedbacku
  4. Wdrożenie i skalowanie

    • Dopracowanie logiki
    • Oficjalny start (publiczne udostępnienie)
    • Monitorowanie analityki

MVP działa i jest w fazie testów, z dziennym limitem skanów dla stabilności. Zbieram dane o użyciu i opinie do kolejnej iteracji.

Craft

Projektowanie emocji.

Nieoficjalny projekt z pasji — koncepcyjna strona premierowa Diablo IV, eksploracja UI i motion designu. Bez briefu i badań: czysty warsztat wizualny.

Koncept fanowski, niezwiązany z Blizzard Entertainment.

Ekran przedpremierowy Diablo IV z Lilith
Ekran klas postaci Diablo IV
Ekran otwartego świata Diablo IV
Ekran edycji kolekcjonerskiej Diablo IV
Ekran porównania edycji Diablo IV