Создание лендинга для аренды кладовок
Задача
Обратился основатель компании, сдающей в аренду ячейки для временного хранения вещей. Попросил сделать сайт, такой же как у конкурентов. Пришлось объяснить, что так нельзя, и... сделать сайт лучше, чем у конкурентов.
Исходные данные
У заказчика была пара фотографий и листовка, которая должна стать визуальной основой для сайта. Из нее был взят логотип, слоган, «картонный» фон, цветовая гамма.
Работа
Исследование
Изучила сайт единственного конкурента, отметила его плюсы и моменты, которые нужно сделать лучше. Помимо этого проанализировала сайты похожих компаний из других городов. Провела исследование целевой аудитории.
Проектирование
Посмотрела на Яндекс Вордстат, по каким запросам потенциальные клиенты ищут варианты мест для временного хранения вещей. На основе анализа предложила клиенту уйти от позиционирования кладовки в качестве мини-склада, т.к. использование данной формулировку затруднит поисковую оптимизацию сайта.
Разработала вайрфрейм (черно-белый прототип сайта). Написала все тексты.
Разработала вайрфрейм (черно-белый прототип сайта). Написала все тексты.
Дизайн
Отрисовала в Фигме главную страницу. Чтобы сделать ее интересней, придумала анимации, включая интерактивное взаимодействие с сайтом (возможность открыть двери кладовок, чтобы заглянуть, что в них хранят клиенты). На скорую руку сверстала их на Тильде, чтобы согласовать с заказчиком.
Вот этот блок выглядит в финальной версии. Кликнете на картинку, чтобы перейти на сайт и посмотреть, как это работает.
Вот этот блок выглядит в финальной версии. Кликнете на картинку, чтобы перейти на сайт и посмотреть, как это работает.
Подобные мелочи делают взаимодействие с сайтом интереснее, тем самым увеличивая время, проведенное на сайте. А поисковики воспринимают это как положительный фактор и улучшают место в поисковой выдаче.
Т.к. на момент начала работы над сайтом бизнес только открывался, фотографий было мало. Во время работы над дизайном, стало ясно, какие фотографии нужны, и я отправила заказчику техническое задание для «фотосессии».
Из присланных фотографий я взяла минимум, закрывающий максимум вопросов потенциальных клиентов.
Когда были готовы фотографии, доделала дизайн главной страницы в Figma и создала из него кликабельный прототип.
Т.к. на момент начала работы над сайтом бизнес только открывался, фотографий было мало. Во время работы над дизайном, стало ясно, какие фотографии нужны, и я отправила заказчику техническое задание для «фотосессии».
Из присланных фотографий я взяла минимум, закрывающий максимум вопросов потенциальных клиентов.
Когда были готовы фотографии, доделала дизайн главной страницы в Figma и создала из него кликабельный прототип.
Тестирование
Протестировала полученный прототип на потенциальных клиентах. Во время тестирования выяснилось, что:
- все, как обычно хотят на первом экране одну большую красную кнопку, которая решит все их проблемы. И это оказался тот проект, где это было возможно реализовать: на главный экран я добавила стоимость аренды и адрес, где расположены кладовки;
- моя гипотеза о том, что тремя самыми главными вещами являются цена, безопасность и расположение, оказалась не совсем верна. Безопасность подразумевалась по умолчанию, а более важным оказались размеры кладовки. Соответственно в меню я заменила «безопасность» на «размеры», чтобы пользователи могли сразу перейти к нужному разделу.
Было
Стало
Адаптация
После согласования финального дизайна заказчиком я адаптировала сайт в Фигме под разные устройства (планшет, смартфон).
Верстка
Сверстала все на Tilda. Большая часть главной страницы сделана не на стандартных блоках, а на т.н. нулевых блоках, позволяющих реализовать практически любой дизайн.
Но стандартные блоки тоже использованы. Например, меню. Но для того, чтобы оно соответствовало дизайну, его пришлось дорабатывать с помощью кода.
Чтобы сделать сайт более «живым» настроила базовую анимацию. Т.к. вещи в кладовку складывают сверху вниз, то для элементов сайта была выбрано появление сверху вниз, т. е. они как коробки, которые складывают в кладовку.
Ну и стандартные вещи: делала базовые SEO-настройки и создала технические страницы (Политика в отношении обработки персональных данных, согласие на обработку персональных данные, шаблон договора аренды, страница ошибки 404, на которую попадает пользователь в случае ошибки в адресе страницы сайта).
Но стандартные блоки тоже использованы. Например, меню. Но для того, чтобы оно соответствовало дизайну, его пришлось дорабатывать с помощью кода.
Чтобы сделать сайт более «живым» настроила базовую анимацию. Т.к. вещи в кладовку складывают сверху вниз, то для элементов сайта была выбрано появление сверху вниз, т. е. они как коробки, которые складывают в кладовку.
Ну и стандартные вещи: делала базовые SEO-настройки и создала технические страницы (Политика в отношении обработки персональных данных, согласие на обработку персональных данные, шаблон договора аренды, страница ошибки 404, на которую попадает пользователь в случае ошибки в адресе страницы сайта).
Трудности
При разработке дизайна сайта больше всего времени было потрачено на создание первого экрана. Я предложила 3 концепции.
Заказчик выбрал 3 вариант. Далее на его основе было создано еще несколько версий. Все это затягивало работу над сайтом. Поэтому в итоге я отправила 2 версии третьего варианта на независимое голосование в специальный чат, где проводят исследования, и в дальнейшую работу была направлена версия, набравшая больше голосов (56% против 44%).
Отзыв клиента
/будет позже/