Дизайн інтернатура. Як ми вдосконалювали інтерфейс Liki24
За дослідженням PPV Knowledge Networks, український дизайн стрімко розвивається протягом останніх 10-ти років. Тільки у 5-ти найбільших містах України 490 компаній та 3323 ФОПи визначають дизайн своєю основною діяльністю. З усвідомленням попиту зросла потреба у фахівцях.
Розвиток індустрії залежить безпосередньо від здатності дизайнерів створювати якісний продукт. Одна з ключових проблем формальної дизайн-освіти — це невідповідність підготовки випускників потребам ринку. Дезорієнтований початківець залишається віч-на-віч із ґуґлом, який видає 376 000 результатів за запитом «курси UI/UX».
З іншого боку, сформувався гнучкий і динамічний ринок неформальної дизайн-освіти. Більшість курсів дають фрагментарні знання, бо націлені на прибуток від великого і швидкого потоку студентів. Ми у Qubstudio прагнемо допомогти українській індустрії дизайну зростати якісно, тому створили програму інтернатури. Серед декількох сотень заявок ми обираємо декількох найздібніших інтернів і навчаємо їх безкоштовно.
Ми призначаємо кожному інтернові досвідченого ментора. Але найголовніше — доручаємо реальні завдання на реальних проєктах. Протягом двох місяців наші інтерни не просто вчаться дизайнити інтерфейси. Вони усвідомлюють, що їхні рішення впливають на роботу сервісів та досвід користувачів. Таким чином ми допомагаємо й українським стартапам, адже безкоштовно покращуємо їхні продукти.
Основне наше завдання — сформувати в молодих дизайнерів юзерцентричний спосіб мислення. Вкрай важливим є проектування користувацьких фловів, орієнтованих саме на бізнес-цілі клієнта. У рамках цьогорічної інтернатури ми відібрали шістьох інтернів. Поглибленні знання у графічному дизайні та високі гнучкі навички завжди є нашими основними критеріями. У цьому матеріалі розповімо про те, як один з інтернів Qubstudio працював над великою частиною сервісу Liki24, і що з цього вийшло.
Про що розкажемо:
- Liki24: унікальність проєкту і наших завдань
- Веселе перетворення нудної реєстрації
- Особистий кабінет: як поєднати непоєднуване
- Нетипові сценарії доставки та оплати
- Як розплутати заплутані бонуси
- Заключне слово ментора
Liki24: унікальність проєкту і наших завдань
Це перший в Україні сервіс доставки ліків. Користувачу більше не потрібно обходити всі аптеки у районі, стояти в чергах та переплачувати. Liki24 купує препарати за найнижчою ціною і доставляє їх клієнтові додому у зручний для нього час. Користувач оплачує доставку, але заощаджує близько 30% ціни на ліки.
Сервіс новий і дуже стрімко розвивається. Liki24 обробив уже 150 тис замовлень та успішно доставив 847 тис препаратів. За статистикою, більшість із них були оформлені саме з телефону. У рамках поліпшення досвіду користувача на мобільних носіях з’явилося багато завдань. Вони мали різний пріоритет, але були тісно пов’язані між собою одним функціоналом.
Ми працювали із двома великими частинами сервісу: фловом реєстрації та особистим кабінетом. Нашою ціллю було оптимізувати маршрут користувача, зробити його простим, зрозумілим і захоплюючим. Типове, на перший погляд, завдання стало справжнім челенджем. Функціонал Liki24 не має аналогів, тому довелося шукати нестандартні рішення і компонувати єдиний флов із багатьох частин.
Веселе перетворення нудної реєстрації
Процес реєстрації на Liki24 був надто складним і потребував допрацювання. Кожен додатковий рядок у формі реєстрації будь-якого сервісу може зменшити конверсію на 30%. Liki24 має декілька типів реєстрації з відповідними сценаріями. Це ускладнює маршрут звичайного користувача, який прагне швидко знайти ліки. Ми проаналізували роботу популярних сервісів, з якими клієнт вже знайомий, щоб вирішити цю проблему.
Ми завжди орієнтуємося на досвід користувача, тому починаємо із вивчення цільової аудиторії. ЦА Liki24 має три сегменти: покупці, лікарі та страхові компанії. Передовсім ми вирішили зосередитися на профілі основного користувача — покупця. Його функціонал найширший та найскладніший.
Процес реєстрації ми розділили на декілька кроків. Щоби втримати увагу користувача, ми вирішили нагадати йому про користь сервісу. До кожного кроку ми додали короткий опис переваги та фірмових персонажів Liki24.
Ми вирішили розповісти клієнтові, для чого збираємо інформацію про нього. Наприклад, перевірка мобільного телефону потрібна для відновлення доступу до особистого кабінету. Також сервіс може сконтактуватися із покупцем, якщо потрібно уточнити деталі доставки.
Сервісу важливо виділяти лікарів для майбутньої співпраці з ними, тому ми передбачили для них окремий функціонал у флові реєстрації. Так у загальній формі з’явився невеликий чекбокс. Якщо користувач відмітить його пташкою, сервіс розпізнає лікаря та відкриє йому додаткові поля для заповнення. Вони не заважатимуть користувачам-пацієнтам, тож не ускладнюватимуть флов.
Так ми оптимізували флов реєстрації, зробили його мінімалістичним та захопливим. Веселі фірмові персонажі стимулюють користувача завершити реєстрацію та скористатися перевагами сервісу.
Особистий кабінет: як поєднати непоєднуване
Труднощі полягали у тому, що функціонал особистого кабінету Liki24 потрібен і зареєстрованим, і незареєстрованим користувачам. Завданням інтерна було передбачити статус бронювання, замовлення, доставки тощо для незареєстрованих клієнтів.
Спершу ми проаналізували усі послуги сервісу:
- підбір ліків
- доставка трьома способами
- готівкова і безготівкова оплата
- бронювання ліків
- вибір аптеки
- створення власної аптечки
- пошук складених на різні випадки аптечок
Нашим завданням на цьому етапі було спроектувати особистий кабінет, який поєднав би усі послуги, особисту інформацію, дані доставки, платіжні картки, статус замовлення, архів, сформовані списки (аптечка), інформацію про бонуси та інші розділи. Словом, місія “Поєднати непоєднуване”.
Для того, аби впорядкувати функціонал, ми використали принцип JTBD. Простіше кажучи, відштовхнулися від потреби клієнта. Зареєстрованим користувачам необхідно керувати особистою інформацією, відслідковувати свої замовлення та бонуси. Ми пріоритетизували блоки. Найбільш потрібні помістили на основний екран із можливістю швидкого доступу до найважливіших функцій.
Наступним нашим кроком була допомога в оптимізації роботи логістичного центру. Здебільшого, протягом дня люди перебувають у різних місцях. У контексті сервісу важливо це розуміти, оскільки під час підбору ліків враховується місце доставки. Ми створили можливість додати до кабінету декілька адрес та вибрати серед них поточну. Тепер користувач може замовити доставку ліків додому, поки перебуває, наприклад, на роботі. Також ця функція дає можливість замовити доставку ліків близьким, якщо додати їхню адресу.
Нетипові сценарії доставки та оплати
Один із найважчих для інтерна етапів — це робота над фловом доставки та оплати. Він поєднує багато нетипових сценаріїв, які потрібно передбачити. Liki24 пропонує 3 види доставки: кур’єром сервісу або “Нової пошти”, на відділення “Нової пошти” та “Заберу сам”.
Способів оплати також є декілька. Проблема у тому, що вони змінюються залежно від способу доставки. Якщо ліки доставляє кур’єр, то можна оплатити замовлення і готівкою, і онлайн. Водночас, якщо покупець обирає доставку “Новою поштою”, то може оплатити замовлення лише онлайн. Тоді як опція “Заберу сам” дозволяє оплатити ліки тільки на місці отримання.
Якщо користувач обирає доставку кур’єром або “Новою поштою”, то з’являється обов’язковий етап підтвердження замовлення. Він необхідний, адже від часу бронювання до моменту оформлення ціна може змінитися. Часто люди замовляють декілька препаратів із різних аптек. Тоді відділ логістики обирає оптимальний маршрут із урахуванням різниці між цінами.
У разі зростання ціни клієнт має доплатити різницю онлайн або під час доставки. Якщо ціна на ліки знизилася, то він може обрати, куди мають повернутися кошти: на картку протягом декількох робочих днів або відразу на бонусний рахунок.
Для того, аби власноруч забрати замовлення, клієнт обов’язково має отримати номер бронювання. Також кожне замовлення має свій порядковий номер. Щоб уникнути плутанини, ми розділили їх візуально.
Для того, щоб сервіс залишався зручним та зрозумілим для користувача незалежно від способу доставки та оплати, ми розробили систему карток із відповідними статусами. Кожна з них містить основну інформацію та специфічний заклик до дії для певного типу замовлення.
Таким чином ми зробили основну інформацію доступною користувачеві у будь-яку мить. Для кожного типу доставки у верхній частині екрану ми розмістили актуальний статус замовлення. Він повідомляє клієнтові, що відбувається і що йому потрібно зробити. За необхідності всі етапи можна переглянути, просто розгорнувши його.
Як розплутати заплутані бонуси
Зараз на сайті діють дві бонусні системи: «Запроси друга» та «Кешбек від Liki». Перша дозволяє запрошувати друзів та отримувати за це бонуси. За кожного запрошеного друга можна отримати до 200 грн за його перші три замовлення. Друга нараховує за покупки кешбек, який можна використати для майбутніх замовлень або перерахувати собі на картку.
Подвійність заплутувала користувачів, тому нам потрібно було візуально розділити отримані бонуси. Кошти з обох систем можна використовувати на покупки, але лише кешбек можна перерахувати на картку. Тому ми зробили два розділи, між якими можна перемикатися, і додали фірмових персонажів Liki24.
Заключне слово ментора:
На реальному проєкті інтерн вчиться знаходити потрібні вирішення нетипових завдань. Авжеж, не все вдається одразу. Молодий дизайнер не завжди може швидко генерувати проміжні гіпотези і тестувати їх. Часом він добре уявляє результат, але не розуміє, як його досягти. Сервіс Liki24 уже мав багато сформованих частин. Певний стиль, авжеж, обмежував, але водночас розвивав послідовність та цілісне бачення продукту. Приємно розуміти, що інтерн впорався зі всіма викликами.зазначив ментор, UX/UI-дизайнер Степан Бутко.
Місія ментора у цьому випадку — підштовхнути до альтернативних рішень. А місія інтернатури Qubstudio — навчити молодих дизайнерів графічних прийомів, які не просто виконуватимуть роль візуального оформлення продукту, але й впливатимуть на весь UX.
Перекладено з оригіналу: Our design internship experience of improving design for Liki24 medicine delivery service