AutoSerwis - Strona internetowa warsztatu samochodowego z rezerwacją online

Wyzwanie

Strona warsztatu stała na Weebly i było to widać: przestarzały wygląd, nieczytelne adresy i godziny otwarcia ukryte gdzieś w tekście. Jedyną drogą do wizyty był telefon w godzinach pracy warsztatu, a usługi takie jak diagnostyka, klimatyzacja czy wulkanizacja nie miały własnych stron, które mogłyby trafić do Google.

Projekt graficzny: warsztatowy charakter bez taniego efekciarstwa

Kolory i typografia

Paleta jest prosta jak w dobrze zorganizowanym warsztacie: biel, grafit i stal, a na nich mocna czerwień w nagłówku, przyciskach i wyróżnieniach. Nagłówki składamy wąskim, technicznym krojem Saira, który przypomina oznaczenia na częściach i narzędziach. Dzięki szerokości regulowanej w kroju długie hasła mieszczą się w jednej linii także na telefonie. Treść jest w kroju Public Sans, czytelnym nawet w drobnych opisach.

Nowe logo

Logo przeszło kilka rund. Ostatecznie cały znak jest lekko pochylony, jakby w ruchu, płaskie kolory nie mają gradientów, a sygnet jest częścią linii liter. Białe litery z ciemnym sygnetem na czerwonym pasku nagłówka są czytelne w każdym rozmiarze, także jako mała ikona w karcie przeglądarki.

Hero ze zdjęciem warsztatu

Zdjęcie warsztatu zajmuje pełną wysokość pierwszego ekranu i przechodzi w tło miękkim, ukośnym cięciem. Ten sam skos wraca w czerwonej plakietce z rokiem rozpoczęcia działalności. Obok mocne hasło: „Najpierw pisemna kalkulacja. Potem naprawa.” Klient od razu wie, że nie czekają go niespodzianki na rachunku.

Układ sekcji

Strona jest jasna: białe sekcje oddzielone cienką linią, a ciemna jest tylko stopka. Treść zawsze trzyma się szerokości nagłówka, od lewej krawędzi logo do prawej krawędzi numeru telefonu, więc całość wygląda uporządkowanie. Sekcja porad ma jedną dużą liczbę w kolorze marki, która przyciąga wzrok i zapowiada artykuł.

Funkcje, które zamieniają odwiedzających w klientów

• Rezerwacja online z prawdziwym kalendarzem miesięcznym. Niedziele i święta są wyłączone, kalendarz otwiera się na pierwszym miesiącu z wolnym dniem, a sobota ma krótsze przedziały godzin. Klient wybiera jedną usługę i dopisuje resztę w notatce.
• Przycisk „Umów” przy każdej usłudze, który od razu zaznacza ją w formularzu i przewija do niego.
• Status „otwarte teraz” liczony na żywo, np. „Teraz otwarte, dziś do 18:00” albo „Jutro od 9:00”.
• Telefon z animowanym podkreśleniem w nagłówku. Numer jest powtórzony tylko tam, gdzie ma sens: w nagłówku, kontakcie i stopce.

SEO: lokalny warsztat widoczny na konkretne usługi

• Osobne podstrony usług: mechanika, diagnostyka komputerowa i elektromechanika, klimatyzacja, wulkanizacja i instalacje gazowe. Każda ma własny tytuł, opis i sekcję najczęstszych pytań.
• Dane strukturalne typu „warsztat samochodowy” z adresem, godzinami otwarcia i zakresem usług, a do tego FAQ i okruszki nawigacji na podstronach.
• Dział porad dla kierowców z artykułami oznaczonymi jako wpisy blogowe. To treść, która odpowiada na pytania zadawane w Google.
• Krótkie, czytelne adresy, np. /klimatyzacja, oraz lekki, statyczny kod, dzięki któremu strona szybko otwiera się na telefonie.

Efekt

Z „zadzwoń i zapytaj” zrobiło się „sprawdź i zarezerwuj”. Kierowca widzi, czy warsztat jest otwarty, co naprawia i kiedy może przyjechać, a termin rezerwuje bez telefonu. Warsztat dostaje przy tym stronę, która wygląda jak jego praca: konkretnie i bez zbędnych ozdobników.