Дизайн и разработка OrderUp — кастомизируемого приложения для заказа еды
Приложение для заказа еды
UX/UI
OrderUp
Что готовим?
Order Up — платформа
для заказа еды
Через платформу пользователи могут заказать еду несколькими способами или
забронировать столик.
Рестораторы
и владельцы отелей
создают в Order Up
страницу своего
заведения
и кастомизируют
сервис под свой бренд.
Так предприниматели получают приложение без затрат
на разработку.
Order Up — платформа
для заказа еды
Через платформу пользователи могут заказать еду несколькими способами или
забронировать столик.
Рестораторы
и владельцы отелей
создают в Order Up
страницу своего
заведения
и кастомизируют
сервис под свой бренд.
Так предприниматели получают приложение без затрат
на разработку.
Заказчики
С нами связались Джон Саади, создатель Order Up, и
Джош Никольсон, технический директор сервиса.
Им нужен был редизайн платформы,
чтобы предпринимателям и их клиентам
было удобно пользоваться сервисом.
Джону и Джошу понравились наши работы на
Dribbble, поэтому они решили обратиться к нам.
Объем работы
Темная тема
Что умеет Orderup
Приложение не нужно скачивать, заказать еду можно через браузер.
Что умеет Orderup
Приложение не нужно скачивать, заказать еду можно через браузер.
QR-код или поиск
Пользователь сканирует QR-код в отеле, ресторане, с рекламного флаера
или попадает на страницу заведения
из поисковика
Локация
и способ получения
Пользователь выбирает локацию,
если ресторанов/отелей в сети несколько
и способ получения еды
доставка до дома
самовывоз
доставка в номер
заказ в ресторане без официанта
бронирование столика
Просматривает меню и добавляет блюда в корзину
Оплачивает заказ и отслеживает его готовность
Получает еду и радуется жизни
Оставили цвета,
но подобралишрифт
Оставили цвета,
но подобралишрифт
У Order Up были фирменные цвета и стиль: белый фон
и насыщенный синий логотип.
Заказчики хотели оставить цвета, чтобы не снизилась узнаваемость бренда.
Poppins
Regular Aa Bb Cc Dd Ee
Semibold Aa Bb Cc Dd Ee
Поэтому мы работали только со шрифтом. Вместо исходного мы взяли Poppins.
Он хорошо сочетается со скругленными элементами интерфейса.
Учитываем все,
когда работаем над проектом
Стараемся учесть все случаи, в которых человек может воспользоваться приложением.
Выходит игра
А что, если
А что, если
я точно знаю, что хочу заказать
жареную рыбу и
не хочу листатьтысячу позиций в меню
Подкатегорий не было, нужно было открывать категорию и смотреть все блюда.
В меню есть категории
и подкатегории.
Человек может быстро выбрать то, что ему нужно.
А что, если
я — веган
или
хочу есть меньше сахара
В меню под позициями
располагались непонятные иконки.
Человек узнавал, что это фильтры, когда открывал кнопку «поиск».
Фильтры собраны на отдельной странице под привычной кнопкой
В меню фильтры понятно подписаны
под каждым блюдом.
А что, если
выбрал неправильное
время заказа
и хочу его поменять
Время и способ доставки были спрятаны в выезжающем меню.
На каждом экране есть выпадающее меню
Чтобы пользователь постоянно видел выбранный способ доставки и время. И мог поменять их в любой момент, а не искать в разных окнах.
Настроили темную тему
под кнопки любого цвета
Что предприниматель
может менять в приложении
Чтобы кастомизировать Order Up под свой бизнес, можно изменить категории и подкатегории, способы получения еды, фильтры, цвета всех элементов.
Светлую тему легко кастомизировать под любой цвет.
Что делать с темной?
Первое правило при работе с темной темой — подобрать цвета элементов так, чтобы они были контрастными
и выделялись на фоне.
Чтобы каждый элемент интерфейса был виден на фоне, мы сделали подложки с разным уровнем прозрачности.
Например, для позиций меню
при просмотре корзины используется подложка с 10% прозрачности.
Чтобы кнопки выделялись на фоне этой подложки, у них — 40%.
У кнопок тоже разная прозрачность.
Самые важные кнопки сделаны в полном цвете, у других цвет приглушен.
Ресторатор может добавить на фон немного цвета,
так все элементы
будут сочетаться
еще лучше.
Например, если цвет ресторана желтый, фон будет с едва различимым желтым оттенком.
Так ресторан может использовать цвета своего бренда
для оформления страницы.
Трудности
с десктопной
версией
Большинство заказов пользователи оформляют через смартфон.
Поэтому мы хотели сделать десктопную версию ближе к мобильной, чтобы
интерфейс был привычным.
Мы сделали меню
в 2 колонки с позициями + корзину. Так карточки легко читать с любого устройства.
Но заказчики настаивали
на 3 колонках
Карточка товара уменьшилась,
на планшете ее было бы не разглядеть.
Угодили и заказчикам,
и пользователям
Сделали на экране
3 колонки с карточками, как хотели заказчики.
Но корзина появляется при клике
на кнопку и сдвигает третью колонку
с карточками вниз.
Заказчики остались довольны —
контент расположен компактно и карточка читаема.
Дизайн готов
Мы передали готовый материал заказчикам.
Джону и Джошу зашли наши решения, и особенно — темная тема, которая может подстраиваться под любой цвет элементов.
Теперь в Order Up проще заказать еду, а сама платформа выделяется на фоне конкурентов.
