Product Designer. Prototypuję
i wdrażam w kodzie projekty, które działają.

Kontekst

Future Processing - software house zatrudniający ponad 800 osób - wysyłał każdą ofertę do klienta z nieco innego pliku. Handlowcy trzymali lokalne kopie starego szablonu, logotypy i materiały identyfikacji wizualnej krążyły po czatach i dyskach współdzielonych, a nowa prezentacja zwykle oznaczała budowanie od zera. Żadne dwie prezentacje nie wyglądały tak samo i nikt nie wiedział, która wersja jest aktualna.

Rozwiązanie

Z zespołem zaprojektowałem system prezentacji: jeden plik PPTX Master podzielony na dziewięć sekcji. Każda odpowiada za konkretne zadanie w rozmowie sprzedażowej i ma własne zasady układu oraz bibliotekę komponentów. Według naszych szacunków nowa prezentacja powstaje w około 20 minut, bez otwierania programu graficznego.

System w liczbach:

1. 60+gotowych slajdów na każdy scenariusz sprzedażowy.
2. 9typów sekcji ze ścisłymi zasadami układu i żywymi komponentami.
3. 800+pracowników z dostępem do jednego pliku Master.
4. ~20 minna złożenie nowej prezentacji bez programu graficznego (szacunek).

Wewnątrz systemu

• Notatka projektanta - brief ukryty za briefem
• Główne slajdy - podstawowe układy w 9 sekcjach
• Dokumentacja w samym pliku (sekcja Read Before Use)
• Efekt - adopcja, skala, szybkość

Wnioski

W jednym pliku PPTX znalazły się biblioteka zasobów, ikony, paleta kolorów i zasady pisania, a na samym początku krótka sekcja "Read Before Use", żeby nowy użytkownik zobaczył, jak korzystać z pliku, zanim zobaczy okładkę.

Efekt: system w użyciu od 2024, co pół roku odświeżany razem z identyfikacją firmy (adopcja), jedno źródło prawdy dostępne dla ponad 800 pracowników (skala) i mniej poprawek oraz szybsze dostarczanie materiałów klientom (szybkość).

Narzędzia i technologie

• PowerPoint
• Figma
• Illustrator
• Photoshop
• Szablon PPTX
• Design system
• Dokumentacja

Kontekst

Po wizycie u alergologa z synem lekarz poprosił mnie o prowadzenie dziennika - objawy, reakcje na pyłki, podane leki - i przyniesienie go na kolejną wizytę. Nie chciałem kolejnego papierowego zeszytu, więc postanowiłem porządnie poznać Claude Code i zbudować narzędzie, którego naprawdę potrzebowałem. Bez zespołu, bez dużego budżetu - kilka późnych wieczorów i trochę spalonych tokenów.

Chciałem czegoś prostego:

1. 1Informacji o tym, co dziś pyli w mojej okolicy i jak mocno.
2. 2Szybkiego wpisu w kalendarzu z ogólnym samopoczuciem i podanymi lekami.
3. 3Miesięcznych raportów, które mogę wydrukować dla lekarza.
4. 4Bonus: rozmowy z wbudowanym asystentem AI o wpisach i ich związku z lekami.

Rozwiązanie

Zbudowałem ją sam, od początku do końca, z Claude Code. PRD (dokument wymagań produktu) i pierwsza działająca wersja powstały tego samego dnia - około 3 godziny od PRD do działającego MVP. Potem przez kilka tygodni regularne wieczorne sesje: systematyczne dodawanie funkcji i testowanie.

Codzienna pętla jest celowo malutka: jeden ekran, jeden wpis, samopoczucie + leki, gotowe w kilka sekund - tak, żebym mógł wszystko zapisać, gdy syn jest obok. Stężenie pyłków dla mojej okolicy ładuje się automatycznie z Open-Meteo (brak dobrego, darmowego polskiego API). Widok raportu miesięcznego eksportuje wszystko, czego potrzebuje alergolog, w kolejności, o którą prosił.

Na tym wszystkim działa wbudowany asystent AI, który odpowiada na pytania o wpisy i potrafi zestawić je z przyjmowanymi lekami. Ten sam asystent jest dostępny także z zewnątrz, przez API lub MCP (protokół, przez który inne narzędzia AI mogą korzystać z aplikacji), z własnym tokenem, więc przyszłe integracje nie wymagają, żebym dotykał kodu.

Wewnątrz aplikacji

• Start - dzisiejszy dzień w skrócie
• Szybki wpis: samopoczucie + leki
• Asystent AI odpowiada na pytania o Twoje wpisy
• Przegląd kalendarza
• Historia wpisów
• Plany: subskrypcja przez Stripe (tryb testowy)

Gdzie AI się pomyliło

AI sprawdzało zmiany na desktopie. Dwa błędy wyszły dopiero na prawdziwym telefonie:

• Menu na telefonie nie przenosiło na inne strony. AI zrobiło osobny nagłówek dla telefonu i komputera, a zamykanie menu śledziło tylko wersję komputerową, więc każde dotknięcie zamykało menu, zanim link zadziałał. Wskazałem różnicę między telefonem a komputerem i poprawka zajęła mniej niż godzinę.
• Kalendarz otwierał się na złym miesiącu. Po ponownym otwarciu pokazywał miesiąc, na którym go ostatnio zamknięto, zamiast właściwego.

Dane i model biznesowy

• Baza danych (Supabase) stoi w Unii Europejskiej, w Irlandii.
• Do modelu AI (xAI) trafia historia wpisów: samopoczucie, leki i pylenie, żeby asystent mógł porównać np. ten sam okres rok temu.
• Demo działa na fikcyjnych wpisach. Prawdziwe jest tylko aktualne pylenie z Open-Meteo.
• Model biznesowy: subskrypcja przez Stripe, na razie w trybie testowym.

Wnioski

Z Claude Code pracuję jak z programistą, któremu przekazuję zadania: z dobrym PRD narzędzie dowozi, a ja pilnuję decyzji produktowych i sprawdzam wynik na prawdziwym urządzeniu.

Narzędzia i technologie

• Claude Code
• Notion
• GitHub
• Vercel
• xAI
• Next.js
• React
• Tailwind
• Supabase
• Prisma
• Open-Meteo API

Kontekst

Problem: Transport Garda przewozi busem motocykle, rowery, sprzęt i dostawy dla firm po całej Polsce. Klienci trafiają na stronę w pośpiechu, z telefonu, i szukają trzech rzeczy: czy firma przewiezie ich ładunek, czy dojedzie on w całości i jak najszybciej się skontaktować.

Rozwiązanie: Jeden ekran bez przewijania: trzy slajdy z ofertą i systemem mocowań, pasek z prawdziwymi realizacjami, panel ze specyfikacją busa i kontakt zawsze pod ręką. Strona po polsku i po angielsku, cały JavaScript to około 3 KB.

Kontakt jednym kliknięciem

Numer telefonu i adres e-mail są widoczne na każdym ekranie. Kliknięcie w numer od razu wybiera połączenie, a ikona obok kopiuje go do schowka i potwierdza to komunikatem „Skopiowano do schowka”. Tak samo działa adres e-mail.

• Slajd z wyceną mówi, co przygotować przed telefonem.

• Osobny slajd o mocowaniu zdejmuje obawę, że sprzęt przesunie się w trasie.

• Pasek „Realizacje” pokazuje siedem prawdziwych kursów bez opuszczania strony.

• Każda realizacja ma własny adres, więc można ją wysłać klientowi linkiem.

• Wymiary ładowni pozwalają sprawdzić, czy ładunek się zmieści, zanim klient zadzwoni.

Na telefonie ta sama treść układa się w jedną kolumnę: numer telefonu i adres e-mail są na wierzchu, slajdy przełącza się strzałkami, a szeroki przycisk „Realizacje” zostaje na dole ekranu, pod kciukiem. Panele realizacji i specyfikacji otwierają się na cały ekran, ze zdjęciem na górze i treścią pod spodem, więc da się je przejrzeć jedną ręką.

Narzędzia i technologie

• Claude Code
• GitHub
• Astro
• TypeScript
• HTML / CSS
• Schema.org

Kontekst

Iceberry to szwedzka firma doradcza z obszaru IT i QA (iceberry.se), która przyszła do nas, do Future Processing, bo chciała przyciągnąć nowych klientów i przestać wyglądać jak każda inna firma konsultingowa na rynku. Brief zakładał pełne odświeżenie: nowy logotyp, nowy system kolorów i zupełnie nowy oddech strony, z jednym twardym wymaganiem - miała wyróżniać się czymś naprawdę oryginalnym.

Rozwiązanie

Zbudowałem key visual, który łączy prawdziwą fotografię z ręcznie rysowanymi doodlami i ilustracjami markerem - ludzką warstwę nałożoną na biznesowe zdjęcie, dzięki której firma B2B mogła mówić językiem, jakiego B2B zwykle nie używa. Do tego ręcznie narysowałem cały autorski zestaw ikon i przeprowadziłem go przez całą stronę jako jeden spójny system wizualny.

Na rebranding złożyły się:

• Nowy logotyp i odświeżony system kolorów.
• Key visual łączący prawdziwą fotografię z ręcznie rysowanymi doodlami i kreską markera.
• Pełny, autorski, ręcznie rysowany zestaw ikon użyty na całej stronie.
• Animacje key visualu i wybranych ikon w Lottie, odtwarzane w przeglądarce.
• Realizacja od początku do końca przez dwuosobowy zespół: projekt (ja) i development (Marcin).

Autorski, ręcznie rysowany zestaw ikon

W zbliżeniu - wciąż widać rękę, która prowadziła kreskę.

• Leadership
• Quality Testing
• UX & Product

Wnioski

W 2022 każdą animację wpinaliśmy ręcznie z developerem. Ikony rysowałem odręcznie, w SVG dzieliłem je na mniejsze elementy i animowałem w Lottie, żeby w przeglądarce zachowały charakter odręcznej kreski.

Efekt: strona wyróżniająca się na tle innych firm konsultingowych, system ilustracji, który klient mógł wykorzystywać także poza stroną, i projekt wdrożony u klienta.

Narzędzia i technologie

• Illustrator
• Photoshop
• After Effects
• Figma
• Lottie
• Animacja SVG
• HTML / CSS
• Ilustracja odręczna

Mam 18 lat doświadczenia w brandingu, UI, stronach www i druku. Przez ostatnie 10 lat współpracowałem z Future Processing, software house'em B2B, gdzie zbudowałem system prezentacji używany przez 800 osób i projektowałem produkty oraz strony dla klientów z Norwegii i Szwecji. Zobacz case Pitch Deck System →

Wcześniej, w latach 2008-2016 w agencji GONG / AMP Media, realizowałem kampanie, key visuale i strony dla marek Żywiec, Knorr, L'Oréal, Aviva, Algida, Maspex i Ecco.

Poza pracą dla klientów miałem okazję prowadzić własne marki np. Szkicopis. Pod jego szyldem stworzyłem notes w kolaboracji z OFF Festivalem. Polisze to rękodzielnicza pracownia założona w 2015 roku: ręcznie wykańczane ubrania (second-hand) z nadrukami wg własnych pomysłów i moich dzieci.

Jedną z moich pierwszych realizacji interaktywnych był moduł w ActionScript z listą torów i ich lokalizacjami dla ogólnopolskiej akcji Red Bull As w Karcie z udziałem Sebastiana Vettela w 2010.

Dziś prowadzę Claude Code przez cały proces budowy, od zera do produkcji, w oparciu o React + Next.js (shadcn, Tailwind, GitHub, Vercel). Moim pierwszym produktem zbudowanym od A do Z jest Dziennik Alergika, który jest w trakcie rozwoju.

Umiejętności

• Product Design
• UI Design
• Prototypowanie
• Design systemy
• Branding
• Strony www
• HTML / CSS
• Motion Design

Narzędzia

• Figma
• Photoshop
• Illustrator
• After Effects
• Premiere
• PowerPoint
• Claude Code
• Cursor
• GitHub
• Vercel
• Notion
• React
• Next.js
• Tailwind
• shadcn/ui