Stworzenie strony internetowej
Rola
UX/UI Designer
Cel
Zbudować nowoczesną stronę
Narzędzia
Figma | Google Analytics | HotJar | Adobe Photoshop
Czas trwania 14 Dni

Gotowa strategia i branding
Nowoczesny projekt UI, oparty o badania UX
Zobacz, jak pomogłem klientowi zrozumieć prawdziwą wartość UX, oferując nie tylko estetyczny interfejs, ale przede wszystkim przemyślane doświadczenie użytkownika.
Wstęp
Kontekst > Problem > Cele > Metodologia
Kontekst projektu
Nowoczesny projekt od zera
Ten projekt obejmował zaprojektowanie strony głównej na komputery stacjonarne dla start-upu oferującego zaawansowaną platformę AI dla handlu elektronicznego. Głównym wyzwaniem było zbudowanie wszystkiego od podstaw, ponieważ start-up nie miał wcześniejszej witryny ani badań użytkowników. Projekt koncentrował się głównie na projektowaniu interfejsu użytkownika, aby stworzyć wizualnie atrakcyjną i angażującą stronę główną, która skutecznie komunikuje wartość platformy i przyciąga potencjalnych klientów.
Problem
Brak badań użytkowników
Projekt rozpoczynał się bez wcześniejszych danych na temat potrzeb, zachowań ani oczekiwań grupy docelowej. Oznaczało to brak informacji, które mogłyby wspierać decyzje projektowe oparte na empirycznych dowodach. W rezultacie konieczne było podejmowanie decyzji w oparciu o założenia, ogólną wiedzę o branży i najlepsze praktyki UX
Cele
- Zbudować nowoczesną stronę
⚡️ Wyzwanie:
Jak stworzyć stronę, bez określonej grupy odbiorczej?
Metodologia
i podejście do projektu
Zanim w ogóle otworzę Figmę czy WordPressa...
Z doświadczenia wiem, że choć projektowanie w Figma czy budowanie strony w WordPressie to najbardziej czasochłonne etapy, najważniejsze decyzje projektowe zapadają dużo wcześniej.
Często największy postęp można osiągnąć jeszcze zanim uruchomi się jakiekolwiek narzędzie – przez rozmowy z klientem, analizę potrzeb użytkowników, szkice na kartce czy przemyślenie struktury informacji. To właśnie ten etap decyduje o tym, czy projekt będzie skuteczny – i czy praca w narzędziach będzie szybka i uporządkowana, czy pełna niepotrzebnych iteracji.
🤔 Indywidualne podejście do każdego projektu:
Nie istnieje uniwersalne rozwiązanie, które sprawdzi się we wszystkich przypadkach.
Każdy projekt jest unikalny i wymaga indywidualnego podejścia.
Pierwszym krokiem jest dokładne zrozumienie problemu, co pozwala na dobór najbardziej odpowiednich technik badawczych.
Zagrożenie dla projektu
Klient początkowo oczekiwał głównie „ładnego designu”, który będzie nowoczesny i pasujący do technologii AI. Szybko zorientowałem się, że nie zna swoich użytkowników ani ich potrzeb — nie miał danych, badań, ani person. To groziło tym, że projekt stanie się tylko „estetyczną broszurą”, a nie narzędziem wspierającym sprzedaż i wzrost.

Jak wyglądała rozmowa z klientem?
Zorganizowałem spotkanie, podczas którego zadałem konkretne pytania:
Kto według Ciebie kupuje tę usługę?
Jakie problemy ten produkt rozwiązuje?
W jaki sposób użytkownik ma trafić na stronę i co ma dalej zrobić?
Co oznacza dla Ciebie „nowoczesna strona”? (→ oczekiwania wizualne)
Czym chcesz się wyróżniać na tle konkurencji?

Zaproponowałem inne podejście — UX-first:
zamiast zaczynać od warstwy wizualnej, zacząć od zrozumienia użytkownika,
podeprzeć decyzje projektowe analizą danych rynkowych,
opracować persony i punkty styku z marką,
ustalić wspólną strategię komunikacji i cel strony.
Podsumowanie
Wyszło na jaw, że klient nie miał dokładnego opisu grupy docelowej, ale potrafił opowiedzieć o kilku typowych sytuacjach zakupowych — to stało się fundamentem dla tworzenia person.
Odkryliśmy, że główną wartością produktu jest automatyzacja marketingu dla mniejszych i średnich e-commerce’ów, którzy nie mają własnych zespołów AI.
Ustaliliśmy, że celem strony ma być nie tyle edukacja o AI, co szybkie zbudowanie zaufania i zachęcenie do umówienia demo.
- Badanie rynku i sprawdzanie pomysły
Dlaczego to było ważne? 🤔
Bez tej rozmowy i podejścia strategicznego:
UI byłby oparty na założeniach „co się podoba”, a nie „co działa”,
komunikacja mogłaby być zbyt techniczna lub zbyt ogólna,
ryzyko przepalenia budżetu na coś, co nie konwertuje, byłoby bardzo duże.
Dzięki rozmowie i zaproponowanemu podejściu udało się uzyskać wspólne zrozumienie celu projektu, a klient zyskał świadomość, że design to nie tylko kolory i layout, ale przede wszystkim skuteczna komunikacja z użytkownikiem.
Design Process
Analiza konkurencji > Persony > Design > Projekt
Analiza konkurencji
Discovery
Rozpocząłem od zbadania kilku kluczowych graczy w branży SaaS AI dla e-commerce.
jak komunikują wartość produktu,
jak wyglądają ich potencjalne lejki sprzedażowe,
jakie elementy UI/UX się powtarzają (czyli są standardem),
co można zrobić lepiej (czyli przewaga konkurencyjna).
Efekt: powstał dokument z wnioskami i „UX Insights” — gotowymi punktami do zastosowania w projekcie.


Podsumowanie
Analiza konkurencji pokazała, że aby wyróżnić naszą platformę SaaS AI dla MŚP e-commerce, musimy mówić językiem korzyści (oszczędność czasu, wzrost przychodów, przewaga nad konkurencją), uprościć onboarding i lejki (trial bez karty, szybkie „quick wins”), zastosować modularny, responsywny dashboard z mierzalnymi insightami oraz wprowadzić personalizowane ścieżki i asystenta AI, który krok po kroku przeprowadzi różne role (właściciel sklepu, specjalista SEO).
Kluczem jest transparentność (interaktywny kalkulator ROI, social proof z metrykami) i szablony branżowe, które obniżą próg wejścia i przyspieszą osiąganie realnych rezultatów.
Jak to się odnosi do głównej strony internetowej?
Udało się wstępnie zidentyfikować, jakie oczekiwania mogą mieć potencjalni użytkownicy wobec narzędzia.
Dzięki temu możemy świadomie zaplanować, które elementy warto wyeksponować na stronie głównej, aby nie tylko przyciągać uwagę, ale też testować trafność naszych założeń.
Tworzenie person
Discovery
Na podstawie danych rynkowych, rozmów z klientem oraz desk researchu stworzyłem 2 bazowe persony:
E-commerce Manager — szuka automatyzacji, ROI, konkretów.
Właściciel małego sklepu — mniej techniczny, potrzebuje prostych rozwiązań i wsparcia.
Kluczowym założeniem było zidentyfikowanie dwóch głównych segmentów decyzyjnych w obszarze małych i średnich firm e-commerce. Badania wykazały wyraźny podział na profesjonalnych menedżerów e-commerce w większych organizacjach oraz właścicieli małych sklepów zarządzających samodzielnie całym biznesem.
Persona 1: E-commerce Manager
Michał Kowalski, 32 lata
Rola: E-commerce Manager w średniej wielkości firmie
Branża: Fashion e-commerce (sklep z 800+ produktami)
Lokalizacja: Warszawa
Wykształcenie: Magister E-biznesu na SGH
Persona 2: Właściciel małego sklepu
Anna Nowak, 38 lat
Rola: Właścicielka i główny operator sklepu internetowego
Branża: Niszowe produkty kosmetyczne naturalne
Lokalizacja: Wrocław (podmiejska lokalizacja)
Wykształcenie: Licencjat z marketingu na UW
Wnioski
Discovery
Stworzone persony
Michał (E-commerce Manager) i Anna (Właścicielka małego sklepu) – reprezentują dwa główne segmenty użytkowników naszej platformy SaaS AI dla e-commerce. Pomimo funkcjonowania w tej samej branży, ich potrzeby, oczekiwania i sposób interakcji z narzędziami znacząco się różnią:
Wspólne potrzeby
- Oszczędność czasu – oboje poszukują automatyzacji powtarzalnych zadań
- Widoczne rezultaty – oczekują wymiernych efektów biznesowych
- Zrozumiałe korzyści – chcą jasno komunikowanych wartości bez technologicznego żargonu
Główne różnice
- Poziom technicznego zaawansowania – Michał jest zaawansowany, Anna potrzebuje prostoty
- Proces decyzyjny – Michał opiera się na danych i analizie, Anna na intuicji i rekomendacjach
- Kontekst użycia – Michał działa głównie na desktopie w godzinach pracy, Anna korzysta z różnych urządzeń przez cały dzień
- Główna motywacja – dla Michała to mierzalne KPI, dla Anny oszczędność osobistego czasu
Rekomendowane następne kroki
- Walidacja person poprzez wywiady z przedstawicielami obu grup
- Przeprowadzenie warsztatów projektowych z wykorzystaniem persony jako punktu odniesienia
- Stworzenie map podróży użytkownika (user journey maps) dla kluczowych scenariuszy
Design
Develop
Koncept

Uzasadnienie struktury Hero Section
1. Logo i Menu (Header)
Znajdują się w klasycznym układzie – lewy górny róg (logo jako punkt orientacyjny), prawy górny róg (menu – szybka nawigacja). To konwencja znana użytkownikom, skracająca czas decyzji i zwiększająca poczucie kontroli.
2. Value Proposition (Value 1–4)
Zaraz poniżej – cztery krótkie wartości, które:
-
Konkretnie pokazują, co zyskuje użytkownik.
-
Działają jak przedsmak korzyści jeszcze przed wejściem w szczegóły.
-
Osadzone wysoko – są jednymi z pierwszych rzeczy, które użytkownik widzi (Zasada F-pattern i Z-pattern w czytaniu stron).
3. Główny nagłówek H1
Służy jako szybkie przedstawienie narzędzia – nazwa + slogan wyjaśniający jego istotę. Kluczowy dla zrozumienia produktu w ciągu 5 sekund (reguła 5 sekund).
4. Opis problemu i rozwiązania
To mikrosekcja “problem–rozwiązanie”:
-
Pokazuje użytkownikowi, że rozumiemy jego wyzwania.
-
Buduje relację i zaufanie.
-
Wskazuje, dlaczego nasz produkt to właściwa odpowiedź.
5. CTA – Call To Action
Jasny, wyeksponowany przycisk (lub dwa, w wersji primar/secondary):
-
Zaprojektowany zgodnie z heurystykami nielsenowskimi – widoczność, jednoznaczność działania.
-
Umieszczony w „złotym punkcie” widoczności (pod H1 i opisem).
6. Social Proof
Społeczny dowód słuszności to kluczowy element budujący wiarygodność. Umieściłem go w dolnym lewym sektorze, gdzie wzrok użytkownika naturalnie „odpoczywa” po zeskanowaniu strony:
-
Opinie użytkowników, liczby klientów, logotypy firm – potwierdzają skuteczność narzędzia.
-
Zmniejszają ryzyko postrzegane przez odwiedzających (zgodnie z teorią zmniejszania niepewności w UX).
7. AI Features
Sekcja z funkcjami sztucznej inteligencji – „proof of innovation”:
-
Pozycjonuje narzędzie jako nowoczesne, zaawansowane technologicznie.
-
Wzmacnia wartość marki i wyróżnia się na tle konkurencji.
-
Wspiera klientów, którzy podejmują decyzje na podstawie parametrów technicznych.
Finalny design

Koncept i nadanie stylu


Projekt
Deliver
Przygotowanie strony głównej

Po przeprowadzeniu analizy rynku, stworzeniu person oraz zdefiniowaniu kluczowych potrzeb użytkowników, zorganizowałem spotkanie z właścicielem produktu. Podczas tej sesji zaprezentowałem:
Wstępny projekt strony głównej, oparty na zidentyfikowanych wartościach i potrzebach użytkownika.
Zalążek identyfikacji wizualnej – paleta kolorów, typografia, styl ilustracyjny, kierunek języka komunikacji.
Strategiczny plan rozwoju architektury strony – wskazując kolejne sekcje, podstrony i elementy UX, które miały pojawić się na dalszym etapie.
Całość została bardzo pozytywnie odebrana – klient docenił nie tylko estetykę, ale również uargumentowane decyzje projektowe i strategiczne podejście do rozwoju platformy. Dzięki temu uzyskałem zielone światło na projektowanie kolejnych sekcji i rozwijanie pełnej struktury serwisu zgodnie z wcześniej przyjętą wizją.
Projekt





Podsumowanie
Kluczowe osiągnięcia > Rezultat pracy > Galeria
Podsumowanie projektu
Projekt rozpoczął się od diagnozy: klient posiadał produkt, ale brakowało mu wiedzy o użytkownikach, rynku i sposobie komunikacji wartości. Zamiast ograniczyć się do samego UI, zaproponowałem podejście strategiczne – zbadanie rynku, stworzenie person, zdefiniowanie propozycji wartości i dopiero potem projektowanie interfejsu.
Kluczowe osiągnięcia
Zmiana podejścia klienta z „projektowania strony” na budowanie produktu zorientowanego na użytkownika (UX-first)
Stworzenie spójnej koncepcji brandingu, layoutu i wartości komunikacyjnych na podstawie realnych potrzeb użytkowników
Rezultaty prac
Więcej niż strona -> Pełna strategia
Finalny design to nowoczesna, przejrzysta i funkcjonalna strona główna, która w klarowny sposób komunikuje wartość narzędzia, buduje zaufanie oraz wspiera konwersję. Klient otrzymał nie tylko estetyczny UI, ale też kompletną strategię komunikacyjną i projektową, która stała się podstawą do dalszego skalowania produktu.
Następne kroki
- Wdrożenie MVP
- Badania z użytkownikami
- Monitoring i mikrooptymalizacje
- Wsparcie w rozwoju marki online