На днях мы закончили сайт фотостудии. Спешим поделиться классным кейсом.
Залы фотостудии
Презентация списка залов, а также процесс выбора зала необходимо было сделать максимально эффектным и в то же время простым. Мы провели анализ конверсии на предыдущем сайте студии с помощью а/б тестирования.
Результаты тестирования показали, что пользователям больше нравятся круглые объекты на страницы, особенно фотографии – они более кликабельны и чаще привлекают внимание.
Также просматривая веб-визор и анализируя поведение пользователей на старом сайте фотостудии, мы увидели, что на мобильных экранах не все посетители понимают, что залов много, и список залов можно свайпить (прокручивать влево и вправо). Поэтому мы решили реализовать одну незначительную на первый взгляд фишку на мобильном разрешении 375px.
Особенность слайдера в том, что мы показали не только основной элемент, но и части следующего и предыдущего элементов слайдера, что делает список залов более наглядным и понятным в управлении.
Наша гипотеза подтвердилась впоследствии показаниями веб-визора – пользователи гораздо чаще кликают именно по этим «хвостикам» нежели пользуются традиционным пролистыванием,хотя и этот способ для них сразу очевиден.
Календарь бронирования
Проектируя календарь бронирования мы не стали выдумывать велосипед и использовали простое, наглядное и удобное решение в части представления и выбора даты и времени, добавив к нему некоторые полезные технические усовершенствования.
Календарь – это плагин, который был реализован нами с нуля на vue.js специально для этого проекта. При загрузке страницы он генерирует 365 дней и 24 часа в каждом дне. Получается в итоге 8 760 элементов, и заметьте как быстро он работает – время загрузки 0,4 секунды!
Ни один из имеющихся готовых плагинов календарей, которые мы пытались использовать, не смог показать такую феноменальную скорость «отрисовки» объектов на целый год. Прочие плагины могут выдать близкую скорость загрузки с количеством элементов только на 2-3 месяца.
Для удобства пользователей было реализовано выделение цветом дат, которые были забронированы и которые свободны. Чтобы решить, казалось бы, простую задачу, и выбрать, какой цвет использовать в забронированных датах, мы также проанализировали поведение пользователей на старом сайте и заметили, что если интервал времени (забронированный) выделен контрастно и ярко относительно общих цветов сайта, то пользователи продолжали кликать по таким же ярким ячейкам, думая, что эти часы свободны для бронирования.
В результате мы пришли к выводу, что ячейки забронированных часов должны быть максимально незаметными, чтобы эти элементы не бросались в глаза и привлекали меньше внимания, чем свободные часы, доступные для бронирования, на которых в свою очередь мы сделали цветовой акцент.
При пролистывании дат в календаре, так же синхронно пролистываются месяца при переходе от 30/31 числа к 1 числу следующего месяца.
Месяца в календаре генерируются на 1 год со смещением. То есть по завершению текущего месяца в календаре сразу генерируется новый месяц в следующем году. После окончания октября 2018 года генерируются элементы ноября 2019 года. Таким образом часы и даты для бронирования снова доступны на целый год вперед.
Оформление заказа
После выбора зала, даты и времени пользователь переход к этапу бронирования. Процесс оформления заказа мы также сделали максимально функциональным, сохранив простоту и наглядность интерфейса.
Авторизация и регистрация
На этапе бронирования пользователь имеет возможность зарегистрироваться автоматически по завершении бронирования, если он впервые зашел на сайт. Регистрация и авторизация осуществляется с помощью SMS.При последующих заказах авторизация осуществляется на этапе оформления бронирования и при входе в личный кабинет также посредством SMS, что избавляет пользователя от необходимости запоминать и хранить пароль.
Бонусная система
Для личного кабинета реализована собственная система работы с бонусами: начисление разного процента в зависимости от суммы заказа, сгорание бонусов при отмене заказа, а также возможность не начислять бонусы при оформлении заказа администратором.
Бонусы реализованы через бонусный счёт пользователя, они могут накапливаться. С помощью бонусов можно оплатить до 100% оформления заказа. Также на стоимость бронирования можно получить скидку, введя номер купона. Купоны на скидку могут формироваться администраторами и передаваться клиентам по желанию студии.
Фишки в реализации оформления заказа
- Дополнительно реализован полезный и удобный интерфейс, позволяющий администратору вносить в систему оффлайновые заказы по номеру телефона.
- Реализована возможность оплаты для неавторизованного пользователя по прямой ссылке.
- Реализована возможность автоматической отмены заказа в случае неоплаты в течении X минут, где X может быть задано администратором.
- Оповещение обо всех действиях с заказом по SMS.
- Интеграция с платежной системой Тинькофф-банк.
Синхронизация с Google календарём
Так как студия работала изначально с Google Calendar, и все бизнес-процессы были связаны с ним, поэтому перед нами стояла задача синхронизировать брони, совершенные на сайте, с Google Calendar.
Синхронизация работает в одностороннем режиме: брони с сайта передаются в Google Calendar. В зависимости от выбранного зала брони попадают в разные календари. При отмене брони на сайте, запись о брони так же удаляется из Google Calendar.
Также информация о брони в Google Calendar обновляется при изменении статусов оплаты с «не оплачено» на «оплачено».
Из технической реализации хочется отметить особенность, что сайт работает на php 7, а библиотека через которую осуществляется синхронизация с Google Calendar работает через php 5.6.
Автор: SOFT ENGINEERING
