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