Кейс: mobile first сайт доставки еды и инструкция, как развести клиента на мороженое

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

— Все этапы разработки проекта: от брендинга до сайта

— Почему был выбран подход Mobile First

— Особенности дизайна под мобильные

— Отзыв клиента и выводы

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

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

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

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

Заказать вкусную еду или рассмотреть проект вы можете тут: getobed.ru

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

Поэтому мы убедили клиента о важности применения именно этого подхода и объяснили все плюсы. Обсудив все условия и мелочи на берегу, приступили к проекту.

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

1/ Создать грубые и толстые буквы, но при этом придать им лёгкости с помощью плавности;

2/ Использовать 2-3 контрастных цвета вместе;

3/ Интегрировать знак в лого, а не выделять ему место сбоку

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

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

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

Оставив буквы более серьезными в сочетании с яркими фирменными ложкой и вилкой, у нас родился драфт, который и был взят в работу как основная версия. Клиент провел опрос среди знакомых и коллег, но мнения разделились 50/50, поэтому мнение клиента было финальным и оставили вариант со строгим написанием букв.

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

Немного слайдов из брендбука:

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

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

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

Изначально мы думали добавить тапбар как удобный инструмент для пользователя. Но в процессе проектирования заменили его на большую кнопку — в корзину.

Обратим ваше внимание на оформление заказа. Из корзины пользователь сразу попадает в оформление, при этом мы максимально сократили количество шагов до заказа вкусного обеда. Когда пользователей просят заполнить слишком много данных, очень часто они уходят с ресурса — хотят получить услугу максимально быстро.

Особенно, когда пользователи голодные =)

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

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

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

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

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

Всего для лучшего отображения на устройствах мы разработали дизайн для 4х базовых разрешений: 320px, 768px, 1440px, 1920px.

Клиент написал нам душевный отзыв, как и наш подход к проекту:

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

Заказать вкусную еду или рассмотреть проект вы можете тут: getobed.ru

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

Всегда готовы ответить на ваши вопросы в телеграм @anfalovaart