FlowerPot: интуитивный UX/UI дизайн мобильного приложения

Как создать мобильное приложение для стартапа и донести ценность услуг компании через интерфейс?

На примере кейса FlowerPot мы рассмотрим как благодаря внедрению проверенных UX/UI решений и учёту особенностей ниши команда Турум-бурум разработала нативный дизайн мобильного приложения. Интерфейс приложения обеспечивает исключительный пользовательский опыт, поскольку он учитывает все аспекты взаимодействия клиентов с платформой.

Знакомство с проектом FlowerPot 

Dicentra – известная в Украине компания, которая занимается продажей цветов онлайн и офлайн, предлагает большой ассортимент товаров, настичывает большую клиентскую базу и не один год сотрудничает со студией Турум-бурум.

В этот раз владельцы бренда обратились к нам с новой задачей – создать клиентоориентированное мобильное приложение для Android и iOS под названием FlowerPot, для продажи цветов, которое отличается от традиционных магазинов и предлагает интересные и порой революционные решения. 

Концепция бизнеса: с заботой о природе и вашем кошельке 

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

1. Практичность и экологичность

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

2. Простой выбор товара со вкусом

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

3. Удобство и скорость покупки онлайн и офлайн

Одной из ключевых идей проекта было сделать покупку цветов максимально комфортной для всех представителей ЦА. Поэтому вы можете:

1. Прийти в ближайший магазин FlowerPot в Киеве и выбрать товар «вживую»;
2. Оформить заказ онлайн и забрать его условно по дороге домой в удобном для вас месте фирмы;
3. Приобрести цветы и ждать доставку курьером в определенное время и место.

Задачи проекта

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

Так что задачей Турум-бурум было создать дизайн мобильного приложения, которое:

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

Ключевые UX/UI решения для создания клиентоориентированного приложения

В целом для проекта FlowerPot студия Турум-бурум разработала около 120 экранов, в том числе скелетон загрузки и страницы с возможными ошибками, а также продумала до мелочей каждый блок и элемент приложения во всех возможных состояниях, чтобы обеспечить качественный пользовательский опыт.

Что же помогло создать интерфейс мобильного приложения продуманный до мелочей, который удобно использовать «на ходу» даже если вы пользуетесь приложением впервые? Ответ – в этом разделе.

1. Быстрая регистрация в приложении

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

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

2. Главный экран: простота без потери функциональности

Около 86% пользователей рассчитывают найти всю важную информацию о услугах и товаре компании именно на главном экране. 

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

1. Ознакомиться с ассортиментом компании

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

2. Просмотреть выбранный товар

Люди не всегда готовы сразу выбирать и покупать товар. Часто им нужен время для обдумывания. Поэтому в главное меню приложения мы заложили блок с «Избранным товаром». Это позволяет клиентам отмечать товар, который им понравился, быстро просматривать его и добавлять в корзину после принятия решения.

3. Отследить статус заказа

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

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

4. Быстро получать заказы в физическом магазине

После оформления онлайн заказа, на главной странице клиента активируется иконка с QR-кодом. Чтобы получить заказ в физическом магазине пользователь должен просто показать этот код представителю компании. Не нужно указывать ФИО или номер телефона, все намного быстрее и проще.

3. Каталог товаров и фильтры: обеспечиваем удобный и быстрый выбор

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

1. Группировка товаров по цене

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

2. Приоритизация фильтров поиска

Отдельное внимание уделили приоритизации фильтров. Мы руководствовались простым принципом: чем популярнее товар среди клиентов – тем выше он в перечне. А для удобства пользователей добавили опцию выбора нескольких видов цветов. Это полезная функция для тех, кто сомневается с выбором товара или нуждается в нескольких букетах.

4. Страница товара: минимум слов – максимум содержания

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

1. Сделали акцент на фото товара

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

2. Добавили лаконичные и информативные описания товаров

По статистике 87% покупателей считают, что описание продукта является самым важным фактором при принятии решения о покупке товара в Интернете, ведь они не могут физически увидеть или дотронуться до него. 

Поэтому при нажатии на продукт в каталоге товаров в приложении появляется bottom sheet, который на одном экране вмещает самые важные характеристики товара. Поскольку мы стремились сделать путь пользователей максимально коротким, в описании вы не увидите художественных лонгридов, здесь все коротко и по сути. 

5. Корзина и чекаут: максимально сокращаем путь пользователей

Страницы корзины и чекаута – фактически финишная прямая для людей, которые хотят приобрести товар и здесь важно не схибить. Однако по статистике средний показатель выходов с сайта на этапе просмотра корзины составляет 70%. Среди самых популярных причин можно выделить:

• 26% – необходимость создания собственного аккаунта;
• 22% – слишком долгий процесс заполнения чекаута;
• 17% – баги интерфейса;
• 13% – маленький выбор способов оплаты.

Все эти факторы объединяет одно – потребность тратить лишнее время. Поэтому разрабатывая дизайн этих страниц мы позаботились об их интуитивности и простоте:

1. Добавили инструменты кросс-сейла, которые экономят время клиентов

Инструменты cross-sale – эффективный способ позаботиться о пользователях, при этом увеличив средний чек заказа. Поэтому мы определили категории товаров, которые чаще всего покупают вместе с цветами, и предложили их пользователям – открытки и сладости. Так клиенты смогут приобрести все необходимое в одном месте и упростить себе жизнь.

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

2. Обеспечили автоматическое заполнение чекаута

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

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

То есть создали «чистый интерфейс», который требует от пользователей минимум времени и усилий. 

3. Добавили несколько способов выбора адреса 

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

6. Заложили качественный UI: мелочи имеют значение

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

В результате команда Турум-бурум разработала  для проекта FlowerPot около 120 экранов, в том числе скелетон загрузки и страницы с возможными ошибками, а также продумала до мелочей каждый блок и элемент приложения во всех возможных состояниях, чтобы обеспечить качественный пользовательский опыт.

Результаты работы над проектом FlowerPot

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

В результате получили удобное приложение, которое объединило офлайн и онлайн услуги компании, с учетом потребностей широкой целевой аудитории и бизнес-задач.

Приложение уже доступно на App Store и Google Play, так что можете загружать! Мы уверены, что оно понравится пользователям, особенно тем, кто ценит свое время и комфорт. 

‍

‍

‍