Задача
Проект: интернет-магазин часов TraserH3 — тактические часы с тритиевой подсветкой. Аудитория, под которую всё выстраивалось, — покупатели, которые разбираются в характеристиках и сравнивают модели. До обращения ассортимент был выложен списком без характеристик и фильтров. Что мешало в этой схеме. Модели отличаются деталями, а сравнить их на сайте было нельзя. Кроме того, покупатель не находил часы под свою задачу: армейские, дайверские, повседневные. Наконец, наличие приходилось уточнять по телефону.
Цена вопроса измерялась не только упущенными обращениями. Сотрудники повторяли одно и то же в каждом разговоре, а сведения, которые нужны были посетителю, приходилось собирать заново под каждый запрос. Всё это работа, которую делает статичная страница, если она правильно устроена. Раньше задачу пытались решить силами подрядчиков на отдельные работы. Получалось лоскутно: каждый делал свой кусок, а общей логики ни у кого в голове не было.
Требование заказчика: перевести всё, что раньше выяснялось вручную, в понятную структуру, доступную с любого устройства. Отдельным условием шли сроки: проект нужен был к началу сезона обращений, когда спрос вырастает и терять посетителей особенно обидно. Плюс договорились, что содержимое заказчик ведёт сам — без обращения к разработчику по каждой запятой.
Что сделали
Проект «магазин часов» начали со структуры и прототипа, а не с картинки: сначала договорились, что и где лежит, и только потом взялись за оформление. В работу вошло следующее. Первое — каталог с фильтрами по назначению, механизму, корпусу и водозащите. Второе — карточку с полным набором характеристик и сравнением моделей. Третье — вывод наличия из учётной системы. Четвёртое — подборки по применению — для службы, для спорта, для города. Под капотом: фильтр пересчитывает количество найденного до нажатия «применить».
Отдельной работой шли тексты и структура разделов. Собрали запросы, по которым проект ищут, и разложили страницы под них — так, чтобы каждая отвечала на свой вопрос целиком, а не отсылала к следующей. Заголовки, описания и адреса страниц заданы осмысленно, а не сгенерированы из названий. Вёрстка адаптивная — от телефона до широкого монитора. Изображения отдаются в webp с запасным форматом и в трёх размерах, поэтому страницы остаются лёгкими даже там, где много фотографий. Содержимое ведётся в админке: тексты, картинки и разделы правятся без разработчика.
Готовый сайт проверяли не только глазами: замеряли скорость первой отрисовки, смотрели поведение на узких экранах, прогоняли формы во всех сценариях, включая ошибочные. Правки после этой проверки входят в работу и отдельно не считаются. Результат: вопросов о наличии и характеристиках в поддержку стало заметно меньше. Сайт сдан с документацией и доступами, первый месяц сопровождали на живом трафике.
