Исправляем приложение по доставке еды

Компания Chibbis занимающаяся доставкой еды, предложила в качестве тестового задания на должность ведущего UI/UX дизайнера найти в их приложении один экран с визуальными ошибками и переделать его.

Исправляем приложение по доставке еды

На мой взгляд просто не возможно обойтись одним экраном, необходимо полностью изменять внешний вид приложения (хоть такой задачи и не возлагают). Потому что оно выглядит как сборник всех шаблонов Material Design, на устройствах Apple ситуация не лучше.

Старт оригинального приложения
Старт оригинального приложения

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

Обновленный вариант стартовых экранов
Обновленный вариант стартовых экранов

Оставим один стартовый экран и сделаем страницу с определением адреса доставки более понятной. Рассмотрим следующие страницы.

Домашняя страница оригинального приложения
Домашняя страница оригинального приложения

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

Обновленный вариант домашней страницы
Обновленный вариант домашней страницы

Начнем с того, что расположим внизу экрана навигационную панель и разместим в ней самые важные взаимодействия. Вставим кнопку «Домой» с выбором ресторанов», отправим в нее «Корзину» (заменив иконку тележки на корзинку). Несомненно «Поиск», и перекочевавший бургер с настройками аккаунта во вкладку «Моё». Текущее местоположение и фильтр разместим сверху экрана. За основу возьмем красный и светло-золотой цвета.

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

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

Страница ресторана оригинального приложения
Страница ресторана оригинального приложения

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

Обновленный вариант страницы ресторана
Обновленный вариант страницы ресторана

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

33
1 комментарий

Оригинал был визуально лучше, хотя согласен с тем, что его стоит обновлять.
Легче всего согласиться с добавлением навигационной панели.
Полный бардак в применении цветов и типографики, из которых новый основной цвет(кремовый) - это самая большая ошибка.

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

4
Ответить