English Puzzle: kiedy metoda nauczania jest dopracowana, a sklep wokół niej nie.

English Puzzle to autorska metoda nauki angielskiego Anny Kordalewskiej: zajęcia w Warszawie, puzzle edukacyjne sprzedawane w całej Polsce i w księgarniach Polanglo, oraz codzienna praca z treścią (Word of the Day, idiomy, poradniki dla uczniów). Wszystko to mieszkało w jednym serwisie WordPress, który przez lata rósł przez doklejanie kolejnych elementów. Przebudowaliśmy go od najdroższego miejsca: ścieżki zakupowej, a potem zostaliśmy przy nim na stałe.

English Puzzle — zrzut strony głównej — English Puzzle — serwis zbudowany na WordPress i WooCommerce.

01 Wyzwanie i podejście

× Przed

Trzy biznesy w jednym serwisie. Kursy stacjonarne (grupowe, indywidualne, maturalne, przedszkola), sprzedaż produktu fizycznego i blog edukacyjny dzieliły jeden WordPress, ale nie dzielili wspólnej logiki ani spójnego wyglądu.
Wąskie gardło w koszyku i checkoucie. Najdroższy moment w całym serwisie, ten, w którym klient płaci, działał najgorzej. To była pierwsza rzecz, którą klient zgłosił, i pierwsza, którą wzięliśmy.
Motyw narastany warstwami. Karta produktu, lista kategorii i podstrony ofertowe wyglądały jak trzy różne serwisy, bo powstawały w różnym czasie i różnymi narzędziami.
Brak bezpiecznego miejsca na zmiany. Każda poprawka oznaczała ruch na żywym sklepie, bez środowiska testowego i bez historii zmian w repozytorium.
Utrzymanie schodzące na dalszy plan. Zaległe aktualizacje WordPressa, spam w formularzu kontaktowym i wolne ładowanie traktowane jako coś, czym zajmiemy się później.

→ Nasze podejście

Najpierw pieniądze, potem estetyka. Kolejność prac wyznaczał wpływ na sprzedaż: koszyk i checkout przed kartą produktu, karta produktu przed stronami ofertowymi, strony ofertowe przed blogiem.
Zero pracy na produkcji. Zanim dotknęliśmy czegokolwiek, powstało środowisko developerskie i repozytorium. Klient ogląda zmianę, zanim zobaczy ją jego klient.
Jeden motyw zamiast pięciu układów. Przebudowa szablonów jako całości, żeby sklep, karta produktu, strona kursu i wpis blogowy mówiły jednym językiem wizualnym.
Wydajność jako element sprzedaży, nie jako ciekawostka. W sklepie, w którym większość ruchu przychodzi z telefonu i z social mediów, czas ładowania to część konwersji.
Po wdrożeniu nie znikamy. Redesign zamknął pierwszy etap, po którym współpraca przeszła w stałą opiekę nad serwisem: aktualizacje, incydenty, rozwój podstron i treści.

02 Stack technologiczny

Czym to zrobiliśmy.

WordPress + WooCommerce

sklep i treść w jednym systemie, do którego zespół klienta ma dostęp bez naszego udziału. Tam, gdzie klient sam prowadzi komunikację codziennie, to jest zaleta, a nie kompromis.

Motyw przebudowany po naszej stronie

szablony sklepu, karty produktu, stron ofertowych i wpisów jako jeden spójny system, a nie zbiór doklejanych widoków.

Środowisko developerskie

pełna kopia serwisu do testów i akceptacji zmian przed wdrożeniem (dev.englishpuzzle.pl).

Repozytorium Git + deploy

historia zmian, możliwość wycofania, koniec z edycją plików na żywym sklepie.

[bramka płatności do uzupełnienia]

[do uzupełnienia: BLIK, Apple Pay, Google Pay, karty, przelewy online]

[integracja wysyłkowa do uzupełnienia]

[do uzupełnienia: kurier, paczkomaty, etykiety]

03 Co zrobiliśmy

Zakres prac.

Fundament: Środowisko developerskie i repozytorium projektu. Lokalne środowiska pracy zespołu i procedura wdrożenia na produkcję.
Ścieżka zakupowa: Przebudowa koszyka: układ, czytelność podsumowania, zachowanie na telefonie. Przebudowa checkoutu wraz z elementami dodatkowymi, wdrożona osobno na produkcję jako zamknięty etap. Uporządkowanie tego, co widzi klient tuż przed płatnością, bo tam traci się koszyki najczęściej.
Sklep i katalog: Nowa karta produktu: zdjęcie, cena, promocja i przycisk zakupu ustawione pod decyzję, a nie pod opis. Przebudowa listy sklepu i widoków kategorii.
Strony ofertowe i szablony: Szablon strony prostej i szablon strony dedykowanej, jako dwa narzędzia zamiast pięciu wariantów. Podstrony Kursy i Cennik: pięć formatów zajęć (grupy 4 do 5 osób, zajęcia indywidualne, kurs maturalny, konwersacje dla mam z dziećmi, przedszkola) przedstawionych w jednym układzie, z jasnym przejściem do kontaktu.
Treść jako część produktu: Moduł Word of the Day na stronie głównej: codzienny powód, żeby wrócić na stronę, bez otwierania bloga. Uporządkowanie bloków na stronie głównej i ich proporcji.
Utrzymanie i wydajność: Aktualizacja WordPressa i wtyczek do bezpiecznej wersji. Zablokowanie spamu w formularzu kontaktowym, przez który przechodzą zapytania o zajęcia. Diagnostyka i usunięcie błędu 500. Optymalizacja PageSpeed, najpierw na środowisku testowym, potem na produkcji, prowadzona dalej w ramach opieki. Bieżące poprawki po uwagach klienta, w jednym kanale zgłoszeń.

04 Rezultaty

Co się zmieniło.

Najdroższy fragment serwisu przestał być najsłabszy. Koszyk i checkout zostały przebudowane i wdrożone jako pierwsze, przed resztą redesignu.

Jeden serwis zamiast trzech wyglądów. Sklep, karta produktu, strona kursu i wpis blogowy działają dziś na wspólnym systemie szablonów.

Zmiany przestały być ryzykiem. Środowisko testowe, repozytorium i kontrolowany deploy oznaczają, że klient akceptuje zmianę przed publikacją, a każda z nich jest odwracalna.

Oferta kursów wróciła do serwisu. Kursy i cennik przestały być zbiorem osobnych podstron, a stały się czytelną ścieżką do zapisu.

Współpraca przeszła z projektu w opiekę. Po wdrożeniu redesignu English Puzzle zostało z nami na stałej obsłudze: aktualizacje, incydenty i rozwój serwisu w jednym miejscu, bez szukania wykonawcy przy każdej awarii.

[metryka do uzupełnienia: wynik PageSpeed przed i po]

Świadomie bez procentów. Pokazujemy, co realnie zmieniło się w pracy klienta i w jego sklepie, zamiast liczb, których nie umielibyśmy uczciwie przypisać do jednej zmiany.

05 Podobne realizacje

Masz podobny problem?

Twój sklep na WooCommerce działa, ale rósł latami przez doklejanie, a koszyk i checkout to ostatnie miejsca, w które ktokolwiek zaglądał. Zaczniemy od tego, co kosztuje najwięcej, i zostaniemy przy sklepie po wdrożeniu.