Задача
Владелец машины спрашивает первым делом две вещи: сколько это стоит и как будет выглядеть потом. Сайт должен был ответить на обе до того, как кто-то возьмёт трубку.
Мастерская берёт диски комплектом и считает по виду работы и радиусу, поэтому обычный прайс был бы стеной цифр. Нужно было превратить его в то, чем посетитель пользуется в пару кликов и получает одну цифру.
Что сделали
Первый экран называет цену
На первом экране сказано, что за услуга, в каком городе и от какой суммы, и добавлено, где цех и сколько занимает комплект. Две кнопки: рассчитать стоимость или посмотреть работы.
Телефон и часы работы остаются в шапке на всех экранах, поэтому тому, кто уже готов написать, не приходится их искать.
Калькулятор стоимости
Калькулятор — это таблица: слева виды работ, сверху радиусы. Нажимаете ячейку, и под таблицей появляется цифра, а рядом кнопка заявки: цена и следующий шаг в одном месте.
Ниже услуги по одной — один цвет, два цвета или кант, алмазная проточка, правка, аргонная сварка, локальная реставрация, полировка, суппорты, шиномонтаж, — у каждой своя цена от и строка о том, что в неё входит.
Галерея работ: до и после
Готовые диски выложены сеткой, а у пар «до и после» есть шторка, которую тянут прямо по кадру. В подписи — цвет, вид работы и радиус.
Это ответ на второй вопрос. Тот, кто выбирает цвет, видит его на диске, а не на выкраске, и рядом видит, каким этот же диск приехал.
От осмотра до выдачи
Работа разложена по шагам от осмотра до выдачи, поэтому посетитель понимает, что будет после его сообщения. Сайт просит фотографию дисков — этого мастерской достаточно, чтобы назвать цену и дату.
С каждого экрана есть выход в WhatsApp, Telegram или звонок, а в контактах можно оставить номер, чтобы перезвонили. Заявка уходит прямо в цех, без посредников.
Техническая часть
Под страницей лежат таблица цен, маршрут заявки до цеха и то, что измерено на живом сайте.
Заявки
Одна таблица цен на сайт и бота
Калькулятор считает цену по виду работы, радиусу, состоянию дисков и дополнениям.
Заявка падает сразу в Telegram
Небольшой сервис на сервере проверяет номер телефона, складывает его в читаемое сообщение и отправляет в чат мастерской в Telegram, где его сразу видят.
Форма отсеивает спам
Скрытое поле ловит автоматические отправки, а количество заявок с одного адреса и одного номера ограничено.
Отдельный бот для записи
Кроме формы есть Telegram-бот, который ведёт запись по шагам и помнит, на каком шаге разговор.
Скорость
Галерея грузится по мере прокрутки
На странице 75 фотографий, и 60 из них загружаются только тогда, когда посетитель до них дошёл.
Поиск
Написано словами из поиска
По разделу SEO в Lighthouse страница набирает 100 из 100 и на мобильном, и на десктопе.
Мобильная версия
Страница на телефоне
На экране шириной 390 пикселей мобильная версия укладывается в ширину, вбок скроллить нечего, а кнопка калькулятора — 275 на 52 пикселя.
Надёжность
Соединение только по https
Запрос по обычному http переадресуется на https, а браузеру сказано ходить только по https ближайшие два года.
Мобильная версия
Что получилось
- Заявки приходят прямо с сайта, без посредников
- Цена известна до первого звонка
- У каждой услуги своя цена и своё объяснение
Первый разговор ведёт сайт. Владелец машины видит цену под свой радиус, находит цвет в галерее, присылает фото и получает дату. То, что раньше было долгой перепиской, теперь начинается с уже готового ответа.
