Szewc w nowych butach. Jak zaprojektowaliśmy nową stronę impresspro? [Case Study]

Mówi się, że szewc bez butów chodzi. Przez długi czas to powiedzenie idealnie pasowało do naszej sytuacji. Skupieni na dowożeniu ambitnych projektów dla Klientów, zapomnieliśmy o własnym podwórku.

Poprzednia strona impresspro powstała w 2013 roku. Przez lata żyliśmy w przekonaniu, że nasza praca obroni się sama, a własna witryna może poczekać. Przecież mieliśmy ręce pełne roboty. Postawiliśmy więc prostą zaślepkę „Strona w przebudowie” uznając, że to wystarczy. Niestety, popełniliśmy jeden błąd – na dole dodaliśmy mały przycisk: „Przejdź do starej wersji strony”.

BOOM! Bolesne zderzenie z rzeczywistością

Ten przycisk zmienił wszystko.

Jeden z naszych Klientów polecił nas dalej. Naturalna kolej rzeczy, prawda? Niestety, zanim druga strona w ogóle się z nami skontaktowała, kliknęła we wspomniany link. Zobaczyła stronę z 2013 roku i padło stanowcze: NIE. Stwierdziła wprost, że nie chce z nami nawet rozmawiać, widząc jak wygląda nasza aktualna wizytówka.

To był dla nas naprawdę zimny prysznic. Ostatecznie, dzięki szczerej rozmowie i spotkaniu twarzą w twarz, udało nam się nawiązać współpracę z tym klientem. Jednakże to pierwsze „NIE” dało nam do myślenia. Zrozumieliśmy, że tracimy szanse biznesowe nie przez brak kompetencji, ale przez to, jak sprzedajemy naszą wiedzę.

I właśnie wtedy nastąpił moment zwrotny. Postanowiliśmy to zmienić i zrobić tak, jak należy. Bez dróg na skróty.

Oto jak wyglądał proces budowy nowej strony impresspro – krok po kroku.

Krok 1: Warsztaty – realna pomoc, nie techniczny bełkot

Doświadczenie nauczyło nas, że nie wszystko zaczyna się od designu. Zanim otworzyliśmy jakikolwiek program graficzny, zaczęliśmy od fundamentalnych pytań.

Podczas warsztatów strategicznych skupiliśmy się na tym, aby strona realnie odpowiadała na potrzeby klientów. Wiemy, że osoby szukające wsparcia IT często nie posługują się technicznym żargonem – i wcale nie muszą. Dlatego naszym priorytetem było maksymalne uproszczenie komunikacji.

Postawiliśmy na jasny przekaz:

Oferta: Klient ma wiedzieć, co dokładnie robimy.
Rozwiązanie: musi od razu widzieć, czy jesteśmy w stanie rozwiązać jego problem.
Konkrety: całość powinna być pozbawiona „lania wody” i zbędnych treści, które zamiast zachęcać, tylko rozpraszają i budują dystans.

Nasza nowa witryna nie opowiada o skomplikowanych technologiach, tylko o tym, jak możemy pomóc Twojemu biznesowi.

Krok 2: Analiza – jak chcemy być widziani?

Zanim postawiliśmy pierwszą „kreskę”, musieliśmy zrozumieć otoczenie i zdefiniować własny styl. To był czas na głęboką analizę tego, co pasuje do impresspro. Jaki layout najlepiej odda naszą kulturę pracy? Jakie sekcje są niezbędne, by budować zaufanie już od pierwszej sekundy?

Analiza konkurencji posłużyła nam tu jako drogowskaz – w dwojaki sposób:

Szukaliśmy inspiracji: sprawdzaliśmy, jakie rozwiązania są intuicyjne i dobrze przyjęte przez rynek (benchmarki).
Eliminowaliśmy błędy: równie ważne było zidentyfikowanie tego, co u innych nie działa, jest nieczytelne lub irytujące.

Krok 3: Projekt strony głównej Desktop – do (wielu) razy sztuka

W naszym procesie projekt strony głównej na desktop to zawsze punkt wyjścia. Będziemy tu z Wami w pełni szczerzy: wersji Home Page powstało znacznie więcej, niż ma to miejsce przy standardowych projektach komercyjnych.

Dlaczego? Ponieważ to była pierwsza tak duża zmiana wizerunku impresspro od lat. Pamiętając o historii z utraconym (prawie) klientem, czuliśmy presję, by zaprezentować się z jak najlepszej strony.

Były to długie godziny dyskusji, poprawek i testowania różnych koncepcji. Zależało nam na tym, aby każdy odwiedzający – niezależnie od branży – znalazł tu coś dla siebie. Liczne iteracje były konieczne, aby uzyskać końcowy efekt, który łączy nowoczesny design z maksymalną użytecznością.

Krok 4: Wersja mobile – funkcjonalność przede wszystkim

Gdy desktop został zaakceptowany, przeszliśmy do wersji mobilnej. Zadanie z pozoru proste, ale kluczowe, pamiętając o zasadzie Mobile First oraz o tym, że coraz więcej decyzji biznesowych podejmuje się ze smartfonem w ręku.

Tutaj nie ma miejsca na kompromisy. Postawiliśmy na sprawdzone praktyki UX i UI. Dla nas najważniejsza jest funkcjonalność – strona na telefonie musi być wygodna, szybka i intuicyjna w nawigacji kciukiem.

Krok 5: Architektura i konkrety

Dopiero po zamknięciu tematu strony głównej, ruszyliśmy dalej. Nie kopiowaliśmy rozwiązań na ślepo. Każdy kolejny widok poprzedzony był przygotowaniem pełnej architektury informacji. Musieliśmy wiedzieć jak poprowadzić użytkownika? Co jest celem tej konkretnej podstrony?

W ten sposób powstały kolejne sekcje serwisu – jasno precyzujące przede wszystkim:

co robimy (Usługi),
jaka jest nasza specjalizacja,
jakie są nasze efekty, czyli po prostu realne Case Study,
kim jesteśmy (podstrona „O nas” mówiąca więcej o naszym podejściu).

Krok 6: Copywriting – sztuka mówienia o sobie

Stworzenie widoków to jedno, ale trzeba je wypełnić treścią. Istotnym elementem było napisanie takich tekstów, które jasno komunikują klientom, w jaki sposób pracujemy.

Unikaliśmy pustych haseł marketingowych. Nasze opisy mają jedno zadanie: wyjaśnić nasze podejście do rozwiązywania Twoich problemów. Teksty napisane są po prostu „po naszemu”, które najmocniej odzwierciedlają zarówno to, jacy jesteśmy, ale również jakie są nasze wartości.

Krok 7: Development – tchnienie życia w projekt

Moment, w którym grafika zamienia się w działający produkt – sukcesywnie, strona po stronie, przystąpiliśmy do web developmentu.

To etap, któremu poświęciliśmy najwięcej czasu, aby zadbać o perfekcyjny UX i optymalizację. Kod musiał być czysty, a strona szybka (co jest kluczowe także dla SEO). Nie uznajemy półśrodków – to, co zaprojektował grafik, musiało zostać odwzorowane 1:1 w przeglądarce, z zachowaniem pełnej interaktywności.

Krok 8: Testimoniale – głos naszych klientów

W międzyczasie spotkaliśmy się z naszymi partnerami w celu nagrania testimoniali. Wiemy, jak kluczowe jest potwierdzenie doświadczenia i budowanie zaufania (Social Proof), dlatego zależało nam na zaprezentowaniu realnych opinii, a nie anonimowych cytatów.

Odwiedzający naszą stronę mogą teraz zobaczyć i posłuchać opinii osób, którym pomogliśmy rozwinąć biznes. To dla nas najważniejsza wizytówka i potwierdzenie naszej pracy

Krok 9: Testy – sprawdzam!

Chcąc zadbać o to, aby wizja naszej strony realnie działała tak, jak zaplanowaliśmy, przystąpiliśmy do rygorystycznych testów.

Nasze skupienie koncentrowało się na:

Poprawnym działaniu: czy formularze wysyłają zaplanowane wiadomości? Czy linki prowadzą tam, gdzie powinny?
Animacjach: dopracowywaliśmy mikro-interakcje. Musiały być one płynne, cieszyć oko, ale nie obciążać systemu.
Nawigacji: zależało nam, aby strona była intuicyjna dla każdego użytkownika, niezależnie od urządzenia.