Dawid Świdlikiewicz | UX/UI Designer

Portfolio > AI Platform for eCommerce
Case

Stworzenie strony internetowej

Rola
UX/UI Designer

Cel
Zbudować nowoczesną stronę

Narzędzia
Figma | Google Analytics | HotJar | Adobe Photoshop

Czas trwania 14 Dni

Portfolio-ReCycle-Case-Study-Cover-Image-by-Dawid-Swidlikiewicz-Sr-UX-Designer.webp

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.

Ikona nieznanego użytkownika stworzona przez Dawida Świdlikiewicza, Senior UX Designera.

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?

Wizualizacja schematu zapytań by Dawid Świdlikiewicz Sr UX/UI Designer

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.

Analiza konkurencji SaaS AI dla E-commerce z perspektywy UX, autorstwa Dawida Świdlikiewicza, UX Designera.
Dokument przedstawiający analizę konkurencji w dynamicznie rozwijającym się sektorze oprogramowania SaaS, które integruje sztuczną inteligencję w celu optymalizacji platform e-commerce. Z perspektywy UX Designera, Dawida Świdlikiewicza, analiza ta koncentruje się na identyfikacji najlepszych praktyk, mocnych i słabych stron rozwiązań konkurencji oraz potencjalnych możliwości innowacji w projektowaniu interfejsów i doświadczeń użytkowników w kontekście AI w e-commerce.

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

Szkic koncepcyjny strony internetowej e-commerce z elementami AI, autorstwa Dawida Świdlikiewicza, Senior UX Designera.

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

Projekt strony internetowej e-commerce z wykorzystaniem AI w portfolio Dawida Świdlikiewicza.

Koncept i nadanie stylu

Szkic koncepcyjny strony internetowej e-commerce z elementami AI, autorstwa Dawida Świdlikiewicza, Senior UX Designera.
Projekt strony internetowej e-commerce z wykorzystaniem AI w portfolio Dawida Świdlikiewicza.

Projekt

Deliver

Przygotowanie strony głównej

ai-ecommerce-website-design-by-Dawid-Świdlikiewicz-2

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

Projekt strony internetowej e-commerce z wykorzystaniem AI w portfolio Dawida Świdlikiewicza.
Projekt strony internetowej e-commerce z wykorzystaniem AI w portfolio Dawida Świdlikiewicza.
Projekt strony internetowej e-commerce z wykorzystaniem AI w portfolio Dawida Świdlikiewicza.
Projekt strony internetowej e-commerce z wykorzystaniem AI w portfolio Dawida Świdlikiewicza.
Projekt strony internetowej e-commerce z wykorzystaniem AI w portfolio Dawida Świdlikiewicza.

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
  •  

Galeria

Zobacz inne moje prace