Проєктування інтерфейсу для каршеринг продукту
У статті розповім про свій шлях, підходи та процес як я проводив UX-дослідження та створював інтерактивний прототип 👨💻
У цей непростий час я хочу поділитися своїм досвідом проектування мобільного додатку, за допомогою якого люди можуть брати в оренду автомобілі в місті. Я вірю, що на моїй землі настане мир, підуть орки та посіяний ними Мордор, прозвучить довгоочікуване “Відбій тривоги. Війна закінчилася. Всім повертатися додому!”. Усі українські населені пункти, пошкоджені внаслідок обстрілу рашистких окупантів, будуть відбудовані після війни. І буде місце для таких сервісів, як каршеринг.
🇺🇦🇺🇦🇺🇦
Привіт! Зараз я дизайнер у креативній фарм маркетинг агенції. В Україні таких тільки дві. Працюю над CLM/e-Detailing, RX-порталами, PWA, Medical Web та відео проєктами. Ще маю досвід роботи з ізраїльськими стартапами, у сферах: Healthcare, MedTech, E-commerce, RealEstate, Telecom (e-sim technologies). Загалом у дизайні трохи більше 5 років.
Наскільки мені відомо, серйозні дядки з дизайну можуть годинами розказувати про дизайн процеси. А зараз світ швидкий і тебе мабуть не будуть так довго слухати. Окей, тут діла приблизно на 15 хвилин, добре? Для зручності я розділив статтю на розділи та підрозділи. Приємного читання!
Постановка процесу
Робота над задачою перш за все починається з проектного документа, доступ до якого мені повинен бути з будь-якого пристрою — у разі жаги до діяльності, можна було сісти та друкувати на планшеті. Добре підходять гугловські сервіси, документи яких можна розміщувати на гугл-драйві. Ведення документа та нотаток допомагає фіксувати та візуалізувати, і в результаті досягти необхідного результату. Поряд з цим я створив дошку в Trello, розбивши на основні фази: Doing (активний процес роботи), To Do (зробити на майбутнє), Hold (на утриманні, перемежовуюсь картками зі стека Doing), Done (власне готове) і Backlog (те, що можна притримати на потім, більш витратне за ресурсами/потребує додаткового дослідження/залишити на наступну ітерацію).
ЗАДАЧА
Що потрібно зробити (результат): розробити продукт, за допомогою якого люди можуть брати в оренду автомобілі в місті. Для першої ітерації зробити клієнтський мобільний додаток. На наступні спроєктувати CRM-систему для орендодавця та промо-сайт.
Яку проблему вирішуємо (гіпотеза): мати свою машину досить дорого і тому дешевше час від часу брати авто напрокат.
Що (мета): компанія заробляє на здачі в оренду автомобілів, якими можна користуватися в межах одного міста, тому потрібний інструмент, за допомогою якого люди робитимуть це самостійно.
Для кого (ЦА): люди віком від 21-го до 65-ти років, які є активними користувачами інтернету та яким потрібно час від часу пересуватися на авто, але вони не хочуть (або не можуть) мати особистий автомобіль.
Бізнес-вимоги до продукту
- Користувачі повинні мати можливість знаходити автомобілі у своєму місті (на карті);
- користувачі повинні мати можливість бачити інформацію про автомобіль:
- марка;
- вартість за час;
- кількість палива;
- розташування на карті. - користувачі повинні мати можливість отримати інструкцію про те, як користуватись сервісом (актуально для нових користувачів);
- користувачі повинні мати можливість оплачувати оренду автомобіля за допомогою банківської картки;
- користувачі повинні мати можливість накопичувати бонуси за використання;
- орендодавець повинен мати можливість отримати фотографію паспорта та водійського посвідчення користувача (щоб перевірити дані);
- орендодавець повинен мати можливість відстежувати розташування автомобіля;
- орендодавець повинен мати можливість блокувати двигун автомобіля (глушити).
UX-ДОСЛІДЖЕННЯ
Раніше я більше ґрунтувався на внутрішніх відчуттях та інтуїції. З таким підходом весь робочий процес перетворювався у вічний пошук незрозумілих рішень, які тягнули тільки проблеми та потреби які насправді можуть і не існувати, тим самим віддаляючись від реальності. Доходило до того, що дизайн був непоганий, а обґрунтування його рішення було непевним.
Дослідження, необхідні для того, щоб отримати потрібну інформацію та звести її в єдине ціле, мати опору та не тримати уявну “повну картину” у голові. Тільки при допитливісті та усидливості до теми пошук інфи стає цікавим процесом, і не таким вже страшним, як здається джунам. Головне знайти яка проблема змусила людину скористатися продуктом і що він бажає отримати. Для початку потрібно змістити фокус у минуле і зібрати дані про проблему, потім змоделювати події у теперішньому, і в результаті спроєктувати бажаний результат у майбутнє, коли продукт вже буде реалізований.
Аналіз конкурентів
Ця частина містила досить багато спостережень та аналізу, тому я створив CJM у вигляді таблиці. Цей інструмент часто використовується в тих випадках, коли вже є якесь працююче рішення (сайт, мобільний додаток, офлайн сервіс) і допомагає знайти болючі точки на шляху користувача до своїх цілей. Для аналізу відібрав до десятка українських та міжнародних сервісів (в т.ч. які представленні в Україні). Взяв у фокус та детальне опрацювання Getmancar, Sixt та Europcar.
Я визначив мету та виділив основні кроки, які проходить користувач:
- вибір каршерингу, вивчення сервісів (зрозуміти, що мені потрібно: каршеринг, рентал (короткий/довгостроковий), карпулінг або навіть лізинг; зрозуміти, як я можу вибрати доступний мені каршеринг, скільки їх представлено у Києві та які особливості кожного з них);
- знайомство з сервісом (зрозуміти як я можу знайти підходящий для себе автомобіль і чи можна довіряти продукту; зрозуміти, як користуватися сервісом, що для цього необхідно);
- проходження реєстрації (доступ до можливостей сервісу; без проходження цього пункту неможливо буде скористатися ним);
- пошук варіантів (підібрати більш підходящий варіант під моїми критеріями: автомобіль на автоматичній коробці передач, класу стандарт, у близькому місці від мене; значним плюсом буде наявність 75% заповненості бака бензином, тому що я їду в передмістя);
- дослідження варіантів/результати (переглянути які є варіанти та загальний порядок цін (різні класи машин); побачити розташування на карті; відсортувати результати типу коробки передач або марці авто);
- дослідження одного варіанта;
- бронювання та підтвердження броні (швидко забронювати потрібний автомобіль, при цьому переконатися, що я бронюю саме те авто, яке вибрав; переконається у підтвердженні броні (частіше це списання коштів із картки як застави)).
- пошук та перевірка/огляд автомобіля (знайти заброньований автомобіль на протязі безкоштовних ≈20 хвилин; огляд його на наявність критичних ушкоджень (у разі чого зробити фото та зв’язатися зі службою підтримки));
- завершення поїздки (завершити поїздку у правильному місці та за правилами паркування; переконатись у непошкодженості автомобіля; переконатися, що поїздка завершена в мобільному
додатку та трекер часу вимкнено; виходячи із авто не забути свої речі).
Далі на кожному з кроків розписав всі дії на кожному з етапів зі скріншотами, зробив примітки що було реалізовано добре, а також виникаючі проблеми та ідеями для їх вирішення.
Онлайн-опитування
Як додатковий спосіб збору інформації я вибрав опитування через Google-форми. Банально, через такий інструмент можна дізнатись чи взагалі люди чули про такий сервіс і тим паче користувались ним. Далі вже про те, яку задачу за допомогую цього сервісу хотіли вирішити, коли це було в останнє, які проблеми спонукали цьому досвіду.
Питання краще підбирати з варіантами вибору, з вибором у декілька варіантів та вписати свій варіант. Не потрібно грузити проханням описувати детально свій досвід, інакше люди злякаються великої кількості вимог і просто закриють форму. Достатньо мати 3–5 влучних запитань.
Опитувальник я закріпив у пості на Linkedin та розіслав друзям. Відповіді надіслало 16 осіб. Це вже непогано, бо відповіді містили як і позитивний так і негативний характер.
Загальні висновки онлайн-опитування
- 8 людей із 16 відповіли, що бронюють автомобіль, коли перебувають у відпустці.
- Для того щоб комфортно пересуватися містом багато хто використовує для бронювання додаток Getmancar.
- Основні проблеми користувачів були, такі як: неправильне розташування машини щодо геотегу, стан автомобіля та ускладнений інтерфейс програми (просили про спрощення процедури завершення поїздки). Також, у багатьох взагалі не виникало жодних проблем.
- Каршеринг щодо нового вигляду сервісу в Україні. Є припущення, що користувачі не до кінця розуміють його суть і плутають із короткостроковим ренталом.
- Важливим при виборі авто було тип коробки передач (10), доступність тарифів (9), близьке розташування (8), марка/клас (7).
Опитування через Instagram
Чесно кажучи цей етап був підготовчим до онлайн-опитування, тому він почався раніше. Потрібно було промацати ґрунт з досить примітивними питаннями, щоб зрозуміти чого взагалі очікувати. Питання краще ставити закритого типу, так як люди завжди кудись поспішають і затримуватись на 15-ти секундному сторіз ніхто не буде.
Щойно отримавши позитивні відповіді на використання сервісу, я написав цим людям особисто з пропозицією мені допомогти: пройти онлайн-опитування через Google Forms. Користувачів з експірієнсом виявилось не так багато, або аудиторія була трохи “сплячою” — виставляю нову сторіз з посиланням на запитання.
Живі інтерв’ю
Для більш глибокого аналізу потрібно провести живі інтерв’ю з користувачами, навідміну від опитувальника рекомендую ставити відкриті запитання, щоб отримати максимум інформації про досліджувану область, зрозуміти, що для користувача звично і зручно, скласти приблизний сценарій його поведінки. Всього погодилось на інтерв’ю 4 людини.
Чесно кажучи живі інтерв’ю з респондентами, в якості моїх друзів та знайомих під час війни пройшли у телефонному форматі. Розмови починались не з пропозиції розпочати інтерв’ю, а запитаннями: як ти, в безпеці? всі живі? Тому іноді аналізуючи стан людини, я переносив розмову про досвід з аренди авто на потім.
YouTube як додатковий спосіб збирання інформації
Не нехтуйте цією платформою, адже є шанс зловити інсайти. Наприклад, при огляді орендованого авто перед поїздкою можна легковажно віднестися до огдяду даху авто, а там можуть бути подряпини за які прийдеться відшкодувати. За допомогою відеооглядів мені вдалося зібрати велику кількість корисної інформації щодо того як влаштований та працює каршеринговий сервіс та тезово відобразити її в проєктному документі.
ДИЗАЙН ПРОДУКТУ
Аналіз отриманих даних, визначення проблем та пошук ідей
Аналіз отриманої інформації
На основі систематизації отриманих даних потрібно було все це узагальнити. Я використовував метод JTBD, який дозволяє з’ясувати, які завдання мій продукт вирішуватиме для клієнта. Розглядаю не процес використання продукту, а момент, коли виникла потреба. Тобто, що призвело до думки про використання. Загалом, необхідно позначити мету дослідження та зробити кілька гіпотез job story.
Проблеми та ідеї
Коли проблеми визначені на етапі дослідження — настає час для ідей! Придумати щось суттєво нове важко, тому процес генерування ідей йде досить туго, користуюсь принципом “чим більше — тим краще”. Потім займаюсь пріоритезацією та ранжуванням, досить сумнівні ідеї відкидую для утопічних обставин :)
Аналіз цікавих рішень
На додаток до генерації ідея шукаю цікаві сервіси та сайти, на яких можна знайти нетривіальні рішення та використовувати їх для свого продукту. Занотовую та роблю скріншоти.
ДИЗАЙН ВЗАЄМОДІЇ
Функціональні та технічні вимоги до продукту
На початку роботи над проектом часто описуються вимоги до продукту. Вони допомагають об’єднати бізнес-вимоги та вимоги користувача, визначити що має бути в майбутньому продукті, описати необхідний функціонал і врахувати нові ідеї.
Функціональні вимоги
Розписую функціональні вимоги для мобільного додатка для орендаря у вигляді таблиці, виділяючи загальні завдання користувача, такі як:
• пошук автомобіля за параметрами;
• пошук заброньованого автомобіля;
• використання оренди автомобіля та CX;
• вказівка додаткових функцій (онбординг, BankID, штрафи тощо).
Додаю необхідні стовпці, де прописую мікро-сценарії та вирішення проблем завданням.
Технічні вимоги
Важливо визначити та описати технічні вимоги, тому що можуть випливти деякі нюанси, про які не згадав клієнт, так само обмежені можливості технологій для реалізації ідей.
Платформа
ОС: iOS 10.0–15.3
Пристрої
Підтримувані пристрої, версії операційних систем, форм-факторів та орієнтації екранів: iPhone SE, 7, 7 Plus, 8, 8 Plus, X, XS, XS Max, XR, 11, 11 Pro, 11 Pro Max, SE (2-го покоління), 12, 12 Mini, 12 Pro, 12 Pro Max, 13, 13 Mini, 13 Pro, 13 Pro Max.
Орієнтація екрану: портретна.
Специфікації екранів: https://www.apple.com/ua/iphone-11/specs/
Інтеграції
• Підключити BankID, зв’язати з “Дія”, щоб передати необхідні цифрові документи: паспорт, РНОКПП та посвідчення водія.
• Підключення до платіжних систем Apple Pay, Fondy.
• Опис інтеграції із сервісами.
• Хмарні та телематичні сервіси (Firebase, Parse, Realm, AWS, Microsoft Azure, Google Cloud Platform, OBD, GPS).
• Бази даних.
Локалізація
Використання трьох мов у порядку пріоритетності: УКР, ENG, РУС.
Збір статистики
Інтеграція із системами статистики, зняття метрик через сервіс Google Analytics.
Доступи
• Програма повинна мати можливість доступу до геопозиції.
• Програма повинна мати можливість доступу до фотокамери.
• Додаток повинен мати зв’язок із автомобілем через телематичну систему.
• У програмі повинні бути реалізовані PUSH-повідомлення для надсилання повідомлень.
Дизайн
Дотримання принципів Human Interface Guidelines.
Після цього знову провів пріоритизацію і ранжування: опис функціональних вимог для веб-сайту та CRM-системи для орендодавця переніс у беклог продукту. Поставив за мету зробити мінімально-життєздатний продукт (MVP), щоб перевірити його на реальних користувачах та отримати зворотний зв’язок, спланувати подальшу роботу.
Логіка роботи та структура
Юзерфлоу
Для визначення ключової логіки роботи користувача з сервісом, пропрацювати шлях користувача при вирішенні завдань я використовував логічні схеми або юзерфлоу. З інструментів вирішив використовувати фігму, а для деталізації структури X-mind: простий для освоєння інструмент.
За допомогою схеми визначив завдання, яке стоїть перед користувачем — орендувати автомобіль на певний термін, що є ключовим сценарієм. Кожен етап та дію користувача в додатку відзначаю блакитним кольором, а взаємодія поза — сірим. Шлях користувача “від A до Я” ставлю основними діями, які він повинен зробити і деталізую. З’єдную юзерфлоу з картою навігації за сценаріями: при натисканні на крок з дією, переходжу на вкладку з відповідними екранами прототипу.
Загальна структура мобільного додатка
Далі збираю деталізовану структуру, яка відображає всі сторінки та їх опис у майндмеп. У результаті промальовується ясна картина, яка допомагає отримати докладний документ з точною кількістю екранів і дій, але після роботи над проєктом піддається значним виправленням. Щоб полегшити навантаження зі сприйняттям, чого потрібно позбутися, а що додати — роблю вибір на занятті прототипом. Проробляю користувальницькі сценарії, розділяю їх на флоу.
Вайрфреймінг та скетчинг
Почав я з вайрфреймів — грубих скетчів структури продукту. Вони дозволяють швидко зафіксувати ідею того, як усе буде влаштовано. Спочатку з низькодеталізованих (low-fidelity), на папері та на айпаді. За рахунок прямокутників та кругів “від руки” промалювався основний скелет початкового екрану продукту.
Високодеталізований вайрфрейм (high fidelity) — це вже детальніший план, з підписами-поясненнями, що означає кожен елемент, робив вже у Фігмі.
Прототипування інтерфейсу
Один з моїх улюблених і одночасно об’ємних етапів проектування інтерфейсу є прототипування. Приступив я до нього після визначення ключового сценарію через структуру та її деталізацію, зібрану на підставі досліджень та скетчів. Прототипування допомагає швидко візуалізувати свої ідеї та гіпотези.
Основна мета створення прототипу — перевірити, наскільки послідовним є шлях користувача, і виявити перешкоди, які можуть виникнути в процесі його взаємодії з продуктом. Тут я почав ловити помилки, які не вдалося передбачити на етапі детальної структури. Структура потрібна, щоб позначити розділи та контент у цих розділах. На етапі опрацювання концепції та першого сценарію структура може бути наближеною. Як рішення, було обрано спиратися на ключовий сценарій користувача і походу допилюючи недоліки, паралельно вносячи правки до структури логічної схеми.
Відштовхувався від таких точок:
• визначення завдання, що стоїть перед користувачем;
• вказівка основних кроків для вирішення завдання.
Пройшовши кола правок “від себе” було релізовано першу версію інтерактивного прототипу (клікни на зображення).
Рекомендую затестити прототип при стабільному інтернет з’єднанні, щоб провантажилися вбудовані медіа.
Основне флоу включає:
• вибір типу автомобіля та пошук доступних варіантів, що знаходяться недалеко від користувача;
• підбір та вивчення найбільш відповідного варіанту під встановлені користувачем критерії за допомогою фільтрів та опцій;
• бронювання та використання підказки на карті, як дістатися до заброньованого авто;
• розблокування авто;
• етап перевірки на наявність пошкоджень через камеру на смартфоні, наслідування підказок;
• використання оренди: програма виступає навігатором і трекером.
Тестування
Для перевірки гіпотези на зрозумілий і зручний інтерфейс продукту проводиться його тестування користувачами. Знайти та впізнати проблематичні фрагменти інтерфейсу, зробити записи, а в подальшому внести правки у прототип.
ДИЗАЙН ГРАФІЧНОГО ІНТЕРФЕЙСУ
Основні кроки, які потрібно пройти, щоб опрацювати графічне оформлення інтерфейсу продукту:
• визначити загальний настрій, тон візуальної та текстової комунікації на основі досліджень цільової аудиторії.
• пропрацюйте кілька варіантів графічного оформлення ключових екранів.
• вибрати один варіант та пропрацювати всі екрани.
• пропрацювати ефекти та анімацію.
UI-дизайн
На цьому етапі вдалося підібрати кольорову схему, створити іконки та підібрати “безпечні” шрифти на fonts.google, зробити декілька мокапів продукту. В подальшому дизайн презентації кейсу на Behance. Взагалі, зробити UI-частину не було моєю метою.
Підготовка документації
- Лінки на флоу прототипу, щоб розробники зрозуміли що до чого і як це працює.
- UI-Kit з різними станами і видами елементів інтерфейсу, може бути як окремим документом чи вкладкою. Рекомендую робити пояснення щодо використання того чи іншого елементу.
- Карта навігації для впорядкування усих екранів та розділів, можна показати зв’язки.
- Карту навігації за сценаріями рекомендую розбивати на детальні флоу і робити примітки: в режимі перегляду можна переключитись на конкретний етап, не проходячи весь загальний флоу, наприклад: етап реєстрації нового користувача.
- Документ з поясненнями і усима лінками.
To be continued…
Подяки
Хочу виразити подяку ментору та дизайнеру Alex Voloshyn за підтримку та мотивацію рухатись далі навіть під час війни! В цей важкий час Олександр завжди був на зв’язку і допомагав структурувати процес проєктування, який раніше був хаотичним. Рекомендації ментора допомогли ґрунтовно поринути у тему продуктового дизайну, зміцнити свої знання та навички. Мої подяки, Олександр! Слава Україні!🇺🇦
З’явилися запитання чи маєш цікавий проєкт — keep calm and write to @YaroslavMoreson
