Prześledź moją karierę
Zobacz, jak pracuję
Obejrzyj moje projekty
Pobierz moje pełne CVTime: Q3 2023
Tasks:
- projekt logo
- projekt strony internetowej
- projekt mailingów
- projekt opakowań
- kodowanie front end
- kodowanie back end
Design Stack: Adobe Photoshop & Illustrator
Główny Tech Stack: Wordpress, WooCommerce, ACF
Omówienie projektu
Hemply Smile to działająca głównie w Szwecji firma produkująca i sprzedająca wysokiej jakości produkty CBD. Moim zadaniem było zaprojektowanie od podstaw całej identyfikacji wizualnej marki i stworzenie od a do z jej strony internetowej wraz ze sklepem e-commerce. Nie było to łatwe zadanie, gdyż rynki skandynawskie znane są z trudności zdobycia zaufania klientów, szczególnie w przypadku zupełnie nowej firmy w segmencie związanym ze zdrowiem.
A więc do dzieła!
Pierwsze wyzwanie: Logo
W całym projekcie klientowi zależało na uzyskaniu profesjonalnego wyglądu, który jednocześnie nie byłby zbyt sztywny. Główni konkurenci postawili na chłodną, medyczną, niemal szpitalną estetykę. Ja uznałem, że skuteczniejsze może być pozycjonowanie się raczej na przyjaciela niż lekarza, szczególnie że grupą docelową są tzw. młodzi dorośli. Chciałem, żeby to logo było odważne i fajne, ale jednocześnie wciąż budzące zaufanie, nieco zabawne, ale bez przeady i z całą pewnością nie po prostu śmieszne.
Liść konopi wydał mi się dobrym motywem przewodnim, zwłaszcza że zwykle jest używany w kontekście CBD tylko jako uproszczona ikona. Dostrzegłem tu szansę na stworzenie naprawdę wyrazistego projektu. Początkowo miałem trochę problemów z kształtem liścia, który wymuszał, by logo było zdecydowanie zbyt wysokie. To zależnie od zastosowania mogłoby okazać się sporym utrudnieniem. Na szczęście okazało się, że po przycięciu od góry i lewej strony wziąż jest bardzo czytelne, więc zdecydowałem się pójść właśnie tą drogą.
Metodą prób i błędów szybko doszedłem do wniosku, że nie jestem w stanie skutecznie rozdzielić dużego, mocnego kształtu liścia i kropli oleju od nazwy marki i muszę je jakoś sensownie połączyć w spójną całość. Pomocna okazała się negatywna przestrzeń. Na dość wczesnym etapie zdecydowałem się użyć fontu Slackey, ponieważ idealnie pasował mi do klimatu całego projektu. Sporo musiałem się nagimnastykować z przesuwaniem, zmianami rozmiaru liter i ich odstępów, ale w końcu udało mi się osiągnąć stan, w którym z typografii byłem rzeczywiście zadowolony.
To, czego wciąż brakowało, to jakiś finalny akcent. Po drodze odrzuciłem kilka głupkowatych pomysłów i ostatecznie dodałem do kropli oleju dyskretną linię uśmiechu. Ładnie koresponduje ona z nazwą marki a jednoczesnie przełamuje nieco kształt samej kropli, nadając jej odpowiedniego charakteru. W tym momencie byłem wreszcie gotów, by pokazać skończony projekt klientowi, dla lepszego efektu w formie makiety strony internetowej na smartfonie.
Mieliśmy pewne wymagania, ale tak naprawdę nie byliśmy pewni, czego dokładnie chcemy i czego powinniśmy się spodziewać. Kiedy zobaczyliśmy twój projekt, powiedzieliśmy sobie: wow, to jest to! Próbowaliśmy to wcześniej jakoś ubrać w słowa, a ty przedstawiłeś to po prostu idealnie.
Następny krok: opakowania
Po wykonaniu logo nadszedł czas, by zająć się opakowaniami. Muszę przyznać, że to dla mnie dość niecodzienne zlecenie, ale zakres prac zapowiadał się raczej standardowo. Miałem zaprojektować naklejki na buteleczki z olejem CBD i pojemniki na kapsułki. Produkty różniły się ilością i rodzajem kannabinoidów oraz zastosowaniem. Po krótkim namyśle zdecydowałem się rozróżnić je kolorystycznie. Dlatego już na tym etapie musiałem zdecydować, jakiej palety barw będę używał we wszystkich dalszych pracach nad tym projektem. Stanęło na dwóch głównych kolorach użytych już w logo i sześciu odcieniach uzupełniających.
Zmieszczenie obszernych tekstów na często naprawdę małych etykietach okazało się sporym wyzwaniem. Całe szczęście font Fira Sans, na którego zastosowaniu zależało mi w tym projekcie, ma bardzo ładny wariant skondensowany. Po licznych przesunięciach i zmianach rozmiaru udało mi się zmieścić też kilka minimalistycznych ikon reprezentujących różne sekcje tekstu. Zdecydowałem się również podzielić długie nazwy produktów na części w odrębnych liniach wyróżnione kolorem i rozmiarem. To wizualne sekwencjonowanie tytułów zostanie później szeroko wdrożone na stronie internetowej.
Nie uczestniczyłem osobiście w procesie druku, jako że całe zlecenie było wykonywane nie tylko zdalnie ale też ponad granicami krajów. Zostały wydrukowane trzy małe partie testowe uwzględniające niezbędne korekty kolorów CMYK, drobne zmiany i poprawienie kilku literówek. Poszło to bardzo sprawnie, niebawem klient był usatysfakcjonowany rezultatami a ja mogłem już w pełni skupić się na projekcie strony internetowej.
Zadanie główne: strona internetowa
Wobec sprawnego zaakceptowania logo i projektów opakowań bez żadnych poważniejszych poprawek, byłem dość pewny swojego wyczucia preferencji klienta. Dlatego zdecydowałem się pominąć etap prototypowania i tym razem od razu przeszedłęm do projektu graficznego. Na szczęście zostały mi oszczędzone niedogodności związane z zaślepkami typu "lorem ipsum" i zdecydowana większość treści na stronę była dla mnie od razu dostępna. Pozwoliło to z wyprzedzeniem zaplanować podział zawartości kolejnych podstron na kilka powtarzalnych, logicznych sekcji, co znacznie ułatwiło mi życie później, gdy zabierałem się za kodowanie. Na tym etapie musiałem stworzyć kilka podstawowych wzorców wizualnych - nagłówki, podnagłówki, przyciski, bloki tekstów i obrazków, czy zestawy ikon, później wykorzysywane wielokrotnie na kolejnych ekranach witryny.
Uzgodniliśmy z klientem, że co do zasady będziemy trzymać się standardowego UX platform WooCommerce i Wordpress, więc głównymi ekranami wymagającymi niestandardowych projektów były strona główna, lista produktów z sortowaniem i filtrowaniem, szczegóły produktu i kilka mniej typowych modułów uzupełniających pozostałe podstrony. Zdecydowałem się na projekt RWD o pełnej szerokości ekranu z dużymi zdjęciami w przewżających odcieniach zieleni oraz wspomnianymi wcześniej dużymi nagłówkami podzielonymi na części. Po kilku konsultacjach projekty mobilne i desktopowe zostały jeden po drugim szybko zaakceptowane z jedynie niewielkimi zmianami. Teraz nadszedł czas, żeby zakasać rękawy i zająć się kodem.
Zakres zlecenia wymagał motywu Wordpressa zbudowanego od podstaw pod indywidualne potrzeby klienta. Zbyt wiele zmiennych i elementów charakterystycznych dla tego właśnie projektu, by móc oprzeć się na gotowym szablonie z półki. To oznaczało znacznie więcej pracy z html, css, JavaScript i php, ale ostatecznie było warte każdej poświęconej chwili. Dzięki temu mogłem też wykorzystać potęgę modelu css flexbox, wciąż zbyt rzadko używanego w komercyjnych motywach. Szybko zdałem też sobie sprawę, że standardowe bloki treści Wordpressa ewidentnie tu nie wystarczą ze względu na swoje fabryczne ograniczenia. Nie jestem wielkim fanem kreatorów stron takich jak Elementor czy Divi, więc zdecydowałem się skorzystać z rozszerzenia ACF Pro pozwalającego na ręczne przejęcie pełnej kontroli nad sposobem wyświetlania wszystkich treści. Początkowy wysiłek włożony w zbudowanie przemyślanych modułów, komponentów i sekcji wielokrotnego użytku sprawił, że na dalszych etapach prac było już głównie z górki.
Z technicznego punktu widzenia większość pracy od tego momentu właściwie była dość standardowa. Wyraźnie trudniejszym fragmentem kodu był moduł wyboru produktów promocyjnych „4 w cenie 3”, umożliwiający klientom wybranie czterech produktów i otrzymanie najtańszego z nich za darmo. Okazało się, że spośród wszystkich dostępnych rozszerzeń WooCommerce, czy to darmowych czy płatnych, żadne nie było w stanie umożliwić tej konkretnej funkcjonalności. Wtyczka Product Bundles nieco pomogła, ale nadal sporo pozostawało do życzenia. Klient był bardzo zdeterminowany na skuteczne wdrożenie takiego modułu promocyjnego, więc samodzielnie napisałem niestandardowe szablony dla stron koszyka i podsumowania zamówienia, które całkowicie zmieniły sposób wyświetlanie produktów i logikę zliczania sumy ich cen. Na koniec przygotowałem elegancki interfejs graficzny w postaci sąsiadujących pionowych sliderów, pozwalający użytkownikom interaktywnie wybrać cztery produkty i natychmiast zobaczyć ostateczną, obniżoną cenę zakupu. Następnie pozostało już tylko upewnić się, że proces zamówienia działa jak trzeba, skonfigurować rozszerzenia związane z wysyłką i płatnością oraz trochę podkręcić wizualnie szablony e-maili wysyłanych do użytkowników.
Migracja: hosting i domeny
Strona była już gotowa i nadszedł czas, by przenieść ją z mojego serwera deweloperskiego do lokalizacji docelowej. Klient sam wybrał szwedzkiego dostawcę hostingu współdzielonego i wcześniej kupił potrzebne domeny. Mając wszystkie niezbędne dostępy, przeniosłem pliki strony do nowej lokalizacji FTP, zmigrowałem bazę danych MySQL i skonfigurowałem domenę z certyfikatem SSL. Wprowadziłem też po stronie serwera kilka poprawek związanych z bezpieczeństwem, pamięcią podręczną i optymalizacją grafik. Na koniec zająłem się konfiguracją zabezpieczeń samego Wordpressa, w tym uprawnieniami do katalogów, adresem URL panelu administracyjnego i zapobieganiem spamowi. Wkrótce byliśmy gotowi do startu.
Ostatnia misja: kampania mailingowa
Teraz strona internetowa była już w pełni sprawna i dostępna online. Nadszedł więc czas, by doczekała się jakiejś publiczności. Głównym kanałem dotarcia do nowych klientów miał być e-mail marketing. Po odrobinie poszukiwań i przedyskutowaniu ich wyników zdecydowaliśmy się użyć dwóch rozwiązań jednocześnie a dopiero w późniejszym etapie zdecydować, które z nich najlepiej odpowiada potrzebom firmy. Wybór padł na Freshmail i GetResponse. Stworzyłem graficzne szablony e-maili bazujące na wcześniejszych projektach, skonfigurowałem kampanie i wkrótce zaczęliśmy wysyłać. W świat poszła potężna porcja wiadomości. Udało się nawet przeprowadzić przy okazji kilka prostych testów A/B. W sumie wysłaliśmy ~50 tysięcy e-maili. Współczynnik otwarć wyniósł aż 39% (w porównaniu do 20% średniej dla segmentu reklamowego). Wskaźnik przeklików CTR osiągnął 3,55% (w porównaniu do typowych 2%). Całkiem przyzwoicie!
Podsumowanie i wnioski
Nie skłamię mówiąc, że większość opisanych prac była raczej przyjemnością niż wysiłkiem. Mimo że napotkałem pewne wyzwania, okazały się one całkiem wciągające i zapewniły mi ciekawe doświadczenie edukacyjne. Udało mi się również wypracować bardzo dobrą i zdrową relację z moim klientem, która później przerodziła się w stałą współpracę. Po czterech miesiącach pracy byliśmy w stanie ukończyć cały proces projektowania i wdrażania nie tylko strony e-commerce, ale także identyfikacji wizualnej, opakowań, mailingu i kilku drobnych formatów do druku. Co więcej - po pierwszych pięciu pełnych miesiącach obecności online mogę z dumą powiedzieć, że
współczynnik konwersji zamówień sklepu wyniósł 7%
w porównaniu do 3,6% średniej dla segmentu zdrowia i urody na całym świecie. Nie jestem ekspertem, jeśli chodzi o marketing, wszystkie te CTR-y, CVR-y i inne wskaźniki, ale wygląda to na spore osiągnięcie i jestem bardzo usatysfakcjonowany, że mogę być dużą częścią tego sukcesu.
Jeśli spodobał Ci się mój opis prac nad tym projektem i chciałbyś, abym Twoim zleceniem zajął się z taką samą uwagą, nie wahaj się i po prostu wyślij mi wiadomość.
