Сделали юзабилити-аудит сайта, разработали прототип и новый дизайн на основе портретов пользователей.
Юзабилити-дизайн для Longstay hostel
Кейс
В Петербурге около половины гостиничных номеров приходится на хостелы: конкуренция жесткая. И скоро она станет еще жестче. Перед началом высокого туристического сезона мы решили рассказать про хостельный кейкс, для которого мы делали юзабилити-дизайн.
Карточка проекта
Клиент: сеть хостелов длительного проживания Longstay hostel.
Сильные стороны: хостелы находятся в центре города, жесткий ценз для заселяющихся, бесплатный спорт для жильцов.
Слабые стороны: сайт содержал мало ценной для гостей информации, и, как следствие, плохо конвертил. Перед началом продвижения было принято решение сделать редизайн сайта — исключительно на основе юзабилити.
Задача: сделать редизайн сайта. Почему дизайн проводился на основе юзабилити-аудита?
Сильные стороны: хостелы находятся в центре города, жесткий ценз для заселяющихся, бесплатный спорт для жильцов.
Слабые стороны: сайт содержал мало ценной для гостей информации, и, как следствие, плохо конвертил. Перед началом продвижения было принято решение сделать редизайн сайта — исключительно на основе юзабилити.
Задача: сделать редизайн сайта. Почему дизайн проводился на основе юзабилити-аудита?
- Небольшой бюджет позволял провести не полное обновление сайта, а только редизайн — без пересборки сайта и потери позиций в выдаче.
- Дотошный клиент хотел получить не просто «картинку», а решение, которое повысило бы юзабилити-показатели сайта и улучшило конверсию. Таким образом, почти каждое внесенное изменение имело логическую основу.
- На основе юзабилити-аудита клиент мог составить для себя список работ «на вырост», которые можно проводить на сайте постепенно, по мере появления бюджета.
Процесс
В начале мы провели юзабилити-аудит: проанализировали структуру сайта, сквозные и управляющие элементы, отдельные страницы. Стало понятно, что не так с сайтом, но как эффективно исправить недочеты, было неясно. Сделали сравнительный конкурентный анализ и разработали 3 портета пользователей — по целевым группам. Для каждой прописали конверсионный путь. Кстати, ко всем этапам подключили дизайнера — для погружения в проект и для отрисовки портретов пользователей).
Это, например, Максим и Настя, которые столкнулись с самым большим количеством проблем, но своем конверсионном пути. Максим и Настя — молодая пара из Москвы, решили провести отпуск в Петербурге. Планируют поездку заранее, ищут вариант, оптимальный по цене и размещению. Настя занимается планированием, но решение принимают вместе. Недоверчивы, не хотят натолкнуться на мошенничество.
Настя переходит на сайт через контекстную рекламу по запросу «общежитие квартирного типа на длительный срок». Ее интересует расположение, поэтому с главной она переходит в «Адреса», понимает, что хостелы находятся в центре, и это плюс. Переходит в «Цены», решает посмотреть, что входит в услуги, но описания услуг нет, а у всех хостелов одинаковый текст и (кое-где) фотографии. Советуется с Максимом: ему нравится, что в хостеле есть спорт по выходным, но ему также не хватает уверенности, что хостел «настоящий». Заходят в раздел «Контакты», чтобы связаться с менеджером, но не находят там даже адреса офиса. Уходят с сайта.
Настя переходит на сайт через контекстную рекламу по запросу «общежитие квартирного типа на длительный срок». Ее интересует расположение, поэтому с главной она переходит в «Адреса», понимает, что хостелы находятся в центре, и это плюс. Переходит в «Цены», решает посмотреть, что входит в услуги, но описания услуг нет, а у всех хостелов одинаковый текст и (кое-где) фотографии. Советуется с Максимом: ему нравится, что в хостеле есть спорт по выходным, но ему также не хватает уверенности, что хостел «настоящий». Заходят в раздел «Контакты», чтобы связаться с менеджером, но не находят там даже адреса офиса. Уходят с сайта.
Максим и Настя
Рост проектной команды
Аудит показал, что редизайн не решит выявленных проблем, — нужно корректировать содержимое сайта и подключать копирайтера. Копирайтер вник в аудит, проинтервьюировал управляющую хостелами. Потом написал, дописал и переписал тексты. Новые тексты были включены в простейший прототип на axure и переданы дизайнеру. Начался основной этап работы. Оторвемся от скучных описаний и посмотрим на то, что было сделано.
Сквозные элементы сайта
Шапка старого сайта
Итак, что у нас есть: логотип с лобстером на лихой подушке, лишний пункт меню «Главная», на который почти не кликают, и очень важный — «Отзывы», которого в меню нет. Однако, самая большая проблема шапки и слайда в том, что фотография и дескриптор обещают нам европейское жилье, а дизайн сайта и логотип говорят об обратном. Это противоречие, которое ощущается явно или интуитивно, нам нужно снять.
Шапка нового сайта
Первым делом мы сменили логотип и укоротили название: это леттеринг с обаятельной лигатурой о том, что жить в хостеле нужно долго. Сразу под ценой разместили ключевые услуги, которые входят в цену, и убрали «колтуэкшн», заменив на 3D-тур. Панорама настоящего хостела — лучшее доказательство ремонта, чистоты, просторности и адекватности хостела. Если вы заметили, что цена в новом дизайне стала выше, не пугайтесь: мы готовили сайт с расчетом на новый сезон и новые цены).
Главная цель редизайна — сделать хостел настоящим, таким, чтобы его можно пощупать через монитор. Поэтому в левом верхнем углу появился счетчик: погоды, времени и свободных мест. Жизнь идет своим чередом, в Петропавловске-Камчатском +24, 15 мая и 37 свободных мест. Мы никому ничего не впариваем — просто приезжайте. У нас тепло.
Главная цель редизайна — сделать хостел настоящим, таким, чтобы его можно пощупать через монитор. Поэтому в левом верхнем углу появился счетчик: погоды, времени и свободных мест. Жизнь идет своим чередом, в Петропавловске-Камчатском +24, 15 мая и 37 свободных мест. Мы никому ничего не впариваем — просто приезжайте. У нас тепло.
Подвал старого сайта
Футер состоит из одного, но жирного призыва к целевому действию «Забронируйте сейчас» и телефона. У пользователей есть стереотипные ожидания относительно того, как должен выглядеть футер. На сайте роль футера играет промо-бар, поэтому создается впечатление, что сайт либо не до конца загрузился, либо сделан небрежно.
Подвал нового сайта
Футер оброс факультативной информацией: год, иконки соцсетей, физические контакты — офис, контакты офиса и часы работы. Одна из трех колонок целиком отведена под необходимую юридическую информацию. Главная задача нового футера — прочно зацементировать ножки сайта в тазике реальности.
Интерактивная карта хостелов
Карта старого сайта
Тот факт, что заголовок блока объясняет его функционал, говорит о том, что функционал для пользователя не очевиден (да и по карте кликов видно, что пользователи нажимали на неактивные станции и места карты, не помеченные домиком). При нажатии на станцию всплывала плашка с адресом — но для туриста или новоприбывшего информация об адресе является факультативной: турист не знает улиц и беспокоится о близости метро и жилых удобствах.
Небольшой нюанс для тех, кто ездит в метро и кого заботит авторское право: старая карта слегка нарушала права местного метрополитена, поэтому мы были обязаны отрисовать собственную или использовать гугл- или яндекс-карты.
Небольшой нюанс для тех, кто ездит в метро и кого заботит авторское право: старая карта слегка нарушала права местного метрополитена, поэтому мы были обязаны отрисовать собственную или использовать гугл- или яндекс-карты.
Карта нового сайта
Мы выбрали бюджетное решение: гугл-карта, окрашенная в новые фирменные цвета, с яркими булавками. Все хостелы находятся в центре — это позволило нам выбрать выгодный масштаб. У всех хостелов поблизости расположено что-нибудь интересное — и мы внесли это во всплывающие плашки. На плашки влезло превью хостела и его вместимость — еще 2 важных фактора, которые помогут сделать первичный выбор.
Карточки хостелов
Хостел старого сайта
Страница с хостелами очень длинная для пользователей: половина не доходит и до середины страницы. Как сделать страницу короче, не укорачивая ее? С помощью меню второго уровня. Которого на странице нет. Навигацию осложняет тот факт, что текст и фото во многом повторяются, хостелы сложно сравнивать между собой — и вообще отличить друг друга. Обилие одинаковых снимков наводит на мысль о том, что фотографии взяты со сторонних ресурсов, — минус 1 пункт к доверию, хотя фотографии настоящие.
Хостел нового сайта
Над самой важной страницей мы проделали наибольшее количество манипуляций. Во-первых, сделали закрепленное меню второго уровня со станциями метро. Во-вторых, разбили описание на лирику и факты: краткие характеристики хостела — отдельно, описание номеров, изразцов и эркеров — отдельно. Каждый блок закрыли конверсионным действием: разместили кнопку «Забронировать», рядом указали количество доступных мест.
Ценовая развертка
Цены старого сайта
На странице «Цены» нет закрывающего конверсионного действия — есть только таблица с ценами, прейскурант. Как в нем разобраться без официанта? Что входит в плату? 6 900 — это дорого или дешево? Кстати, а что насчет гарантий? Есть ли договоры, или вы просто меняется деньги на ключ? Сплошные вопросы. Предложения аренды на неделю и месяц размещены вперемешку. Страница не дает информации, которая бы гарантировала добросовестность компании и спокойствие постояльца.
Цены нового сайта
Прежде всего, мы рассортировали тарифы: предложения недельной аренды отделили от аренды на месяц. Внедрили спокойные стикеры — помогли новичку сориентироваться в ценах. Отдельно выделили номера для двоих, которые сдаются целиком. Добавили блоки, касающиеся ценообразования и гарантий: что входит в плату (уборки, белье и проч.); заключается ли договор с постояльцем; кто отвечает за сохранность вещей; добавили образец договора с политикой ответственности хостела и постояльца. Добавили закрывающее конверсионное действие.
Контактная информация
Контакты старого сайта
Почта, соцсети, телефон — ни одного физического контакта у сети хостела — самый мощный стимул покинуть сайт. Особенно если вы не в первый раз собираетесь в крупный город и знаете, что дешевое жилье в 99 случаев из 100 оказывается обманом.
Контакты нового сайта
Страница стала в 3 раза длиннее, мы впихнули сюда все, что только могли: адрес и часы работы офиса, карту. Добавили телефон для действующих постояльцев, которые забыли вещи, заблудились, хотят узнать, как продлить договор и прочее. Несмотря на то, что в каждом хостеле есть администратор, такой телефон должен быть. А для не-клиентов наличие такой информации даст больше поводов доверять компании. У отдела бронирования появилось лицо, точнее, лица, и обращение к звонящим. Соцсети и фидбэк заняли положенное им факультативное место на странице.
А что было бы без юзабилити-аудита?
Никто не узнал бы, что в хостеле на Спортивной есть изразцовая печь, а на Приморской в кухне-гостиной есть эркер. Никто не узнал бы, что в хостеле есть ежедневная уборка, а сломанные приборы меняются по первому требованию. На сайте до сих пор работали бы формы с неверным функционалом, но их некому было бы заполнять: контент с низким уровнем доверия не доводил бы пользователей до форм. Именно поэтому мы внедрили на сайт образец договора и написали, как пристрастно выбирают постояльцев, — чтобы всем было комфортно жить вместе.
В планах доработка, наполнение сайта контентом, добавление отзывов, 3D-туров, видеороликов, фотографий обновленных хостелов. Сайт клиентам по опросам нравится: интуитивный, запоминающийся, вызывает желание заселиться к нам в хостелы. Будем обращаться к разработчикам снова, с дополнительными задачами! Спасибо за сотрудничество!
Екатерина Волхонцева
управляющая «Сетью европейских хостелов Longstay»
Ваш маркетинг может больше. Проверим?
