Разработка онлайн-конструктора instabook.life

Instabook — это компактная фотокнига, которую вы заполняете самостоятельно — от обложки до последней страницы. Цель проекта — предоставить пользователям возможность самостоятельно создать фотокнигу, используя удобный конструктор.

Задача

  • Повысить узнаваемость бренда и лояльность аудитории.
  • Сделать работу с сайтом удобнее — разработать онлайн-конструктор фотокниг.
  • Избежать оттока пользователей после редизайна.

Клиент

Компания instabook.life занимается печатью современных фотокниг — инстабуков. Главный материал для таких книг — фотографии из социальных сетей. Первоначально компания создавала фотокниги усилиями штатных дизайнеров или по шаблону, присланному клиентами, но со временем стала искать другие модели.

Целевая аудитория

90% аудитории составляют женщины. Мы ориентировались на возраст от 25 до 37 лет и средний уровень доходов. Основные группы пользователей:

  • Мамы. Чаще всего находятся в декретном отпуске. Трепетно относятся к своему ребенку, хотят сохранить каждый яркий момент его жизни.
  • Молодожёны. Планируют сделать фотокнигу из свадебных фотографий, но тратить большие деньги на массивные старомодные фотокниги не хотят.
  • Путешественницы (могут иметь и высокий уровень дохода). Часто путешествуют, хранят семейные традиции и яркие впечатления.

Рынок проекта и конкуренты

Анализ конкурентов показал, что главное преимущество на рынке — наличие онлайн-конструктора (из похожих бизнесов он есть у Gramofon.ua и нескольких других компаний).

География проекта

Доставить инстабук можно в любую точку Украины и мира — эта услуга востребована в США, Польше, РФ, Беларуси и Германии.

В Украине инстабуки чаще всего заказывают из Киева, Мариуполя, Одессы, Харькова, Днепра, Львова, других крупных городов.

Инсайт

Название «инстабук» пока не очень распространено, как и сам продукт. По данным Яндекс.Вордстат, за месяц пользователи ищут продукт по запросу «инстабук» 281 раз, а по запросу «фотокнига» — 6412 раза. Очень часто в соцсетях интересуются, «а что это за книжечка такая?». Обработка заявок показала, что у многих клиентов нет понимания качества книги, процесса и сроков изготовления.

Все это снижало доверие пользователей. А значит, нам стоило разработать не просто технологическую новинку, а инструмент, который бы за секунды разъяснял суть продукта и вовлекал во взаимодействие.

В мае 2017 по запросу «инстабук» было 625 показов, по запросу «фотокнига» — 77 895 показов.

Процесс

Мы создали пробную версию онлайн-конструктора и улучшили её по результатам тестирования.

Исследование

Мы проанализировали рынок, конкурентов и целевую аудиторию, а также поведение пользователей на сайте. Выяснилось, что на решения потенциальных клиентов влияют такие факторы:

  • качество материалов и печати;
  • возможность распечатать фотографии с телефона и получить достойный результат;
  • стоимость фотокниги;
  • сроки изготовления;
  • возможность самостоятельно создать фотокнигу (по своему усмотрению расположить фотографии на странице, сгруппировать, добавить надписи)
  • современный формат фотокниги.

По этим запросам и продуктам конкурентов мы вывели список основных возможностей системы:

  • загрузка фотографий из Instagram или с устройства пользователя,
  • возможность добавить подписи к фотографиям,
  • автозаполнение книги,
  • корректировка размера изображений, их положения на странице,
  • 6 вариантов шаблонов для коллажей и 2 для обложки,
  • возможность добавить страницы.

Предварительная версия

Конструктор должен был иметь узнаваемый вид. Пользователи ценят в таких проектах (minibook.com.ua, myinstabook.ru и прочие) удобство и функциональность.

Мы выбрали жёлтый, чёрный и зелёный цвета, чтобы передать и дружественные эмоции, и свежесть идеи, и строгое отношением к срокам и качеству исполнения.

В окне конструктора мы интерактивно выводим изображение составленной фотокниги в центре рабочей области, а инструменты — по краям и в popup-окнах. Составить фотокнигу предельно просто: есть заготовка книги, есть фотографии с носителя или из соцсетей, и можно сопоставить их простым перетаскиванием, по желанию добавив текстовые блоки.

Изначально дизайн конструктора был такой: 

В таком виде мы полностью адаптировали конструктор для мобильных устройств.

Мы запустили эту пробную версию и отследили поведение пользователей на сайте с помощью Вебвизора за 3 месяца. По наблюдениям и отзывам клиентов исправили функционал:

1. Многие пользователи не видели кнопки «Загрузить» — на некоторых разрешениях она попадала на второй экран, и нужно было прокручивать страницу, чтобы до неё добраться. Мы сделали специальную закреплённую область для загрузки фотографий и акцентировали внимание на кнопке загрузки.

Изначальный дизайн
Конструктор после редизайна

2. Пользователи не знали, с чего начинать работу. При загрузке конструктора они кликали на места для фотографий и покидали интерфейс, так как после клика ничего не происходило. При первой загрузке мы сделали акцент на кнопке «Загрузить фотографии» и убрали доступ к другим элементам конструктора.

3. Мы добавили статусы использования фотографий, чтобы пользователь видел, какие фотографии он уже добавлял в книгу.

4. И много других мелочей, которые влияют на удобство использования:

Изначальный дизайн
Конструктор после редизайна

Дополнительно мы:

  • вынесли размер инстабука в заголовок;
  • упростили навигацию по страницам, вынесли ее из pop-up в верхнюю панель;
  • избавились от профиля пользователя — для авторизации достаточно указать электронную почту;
  • запустили а/б тестирование с панелью загрузки фото слева.

Поддержка и развитие

Дальше мы планируем улучшить дизайн как страниц, так и конструктора:

  • обновить форму оплаты (автоматизировать получение оплаты);
  • расширить функционал конструктора;
  • добавить новые страницы с преимуществами и УТП компании.

Результаты

Мы запустили обновленный проект с онлайн-конструктором 1 октября 2016 года. В результате удалось не только избежать оттока пользователей, но и повысить уровень конверсии.

По данным Google Analytics с 25.05.2016 по 30.09.2016; с 01.10.2016 по 06.02.2017:

  • количество сеансов увеличилось на 236,58%;
  • просмотры страниц увеличились на 392,01%;
  • просмотры страниц за сеанс увеличились на 46,18%;
  • показатель отказов сократился на 24,66%;
  • количество переходов на страницу оформления заказа увеличилось почти вдвое.

Отзыв

...Все настолько просто и легко, что даже напрягаться не стоит) На сайте делаете личный макет из фотографий, оформляете заказ, ждете согласования всех вопросов с личным консультантом, и вуаля. Через 3 дня фоокнига уже у вас в руках (...) Теперь я буду понемногу копить свою фотобиблиотеку...


3952