Jak stworzyć stronę internetową dla firmy krok po kroku?

Strona internetowa to główny punkt styku firmy z potencjalnym klientem. To najczęściej na stronę www kierujemy naszych potencjalnych klientów za pomocą różnego rodzaju kampanii marketingowych, po to aby dowiedzieli się więcej o naszej ofercie, obsługiwanych klientach czy pracownikach firmy. Niestety, w wielu przypadkach strony www tworzy się, gdy firma dopiero zaczyna działalność, a potem nie poświęca się im zbyt wiele uwagi – do momentu aż ktoś nie dostrzega, że taka „przykurzona” strona utrudnia realizację przyjętych celów.

Jeśli Twoja strona www nie zawiera najważniejszych treści dotyczących oferowanych usług czy produktów, brakuje jej podstawowych elementów, jak m.in. dowody słuszności społecznej (z tego wpisu dowiesz się więcej o social proof), a przy tym jej wygląd nie jest atrakcyjny dla grupy docelowej, to trudno będzie Ci przekonać potencjalnego klienta, że to właśnie z Tobą warto podjąć współpracę.

W dzisiejszym artykule pokażę Ci jak podejść do pracy nad nową stroną internetową dla firmy krok po kroku. Na końcu artykułu znajdziesz checklistę do pobrania, która pomoże w ustrukturyzowaniu prac nad stroną www. Zawiera ona najważniejsze elementy wymagane podczas procesu tworzenia strony internetowej dla firmy, o których piszę w tym artykule. 

Tworzenie strony internetowej krok po kroku

Stworzenie skutecznej strony internetowej, która będzie spełniać swoją rolę, a więc wspierać proces pozyskiwania klientów, można sprowadzić do sekwencji następujących kroków: 

1. Zdefiniowanie persony zakupowej (Buyer Persona)
2. Przeanalizowanie danych dotyczących skuteczności i wolumenu ruchu na obecnej stronie internetowej (o ile już ją mamy i mierzymy na niej ruch)
3. Przeanalizowanie stron internetowych najważniejszej konkurencji (sprawdź min. 5)
4. Research słów kluczowych
5. Przygotowanie architektury informacji
6. Zebranie odpowiednich funkcjonalności i przygotowanie moodboardów
7. Projektowanie oraz feedback makiet low-fi oraz wizualizacji stron
8. Stworzenie treści na stronę
9. Wdrożenie i przetestowanie nowej strony www
10. Skonfigurowanie analityki internetowej

Na co powinieneś zwrócić uwagę przy okazji każdego z etapów tego procesu stworzenia strony internetowej? 

Krok 1: Zdefiniowanie persony zakupowej (buyer persona)

Kluczem do stworzenia strony internetowej, która będzie „sprzedawać”, jest zrozumienie kim jest Twój potencjalny klient, jakie są jego potrzeby oraz oczekiwania względem usług, które oferuje firma. 

Pierwszym krokiem do realizacji tego celu jest przygotowanie persony zakupowej (ang. buyer persona), która będzie odzwierciedlać profil reprezentatywnego klienta, uwzględniając takie elementy jak m.in.: dane demograficzne, problemy i wyzwania zawodowe, wartości i obawy, oczekiwania, styl komunikacji, używane programy czy kanały, z których korzysta i czerpie wiedzę. Uważaj przy tym, żeby nie popełnić częstych błędów przy tworzeniu persony, m.in. kierowania się myśleniem życzeniowym – w podlinkowanym artykule znajdziesz wskazówki na co powinieneś uważać.

Przygotowana persona (lub kilka) będzie pomocna nie tylko w przypadku tworzenia nowej strony www, ale także podczas innych działań marketingowych firmy.

Jeśli do tej pory Twoja firma nie stworzyła persony zakupowej to nic straconego – skorzystaj z darmowego szablonu.

Dodatkowo, warto również wytypować kilku klientów, aby porozmawiać z nimi o tym, co wpływa na ich decyzje zakupowe podczas szukania rozwiązań biznesowych takich jak Twoje lub podobnych: na co zwracają uwagę i jakie wartości ich przekonują. Z dużym prawdopodobieństwem to, co przekonało Twoich obecnych klientów do współpracy z Tobą, wpłynie też pozytywnie na decyzje tych potencjalnych.

Rozmowy z klientami pozwolą również na znalezienie unikalnej wartości usługi (ang. UVP – Unique Value Proposition), która pozwoli Ci wyróżnić się  na tle konkurencji.

Miłosz Micherda Fooz

Z Casbeg mieliśmy kontakt podczas redesignu strony ich klienta. Dzięki przeprowadzonym wcześniej przez Casbeg warsztatom Buyer Persona i analizie biznesowej, do projektowania strony zabraliśmy się, mając już komplet informacji biznesowych oraz jasno wytyczony kierunek, w który ma zmierzać nowa strona. Znacznie przyspieszyło to prace oraz ułatwiło opracowanie adekwatnej stylistyki strony. Konsultant Casbeg brał też udział w powstawaniu architektury strony oraz pracach koncepcyjnych nad designem. Dzięki wspólnym wysiłkom projekt nowej www powstał wyjątkowo szybko i cechował się najmniejszą ilością faz poprawkowych.

Krok 2: Przeanalizowanie danych dotyczących skuteczności i wolumenu ruchu na obecnej stronie internetowej

Dużą bazą wiedzy o tym, jak powinna wyglądać nowa strona internetowa firmy jest… jej aktualna wersja. Jeśli tylko masz na swojej stronie www poprawnie wdrożony Google Analytics, możesz z jego pomocą odpowiedzieć na pytania takie jak:

• kim jest użytkownik, odwiedzający stronę 
• jaki jest wolumen ruchu,
• jak zachowują się użytkownicy na stronie (ile czasu spędzają na stronie, jakie podstrony odwiedzają częściej i rzadziej, jakie elementy klikają, jakie treści przykuwają ich uwagę etc.),
• co zniechęca użytkowników i sprawia, że wychodzą ze strony,
• co angażuje użytkowników i sprawia, że chętnie eksplorują stronę.

Dodatkowym źródłem wiedzy będą mapy ciepła. Mapy ciepła pozwalają nagrać sesję użytkowników na stronie www i sprawdzić jak wygląda ścieżka eksplorowania strony www (wizualizacja ścieżki kursora myszki na ekranie), a także sprawdzić, które z elementów są klikalne chętniej, które rzadziej i zidentyfikować błędy z obszaru doświadczeń użytkownika (user experience). 

Krok 3: Analiza stron internetowych najważniejszej konkurencji

Świetnym benchmarkiem przed rozpoczęciem prac nad firmową stroną www jest również analiza konkurencji. Dzięki niej możesz zobaczyć jak wygląda styl komunikacji konkurencji i to, jak oni podeszli do prezentacji swojej oferty. Jest to również kopalnia insightów w zakresie designu strony, elementów i sekcji, które powinny się na niej znaleźć, czy słów kluczowych.

Świadomość tego, jak konkurencja komunikuje się na swojej stronie internetowej pozwala też na skuteczne wyróżnienie się na rynku i wypozycjonowanie z odwołaniem do innych oczekiwań klienta (dane z wypracowanej persony) lub skupiając się na niszy, o której Twoi konkurenci zapomnieli. 

Przygotuj listę kilku (4-5) największych konkurentów i dokładnie przeanalizuj ich strony internetowe. Wyciągnięte wnioski przydadzą się podczas kolejnych kroków w pracach nad stroną www. 

Krok 4: Research słów kluczowych

Ważnym elementem podczas prac nad stroną internetową jest też research słów kluczowych. Research słów kluczowych pomoże określić jakie podstrony powinny znaleźć się na stronie www i co powinny zawierać, a także jakich słów użyć podczas tworzenia treści, aby potem mogły one skutecznie pozycjonować się w bezpłatnych wynikach wyszukiwania. Taki research będzie też kopalnią wiedzy na temat tego, jakie artykuły moglibyście napisać na firmowym blogu. 

Wiele firm zapomina o researchu słów kluczowych, co w efekcie prowadzi do drastycznego spadku ruchu na stronie www (wcześniej nasza firma wyświetlała się w Google na frazę X, Y, Z – teraz się nie wyświetla), a co za tym idzie – do spadku liczby kontaktujących się z firmą potencjalnych klientów (leadów). 

Research słów kluczowych można wykonać za pomocą narzędzi dedykowanych do działań SEO. Podczas szukania fraz, na które chcesz się pozycjonować, zwróć uwagę przede wszystkim na takie wskaźniki jak: liczba miesięcznych wyszukiwań danego słowa (celuj w jak najwyższą) oraz konkurencyjność frazy (celuj w jak najniższą). 

Krok 5: Przygotowanie architektury informacji strony internetowej firmy

Architektura informacji strony www to graficzne odzwierciedlenie jej struktury – schemat (graf), zawierający informacje o tym, jakie podstrony będzie zawierać strona www oraz ich hierarchię.

Przykładowo, architektura informacji strony Casbeg wygląda tak:

Architektura informacji to punkt wyjścia dla projektanta UX do tego, żeby wiedział jakie podstrony powinien zaprojektować oraz dewelopera do tego, jak ma wyglądać m.in. struktura URLi, czy linkowania między wybranymi podstronami.

Odpowiednio zaplanowana architektura informacji pozwala do pewnego stopnia przewidzieć późniejszą rozbudowę serwisu bez konieczności drastycznych zmian w kodzie źródłowym czy designie strony.

Krok 6: Zebranie odpowiednich funkcjonalności i przygotowanie moodboardów

Oprócz analizy konkurencyjnych stron internetowych warto również zrobić research rynku w poszukiwaniu wizytówek innych firm, które uważasz za spójne ze swoją wizją strony www. Zwróć uwagę przede wszystkim na funkcjonalności z zakresu doświadczenia użytkownika (user experience), wykorzystywane na tych stronach i jak mogą one pomóc Twojej grupie docelowej w eksploracji www i zwiększyć zaangażowanie w prezentowane treści.

Dodatkowo, warto przygotować moodboardy, czyli zbiór grafik i zdjęć, będących później inspiracją dla grafika w procesie projektowania strony www. Dobrze przygotowane moodboardy potrafią precyzyjnie przedstawić uczucia, które powinny towarzyszyć użytkownikowi podczas przeglądania strony internetowej i wywołują konkretne skojarzenia.

Wykorzystaj te dwa elementy, aby precyzyjnie określić osobie projektującej makiety strony to, czego oczekujesz. Dzięki temu zaoszczędzisz czas na projekty, które nie są zgodne z Twoimi oczekiwaniami. 

Krok 7.1: Projektowanie oraz feedback makiet low-fi

Kiedy zrealizujesz wszystkie poprzednie punkty, przychodzi czas na pracę nad przygotowaniem makiet strony, czyli pierwszych widoków, ukazujących jakie elementy będą się znajdować na danej stronie, w jakiej kolejności i jak rozmieszczone.

Twoim zadaniem będzie, bazując na przygotowanej wcześniej architekturze informacji strony www, zmienić wizję w widoki poszczególnych stron. 

W pierwszej kolejności, zanim jeszcze przejdziemy do graficznego wyglądu, należy przygotować tzw. makiety low-fi (ang. low fidelity mockups, czyli makiety „niskiej wierności”). Jest to nic innego jak prosty szkic strony. Na tym etapie nie jest ważna dbałość o szczegóły wizualne, ale skupienie się na funkcjonalności i zgodności z wytycznymi dotyczącymi ułatwień w dostępie do treści publikowanych w Internecie (ang. WCAG 2.0 – Web Content Accessibility Guidelines), dzięki którym z Twojej strony bez przeszkód będzie mógł korzystać każdy, w tym osoby z niepełnosprawnościami.

Projektując poszczególne funkcjonalności nie zapominajcie o dobrych praktykach. Na tym etapie przyświecać powinno Wam 10 heurystyk Nielsena-Molicha, zawierających najważniejsze wytyczne dotyczące projektowania stron www przyjaznych użytkownikom. 

Agnieszka Świątkowska-Sybidło Avra Software

Motywacją do przeprowadzenia w firmie warsztatów Buyer Persona było dla nas wdrożenie nowej strony www. Głębsze zrozumienie naszych klientów potraktowaliśmy jako niezbędny krok w stronę platformy lepiej odpowiadającej ich potrzebom. Już wcześniej próbowaliśmy zdefiniować personę opisującą naszych klientów, ale efekty nie były zadowalające. Dzięki udziałowi konsultanta Casbeg warsztaty przebiegły dużo sprawniej, z naciskiem na konkretne i dokładniejsze zdefiniowanie typu odbiorcy. W efekcie zyskaliśmy personę, która po przedstawieniu osobom znającym naszych klientów, wywołuje reakcję: “Tak, dokładnie dla takich osób pracujecie!”. Wypracowana persona ułatwiła też prace nad nową stroną internetową.

Projektując makiety należy również pamiętać o rozdzielczości, gridzie (czyli projektowaniu wg. siatki pomocniczych linii poziomych i pionowych) oraz przygotowaniu wersji zarówno desktop, jak i mobile. Coraz częstszą praktyką jest również projektowanie widoków dedykowanych dla tabletów, ale to polecam tylko i wyłącznie firmom, które mają dużą ilość ruchu z takich urządzeń oraz rozbudowaną strukturę (np. e-Commerce posiadający dziesiątki produktów), gdzie dedykowany widok pod tablety ma znaczenie w łatwiejszym korzystaniu ze strony www. 

Szukając wytycznych co do rozdzielczości, warto bazować na Google Analytics i raporcie rozdzielczości, z których korzystają użytkownicy najczęściej odwiedzający stronę. Jeżeli jednak jest to Wasza pierwsza strona „korporacyjna” za punkt odniesienia warto przyjąć dane z ostatnich raportów Gemiusa.

W zależności od tego jaki, typ firmy reprezentujecie, makiety powinny zawierać również inne elementy. Przykładowo firmy usługowe, oferujące dedykowane i kompleksowe rozwiązania IT nie będą w stanie umieścić cennika na stronie www. Z kolei dla firm oferujących usługi w modelu SaaS – cennik będzie jedną z najważniejszych podstron i sekcją na stronie głównej.

Niezależnie od tego jaki typ firmy reprezentujecie, istnieje kilka elementów, które zawsze warto uwzględnić na stronie www, bo mają one bezpośredni wpływ na pozytywną decyzję zakupową klienta. Tymi elementami są:

• Dowód słuszności społecznej, czyli wszelkiego rodzaju opinie zadowolonych klientów, recenzje usługi, logotypy klientów, czy opisane historie sukcesów (z tego wpisu dowiesz się jak napisać dobre case studies);
  
• Unikalne punkty sprzedaży (ang. USP – Unique Selling Points) oraz unikalna wartość usługi (ang. UVP – Unique Value Proposition), czyli elementy, które bezpośrednio wskazują na wartość, która płynie ze skorzystania z Twojej usługi oraz elementy oferty, które pomagają przekonać klienta, że to właśnie z Twoją firmą warto współpracować. Takimi elementami mogą być np. czas realizacji, doświadczenie w wybranej branży, czy wykorzystywane innowacyjne rozwiązania.
  
• Opis firmy i pracowników, ponieważ każdy chce bliżej poznać partnera, z którym będzie współpracował i pracowników, którzy będą bezpośrednio dla niego pracować. Widok prawdziwych ludzi zamiast postaci ze Stocka (banku zdjęć) znacznie uwiarygodnia też Twoją firmę w oczach potencjalnego klienta.

• Call to action (CTA), czyli komunikaty i przyciski jasno wskazujące użytkownikom, jaką kolejną akcję powinni wykonać podczas eksplorowania strony internetowej.

Krok 7.2: Projektowanie oraz feedback wizualizacji makiet

Po etapie funkcjonalnym (makiety) przychodzi moment na projektowanie graficzne (UI). W tym momencie warto przekazać grafikowi zestaw przykładów wizualnych, które zebraliście wcześniej oraz style guide, czyli spisane wytyczne co do komunikacji wizualnej marki.

Zawsze dbaj o to, aby w ramach prac, grafik przedstawił dwie wersje look’n’feel projektu, czyli przykład stylistyki, która będzie służyć jako wzór podczas projektowania kolejnych wizualizacji. Jest to bardzo istotne, ponieważ pozwala porównać i wybrać projekt najbardziej Ci odpowiadający. 

Czym różnią się makiety od gotowego designu? Najlepiej obrazuje to poniższy przykład:

Krok 8: Stworzenie treści na stronę 

Kiedy masz już zaprojektowane makiety, a strona jest już w budowie – czas wypełnić ją www treścią. W tym z pewnością pomoże Ci artykuł „Jak napisać dobre teksty na www”.

Treść, którą przygotowujesz na stronę, powinna być dopasowana do specyfiki Twojej grupy docelowej i wypracowanej persony zakupowej. Upewnij się, że kładziesz nacisk na wartości, którymi się kierują, a także ich potrzeby, problemy i oczekiwania.

Język, którym się posługujesz, powinien stanowić przy tym odzwierciedlenie tego, jak mówią Twoi klienci. Korzystaj ze słów i sformułowań, których Twoi klienci używają na co dzień. Unikaj niezrozumiałych zdań i branżowych zwrotów, których używanie stało się modne ale które nie niosą żadnej wartości dla czytającego.

Przy pisaniu tego typu treści upewnij się, że pamiętasz o najważniejszych zasadach SEO copywritingu, takich jak np. odpowiednie natężenie słów kluczowych, odpowiednia długość tekstu, nagłówki (H1-H4), meta description, opisy zdjęć, czy linkowania wewnętrzne i zewnętrzne. Jeśli zamierzasz pisać teksty samodzielnie, a nie masz doświadczenia w seo copywritingu – są na rynku narzędzia SEO, które po wklejeniu fragmentu tekstu wskażą Ci jak go poprawić, aby stał się zgodny z wytycznymi wyszukiwarek.

Krok 9: Wdrożenie i przetestowanie nowej strony internetowej

Po wdrożeniu strony bardzo ważna jest weryfikacja, czy nie wkradły się jakieś błędy utrudniające korzystanie z niej.

Aby to zrobić należy przetestować wszystkie elementy znajdujące się na www, takie jak: klikalność przycisków, przekierowania po kliknięciu w linki, ładowanie stron, poprawne wyświetlanie elementów (np. grafik), działanie formularzy kontaktowych czy mechanizmów zintegrowanych ze stroną internetową (np. automatyczna aktualizacja bazy mailingowej po zapisaniu się do newslettera).

W testowaniu pomocne mogą być mapy ciepła i weryfikacja, jak pierwsi użytkownicy korzystają ze strony. Warto, aby stronę testowały nie tylko osoby, które pracowały nad projektem, ale również te, które nigdy nie widziały jej na oczy. Ich opinie będą najbardziej miarodajnie odzwierciedlały korzystania ze strony przez nowych użytkowników, którzy widzą wybrane elementy pierwszy raz i odbierają je intuicyjnie.

Krok 10: Konfiguracja analityki internetowej

Ostatnim krokiem na drodze do zakończenia projektu wdrożenia nowej strony www dla firmy jest konfiguracja analityki internetowej. Ten punkt powinieneś zrealizować zaraz po uruchomieniu, przetestowaniu i wyeliminowaniu błędów na nowej strony www.

Analityka internetowa pozwoli Ci na skuteczne mierzenie nie tylko wielkości ruchu i zaangażowania użytkowników na stronie, ale przede wszystkim dostarczy Ci danych dotyczących skuteczności wybranych działań marketingowych i jasno wskaże, które kanały pozyskiwania klientów prowadzą do generowania leadów i sprzedaży, oraz w jakim stopniu to robią. Jest to bardzo ważna kwestia, która w przyszłości pomoże w skutecznej optymalizacji kosztów marketingowych. 

Aby zadbać o analitykę internetową, załóż konto Google Analytics oraz Google Tag Manager i zaimplementuj kod śledzenia tych narzędzi na swoją stronę www. Następnie skonfiguruj mierzenie konwersji, filtry ruchu oraz listy remarketingowe. 

Jeśli prowadzisz sprzedaż bezpośrednio ze strony internetowej (np. prowadzisz sklep internetowy) to kluczowe będzie wdrożenie ulepszonego modułu e-Commerce, który pozwoli Ci zmierzyć wielkość i skuteczność sprzedaży produktów. Przy konfiguracji analityki pomocny będą także dwa artykuły z bloga Casbeg: „Jak sprawdzić czy masz poprawnie zdefiniowane cele w Google Analytics” oraz „Funkcjonalności Google Analytics, które usprawnią Twoją pracę”.

Darmowa checklista „Jak stworzyć firmową stronę www od A do Z” do pobrania

Aby mieć pewność, że w procesie tworzenia strony nie pominąłeś żadnego istotnego elementu – skorzystaj z naszej darmowej checklisty (do pobrania poniżej), która przeprowadzi Cię przez ten proces krok po kroku.

Jeśli natomiast czujesz, że praca nad firmową stroną www to zbyt złożony proces, a Ty nie masz doświadczenia we we wdrażaniu takich projektów – skontaktuj się z nami. Pomagamy firmom na każdym z etapów powyższego procesu, a także wspieramy w wyborze odpowiedniego partnera do zaprojektowania oraz implementacji technicznej strony internetowej.