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

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

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

Предыдущая версия сайта

Цели и задачи:

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

— Расширить возможности каталога и свойств блюд;

— Разработать личный кабинет (впервые в истории доставки!). 

Реализация

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

Mindmap будущего сайта

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

Основной референс заказчика

Первый вариант прототипа 

В основе дизайна заказчик хотел видеть night mode (ночной режим). Поэтому практически все прототипы мы выполнили в черном цвете. Но позже клиент отказался от данной идеи, и макеты артдиректор студии разработал в привычной светлой подаче.  

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

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

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

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

Первый вариант прототипа: главная страница

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

В прототипе были отработаны все возможные элементы карточки товара, которые заказчик мог по желанию исключить или оставить. 

Первый вариант прототипа: карточка товара

Второй вариант прототипа

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

Эта концепция была сделана во время поиска идеального баланса первого экрана, но в итоге акцент был утерян. Реализация такого концепта не смогла бы завладеть вниманием пользователя. 

Второй вариант прототипа: главная страница

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

Второй вариант прототипа: карточка товара

Третий вариант прототипа

Особенность третьего варианта — альтернативное расположение меню категорий. Теперь меню располагается сбоку и всегда зафиксировано. Сам первый экран повторяет сжатый вариант второго прототипа с небольшими изменениями. 

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

Третий вариант прототипа: главная страница

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

Третий вариант прототипа: карточка товара

Итоговый вариант прототипа основных страниц сайта

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

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

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

Итоговый вариант прототипа: главная страница

Новая версия карточки товара теперь занимает всю ширину экрана, а часть элементов, таких как БЖУ (белки, жиры, углеводы) и аллергены, скрыто под спойлерами. 

Это решение позволило облегчить карточку товара и акцентировать внимание пользователя на важном.

Итоговый вариант прототипа: карточка товара

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

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

 

Корзина и личный кабинет

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

Предпросмотр корзины

Страница оформления заказа отвечает нуждам клиента и снижает нагрузку на колл-центр. Пользователь может получить здесь всю необходимую информацию. А в паре с расширенным личным кабинетом есть возможность настройки “под себя”.

Оформление заказа

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

Личный кабинет

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

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

Готовы к созданию лучшего в вашей конкурентной нише проекта? Обсудим детали и приступим к работе.
Звоните +7(8552) 474-000 или пишите на info@netkam.ru