Клиент хотел улучшить действующее веб-приложение
Ресторан Панам Пицца работает больше десяти лет и пользуется популярностью в своем родном городе. У них есть фишки, которые нравятся гостям: например, можно собрать кастомную пиццу из двух половинок, добавить или убрать ингредиенты по вкусу.
Чтобы клиентам было еще удобнее заказывать любимые блюда, Панам Пицца запустили веб-приложение для доставки. Стремились выделиться на фоне других подобных сервисов, и потому внимательно следили за трендами и собирали фидбек от пользователей — те часто подсказывали, что можно улучшить.
Со временем идей по доработкам накопилось столько, что поняли: пора в редизайн.
Решили обратиться к опытной команде дизайнеров, чтобы те посмотрели на веб-приложение профессиональным взглядом и нашли точки роста.
Кроме того, клиент планировал выпустить мобильное приложение и хотел, чтобы команда выполняла задачу по редизайну веба параллельно с разработкой дизайна для мобилки. И этой командой стали мы, Purrweb 🙂
Мы обсудили задачу с заказчиком и внимательно изучили действующее веб-приложение. Его дизайн был неплохим и аккуратным. В этом случае не нужно переделывать все, достаточно внести небольшие изменения, чтобы сделать интерфейс удобнее и проще.
Предложили доработки пользовательских флоу
Клиент предоставил Figma-файл с действующим дизайном веб-приложения и комментариями, что он хотел бы улучшить. Так все пожелания по редизайну становились очень конкретными, и это позволило нам быстро погрузиться в проект.
Главная страница веб-приложения до редизайна
Мы разобрали идеи заказчика и сразу предложили, что можно докрутить, чтобы улучшить пользовательский путь:
1. Добавить кнопку для отмены заказа, чтобы не пришлось звонить оператору, если планы поменялись.
2. Сделать так, чтобы адрес можно было добавить из личного кабинета, а не возвращаться для этого на главную страницу.
3. Переместить элементы ближе к краю экрана: некоторые из них (например, крестик) находились чуть левее — это нарушает привычные UX-паттерны.
4. В мобильной версии скорректировать отступы и добавить воздуха, чтобы визуалы воспринимались комфортнее.
5. Добавить стрелки для навигации назад, чтобы обеспечить более интуитивное взаимодействие с приложением.
6. Использовать иконки или лейблы для инпутов — это поможет слабовидящим пользователям лучше взаимодействовать с интерфейсом.
Именно из таких деталей складывается общее впечатление от продукта. Мелкие недочеты оставляют ощущение небрежности и влияют на пользовательский опыт совсем не так, как нужно.
Клиенту понравились наши предложения, и мы продолжили двигаться дальше.
Подготовили дизайн-концепт для мобильного приложения и респонсива
Одной из задач проекта была разработка дизайна будущего мобильного приложения.
Мы хотели наглядно показать клиенту, каким мы видим мобильное приложение Панам Пицца и чем оно будет отличаться от веба, поэтому подготовили дизайн-концепт.
Для этого мы погрузились в бизнес-потребности заказчика, изучили его пожелания, текущий дизайн и логику веб-приложения. Не забыли отразить в концепте и изменения для респонсив-версии: это когда веб-сайт автоматически подстраивается под экран любого устройства, в нашем случае — под экран мобильного устройства.
Это очень важный этап: благодаря концепту заказчик получает четкое представление о будущем дизайне, а мы лучше понимаем видение клиента. Как итог — меньше правок и согласований во время работы.
На дизайн-концепт закладываем 40 часов — кстати, в этой статье рассказали, как делали концепты раньше, и почему клиенты довольны, что мы тратим на концепты неделю.
Мы попросили у клиента позитивные и негативные референсы: он хотел, чтобы новый дизайн был воздушным, с использованием плавных скруглений у иконок.
Референсы от клиента
Искали сами — анализировали разные приложения для доставки еды и другие сервисы.
Страница в Figma с референсами, которые собрали мы
Использовали фирменные цвета Панам Пицца: зеленый и желтый. Они уже были частью бренда, и мы не могли их менять. Добавили в палитру серый цвет — его можно использовать в качестве дополнения, чтобы оттенить карточки блюд, которые располагались на белом фоне.
В цветовой палитре использовали фирменные цвета бренда
Для типографики выбрали шрифт Onest. У него несколько начертаний, он хорошо читается на разных типах устройств — мы учли, что люди будут открывать веб-приложение на смартфонах. Onest позволяет компактно разместить много контента и не отнимает пространство у других элементов. Это шрифт с открытой лицензией — так мы экономим бюджет заказчика.
Шрифт Onest
Вот что получилось в итоге:
Главная страница для респонсива и мобильного приложения
Экран заказа: мобильное приложение
Мы использовали блочную вёрстку для создания простой и понятной структуры экранов. Каждый блок отвечает за важные элементы: выбор теста и размера пиццы, добавление топпинга, соуса и комментарии. Это помогает пользователю не запутаться и точно заказать то, что он хочет.
Заказчику понравился результат, а правок было совсем немного: например, он предложил сделать цвет обводки карточек чуть ярче. Мы приняли во внимание фидбек и полетели в редизайн.
Читайте также: Talentum: кейс разработки приложения для доставки еды
Что предстояло сделать дальше
Мы должны были:
- Сделать редизайн существующего веб-приложения, улучшив отдельные пользовательские сценарии
- Отразить все изменения в респонсив-версии
- Параллельно подготовить дизайн для мобильного приложения
- Разработать UI-kit, которого у веб-приложения не было
- Угодить внимательному и очень вовлеченному заказчику 🙂
Обновленный дизайн должен был сохранить фирменный стиль и айдентику бренда с фокусом на удобной навигации и продуманных пользовательских сценариях.
Кажется, что задачка выглядела легкой. Нужно было немного обновить интерфейс, собрать все элементы дизайна в UI-kit и сделать дизайн для мобилки — не с нуля, ведь мы провели хорошую подготовительную работу. На деле все оказалось не так просто, как мы предполагали. Но обо всем по порядку.
Разобрались со сложным пользовательским флоу…
Казалось бы, какие подвохи могут быть в пользовательских сценариях приложения для доставки еды? Нужно пройти регистрацию или авторизацию, посмотреть каталог, добавить товары в корзину, оформить заказ. Всего несколько шагов.
В общем, это верно, но есть нюансы. Пользователь добавил товары в корзину. Дальше он может выбрать доставку на дом или самовывоз. Или попросить привезти пиццу в определенный промежуток времени. А может, это неважно: тогда он выберет опцию доставки «как можно скорее».
С самовывозом то же самое: можно попросить приготовить пиццу к конкретному времени или не указывать его и подойти, как получится.
Проработали флоу с разными пользовательскими сценариями при выборе опции самовывоз
Дальше оплата. Пользователь выбирает оплату картой или наличными. Иногда ему нужна сдача с крупной купюры, и хорошо бы указать это на этапе оформления заказа, чтобы избежать неприятного сюрприза.
Еще у пользователя может быть промокод или скидка, действующие или срок которых истек. Иногда пользователь ошибается и вводит промокод неправильно. Бывает, что при оплате онлайн происходит сбой и заказ не оплачивается. Приложение должно предупредить пользователя, если что-то пошло не так.
Ошибка при оплате: нужно предупредить пользователя и предложить альтернативные способы — например, повторить или изменить способ оплаты
В общем, вы поняли: при доставке бывает всякое 🙂 На самом деле заказ — это не один сценарий, а множество разных сценариев. И при дизайне пользовательского флоу нужно предусмотреть все из них. Именно с такой головоломкой мы столкнулись при редизайне веб-приложения Панам Пицца.
Для каждого сценария и шага должен быть свой экран состояния, свои элементы на странице, свой порядок действий. А пользователь должен проходить их максимально просто и интуитивно, иначе есть риск, что он не сделает заказ.
Со сложным флоу «Корзины» пришлось как следует поработать, но в итоге мы со всем разобрались.
…и прокачались в продуктовом дизайне
На этом проекте мы увидели свою точку роста: поняли, что нам нужно прокачивать экспертизу в продуктовом дизайне — это бы классно дополняло наш опыт в UI/UX дизайне.
Дело в том, что мы чаще всего работаем со стартапами и помогаем им быстро выводить на рынок MVP. В разработке UI/UX дизайна для MVP есть свои особенности, о них мы рассказывали здесь, но если кратко, тут важен фокус на ключевых функциях и простоте интерфейса, чтобы быстро протестировать гипотезу.
Продуктовый дизайн — это тоже вид UI/UX дизайна, который строится на принципах юзабилити и комфортного пользовательского опыта. Особенность в другом: команды дизайнеров прицельно работают над развитием одного сервиса или приложения.
Они досконально знают индустрию и видят все возможные варианты реализации одной и той же фичи в продукте. Кроме того, они много работают со сбором пользовательских метрик и A/B тестированием, чтобы более точно оценивать, что нравится юзерам и какие решение в интерфейсе самые эффективные.
Это как два разных повара: один — универсал, который умеют готовить разные блюда одинаково хорошо, другой — пиццмейкер, который добился совершенства в приготовлении пиццы 🍕
Если бы дизайнеры были поварами 🧑🍳
Так что нам пришлось учиться по ходу дела. Нас это не напугало! Мы анализировали решения различных сервисов доставки, смотрели, какие лучшие практики можно адаптировать, готовили сразу несколько вариантов экранов, чтобы потом определить самый удачный.
К счастью, наш клиент хорошо знал рынок и делился с нами знаниями по аудитории и особенностях этой ниши. В который раз мы убеждаемся, что увлеченный своим бизнесом заказчик — лучший учитель.
Мы соединили нашу UI/UX экспертизу с его пониманием продукта и смогли вместе добиться результата.
Не терпится показать вам, что у нас в итоге получилось!
Результаты: веб и мобильное приложение
Давайте посмотрим на основные экраны приложения Панам Пицца.
Так выглядит личный кабинет. Здесь хранятся адреса доставки, карты для оплаты, данные о бонусах и скидках.
Здесь же можно посмотреть историю заказов со статусами: доставили вовремя или не успели привезти. Это полностью новый флоу. Если доставка опоздала, при следующем заказе пользователь получит подарок.
Так выглядит карточка пиццы, когда пользователь нажимает на выбор. Можно кастомизировать блюдо: выбрать размер, тесто, соус и добавки, поменять состав ингредиентов.
Одна из особенностей Панам Пицца — возможность собрать пиццу из половинок. Только для этого флоу дизайнер отрисовала 18 разных экранов, которые учитывали все возможные пользовательские шаги и доступные опции.
Состав половинок тоже можно поменять! Пользователю нужно выбрать «изменить состав» и он попадет на соответствующий экран с чекбоксами.
Изменить состав половинок
Мы добавили возможность отследить статус заказа на главной странице — еще одна новая фича в приложении. Есть несколько статусов: принимаем заказ, готовим, передали курьеру, доставили.
Собрали UI-kit
Напомним, что UI-kit — это набор готовых компонентов, из которых собирается интерфейс. UI-kit нужен, чтобы все элементы интерфейса выглядели единообразно и визуально не конфликтовали друг с другом — дизайнеры называют это «консистентностью».
UI-kit нужен в первую очередь для фронтенд-разработчиков. Им не придется создавать компоненты для интерфейса с нуля, ведь их уже задизайнили и они готовы для разработки — а это экономит время и бюджет.
Кстати, в этой статье мы рассказали, из чего состоит UI-kit «здорового человека» и объяснили, как правильно передать готовый UI-kit разработчику или другому дизайнеру.
У Панам Пицца не было UI-kit, и это могло бы усложнить процесс разработки. Теперь типографика, иконки, цвета, отступы и другие важные элементы интерфейса приведены к единообразию.
Итог
Мы завершили проект и передали заказчику готовый UI-kit, аккуратно собранный в Figma, экраны с новыми пользовательскими сценариями и редизайном старых флоу.
Сейчас проект в разработке у заказчика. Веб-приложение уже работает с нашими флоу и интерфейсом, а мобильное приложение может появиться позже.
Если нужно сделать редизайн вашего проекта, заполните форму, чтобы связаться с нами. Мы внимательно выслушаем, поделимся опытом и прикинем цены и сроки.
