Nowa strona N2 Media: własny kod i panel treści
Klienci prosili o więcej prac z kategorii, które ich interesowały. Tymczasem 7 z 10 podstron usług było pustych, a strona nie miała showreeli kategorii. Zaprojektowałem i wdrożyłem nową stronę z dedykowanym panelem treści dla naszego zespołu. Nowa strona jest znacznie wydajniejsza, kod należy do nas, a klienci dostali to, o co prosili.
Moja rolaGłówny projektant i wdrożeniowiec: research, projekt, design system, wdrożenie z agentami AI, CMS
Start pracLipiec 2026, strona działa od 28.10.2026
Problem
Na Framerze nie mieliśmy dostępu do własnego kodu, a zamknięte narzędzie ograniczało pracę z agentami AI. Oferta i portfolio nie odpowiadały na pytania nowych klientów. Jeden showreel na 2‑3 minuty pokazywał wszystko naraz, a 7 z 10 podstron usług było pustymi szablonami. Strona główna ważyła na telefonie 20,6 MB, a test dostępności znajdował linki bez nazwy i za słaby kontrast.
Rozwiązanie
Nowa architektura: 11 usług, portfolio w 5 kategoriach z własnymi showreelami, case studies i strona zespołu, która pokazuje twarze osób pracujących przy projektach. Do tego dedykowany panel CMS ze statystykami i wiadomościami.
Moja praca
Audyt starej strony, benchmarki konkurencji, architektura informacji, prototyp w kodzie, design system, animacje i showreele, panel CMS, audyt dostępności i migracja danych.
- było 13,1 jest 2,3sczas ładowania treści na stronie głównej
- było 19 jest 46sśredni czas sesji na stronie, pierwsze 12 dni
- było 7 jest 0błędów dostępności na stronie głównej
Research
- Audyt starej stronyWszystkie teksty, struktura i zasoby. Puste podstrony, niespójne wersje tych samych akapitów.
- Benchmarki konkurencjiJak konkurencja pokazuje ofertę, portfolio i case studies.
- Głos klientówPytania i prośby klientów zebrane przez zespół.
Co z tego wynikło
Klient chce zobaczyć więcej prac z interesującej go kategorii.
Dedykowany showreel dla każdej z 5 kategorii portfolio, obok lista prac.
Oferta musi mówić, co dokładnie robimy.
11 dedykowanych stron usług, które dokładnie przybliżają ofertę.
Narzędzie nie może być ogranicznikiem.
Własny kod strony i dedykowany panel na Payload CMS, w którym zespół sam edytuje treści.
Architektura strony
Menu odpowiada na pytania klienta w kolejności: co robicie, jak to wygląda, z kim pracowaliście, kim jesteście, jak się skontaktować. Każda część strony ma swoje miejsce w panelu.
- 11 usługjeden szablon
- Konsultacja
- 5 kategorii
- Showreel w każdej
- Historie projektówm.in. BłogoDASH, N2Hub
- Zespół
- Proces
- Formularz
- Umówienie spotkania
panel do edycji treści przez zespół
- Drzewo podstron
- Status akceptacji
- Prace i kategorie
- Case studies
- Z formularza
- GA4, Search Console, Clarity
Projekt w kodzie
W Figmie korzystałem z design systemu N2, który zbudowałem. Obowiązują w nim reguły: tekst na telefonie od 16 px, przyciski i linki od 44 px. Żeby usprawnić proces, prototyp od razu powstał w kodzie, więc układy ocenialiśmy z prawdziwym ruchem i treścią.
przeniesienie
Prototyp do Next.js
19 elementów na 5 szerokościach, zgodnych co do piksela.
usługi i portfolio
3 układy na typ strony
Wybrane: panel dla usług, indeks dla kategorii, bo klienci prosili o więcej prac z danej kategorii.
menu
3 układy nawigacji
Wybrana lista pogrupowana według usług, w kolejności pytań klienta.
ruch menu
3 warianty animacji
Wybrane krótkie pętle wideo, lekkie na telefonie.
Treści i wideo
Nowy ton
Teksty poprawiła nasza copywriterka. Razem ustaliliśmy nowy ton: konkretny i partnerski, bez metafory lotu w przestworza ze starej strony.
Praca w ruchu
Klienci chcieli zobaczyć więcej przykładów naszej pracy w krótkim czasie. Wideo pokazuje to szybciej niż tekst i bardziej angażuje, więc na stronie pojawiło się więcej ruchomych treści: showreele kategorii i usług, animacja 3D w nagłówku i krótkie pętle wideo w menu. Wideo przygotowałem z zespołem produkcyjnym. Telefon dostaje lżejsze wersje.
Panel dla zespołu
Panel na Payload CMS dopasowałem do marki N2 i do tego, jak pracuje zespół. Pulpit zbiera wiadomości, stan strony i ostatnie zmiany. Statystyki z Google Analytics, Search Console i Clarity są w jednym widoku.
Dostępność i wydajność
Porównaliśmy poprzednią stronę z aktualnie wdrożoną na trzech odpowiadających sobie podstronach. Nowa strona spełnia znacznie więcej kryteriów WCAG i jest znacznie wydajniejsza niż poprzednia.
| Podstrona | Wydajność (Lighthouse) | Czas do głównej treści | Waga | Dostępność (Lighthouse) | Elementy z błędami axe |
|---|---|---|---|---|---|
| Strona główna | było | było | było | było | było |
| Lista case studies | było | było | było | było | było |
| Case study | było | było | było | było | było |
AI w procesie budowania
Przy wdrożeniu ponownie pomagali agenci AI (Claude Code, Codex), pracujący według moich specyfikacji. Ja byłem lead designerem: odpowiadałem za architekturę, design i kierunek zmian. Nad projektem nigdy nie pracował jeden agent. Każdą zmianę oceniał panel sędziowski modeli, sprawdzały ją testy zgodności z prototypem na 5 szerokościach, a o publikacji decydowałem sam po obejrzeniu wersji podglądowej.
- ok. 4 tygodnieod przeniesienia prototypu do przepięcia domeny
- było 1 jest 8showreeli na stronie, łącznie 20 filmów
- było 60 jest 96wynik wydajności strony głównej w Lighthouse na telefonie
Strona, którą rozwijamy sami
Strona działa na n2media.agency od 28 października 2026. Mamy własny kod, panel dopasowany do zespołu i analitykę w jednym miejscu. Nowe case studies możemy dodawać bez programisty.