powrot do case studies
AV-IT Solutions

AV-IT Solutions

Jak stworzyliśmy stronę internetową łączącą usługi doradcze z kompleksową obsługą firm z branży IT
Jak budujemy persony oraz projektujemy user journey map ? Poznaj proces projektowy tworzenia stron dla branży IT.

Podczas pierwszych warsztatów z firmą av-it.pl odbyliśmy spotkanie poznawcze, którego celem było przedstawienie potrzeb firmy i oczekiwania poszczególnych osób zespołu. Pierwsze spotkanie miało na celu przedprojektowe przygotowanie projektu, a drugie omówienie materiałów stworzonych na potrzeby projektu. Zobacz jak powstają strony internetowe dla branży IT w naszej agencji.

Dokumentacja projektu

W trakcie przygotowywania materiałów dla firmy AV/IT przeanalizowano dokumentację projektu, zebrano wymagania i poddano je analizie krytycznej, ustalono kolejne etapy procesu i zakres pracy na tym poziomie. Efektem prac są:

  1. Zbudowane person,
  2. Zaprojektowany user journey map,
  3. Przygotowana architektura informacji & omówione benchmarki

Opracowanie person

W odniesieniu do głównych segmentów użytkowników stworzono trzy podstawowe persony, charakteryzujące się odmiennymi zestawami cech, umiejętnościami oraz bagażem doświadczeń. Persony są przedstawicielami najreprezentatywniejszych grup użytkowników, co pozwala założyć, że zadbanie o ich potrzeby odpowie na problemy większości użytkowników. Zostały wyszczególnione następujące persony:

  1. Michał Konieczny - administrator systemów - techniczny, konkretny, kierujący się efektem.
  2. Adam Poznański - właściciel firmy budowlanej - stawiający na jakość, nietechniczny, nerwowy, lubiący czuć się dowartościowany i stawiający na kontakt z obsługą klienta.
  3. Urszula Gwint - officer manager w korporacji - nietechniczna nie mająca czasu na dokształcanie się w temacie, chce zabłysnąć przed szefostwem i liczy na wsparcie.

User journey map

User Journey Map jest techniką śledzenia uczuć, motywacji, akcji i efektów procesu z perspektywy person a tym samym zwykłych użytkowników. Empartyzacja na każdym kroku ścieżki użytkownika pozwala na maksymalizację pozytywnych odczuć z używania strony i zapobiega występowaniu błędów. Na potrzeby projektu skupiono się na takich aspektach jak:

  1. Motywacja
  2. Obawy
  3. Szansa
  4. Wybór
  5. Potwierdzenie wyboru

Architektura informacji strony internetowej

Architektura strony internetowej dzieli się na strony i poszczególne sekcje. Każda sekcja odpowiada poszczególnym potrzebom person. Główne podstrony to:

  1. Strona główna
  2. Produkty
  3. Strona produktowa
  4. Realizacje
  5. Strona Realizacji
  6. Branże
  7. Strona branży
  8. Kontakt

Strona główna

Strona główna jest wizytówką każdej witryny internetowej, miejscem gdzie użytkownik trafia i wyrabia sobie zdanie o firmie, produktach co ostatecznie wpływa na jego decyzje. Strona główna powinna klarownie przedstawiać czym się dana firma zajmuje, jakie wartości wyznaje i dlaczego warto jej zaufać. Strona nie powinna być zbyt długa i przeładowana informacjami bo może to prowadzić do zniechęcenia użytkowników.

Pierwszym elementem patrząc od góry na stronie głównej jest bloczek wprowadzający. Nad nim można umieścić szybki kontakt do przedstawicieli firmy.

Wygląd Sekcji:

  • Zapętlonym filmem (lepiej wygląda ale może spowalniać stronę na starszych komputerach)
  • Fotografią z tekstem (dobrze wygląda i dobrze działa na każdym komputerze)
  • Zachowawcze tło odnoszące się do branży/pracy
  • Kontakt do sprzedawców
  • Zwięzłe copy

Kolejną sekcją jest Reason to believe - element podnoszący wiarygodność strony i pokazujący, że firma współpracuje z różnymi wartościowymi klientami.

Wygląd sekcji:

  • Ikony klientów umieszczone na pasku
  • Ikony powinny być niezbyt duże, żeby się zmieściło po 5-7 w jednym rzędzie
  • Często ikony są czarnobiałe ale to już jest mocno kwestia estetyczna

Sekcje produktowe i usługowe powinny znaleźć się na stronie głównej. Powinno się określić główne produkty i usługi które kierują ze strony głównej do podstron produktowych i usługowych. Bloczki układają się w rzędy po 5/7.

Wygląd sekcji:

  • Pierwszy rząd - bloczki produktowe
  • Drugi rząd - usługowe
  • Wygląd bloczku: produkty/usługi zdjęcie, tytuł, elementy

Sekcja przedstawiająca partnerów czyli firmy które dostarczają sprzęt.

Wygląd sekcji:

  • Rząd ikon
  • Ikony podobne do tych zastosowanych w sekcji reason to belive

Sekcja w której będą prezentowane w bloczkach najważniejsze realizacje. Sekcja analogiczna do poprzednich czyli 5-7 klikalnych bloczków w rzędzie. Bloczki powinny mieć duże zdjęcie i podpis, są klikalne i prowadzą do poszczególnych realizacji.

Wygląd sekcji:

  • Rząd bloczków po 5/7 na rząd
  • Wygląd bloczku: zdjęcie, nazwa, firma dla której było realizowane zlecenie

Sekcja w której będą prezentowane w bloczkach najważniejsze branże. Rząd bloczków po 5-7, mogą być ikony ważne, żeby tak jak reszta serwisu były klikalne.

Wygląd sekcji:

  • Rząd bloczków
  • Wygląd bloczku branży: ikony, nazwa, krótki opis

Stopka jest kluczową sekcją dla wszystkich podstron i powinna prezentować najważniejsze dane i kategorie. W oparciu o doświadczenie, tej wielkości strony/serwisy mają raczej stopki minimalistyczne i to też sugeruję. W przyszłości proponuję zaimplementować newsletter.

Elementy sekcji:

  • Dane kontaktowe
  • Numery kontaktowe
  • Dane firmy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Nie masz czasu przeczytać ?

Zakres prac

analiza potrzeb firmy IT
budowa person
opracowanie architektury strony
wdrożenie i kodowanie strony internetowej
optymalizacja SEO i techniczna
Jak stworzyliśmy stronę internetową łączącą usługi doradcze z kompleksową obsługą firm z branży IT

Jak możemy pomóc Ci osiągnąć cele i uczynić Twoją markę lepszą ?