UX/UI мобильного приложения для сети Украинских ресторанов

UX/UI дизайн приложения для сети ресторанов

Исследования

Работа над проектом началась с исследований.

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

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

 

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

Цели проекта

Основные цели были выделены после интервью с владельцем бизнеса и анкетирования. Представлены в презентации ниже.

Пользователи

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

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

Создание персонажа помогло увидеть продукт их глазами.

Информационная архитектура

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

Варфреймы

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

Для визуализации как клиент взаимодействует с продукт был составлен CJM. Таблица отображена в презентации. С помощью нее появилась возможность примерно увидеть эмоции пользователя. И проследить, как клиент пользуется продуктом и какова вероятность, что он сможет решить свои проблемы.

Цвет и Типографика

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

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

Экраны

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

Основным цветом выделены интерактивные элементы, например кнопки, переключатели. 

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

 

Главный экран приложение - это меню. Где можно найти фильтр, сортировку, строку поиска, разделы меню по категориям, популярные блюда и актуальные скидки от сети ресторанов.

На странице блюда указана вся необходимая информация для клиента о составе, КБЖУ, весе и цене, а также времени приготовления. Здесь же можно добавить блюдо в избранное, поставить ему оценку.

 

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

 

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

Презентация проекта