Case Studies

Jak zrobić prostą stronę internetową? 98/100 w PageSpeed Test

Jak zrobić prostą stronę internetową?

 

Z case study dowiesz się:

  • Bez czego nie przystępujemy do pracy nad projektem strony?
  • Czy nasi klienci sami makietują projekt?
  • Co zrobić, aby strona osiągnęła wynik 98/100 w testach szybkości strony?
Klient:
j-labs
Cel:
stworzenie strony www
Okres współpracy:
2021
Liczba sprintów:
2,5
Liczba osób w projekcie:
4

Kontekst projektu

Firma j-labs zgłosiła się do nas z chęcią stworzenia prostej strony internetowej tzw. one page, która będzie przedstawiać najważniejsze usługi świadczone głównie na rynek DACH. Celem było zaprojektowanie takiej strony, która dostarczy potencjalnym klientom wszystkich niezbędnych informacji, ale też nie przytłoczy ich zbyt dużą ilością tekstu. 

Co ważne, odbiorcami strony są głównie osoby pełniące stanowisko CTO (Chief Technology Officer — po polsku dyrektor ds. technologii). Jest to grupa osób, która łączy ze sobą świat biznesu i technologii, co stanowi nie lada wyzwanie w kontekście komunikacji i designu. Wydaje nam się, że daliśmy radę! 🙂

Badania & warsztaty w procesie tworzenia prostej strony internetowej

Aby sprostać oczekiwaniom rozpoczęliśmy od warsztatu kick-offowego, na którym zebraliśmy podstawowe informacje o projekcie – role, sposób komunikacji, wspólne cele i przebieg prac. Przeprowadziliśmy również wstępną fazę makietowania.

Dlaczego pozwalamy naszym klientom samodzielnie makietować stronę zanim zaczniemy pracę?

  • Dzięki temu od początku wiemy, jakie informacje są najważniejsze dla naszych klientów i które koniecznie powinny znaleźć się na stronie. Klienci mają znacznie większą wiedzę o swoim biznesie, niż my sami, zwłaszcza na początku projektu.
  • Klienci na podstawie rozmów ze swoimi klientami są w stanie ocenić, które informacje są dla nich najbardziej istotne, a które można by pominąć. 
  • Poznajemy oczekiwania naszych klientów i wizję strony. 
  • Mamy gotowy materiał do pracy, który walidujemy z dobrymi praktykami, rynkiem i benchmarkami.
Makieta przy tworzeniu prostej strony internetowej

Na warsztacie określiliśmy również najważniejsze aspekty techniczne wdrażania strony niezbędne już na etapie jej projektowania.

Dzięki zdobytym informacjom w fazie makietowania mogliśmy również indywidualnie porozmawiać z członkami zespołu j-labs, aby doprecyzować informacje, które powinny pojawić się w danej sekcji. Na tym etapie jesteśmy w stanie przeanalizować z klientem sensowność niektórych sekcji lub sposób ich prezentacji. Niejednokrotnie tekst warto jest zastąpić ciekawą infografiką, która będzie łatwiej przyswajalna przez potencjalnych klientów. 

Nie obyło się oczywiście bez desk researchu przesłanych przez j-labs materiałów. To zawsze świetna baza do tego, by maksymalnie poznać klienta i jego potrzeby. Przeprowadziliśmy również analizę konkurencji pod kątem prezentacji stron, co pozwoliło nam wyłonić ciekawe benchamarki i rozwiązania oraz UVP, czyli to, czym będzie wyróżniać się nasza strona.

skuteczna strona www

Design & Content

Design

Po fazie analizy, przystąpiliśmy do kreacji designu strony oraz treści prostej strony internetowej. W tym pierwszym aspekcie naszym celem było to, by użytkownik po wejściu na stronę miał poczucie nie tylko  świeżości i nowoczesności, ale też profesjonalizmu. Wiemy bowiem, jak ważny jest to aspekt dla każdego CTO. Bez wcześniejszego określenia persony, bardzo trudno byłoby nam ustalić, czym powinna się charakteryzować i wyróżniać nasza stronaa.

Co ważne, projektując każdą z sekcji, staraliśmy się odpowiedzieć na pytanie:

W jakim celu ta sekcja powstaje?

Dzięki temu stworzyliśmy logiczne flow komunikacyjne na podstawie wiedzy od klientów, czego chcą się dowiedzieć poszukując usług outsourcingowych w IT oraz co j-labs jako marka chce przekazać. 

Przykładowo jedna z sekcji zawiera najczęściej wymieniane problemy przez CTO oraz sposób, w jaki j-labs je rozwiązuje. Właśnie za pomocą takiej prezentacji treści robimy prawdziwy ukłon w stronę użytkownika i jego potrzeb.

Sekcja wyróżniająca na prostej stronie internetowej

Z kolei sekcja “o Krakowie” powstała na canvie codziennych aktywności zespołu j-labs, który mocno angażuje się w rozwój IT w stolicy Małopolski. Celem firmy było pokazanie tego zaangażowania innym destynacjom, do których kieruje swoje usługi m.in. Monachium.

Sekcja o Krakowie na prostej stronie internetowej

Wyzwanie przed którym stanęliśmy, to taka dystrybucja treści, aby z jednej strony nie przytłoczyć użytkowników, ale też by wszystko było zrozumiałe. Wykorzystaliśmy więc piktogramy i zdjęcia, by ułatwić przekaz.

Jak przedstawić liczby na prostej stronie internetowej?

Finalnie powstał spójny projekt graficzny strony oparty o potrzeby grupy docelowej oraz klienta.

Content

Równocześnie z pracami designerskimi, trwały prace copywriterskie. Punktem wyjścia, podobnie jak w przypadku designu, było wnikliwe zrozumienie persony. W momencie, w którym możemy wyobrazić sobie, kto jest po drugiej stronie ekranu, łatwiej jest stworzyć komunikaty, które faktycznie do niej/niego trafią.

Tworząc treści na stronę j-labs naszym celem było:

  • skrócenie dystansu między marką, a grupą CTO (bezpośrednie komunikaty na “Ty”),
  • zbudowanie pozycji eksperta poprzez użycie odpowiedniej, branżowej terminologii,
  • wykorzystanie w treści słów kluczowych jako bazy pod działania SEO,
  • pokazanie doświadczenia oraz zaangażowania w działania branży IT,
  • łatwe przeprowadzenie użytkownika przez prezentowane treści, tak by mógł się skontaktować z firmą,
  • stworzenie treści adekwatnych do kultury danego państwa (treści powstawały w języku niemieckim i angielskim).

Chwilę zastanowienia wymogła na nas pierwsza sekcja (najważniejsza na one page, ponieważ to ją użytkownik widzi najpierw). Rozważaliśmy dwa sposoby komunikacji:

  • oparty na pokazaniu, czym zajmuje się firma “IT to nasza pasja, dlatego od 12 lat pomagamy CTO budować zespoły deweloperskie i realizować nawet najbardziej skomplikowane projekty od podstaw. Na pokładzie mamy 300+ developerów z ponad 7-letnim doświadczeniem, którzy są głodni nowych wyzwań.”
  • oparty na pokazaniu, co potencjalny klient może zyskać “Jako CTO borykasz się z brakiem doświadczonych developerów? Projekty nie posuwają się do przodu, a Ty spędzasz czas na szukaniu specjalistów? Na pokładzie mamy 300+ developerów z ponad 7-letnim doświadczeniem, którzy zrealizują każdy, nawet najbardziej skomplikowany projekt.”

Do zbadania, który komunikat jest bardziej odpowiedni wykorzystaliśmy Google Optimize. Dzięki temu narzędziu zweryfikowaliśmy, który komunikat na zaprojektowanej stronie internetowej lepiej oddziałuje na użytkowników w danym kraju.

Google Optimize przy tworzeniu prostej strony internetowej

Analizując wyniki po miesiącu trwania kampanii doszliśmy do wniosku, że komunikat oparty o problemy i potrzeby klienta lepiej konwertuje na stronie w języku angielskim. Z kolei na stronie w języku niemieckim lepiej działa komunikacja oparta na pokazaniu, czym zajmuje się firma. I tak finalnie zamknęliśmy etap tworzenia contentu na stronę j-labs.

Wdrożenie prostej strony internetowej

Ostatnim etapem pracy nad stroną było jej zaimplementowanie przy wykorzystaniu platformy WordPress. Rozpoczęliśmy od postawienia szablonu oraz zdefiniowania wszystkich zmiennych np. kolorów, fontów czy kontenerów. Dzięki temu możliwa jest łatwa rozbudowa strony o kolejne sekcje i podstrony. 

Naszym celem było nie tylko wdrożenie zaprojektowanej prostej strony internetowej, ale też jej maksymalne przyspieszenie. Obecnie szybkość wczytywania się strony to podstawa w jej odbiorze przez użytkowników. 

Aby maksymalnie zoptymalizować stronę, by działała naprawdę szybko, wykonaliśmy kilka działań:

  • dostosowanie zdjęć do wielkości ekranu pod względem rozmiaru (100px x 100px), dla różnych urządzeń,
  • lazy loading, który polega na doczytywaniu zdjęć, kiedy mają być widoczne, a nie wszystkich od razu; dzięki temu nie zabieramy transferu i nie spowalniamy strony,
  • ustawienie wczytywania strony na tzw. fontach systemowych, a dopiero później doczytywanie właściwych fontów,
  • serwowanie zdjęć w formacie .webp, dzięki temu zdjęcia wyglądają tak samo, ale są mniejsze o ok. 30% normalnego zdjęcia,
  • optymalizacja zapytań do bazy,
  • minifikacja kodu, czyli proces mający na celu zmniejszenie kodu źródłowego poprzez usunięcie niepotrzebnych znaków bez zmieniania jego funkcjonalności,
  • cache’owanie strony, które w uproszczeniu polegało na ustawieniu wersji statycznej strony przez wtyczkę, co wpłynęło na rozmiar całkowity strony.

Dzięki temu uzyskaliśmy imponujący wynik 98/100 punktów w teście szybkości strony. Prezentowane wyniki to rezultat na naszym serwerze, każdy klient ma bowiem bieżący dostęp do strony na naszym serwerze testowym w czasie procesu developerskiego. Dzięki temu przez cały czas może podglądać postępy prac, które regularnie aktualizujemy. 

Strona j-labs naprawdę wczytuje się w mgnieniu oka, zresztą sam-a sprawdź.

Jak zrobić prostą stronę internetową, która jest szybka?

Co ważne, zastosowaliśmy również normalizacja i auto prefixing. Choć pojęcia mogą brzmieć groźnie, to są bardzo przydatne, wpływają bowiem na to, że strona na wszystkich przeglądarkach wygląda tak samo. Podpięliśmy również narzędzia do analityki m.in. kod Google Analytics czy pixel Facebooka.

Podsumowanie projektu w liczbach i nie tylko

Dwa miesiące po opublikowaniu strony, możemy stwierdzić, że wyniki są bardzo obiecujące

320

średnia liczba unikalnych odsłon miesięcznie

12

godzin - łączny czas spędzony na stronie przez użytkowników

98

na 100 w teście szybkości stron

A co o naszej współpracy uważa Bartosz Rybski – Business Development Manager w j-labs?

Długo poszukiwaliśmy Partnera, który nie podejdzie rutynowo do zadania i będzie umiał pracować w modelu agilowym. Tymczasem współpraca z Project: People to czyste “agile manifesto”. Dzięki takiemu podejściu udało nam się nie tylko ustalić prawdziwe wymagania, ale i dopasować koncepcje pod aktualne realia.

Bartosz Rybski - Business Development Manager w j-labs

Narzędzia i metody wykorzystane w projekcie

  • Team Canvas
  • Google Optimize
  • Google Analytics
  • WordPress
  • Figma

Case study to za mało?

Chcesz poznać cały proces i dowiedzieć się, jak mógłby wyglądać w Twojej organizacji?

Umów się na bezpłatną konsultację

Zespół projektowy, czyli kto za co odpowiadał

Autor Case Study

Katarzyna Golonka Lean Marketing Manager & Strategist
Od lat z powodzeniem łączy marketing i biznes. Obecnie specjalizuje się w zarządzaniu projektami & Content Marketingu. W swoim dorobku ma już zarządzanie kilkunastoosobowym zespołem marketingowym, kreowanie cyklu wydarzeń biznesowych, współtworzenie firmy i kierowanie nią.

Pomaga firmom w odnalezieniu własnego “ja” w biznesie i komunikacji tego na zewnątrz (strategia marketingowa & personal branding).

Zaangażowana w liczne działania społecznościowe. Jest certyfikowanym Trenerem Biznesu. Prowadzi warsztaty z pogranicza strategii & marketingu. Autorka tekstów dla portali branżowych, m.in. Nowy Marketing, Marketing w Praktyce, E-commerce & Digital Marketing.

Pozostali członkowie zespołu

Paweł Nawara Product Designer w Project: People
Paweł to zdecydowanie osoba z nastawieniem “damy radę“, która nawet na najbardziej szalone pomysły odpowiada “ile mam czasu”.Od dziecka związany z szeroko pojętym designem. Ma doświadczenie w różnego typu projektach – od materiałów do social media i druku, przez strony www, po aplikacje mobilne i webowe. Od trzech lat najlepiej odnajduje się w projektach z zakresu Product Designu.Jest obecny na każdym etapie procesu – od wstępnego pomysłu i rozmów z klientem, przez cały proces projektowania, aż do współpracy z deweloperami przy finalnym wdrożeniu produktu i czuwa nad tym, by zawsze łączyć perspektywę użytkownika, zespołu oraz biznesu.Mocno zaangażowany w różnego typu działania społeczne i organizacje wydarzeń (m.in. takich jak DesignWays Conf, Juwenalia UEK). Wspiera środowisko akademickie, gdzie pomaga rozwijać się młodym i nastawionym na rozwój studentom poprzez mentoring czy szkolenia.A w wolnych chwilach zapalony gracz.