fbpx

Портфолио

Показать еще

Дизайна сайта для food сервиса: разработка с нуля

Цели проекта

  • Разработать десктопную и мобильную версии сайта

Задачи проекта

  • Спроектировать удобную структуру сайта
  • Упаковать элементы дизайна в единый стиль

Что мы сделали

Заказчик: стартап сервис по доставке наборов блюд высокой степени готовности в Санкт-Петербурге.

 

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

 

Работа над любым проектом начинается с изучения рынка и конкурентов. 

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

 

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

 

Макет первого экрана

 

Макет первого экрана-2

 

 

Чтобы сделать сайт удобным, мы должны определить, как пользователи будут совершать заказы и на основе этих ванных размещать элементы на сайте.

 

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

 

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

 

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

второй блок сайта

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

 

На 4-ом экране еще раз закрепили суть проекта и плюсы сервиса (вкусные блюда за 15 минут своими руками). 

 

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

 

Окончательно закрываем все вопросы в шестом блоке и конечно добавляем контактные данные и схему проезда. 

 

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

 

Внутренним страницам уделяем особое значение. 

 

Корзина на сайте

 

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

 

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

 

В личном кабинете – история заказов с сортировкой по датам.

 

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

 

Что мы сделали

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

Результаты

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

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

 

Что мы сделали

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

Кнопка вверх

Заявка отправлена