Nravizza — это сеть пиццерий в городе Челябинск, у которой есть доставка через сайт, а также мобильное приложение. Заказчик обратился ко мне за дизайном приложения, когда был в процессе открытия первой точки.
Задачи
Необходимо было в сжатые сроки сделать дизайн приложения, так как в течении месяца планировалось открытие первой точки. Согласовав CJM, я приступила сразу к разработке дизайна, пропустив этап создания варфреймов.
Таким образом, задачу удалось выполнить за 27 часа в рамках одной недели и отдать приложение в разработку. Правок от разработчиков по визуалу и функционалу не было.
Создание дизайн-системы для удобной работы и дальнейшего проектирования новых функций приложения
Формирование системы с учетом фирменного стиля бренда
Проектирование приложения с учётом ограниченного времени на дизайн и разработку
Выбор адреса доставки
Сразу после захода в приложение, мы спрашиваем у пользователя адрес доставки, он может определиться автоматически, если у человека не включен vpn. Пользователь может выбрать этот адрес или ввести другой вручную.
Этап выбора адреса нужно проходить каждый раз при заходе в приложение. Такое решение продиктовано пожеланием бизнеса, так как в другом проекте регулярно случались ситуации, когда заказ привозили не на тот адрес по вине пользователя. Чтобы минимизировать эту ошибку мы проверяем адрес в начале и повторно перед оплатой.
Если у пользователя уже есть сохраненные ранее адреса, то мы показываем их, также всегда есть возможность удалить или добавить адрес.
Когда вместо «Доставка» выбрано «Самовывоз» отображается список заведений, доступных для самовывоза. Если заведение по каким-то причинам не принимает заказы, то выводится соответствующий статус, а выбор заведения становиться недоступен.
Стартовый экран
Приветствие пользователя (в данном случае — «Привет, Кирилл!») персонализирует интерфейс и делает опыт более интимным и ориентированным на пользователя. В случае, если пользователь не авторизован выводиться надпись «Доброе утро», «Добрый день» или «Добрый вечер» в зависимости от времени суток.
В верхней части интерфейса находится таб для выбора между «Доставка» и «Самовывоз», он является важным элементом интерфейса и должен располагаться на видном месте, сделан в виде привычного Segmented Control из IOS.
Ниже я разместила адрес выбранного заведения по умолчанию, нажав на него можно изменить выбор. Когда заведение закрыто выводится время работы последнего выбранного заведения (так как оно может отличаться у разных ресторанов).
Раздел «Акции» выполнен в стиле историй, по нажатию на баннер открывается модальное окно, где можно посмотреть все акции по порядку. Это важный блок, так как он может повлиять на выбор пользователя заказывать/не заказывать, поэтому располагается в начале экрана.
Фильтры по категориям товаров выполнены в формате табов с горизонтальным скролом, чтобы занимать минимум места. Они помогают пользователю быстро ориентироваться и выбирать категорию, которая ему интересна.
Товары
В карточках товаров акцент сделан на изображениях продукта, они занимают центральное место и показаны крупно, у каждого товара представлено несколько фотографий, для того, чтобы показать продукт с разных сторон. Это важно, так как изображение напрямую влияет на решение о покупке, особенно когда речь идет о еде.
Кнопки «Добавить за 499 ₽» выделяются ярким желтым цветом, что привлекает внимание, цена в кнопке помогает акцентировать на ней внимание. Размер кнопки, цвет и расположение внизу экрана делают ее видимой и легко доступной для нажатия. Элементы управления для изменения количества товара (плюс и минус) расположены рядом с кнопкой добавления, что позволяет удобно и быстро изменять количество товара.
Каждый товар сопровождается описанием состава, если нажать на "i", то можно увидеть тултип с кбжу всего блюда и на 100 грамм.
Комбинированные товары, состоящие из нескольких позиций, можно настроить под себя, выбрав нужный вид пиццы под каждым номером. Для напитков используется таб для выбора объема, при изменении выбора цена в кнопке меняется, как и в случаи с изменением состава комбо.
У некоторых товаров есть возможность изменения состава несколькими способами:
Выбрать одно из исключений «без огурьцов», «без лука», «без помидоров»;
Изменить продукт в составе блюда на другой из этой же категории. Например, вместо сыра Масдаам можно выбрать сыр Фета;
Добавить допы. Например, выбрать дополнительную порцию сыра для пиццы.
Авторизация
При попытке неавторизованного пользователя добавить товар в корзину, приложение будет перекидывать на экран авторизации. Мы не просим пользователя входить в аккаунт сразу при заходе в приложение, а только после того, как он изучил товары и уже хочет оформить заказ. Авторизация на первом шаге может оттолкнуть пользователя от покупки.
Пользователь авторизуется по номеру телефона и коду из sms. Количество sms с кодом ограничено тремя попытками, каждую из которых можно повторить по истечении 30 секунд. Когда все попытки использованы, следующий раз пользователь сможет попробовать войти не ранее, чем через 12 часов. Это сделано для того, чтобы защитится от DDoS-атаки.
Корзина
Оплата наличными
При выборе типа «Оплата наличными» пользователь может выбрать с какой суммы ему потребуется сдача. По требованию бизнеса тип оплаты у заказов свыше 5000 руб. будет автоматически изменен на безналичный расчет, а для пользователя появится соответсвующее уведомление.
При удалении товара из корзины открывается модальное окно с уточнением, действительно ли пользователь желает удалить выбранный товар или нажал по ошибке. Это позволяет избежать варианта того, что поизошел мисклик.
Оплата картой. В случае когда ни одна карта не привязана к аккаунту пользователь может выбрать оплату новой картой. Тогда приложение выводит форму с полями для ввода номера карты, срока действия и CVС-кода.
Это стандартный и привычный интерфейс для таких форм, что делает его удобным для пользователей, знакомых с процессом онлайн-платежей.
Функция сохранения карты для будущих заказов позволяет пользователю ускорить будущие покупки, что является важным улучшением UX для тех, кто часто пользуется приложением.
При выборе уже добавленной карты отображаются последние 4 цифры и логотип платежной системы, что делает процесс выбора карты быстрым и удобным. Пользователи могут просто выбрать карту, которую они использовали ранее, без необходимости вводить данные снова.
Когда пользователь завершает ввод данных карты и нажимает кнопку «Продолжить», появляется экран с ожиданием ответа от банка. Это хорошо информирует пользователя о том, что процесс идет, и он должен немного подождать.
Ожидание транзакции также сопровождается анимированным индикатором загрузки, что улучшает восприятие процесса, поскольку пользователь понимает, что все работает и ничего не зависло.
Статусы заказа
Отображение статусов заказа:
На каждом этапе видно, какой статус у заказа в данный момент (Принят, Готовится, В пути, Доставлен). Этот визуальный прогресс помогает пользователю быть в курсе на каком этапе находится его заказ.
Используется горизонтальная шкала статуса, которая визуально отделяет каждый этап процесса. Это позволяет пользователю не только видеть текущий статус, но и понимать, сколько этапов осталось до завершения.
Каждый статус имеет свою иконку, что помогает быстро и интуитивно воспринимать информацию. Например, иконка доставки с машиной помогает создать визуальные ассоциации с процессом доставки.
Детали о заказе и адресе:
Внизу экрана отображаются детали заказа, такие как адрес доставки, время доставки и стоимость заказа. Это обеспечивает пользователю дополнительную уверенность в правильности данных и актуальности информации.
Когда заказ доставлен, появляется точное время доставки, что дает пользователю четкое понимание, что заказ был выполнен в обещанный срок.
Поддержка пользователя:
На экране присутствует кнопка «Связаться с нами», что позволяет пользователю легко обратиться в случае вопросов или проблем. Эта кнопка всегда доступна и ясно выделена, что важно для обеспечения хорошего UX.
Кнопка отмены заказа отображается только когда заказ находить в статусе «Принят», и дает пользователю контроль над процессом в случае необходимости изменить решение.
Обратная связь и завершение заказа:
После того как заказ доставлен, приложение предлагает пользователю оценить заказ, что является хорошей практикой для сбора обратной связи. Это помогает улучшить качество обслуживания и взаимодействия с клиентами.
Кнопка для оценки заказа выделена ярким желтым цветом, что привлекает внимание и стимулирует пользователя взаимодействовать.
Система уведомлений:
В процессе доставки заказа на экране смартфона активен пуш с краткой информацией о статусе. Это позволяет пользователю не открывать приложение для получения информации и сразу увидеть статус заказа.
Уведомления не только информируют, но и обеспечивают быстрое действие, например, оценить заказ через пуш-уведомление.
Профиль
Простой доступ к личной информации:
Контактные данные. Номер телефона отображается прямо на первом экране профиля и является нередактируемым, здесь отображается тот номер с которого был выполнен вход в приложение.
Кнопка «Связаться с нами» всегда видна и доступна, что важно для обеспечения обратной связи с клиентом. Это особенно полезно для поддержки пользователей в случае возникновения проблем.
История заказов:
В разделе «Заказы» отображается история всех заказов с актуальной информацией о доставке, стоимости и времени. Это позволяет пользователю легко отслеживать свои предыдущие заказы.
В случае, если заказ еще не завершен, отображается информация о его текущем статусе, например, время доставки и место. Это помогает пользователю контролировать процесс выполнения заказа в реальном времени.
У каждого выполненного заказа есть кнопка «Оценить заказ». Это элемент для сбора обратной связи, который позволяет пользователю быстро и удобно оставлять отзывы. При этом предусмотрены звездочки для рейтинга, что облегчает процесс оценки.
Настройки
Редактирование профиля:
В настройках отображается информация о пользователе, включая имя, номер телефона, почту и день рождения. Для каждого элемента предусмотрен отдельный раздел, что позволяет пользователю легко менять данные.
Редактирование дня рождения — пользователь может выбрать день рождения через календарь, что удобно и современно. Также предусмотрено сообщение, информирующее о том, что дату можно выбрать только один раз, что предотвращает возможный обман со стороны пользователя и спекуляцию со скидками на заказ в день рождения.
Календарь для выбора даты:
Для выбора дня рождения используется стандарнтный календарь IOS. Он позволяет пользователю быстро и точно выбрать нужный день.
В процессе выбора даты появляется подтверждающее окно с возможностью отмены и выбора даты. Это предотвращает случайные ошибки и дает пользователю возможность убедиться в правильности выбора.
Заключение
Как UX/UI дизайнер, моя задача заключалась в том, чтобы создать удобный, интуитивно понятный и визуально привлекательный интерфейс для приложения доставки еды. В ходе разработки я стремилась не только к эстетической привлекательности, но и к функциональности, обеспечивая удобство использования на каждом этапе взаимодействия с пользователем.
Интуитивность и простота: Структура интерфейса построена таким образом, чтобы пользователь мог легко ориентироваться в приложении, не тратя время на поиск нужной функции. Основные действия — оформление заказа, выбор способа доставки, оплата — выполнены максимально просто и логично.
Персонализация и вовлеченность: Я акцентировала внимание на персонализации интерфейса, например, через приветствие пользователя по имени и возможность оценить заказ. Это помогает создавать ощущение индивидуального подхода и вовлекает пользователя в процесс.
Визуальная иерархия: Визуальные акценты на ключевых элементах, таких как кнопки для добавления в корзину, заказов и оплаты, помогают пользователю не теряться в интерфейсе. Желтый цвет, как основной акцент, усиливает внимание и способствует легкости восприятия.
Используемые элементы: Календарь для выбора даты рождения или упрощенные формы для ввода данных — это практичные решения для повышения удобства. Все элементы интерфейса минималистичны, что помогает избегать перегрузки пользователя.
Обратная связь и взаимодействие: Пуш-уведомления, возможность быстро связаться с поддержкой, а также наличие обратной связи через оценку заказов усиливают пользовательский опыт и делают взаимодействие с приложением более прозрачным.