Jak wykorzystaliśmy WordPress Multisite i WooCommerce, żeby stworzyć platformę sprzedażową dla sieci franczyz?

Śledź nas w mediach społecznościowych:

The Little Sensory logo

Naszym zadaniem było stworzenie platformy, która umożliwi rodzicom kupno biletów na zajęcia, a franczyzobiorcom pozwoli w prosty sposób zarządzać usługami i zamówieniami.

 

Elementy projektu graficznego w tym projekcie zostały dostarczone przez Sophie Selcoe, graficzkę z wielkiej Brytanii. Naszym zadaniem było ich odpowiednie przeskalowanie i przygotowanie wersji mobilnej serwisu w oparciu o widoki wersji przeglądarkowej, które otrzymaliśmy.

Sprawdź online
Web design - wizualizacja sekcji z wydarzeniem na stronie internetowej

Projekt w liczbach

  • Do zarządzania stronami wykorzystaliśmy WordPress MultiSite. Dzięki temu każda franczyzobiorczyni ma swoją własną przestrzeń reklamową, może zarządzać produktami i nie musi obawiać się, że ktoś przypadkowo skasuje jej usługi.
  • Do strony zamówienia usług zostało dodanych wiele spersonalizowanyuch pól. Rodzice nie muszą pisać dodatkowego maila z informacjami o alergiach, wieku czy specjalnych potrzebach dziecka. Wszystkie informacje są podawane w trakcie zakupu. Dodatkowo, dzięki możliwości logowania, dane zostają zapamiętane i przy kolejnym zakupie nie trzeba ich wprowadzać ponownie.
  • Strona nadrzędna posiada wyszukiwarkę oddziałów. Po wpisaniu nazwy miasta lub preferowanych usług, użytkownik zobaczy dopasowaną listę wyników.
  • +40

    oddziałów ma teraz własne strony w WordPress MultiSite

  • +1000

    produktów zostało przeniesionych ze starej strony

  • 38 sec

    to średni czas odpowiedzi na pytania franczyzobiorców w momencie uruchomienia nowej platformy

  • +100000

    fanów na Facebooku

Tworzenie sklepów internetowych - zdjęcie osoby zamawiającej na stronie internetowej

Główne założenia i początek projektu

Tworząc platformę dla The Little Sensory musieliśmy zastanowić się, jak przygotować system, aby każda franczyzobiorczyni miała dostęp jedynie do swoich produktów, zamówień i klientów. Po rozważeniu wszystkich za i przeciw zaproponowaliśmy wykonanie strony w oparciu o WordPress Multisite – rozszerzenie WordPressa, które pozwala tworzyć sieć powiązanych ze sobą stron internetowych.

 

Dzięki WordPress Multisite każda franczyzobiorczyni loguje się do osobnego pod-serwisu, w którym ma dostęp tylko do własnych produktów i zamówień. Przykładowo: osoba zarządzająca franczyzą w Stafford nie może modyfikować usług, które świadczy franczyzobiorczyni w Milton Keynes.

 

Jedynym wyjątkiem, osobą która posiada dostęp do wszystkich franczyz, jest Roxanne, właścicielka marki, dla której stworzyliśmy rolę super-administratora. Jako super-admin Roxanne może tworzyć nowe serwisy dla franczyz i wyświetlić szczegółowe informacje dotyczące produktów i zamówień każdego oddziału.

 

Do przygotowania części sklepowej wykorzystaliśmy popularny WooCommerce. System został przez nas zmodyfikowany, aby ułatwić zarządzanie wydarzeniami. W tym celu zrezygnowaliśmy z gotowych rozwiązań i zakodowaliśmy własne pola, które pozwalają dodać daty, godziny, informacje kontaktowe czy lokalizację zajęć.

Co było dla nas ważne?

  • Automatycznie aktualizowana lista wydarzeń z listą oczekujących

    Harmonogram wydarzeń jest zbudowany w taki sposób, że zajęcia usuwane są z niego automatycznie - jedną minutę po starcie zajęć. Dzięki temu nawet Ci, którzy zamawiają na ostatnią chwilę mają szansę nabyć bilet wstępu.
  • Ograniczenia dla roli administratorów

    Rola administratora pojedynczego serwisu w ramach Multisite została zmodyfikowana. Wyłączyliśmy m.in. możliwość dodawania zdjęć do biblioteki mediów oraz zmianą treści na podstronach. Franczyzobiorca może skupić się na zarządzaniu produktami i nie musi się martwić niczym innym.
  • Szerokie możliwości personalizacji serwisów

    Każda podstrona ma możliwość nadpisywania kolorów i logotypów. Dla produktów można tworzyć dodatkowe galerie zdjęć oraz zarządzać dostępnością zajęć. Wszystkie te funkcje mają ułatwić administrację serwisami.
  • Możliwość stworzenia własnego konta

    Każdy użytkownik może stworzyć swoje własne konto, aby nie uzupełniać danych przy każdym zakupie. Konto można założyć na kilku etapach: przed rozpoczęciem zakupu lub w jego trakcie.
  • Integracja płatności Stripe

    Strona jest zintegrowana z bramką szybkich płatności Stripe i umożliwia szybkie pobieranie płatności.
  • Możliwość pobrania listy kupujących dany produkt

    Każda franczyzobiorczyni potrzebuje listę obecności, aby sprawdzić, kto dotarł na zajęcia - dlatego do każdego produktu przyporządkowane są zamówienia, które w prosty sposób można zapisać do PDF i wydrukować.
  • Wyszukiwarka oddziałów zintegrowana z mapą

    klienci mogą wyszukać oddziały The Little Sensory, które znajdują się w pobliżu. Po wpisaniu lokalizacji, na mapie pojawiają się jedynie najbliżej znajdujące się oddziały wraz z informacją, jakie usługi świadczą.
Projektowanie stron internetowych - wizualizacja elementów na stronie
  • Zdjęcie laptopa z otwartym edytorem WordPress
  • Wizualizacja dodawania mediów społecznościowych w WordPress
  • Wizualizacja produktów w WordPress
  • Wizualizacja dodawania opinii do strony internetowej
  • Zdjęcie laptopa z otwartym edytorem WordPressa
  • Wizualizacja dodawania podstawowych danych witryny w WordPress
  • Wizualizacja dodawania produktu do witryny
  • Prezentacja produktów graficznych w WordPress
  • Wizualizacja dodawania szczegółowych informacji o ofercie

Jak wyglądała praca nad projektem?

Wordpress development - project manager prezentujący strukturę strony internetowej

W celu usprawnienia pracy nad projektem, podzieliliśmy go na mniejsze części.

Prace zaczęliśmy od kodowanie widoków strony nadrzędnej, czyli tego, co obecnie znajduje się pod adresem thelittlesensory.co. To była najbardziej czasochłonna część projektu. Podstrony zostały zakodowane z wykorzystaniem wtyczki Advanced Custom Fields Pro. W ramach prac przygotowaliśmy edytowalne szablony podstron. Na ich podstawie administrator może tworzyć kolejne podstrony.

 

Po zakończeniu tego etapu przystąpiliśmy do kodowania procesu zakupowego. Koszyk i strona zamówienia zostały zbudowane na tym etapie, by zyskać więcej czasu na testowanie procesu zakupowego. WooCommerce, który stanowi bazę rozwiązania, został uzupełniony o pola, które usprawniają zarządzanie wydarzeniami.

 

Kolejnym krokiem było kodowanie stron franczyz. Tutaj również wykorzystaliśmy wtyczkę ACF Pro. Serwisy poszczególnych oddziałów charakteryzowały się z jednej strony prostszym designem, ale z drugiej wymagały większych możliwości personalizacji.

 

Związane jest to z faktem, że w ramach franczyzy poszczególne oddziały mogą oferować jedną lub kilka z 5 usług: Little Glow, Little Nature, Little Massage, Little Yoga i – nasze ulubione – Little Mess.

 

Każda usługa ma inne logo i inne kolory. W związku z tym musieliśmy zakodować szablony tak, by podstrony można było swobodnie edytować, a dodatkowo musieliśmy nauczyć WordPressa co zrobić i które kolory i obrazki wykorzystać, jeśli franczyza świadczy więcej niż jedną usługę.

 

Po przygotowaniu serwisów franczyz zajęliśmy się kodowaniem mapy lokalizacji, w oparciu o wybraną przez klienta wtyczkę Store Locator. Kod wtyczki musiał zostać zmodyfikowany, by wyświetlać informacje potrzebne klientowi.

 

Gdy wszystkie widoki podstron zostały zakodowane i przetestowane, przystąpiliśmy do kolejnego dużego wyzwania – importu danych. W poprzedniej wersji serwisu produkty były dodawane w oparciu o ciężką wtyczkę, która od lat nie była wspierana dla twórców. Stanowiło to problem i potencjalne zagrożenie – nigdy nie powinieneś korzystać z dezaktualizowanych pluginów, które mogą doprowadzić do uszkodzenia Twojej strony lub ataku hakerskiego.
Dodatkowo część starej bazy danych była uszkodzona i skorzystanie ze starego katalogu było wręcznie niemożliwe.

 

Z tego powodu produkty tylko częściowo mogły być zaimportowane w sposób automatyczny. Wiele elementów musiało zostać przeniesionych ręcznie, co było sporym wyzwaniem i wymagało skrupulatności.

 

Ostatnim krokiem (jak do tej pory) było udostępnienie możliwości logowania i zakładania konta na stronach poszczególnych franczyz. Dzięki temu powracający użytkownicy nie muszą za każdym razem uzupełniać danych związanych z zamówieniami.

 

Jak zwykle po zakończonej współpracy przygotowaliśmy materiały szkoleniowe, tym razem nie tylko w formie wideo, ale również w formie tekstowej. Było to o tyle ważne, że każda z właścicielek franczyz ma inny poziom wiedzy technicznej. Dlatego zadbaliśmy o to, żeby tutoriale były przygotowane w sposób jasny i zrozumiały.

 

Co więcej, w dniach premiery nowego serwisu byliśmy w stałym kontakcie nie tylko z Roxanne, właścicielką marki, ale również z franczyzobiorczyniami. Dzięki naszemu zaangażowaniu średni czas odpowiedzi na pytania wyniósł niecałe 40 sekund.

Na każdym etapie mierzyliśmy się z wieloma wyzwaniami: dostosowaniem projektu graficznego do wymogów przeglądarek i urządzeń mobilnych, wprowadzaniem danych na podstronach franczyz czy importem danych. Z dumą możemy stwierdzić, że sprostaliśmy wszystkim i dostarczyliśmy Roxanne funkcjonalną platformę, która pozwala na zarządzanie siecią oddziałów i tworzeniem serwisów dla nowych franczyz w prosty sposób.

Zakres prac

  • Integracja Wordpress Multisite z Woocommerce
  • Kodowanie strony i e-sklepu do CMS WordPress
  • Integracja płatności Stripe
  • Wyszukiwarka sklepów zintegrowana z mapą
  • Wsparcie techniczne po uruchomieniu serwisu