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. Зробили акцент на фото товару

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

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, тож можете завантажувати! Ми впевненні, що він сподобається користувачам, особливо тим, хто цінує власний час і комфорт. 

‍

‍