Igor Swatowski
ENPL
Bezpłatna wycena
Wybraneprojekty

VeraBotanica. Projekt sklepu internetowego dla marki kosmetyków pielęgnacyjnych

Kobieta, która wydaje 180 € na serum, szuka produktu na swój problem ze skórą. Cena schodzi na drugi plan.

Projekt

VeraBotanica

Branża

Uroda · E-commerce

Rok

2025

Moja rola

Projektant UX/UI

Narzędzia

Figma · Midjourney · ChatGPT

Usługi

Projektowanie UX/UI, Identyfikacja wizualna, Grafiki AI

Założenie

Kobieta, która wydaje 180 € na serum, szuka produktu na swój problem ze skórą. Cena schodzi na drugi plan.

[01]

180 euro za serum marki, o której nikt nie słyszał.

Cały projekt kręci się wokół jednego pytania: co sprawia, że ktoś czuje się pewnie, wydając 180 euro na produkt marki, której nie zna?

Zaprojektowałem pełny sklep dla marki kosmetyków naturalnych z półki 50–180 euro. Sprawdzałem, jak nawigacja prowadzona typem skóry i dowody zaufania postawione w punktach decyzji mogą uzasadnić taką cenę.

Fotografii nie było i nie było na nią budżetu. Wszystkie zdjęcia produktów wygenerowałem w Midjourney, dzięki czemu mogłem poświęcić czas na to, co przy premium naprawdę decyduje o zakupie.

Każda strona w ścieżce ma jedno zadanie. Strona główna buduje wiarygodność. Kategoria pomaga trafić na swój produkt. Karta produktu uzasadnia cenę. Koszyk usuwa powody do wahania.

Strona główna VeraBotanica, desktop i mobile. Nagłówek, kolekcje, pas zaufania, sekcja o botanicznej innowacji i FAQ.

[02]

Trzy decyzje, które utrzymują tę cenę

Zaufanie nie bierze się z plakietki doklejonej na końcu. Powstaje w trzech momentach, w których klientka decyduje, czy iść dalej.

  1. [01]

    Filtry typu skóry nad siatką produktów

    Kategorie mają standardową nawigację po rodzaju produktu: kremy, sera, oczyszczanie. Ale kiedy klientka jest już w kategorii, jej następne pytanie brzmi „który z nich jest dla mojej skóry”, a nie „posortuj po cenie”.

    Dodałem filtry typu skóry poziomo nad siatką produktów, więc zawężenie wyników to jedno dotknięcie bez opuszczania strony. Drobna zmiana, która sprawia, że katalog zaczyna działać jak rekomendacja.

    Strona kategorii Kremy. Filtry typu skóry nad siatką produktów, desktop i mobile.

  2. [02]

    Dowody zaufania tam, gdzie pojawia się wahanie

    Przy cenach od 50 do 180 euro klientka potrzebuje potwierdzenia, zanim kliknie „Do koszyka”. Postawiłem cztery dowody zaufania bezpośrednio pod przyciskiem, widoczne bez przewijania, dokładnie w miejscu, w którym rodzi się wątpliwość.

    Głębsze informacje o produkcie schowałem w sekcjach rozwijanych. Strona zostaje czysta dla tych, które kupują szybko, a ostrożniejsze mogą wejść głębiej bez opuszczania strony. „Botaniczne pochodzenie” i „Rytuał aplikacji” to wzorce zapożyczone z marek luksusowych, żeby było widać, że to nie jest kolejny krem z drogerii.

    Karta produktu. Cztery dowody zaufania pod przyciskiem, niżej sekcje Opis, Szczegóły, Botaniczne pochodzenie i Rytuał aplikacji.

  3. [03]

    Koszyk dwustopniowy: szuflada dla rozpędu, pełna strona dla decyzji

    Zamiast jednego koszyka zaprojektowałem dwa. Szuflada pojawia się od razu po dodaniu produktu i ma podtrzymać rozpęd: nie przerywa zakupów i daje powód, żeby dołożyć coś jeszcze.

    Pełna strona koszyka służy do czegoś innego. To miejsce, w którym zdecydowana kupująca sprawdza wszystko: rozpisane koszty, podział na dostawę i VAT, pole na kod rabatowy. Dwa różne stany głowy, dwa różne interfejsy.

    Oba koszyki w jednym kadrze. Szuflada z paskiem do darmowej dostawy obok pełnej strony z rozpisaną sumą i polem na rabat.
Modal newslettera z ofertą na pierwsze zakupy, desktop i mobile.
Potwierdzenie zamówienia: numer, szczegóły dostawy i rozpisane podsumowanie.
Zakładanie konta po zakupie: zachęta ze strony potwierdzenia obok modali logowania i rejestracji.

[03]

Jak powstały grafiki

Wszystkie zdjęcia produktów wygenerowałem w Midjourney. To był osobny proces, nie skrót:

  • Trzy do czterech obrazów referencyjnych na start, żeby zamknąć estetykę: jakość światła, temperaturę barw i nastrój na styku botaniki i gabinetu kosmetycznego.
  • Prompty ze specyfikacją sprzętu: typ obiektywu, ogniskowa, ustawienie światła. Ogólny prompt daje ogólny wynik. Techniczny prompt daje materiał, nad którym da się panować.
  • Jedno dobre wyjście jako referencja stylu dla wszystkich kolejnych generacji. To buduje spójność w obrębie linii produktowej. Bez tego każde zdjęcie wygląda, jakby robił je inny fotograf.
  • Typografia etykiet osobno, w generatorze obrazów ChatGPT. Midjourney nie radzi sobie z tekstem, a wiedza o tym, które narzędzie obsługuje które zadanie, jest częścią roboty.

Następny krok

Twoja strona nie nadąża za firmą?

Projekty

Zobaczwszystkie

Więcej projektów

Zobaczwszystkie