Wok & Roll - сеть кафе, специализирующаяся на блюдах японской и китайской кухни.
Старый дизайн сайта не соответсвует визуальной айдентике бренда и не отвечает современным трендам.
Контент сайта не передаёт транслируемые Wok & Roll принципы и не доносит ценности для пользователя.
Тем самым, сайт не выделяется на фоне конкурентов, т.к. не транслирует конкурентного преимущества.
Провести исследование бренда и анализ конкурентов чтобы выделить общепринятые нормы в сфере и оределить точки дифференциации.
Взять за основу визуальной стилистики существующее приложение бренда. Перевести пользовательский опыт и паттерны взаимодействия с приложения на сайт.
Позиционируя себя в среднем ценовом сегменте, Wok & Roll делает упор на построение долгосрочных отношений с клиентами, основа которых - честность, гостеприимство, и высокие стандарты качества. Сеть кафе гордится своими суши мастерами, и ставит во главу угла соблюдение стандартов качества, особенно использование свежих и натуральных ингредиентов.
Для лучшего понимания задачи были составлены портреты пользователей, чтобы выделить основные цели и сценарии взаимодействия с сайтом.
Иногда заказывает суши с подружками, из-за ограниченного бюджета ищут лучшие предложения. Как правило, выбирает сеты, обращает внимание на соотнешение цены и веса набора.
Лена соблюдает диету и любит суши, как традиционные, так и необычные вкусы, но при этом для нее важно, чтобы заказ вписывался в ее норму калорий.
Владимир много работает и времени на готовку у него нет, предпочитает заказывать еду и не тратить на это много времени.
Wok & Roll конкурирует только на локальных рынках, где расположены их кафе, т.е. г. Владимир, г. Муром и п. Боголюбово. Поэтому бенчмаркинг проводился тех компаний, которые конкурируют на том же рынке. В результате было решено отойти от стандартного решения представления всего меню на главной странице в пользу рассказа о преимуществах и принципах кафе, что позволет вызвать доверие посетителей. Шапку сайта упростить и вынести навигацию в отдельное окно, чтобы не перегружать главную страницу.
Схема или карта сайта необходима для обозначения объёма работы, чтобы не упустить никакие структурные и логические элементы / страницы.
Данный этап необходим для проработки структурных элементов страниц, взаимодействия и смыслов. Поэтому прототипы составляются с текстами, но без графических элементов, отвлекающих внимание.
В связи с тем, что у Wok & Roll есть мобильное приложение, которым пользуется их целевая аудитория, было принято решения перенести основные паттерны взаимодействия на сайт, чтобы не заставлять пользователей адаптироваться под новую платформу.
В зависимости от проекта, может подготавливаться до 3х версий визуального концепта на выбор клиента.
Визуально сайт должен полностью отражать бренд, так у пользователя будут создаваться правильные ассоциации и эмоции. Поэтому было решено использовать стилистические элементы и цвета приложения Wok & Roll.
Шрифт, акцентные цвета, округлые формы, и стилистические элементы были вдохновлены логотипом кафе.
Rounded Mplus 1c — акцентный шрифт для заголовков, мягкие округлые формы напоминают логотип, также в целом, подходят для тематики роллов и семейных кафе.
Ubuntu был использован как наборный шрифт, т.к. он схож по геометрии с акцентным, легко читается и аккуратно смотрится.
Чистый дизайн с белым фоном и ярким оранжевым, акцентный градиент.
В шапке сайта только самые важные элементы: выбор города (определяется автоматически по геоположению), телефон бесплатной доставки, корзина, личный кабинет, и “бургер”, который открывает дополнительное меню.
Таким образом внимание пользователя не распыляется на второстепенные ссылки.
Для удобства пользователей на странице каждой категории представлена возможность сортировки и фильтрации блюд. Фильтр разделен по 2м параметрам: “содержит” и “не содержит”, так, клиент может выбрать только суши со своим любимым ингредиентом или исключить некоторые, например, по причине аллергии.
Стандартная карточка товара включает название блюда, стоимость, цену, описание / содержание. Раскрытая карточка товара также содержит таблицу с КБЖУ в расчёте на 100 грамм и на порцию.
Некоторые товары нуждаются в персонализации, т.е. пользователям предлагается выбор некоторых ингредиентов.
В личном кабинете хранится вся личная информация клиента которой он может управлять: изменить личные данные, удалить / добавить адрес или банковскую карту.
Также для пользователя представления история заказов, повторение которых возможно в один клик.
Заказ на сайте проходит в 4 этапа:
1. Уточнение заказ — показаны элементы в корзине, бесплатные товары к заказу и также “Рекомендуем попробовать”, здесь клиент может добавить ещё несколько элементов, обычно в этом разделе хиты продаж.
2. Оформление заказа: доставка / самовывоз. Если клиент вошёл в кабинет, срабатывает автозаполнение данных, где нужно выбрать лишь способ оплаты.
3. Подтверждение введенной информации.
4. Оплата заказа (если был выбран метод оплаты online)