Кейс ФудМап

Дизайн сайта
«Foodmap»

«Foodmap» - карта заведений общественного питания, которая помогает выбрать заведение на основе рейтингов и отзывов, оставленных посетителями.

Назначение
сайта:

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

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

Задача

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

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

Решение:

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

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

Главная страница

Мои рестораны

Карта заведений

Каталог заведений
с фильтром

Страница заведения

2 Этап

Визуальные коммуникации

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

Цвета

#fbd00d

#ffdc68

#484848

#ffffff

#e5e5e5

Шрифт

Roboto
Bold / Medium / Regular / Light

H1 - 30 pt

H2 - 24 pt

H3 - 18 pt

Text - 14-16 pt

Этап

Десктопная версия

3

Главная страница

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

Скидки

Скидки

Скидки

Скидки

Страница
карты заведений

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

Список заведений

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

Мои рестораны

Пользователь без всякой авторизации имеет возможность добавлять понравившиеся заведения в избранное - «Мои рестораны». Он может редактировать список своих ресторанов, добавляя новые и удаляя ранее добавленные.

Страница заведения

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

Всплывающие
окна

Другие страницы

Также были разработаны другие внутренние страницы, такие как:
О нас, Для рестораторов, Полезные статьи, страница отдельной статьи,
Пресса о Foodmap, Политика конфиденциальности.

4 Этап

Мобильная версия

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

У вас похожая задача?

Свяжитесь с нами для обсуждения!

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке*