Редизайн страницы заведения на Restoclub

Как мы обновили дизайна страницы заведения и увеличили ее конверсию на 7%

Обзор проекта

Продукт

Restoclub — cамый популярный поисковик по ресторанам Москвы и Петербурга. Ежемесячно сервисом пользуются около 2 миллионов человек, совершающих более 250 тысяч бронирований.

Рестораторы хотят, чтобы их заведение выделялось среди множества других. Они нацелены на предоставление пользователям полной и актуальной информации о заведении, предстоящих мероприятиях, акциях и специальных предложениях. Посетители, в свою очередь, стремятся расширить свой кулинарный опыт, быть частью сообщества и обмениваться впечатлениями.

Страница заведения — продукт, который помогает гостям и заведениям находить друг друга онлайн всего за пару кликов и соединяет их в реальной жизни.

Зачем делать редизайн

Пандемия показала, что люди соскучились по социальным активностям, вкусной еде, приятной атмосфере и качественному обслуживанию. Посещение ресторанов стало символом возвращения к привычным удовольствиям, заботе о себе и открытию новых вкусов и эмоций.

Restoclub, как ведущая онлайн-площадка о ресторанах в России, стремится соответствовать новым требованиям и ожиданиям пользователей, предлагая высококлассный и актуальный опыт, а также поддерживая местный ресторанный бизнес.

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

Почему начали со страницы заведения

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

• Mobile First: С учетом того, что около 85% пользователей заходят на сайт с мобильных устройств, редизайн сфокусирован на мобильной версии сайта.

• Актуализация дизайна: Современный и свежий внешний вид привлекает пользователей и соответствует современным веб-трендам. А эмоциональный дизайн играет ключевую роль в создании положительного пользовательского опыта.

• Улучшение навигации: Редизайн улучшит структуру и навигацию, помогая пользователям быстрее находить интересующую информацию о меню, мероприятиях и акциях, что усилит взаимодействие с заведением.

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

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

Если страница продемонстрирует рост метрик, следующим шагом будет редизайн остальных страниц сайта.

Проблема для пользователей

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

Это указывает на то, что у пользователей существует некоторое недоверие к сайтам-агрегаторам, и они предпочитают взаимодействовать с заведениями напрямую, либо они не осведомлены о возможности онлайн-бронирования или прямой связи с заведением. Поскольку пользователю важно видеть, что заведение ориентировано именно на него и отражает его интересы, в большей степени его привлекает атмосфера заведения, впечатления от пребывания в нем, а также насколько оно соответствует его ожиданиям и запросам. По всей видимости, люди стремятся не просто купить продукт, а приобрести мечту и эмоции от этого опыта.

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

Проблема для бизнеса

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

Аудитория

Аудитория сайта обширна и разнообразна, однако наше внимание сосредоточено на активных представителях всех возрастных групп. Страницы заведений привлекают значительное внимание посетителей сайта, составляя существенную долю общего числа пользователей. С учетом предстоящего расширения географии городов, в которых представлен Restoclub, ожидается ежемесячный поток в 2 000 000 пользователей, что придает проекту внушительный масштаб!

Критерий успеха

Критерием успеха будет увеличение CTR новой страницы по сравнению с CTR старой. Отслеживаем количество звонков, построений маршрутов, оставленных заявок и бронирований.

На бесплатных страницах будем замерять:

1. Переходы в поиск
2. Переходы в рубрики
3. Переходы на платные страницы

Поиск идей

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

Информационная архитектура

Хорошо спроектированная информационная архитектура для сайта играет важную роль в создании позитивного пользовательского опыта, повышении видимости сайта в поисковых системах (SEO), улучшении управления контентом и достижении бизнес-целей. Анализ карты сайта поможет выявить взаимосвязи между различными разделами страницы, а также обнаружить проблемы с навигацией и пользовательским опытом.

User flow

Для более глубокого понимания взаимодействия пользователей с сайтом, я разработала User flow страницы заведения, охватывающий путь от первичного посещения страницы до достижения конечной цели (бронирование, звонок в заведение, оставление заявки, построение маршрута). Этот анализ помог выявить как сильные, так и слабые стороны пользовательского опыта, что в свою очередь позволит оптимизировать сайт для улучшения взаимодействия с ним.

Проанализаровав User Flow и информационную архитектуру, мы определили, какие пути на сайте наиболее популярны у пользователей и какие разделы страницы являются ключевыми точками на пути к цели.

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

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

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

Интервью

Наш продакт-менеджер провела серию интервью с пользователями, в ходе которых выяснила, с какими запросами пользователи попадают на страницы заведений, какую информацию ищут, какие у них ожидания и с какими проблемами они сталкиваются.

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

Для повышения лояльности нам следует разработать дизайн, который подчеркнет уникальную атмосферу каждого заведения и четко продемонстрирует, что страница обладает персонализированным контентом, регулярно обновляемым. Представители заведения, ответственные за поддержание актуальности и достоверности информации, должны быть видны и доступны для пользователей. Нам необходимо показать, что установить контакт с заведением легко и удобно.

Пользователи хотят связаться с заведениями по разным причинам:

• Бронирование столика
• Подбор меню и аренда залов для мероприятий
• Задать вопрос или обсудить условия
• Предложение услуг
• Поиск работы
• Обратная связь в отзывах

Анализ текущего решения

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

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

Анализ похожих продуктов

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

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

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

Чат в мессенджере, вместо текстовых форм, повышает уровень вовлеченности, предоставляя интерактивное общение, доступное пользователям в любое время суток, и обеспечивает мгновенную обратную связь. Кроме того, чат имеет большие перспективы развития как отдельный продукт.

Кабинетное исследование

В компании Intercom, разрабатывающей коммуникационную платформу, считают, что мессенджеры представляют будущее взаимодействия бизнеса с клиентами. В ближайшие годы большинство интернет-компаний заменит формы обратной связи, адреса электронной почты и номера телефонов на мессенджеры, интегрируя их на своих сайтах и в приложениях. Преимущества быстрого, личного и прямого канала связи между клиентами и предприятиями значительно превосходят старые способы общения.

У сегодняшнего малого бизнеса гораздо больше клиентов, чем у малого бизнеса вчерашнего дня. Компании ищут новые технологии, такие как боты и автоматизация, которые помогут им справиться с новым масштабом.

Поскольку за последние два десятилетия Интернет проник во все слои общества, технологии в значительной степени служили преградой для эффективного взаимодействия между людьми и бизнесом. Компании прятались за технологиями, чтобы избежать этого масштаба, потому что у них не было ничего лучше, чем электронные письма, на которые не требуется отвечать, или превращение клиентов в номера тикетов. Но ситуация меняется. Компаниям пора выйти и поговорить, быть прозрачными, быть честными, возвращаясь к традиции использования имен и лиц в процессе общения, как это было прежде.

Результат исследований

После этапа ресерча у нас с продакт-менеджером появилось множество идей по улучшению страницы заведения. Я составила список идей и нарисовала их черновой дизайн для удобства последующей приоритизации и оценки.

Продакт-менеджер набросала макет страницы в Тильде, чтобы протестировать идеи без привлечения разработчиков. Тестовая страница показала хорошие результаты: увеличился CTR страницы, время на странице и глубина скролла.

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

Таким образом, у продуктовой команды появилась путеводная звезда и понимание, к чему мы стремимся. Успешные гипотезы были включены в MLP версию продукта.

Хотите найти идеи для улучшения вашего продукта? Напишите мне.

Cоздание MLP версии

Далее приведены все гипотезы, которые были воплощены в Hi-Fi дизайне. Первая итерация представляет то, что было реализовано.

Hi-Fi дизайн

Примерный объем дизайна MLP мобильного сайта в фигме.

Итерация 1

Новая галерея и загрузка видео

Проблема: Ранее в дизайне галереи преобладала горизонтальная ориентация, она занимала лишь небольшую часть экрана и поддерживала только статичные изображения. Большинство партнеров редко обновляли галерею, наполняя ее стереотипными интерьерными фотографиями – пустыми залами и столами с различных ракурсов. Такие страницы не вдохновляли посетителей на дальнейшее взаимодействие.

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

Решение: Теперь партнеры могут легко загружать в галерею вертикальные видео, такие как сторис, шортс и тик-токи, прямо со своих смартфонов. Даже при свернутой странице видео будет продолжать загружаться в фоновом режиме.

Основная задача новой галереи – передавать атмосферу заведения, эмоционально вовлекая пользователя. Теперь галерею можно использовать для размещения отзывов гостей, видеотуров, знакомства с меню, командой, а также приглашения на мероприятия от лица шеф-повара и многих других интересных возможностей.

Итерация 1. В мобильной версии сайта галерея занимает половину первого экрана. Если потянуть шторку вниз, галерея откроется на весь экран. Контент автоматически перелистывается или прокручивается свайпом. Также в галерее отображаются фотографии, загруженные партнерами через личный кабинет. При перелистывании фотографий они зумятся.

Онлайн-бронь

Проблемы:

• Пользователи не хотели звонить или заполнять формы для бронирования.
• Обратная связь от заведения не всегда поступала своевременно после заполнения формы.
• Пользователи не замечали кнопки онлайн-бронирования или звонка.

Гипотеза: Если мы сделаем процесс онлайн-бронирования более удобным, а обратную связь более оперативной, то это приведет к увеличению числа броней и заявок со страницы заведения.

Решение:

• Мы заменили скучные формы на чат, который позволяет сделать бронь столика, задать вопрос или оставить заявку в течение минуты, без необходимости звонка в заведение.
• Заявки мгновенно поступают в заведение, и сотрудники быстро связываются с гостем для подтверждения бронирования или уточнения деталей. Даже если заведение временно недоступно, чат-бот уточнит все необходимые моменты.
• Улучшили видимость кнопок онлайн-бронирования и звонка, делая их более контрастными. Теперь возможность онлайн-бронирования доступна на первом экране, в таббаре, в блоке с представителем заведения, а также во всех разделах страницы.

Мессенджер и чат-бот

Сначала мы адаптировали существующие формы обратной связи под новый дизайн. Однако вскоре поняли, что формы устарели как инструмент сбора заявок. Современные пользователи предпочитают чаты в мессенджерах, активно используя их как в повседневной жизни, так и в деловых коммуникациях.

В связи с этим мы приняли решение не отставать от трендов и преобразовали формы в чат. Так, на сайте появился собственный мессенджер с встроенным чат-ботом, облегчающим взаимодействие пользователей с заведениями. Вот несколько ключевых особенностей работы чата:

• Всегда онлайн: пользователи могут оставлять заявки в удобное для них время. Чат-бот взаимодействует с пользователями в режиме реального времени.
• Экономит время: никаких ожиданий на линии, никаких заполнений длительных форм – всего лишь быстрые и эффективные действия в чате.
• Виджет для вовлечения: если пользователь долго находится на странице заведения, появляется виджет, приглашающий перейти в чат для бронирования.
• Персонализация: чат учитывает данные зарегистрированных пользователей, помня их имя и номер телефона.
• Синхронизация с мессенджерами: чат интегрирован с Telegram и WhatsApp, обеспечивая заведениям удобный канал для получения заявок.
• Привлечение через ссылку: Заведение может разместить ссылку на чат на своем сайте или в социальных сетях, упрощая посетителям процесс бронирования через Restoclub.

Примерный объем дизайна чата в фигме.

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

Обновленные предложения

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

Проблема: Ранее оставить заявку на мероприятие можно было только на отдельной странице с подробностями предложения, где размещались несколько кнопок, ведущих на разные формы обратной связи. Пользователям приходилось читать всю страницу, чтобы найти нужную информацию и оставить заявку, что было неудобно и занимало много времени. Кроме того, карточки предложений на странице заведения занимали много места, но предоставляли недостаточно информации и оказывались непривлекательными.

Гипотеза: Если мы сделаем карточки предложений более информативными, привлекательными и легкодоступными для оставления заявок, это может повлиять на CTR страницы.

Решение: На странице появился раздел «Чем заняться», где карточки предложений теперь представлены компактно с фотографиями и основной информацией. Текст описания легко настраивается в личном кабинете ресторатора. Теперь партнеры могут выделить наиболее важные предложения, прикрепить к ним акцию, событие или новость.

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

Теперь пользователь может оставить заявку на мероприятие, нажав CTA в карточке предложения. После этого он сразу попадает в онлайн-чат, чтобы уточнить дату, меню, цены или связаться с представителем заведения.

Для привлечения внимания посетителей из рубрики к конкретному предложению и одновременного предоставления информации о других предложениях заведения, мы внедрили карусель из карточек. Пользователи могут свайпать их вбок, либо переключаться с использованием фильтра. Возможно, это решение не является самым изящным, но мы выбрали его, поскольку отображение карточек плиткой было невозможно из-за большого количества предложений заведения, а отдельной страницы, где были бы собраны все предложения заведения, не существует. Доработки решения будут внесены после проведения тестов.

Раздел «Залы»

Проблема: Ранее для получения информации о залах заведения и бронирования подходящего для мероприятия зала необходимо было оставить заявку через специальную форму на странице предложения.

Гипотеза: Если мы добавим информацию о залах на страницу заведения, это может повлиять на бронирование залов и, следовательно, на CTR страницы.

Решение: На страницу заведения был добавлен раздел «Залы», где размещены карточки залов в том же стиле, что и карточки предложений выше: с фотогалереей и информацией о зале.

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

Теперь забронировать зал можно, нажав на CTA в карточке зала. Онлайн-чат сделал процесс бронирования зала более удобным и быстрым.

Раздел «Отзывы»

Проблема: Ранее, чтобы просмотреть отзывы, приходилось долго прокручивать страницу до самого низа, отзывы не сортировались, и можно было загружать только фотографии. Процесс добавления нового отзыва был долгим и скучным.

Гипотеза: Если мы сделаем раздел с отзывами более полезным и привлекательным, это повлияет на уровень доверия к заведению и, следовательно, на CTR страницы, так как положительные впечатления других гостей мотивируют взаимодействовать с заведением.

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

Отзывы обзавелись счетчиком просмотров и лайков, а фотографии пользователей рядом с лайками служат социальным доказательством и указывают на полезность отзыва. Добавлены фильтры для отображения хороших/полезных отзывов и галерея с контентом от гостей. Все это призвано придать отзывам жизни и призывать с ними взаимодействовать.

Самое прекрасное — сейчас можно сразу позвонить в заведение или забронировать онлайн прямо со страницы отзывов.

Оставить отзыв стало легче и веселее: вместо сложных оценок — шкала с реакциями; можно похвалить кухню, интерьер или обслуживание, а в будущем появятся дополнительные особенности, чтобы подбирать гостям заведения под их интересы; к отзыву можно добавить видео; черновик отзыва сохраняется в случае возникновения неполадок.

Раздел «Меню»

Проблема: Посетители сайта хотят ознакомиться с меню до посещения заведения, чтобы понять, насколько оно соответствует их предпочтениям и узнать ассортимент блюд и цены. Ранее раздел с меню, также как и раздел с предложениями заведения, занимал много места, но представленный контент был малоинформативным.

Гипотеза: Если мы сделаем раздел с меню более полезным и привлекательным, это может повлиять на CTR страницы.

Решение: Сначала фотографии в разделе меню были приведены к единому стилю, аналогичному другим разделам страницы. Теперь для всех фотографий, загружаемых на страницу, установлены одинаковые требования, что упрощает партнерам обновление контента и делает его более консистентным. Раздел стал более компактным и информативным: меню представлено в виде фотографий и списка блюд. Также можно загрузить файл (например, в формате PDF), поскольку некоторые пользователи просматривают меню на смартфоне, уже находясь в заведении. Блюда отсортированы по типам, при этом новые, популярные и рекомендуемые блюда отображаются в начале списка.

Для удобства пользователей теперь можно сразу позвонить в заведение или забронировать онлайн со страницы меню и блюда.

Раздел «Что интересного»

Проблема: Посетители сайта интересуются событиями, новостями и акциями заведений. Ранее для доступа к разделу с событиями требовалось долго скроллить, события отображались в порядке добавления.

Гипотеза: Если мы сделаем раздел с событиями более информативным и привлекательным, это может повлиять на CTR страницы.

Решение: На странице появился раздел «‎Что интересного», где компактно собраны события, акции и новости заведения с основной информацией и фотографиями (в будущем можно будет добавить видео). Теперь партнеры могут закреплять наиболее важные события. Фотографии в разделе были также приведены к единому стилю.

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

Разделы «Наша команда» и «Вакансии»

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

Гипотеза: Если партнеры смогут размещать информацию о своей команде, это повлияет на уровень доверия к заведению и, следовательно, на CTR страницы, так как для посетителей хороший персонал является важным критерием выбора заведения. Благодаря большому охвату, партнерам будет легче находить поставщиков и персонал из числа специалистов HoReCa, посещающих сайт.

Решение: Мы добавили на страницу раздел с представителями заведения, с которыми можно связаться по вопросам работы через личные сообщения.

Для тех, кто ищет работу в сфере HoReCa, создан отдельный раздел, где партнеры могут размещать открытые вакансии в своем заведении. У пользователей уже имелась возможность создания резюме в профиле, поэтому любой желающий может откликнуться на интересующую вакансию, приложив готовое резюме или позвонив прямо со страницы.

Бесплатная страница

Проблема: Бесплатные страницы, предоставляющие ограниченный функционал, не выделяются, не продвигаются и не подключены к сервису бронирования, поскольку Restoclub не предоставляет рекламные услуги для них. Однако такие страницы привлекают множество посетителей из поисковиков.

Гипотеза: Если на бесплатных страницах появится рекомендуемый контент от партнерских заведений, это поможет превратить посетителей бесплатных страниц в гостей для партнеров.

Решение: На бесплатных страницах были добавлены несколько рекомендательных разделов с контентом от партнеров:

• Плашка «Где еще весело» направляет пользователей в рубрику «Интересные и необычные рестораны».
• Персонализированная подборка рекомендует заведения на основе интересов пользователей.
• «Вкусное рядом» представляет меню от партнерских заведений, находящихся поблизости.
• «События рядом» информирует о мероприятиях, проходящих в партнерских заведениях рядом.
• «Специально для вас» — подборка заведений со схожей кухней или другими особенностями.

Навигация по мобильному сайту

Таббар пользователя
Теперь профиль пользователя и избранное доступны в нижней навигационной панели. Находясь на странице заведения, пользователь может забронировать его с помощью кнопки «Онлайн-бронь» в таббаре.

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

Таббар ресторатора
Представители заведения являются PRO-пользователями и могут управлять страницей через таббар ресторатора. В таббаре предоставлена статистика страницы, а также функция добавления видео со смартфона в галерею на первом экране. В будущем можно расширить возможности таббара для добавления других типов контента. Из профиля пользователя также можно легко перейти в личный кабинет ресторатора, где доступно полное управление контентом страницы.

Навигационное меню
Для быстрого перехода в другие разделы сайта используется навигационное меню.

Адаптивный дизайн

Многим партнерам удобнее взаимодействовать с десктопной версией сайта, поэтому я подготовила адаптивы. Основная задача заключалась в обеспечении консистентности дизайна и бесшовного перехода между различными версиями сайта. Таким образом, версия сайта для ПК и планшетов имеет практически идентичную структуру и презентацию, за исключением нескольких элементов:

• Изменено отображение галереи на первом экране.
• В десктопной версии пока что отсутствует возможность загрузки видео в галерею.
• Галерея раскрывается, позволяя рассмотреть каждое изображение в реальном размере.
• При нажатии на номера телефонов они копируются вместо осуществления звонка.
• Онлайн-чат размещен в правом нижнем углу.

Примерный объем дизайна MLP десктопного сайта в фигме.

Итерация 2 · не выполнена

Ко второй итерации мы приступим после запуска продукта и получения результатов тестирования.

Новая галерея

Итерация 2. В галерее будут добавлены разделы, позволяющие просматривать контент в оригинальном размере. В десктопной версии сайта такая функциональность уже доступна.

Обновленные предложения

Итерация 2: В первой версии мессенджера для каждого запроса открывается отдельный чат. В последующих итерациях планируется внедрение возможности собирать заявки сразу по нескольким запросам в рамках одного чата. Не исключено, что в ближайшем будущем чат-бот сможет отвечать на часто задаваемые вопросы о заведении и предоставлять пользователям персонализированные рекомендации с использованием встроенного искусственного интеллекта. Кроме того, на первом страницы можно разместить онлайн-чат, связанный с предложением, позволяющий оставлять разные запросы в одном месте.

Первый запуск и результаты

Как только мы зарелизились, запустили A/B тестирование. И вот какие средние результаты мы получили:

• Конверсия в бронь увеличилась на 3,4%
• Конверсия в маршрут до заведения выросла на 4%
• Конверсия в заявку увеличилась на 5%
• Конверсия в звонок выросла на 7%

На данный момент новый дизайн уже доступен для всех платных клиентов и находится в стадии всестороннего улучшения. После успешного запуска редизайна, проект был масштабирован, и теперь Restoclub доступен еще в 11 городах, что привело к увеличению количества платных клиентов.

Ui-kit

В процессе работы над Hi-Fi дизайном я приступила к разработке Ui-kit. Это было необходимо прежде всего для освежения дизайна сайта, а также для обеспечения единообразия и последовательности в пользовательском интерфейсе. Моя цель заключалась в создании структурированной и интуитивно понятной системы, которая обеспечила бы удобство использования и масштабируемость в будущем.

Мы разработали Tone of Voice бренда, чтобы сформировать уникальный и узнаваемый стиль коммуникации на сайте. Особое внимание уделялось языку интерфейса, который соответствует общей атмосфере и ценностям бренда, придавая интерфейсу индивидуальность и эмоциональность.

Весь этот материал был систематизирован и представлен в стайлгайде, охватывающем определение цветовой палитры, типографики, логотипа, иконок, карточек и других компонентов интерфейса, их взаимосвязь и поведение. Кроме того, я разработала рекомендации для оформления контента, чтобы наши партнеры могли ознакомиться с новыми стандартами и качественно оформлять свои страницы на сайте.

Здесь представлена основная часть Ui-kit для мобильно версии сайта.

Моя роль

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

• Составление понимания задачи
• Проведение дисковери (экспертная оценка текущего решения, конкурентный анализ, кабинетные исследования, работа с обратной связью от пользователей)
• Формирование гипотез в сотрудничестве с продакт-менеджером
• Lo-Fi проектирование
• Приоритизация гипотез, их оценка и разбиение на итерации в сотрудничестве с продакт-менеджером и разработчиками
• Разработка Hi-Fi дизайна, edge-кейсов, анимаций и прототипов
• Разработка адаптивного дизайна
• Создание ui-kit и арт-дирекшн продукта
• Сотрудничество с QA инженером при тестировании
• Проведение дизайн-ревью перед релизом
• Развитие продукта после запуска первой итерации

Уроки, которые я вынесла

Большому продукту — больше итераций

Мы стремились к тому, чтобы новый продукт не уступал по содержанию предыдущей версии, поэтому в конечный релиз включили как старые, так и новые фичи. Однако функционал часто требовал доработки со стороны разработчиков, что приводило к сдвигу сроков релиза и увеличению его объема.

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

Устаревание дизайна

Глубокое проектирование второй итерации не имеет смысла, поскольку к моменту, когда разработка будет готова для внедрения нового дизайна, он может уже устареть. Для описания гипотезы достаточно создать всего 1-2 черновых макета. На начальном этапе я потратила много времени на разрисовывание гипотез для последующих итераций, но к моменту передачи в разработку приходилось переделывать функционал, упрощать или даже вовсе от чего-то отказываться из-за появления новых данных. Вместо проектирования далекого будущего, лучше использовать это время на разработку edge-кейсов для текущей итерации.

Принятие решений

Интерфейс должен быть спроектирован на основе данных, полученных с помощью аналитики и обратной связи от пользователей. Нельзя принимать решения на основе чьего-то личного мнения, видения или симпатий. Мнения могут изменяться, а факты остаются неизменными. Дизайн, который вам нравится, но решает несуществующую проблему, обречен на провал.Вам может не нравиться дизайн, но если он эффективно решает реальные проблемы, он будет успешен.

Что дальше?

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

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

Вертикальное развитие продукта

1. Повышение конверсии страницы
2. Увеличение open rate для контента в галереи, меню, событий, предложений и отзывов
3. Рост engagement rate страницы
4. Увеличение конверсии в отправку отзывов
5. Повышение конверсии добавление заведений в избранное
6. Увеличение retention rate страницы

Горизонтальное развитие продукта

1. Масштабирование нового дизайна на весь сайт
2. Работа с переходами из рубрик и бесплатных страниц
3. Персонализация
4. Развитие онлайн-бронирования и чат-бота

А я отправляюсь учиться дальше, зная, что продукту предстоит долгий путь развития.