WOK & ROLL
WOK & ROLL

Клиент

Wok & Roll - сеть кафе, специализирующаяся на блюдах японской и китайской кухни.

Проблема

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

Контент сайта не передаёт транслируемые Wok & Roll принципы и не доносит ценности для пользователя.

Тем самым, сайт не выделяется на фоне конкурентов, т.к. не транслирует конкурентного преимущества.

Решение

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

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

1. Исследование и анализ

Изучение Wok & Roll и выделение преимуществ.

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

Анализ целевой аудитории и составление портрета пользователя.

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

Лиза, студентка

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

Лена, следит за питанием

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

Виктор, холостяк

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

Бенчмаркинг - анализ конкурентов.

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

2. Прототипирование

Схема сайта

Схема или карта сайта необходима для обозначения объёма работы, чтобы не упустить никакие структурные и логические элементы / страницы.

Прототипы

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

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

3. Дизайн

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

Визуальная концепция

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

Шрифт, акцентные цвета, округлые формы, и стилистические элементы были вдохновлены логотипом кафе.

Шрифты и цвета

Rounded Mplus 1c — акцентный шрифт для заголовков, мягкие округлые формы напоминают логотип, также в целом, подходят для тематики роллов и семейных кафе.

Ubuntu

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

Чистый дизайн с белым фоном и ярким оранжевым, акцентный градиент.

Дизайн

В шапке сайта только самые важные элементы: выбор города (определяется автоматически по геоположению), телефон бесплатной доставки, корзина, личный кабинет, и “бургер”, который открывает дополнительное меню.

Таким образом внимание пользователя не распыляется на второстепенные ссылки.

Для удобства пользователей на странице каждой категории представлена возможность сортировки и фильтрации блюд. Фильтр разделен по 2м параметрам: “содержит” и “не содержит”, так, клиент может выбрать только суши со своим любимым ингредиентом или исключить некоторые, например, по причине аллергии.

Стандартная карточка товара включает название блюда, стоимость, цену, описание / содержание. Раскрытая карточка товара также содержит таблицу с КБЖУ в расчёте на 100 грамм и на порцию.

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

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

Также для пользователя представления история заказов, повторение которых возможно в один клик.

Заказ на сайте проходит в 4 этапа:

1. Уточнение заказ — показаны элементы в корзине, бесплатные товары к заказу и также “Рекомендуем попробовать”, здесь клиент может добавить ещё несколько элементов, обычно в этом разделе хиты продаж.

2. Оформление заказа: доставка / самовывоз. Если клиент вошёл в кабинет, срабатывает автозаполнение данных, где нужно выбрать лишь способ оплаты.

3. Подтверждение введенной информации.

4. Оплата заказа (если был выбран метод оплаты online)