Дизайн інтерфейсу додатку Rocket почав поступово оновлюватися на початку пандемії — у періоду активного росту замовлень. А в лютому 2021 відбувся реліз оновленого дизайну головного екрану додатку — це стало найпомітнішою зміною. Дар’я Пудова, Product Designer у Rocket, розповіла про цей процес змін.

Чим зумовлено рішення редизайну головного екрану:

• по-перше, це вихід на міжнародні ринки. Напередодні редизайну у грудні 2020 компанія запустила доставку їжі через застосунок на Кіпрі. І планувались запуски сервісу у десятках країн Європи. Це означало, що продукт має бути конкурентоспроможним та відповідати потребам не тільки українських користувачів, але і європейських;
• по-друге, покращення базових показників продукту та користувацького досвіду. Оскільки цілі компанії напряму пов’язані з ростом показників, редизайн головного екрану, звідки починається флоу користувача, відіграє вагому роль та є зоною росту;
• по-третє, загальний редизайн всього застосунку та оновлення позиціонування бренду. У тому ж лютому відбувся ребрендинг компанії – Ракета стала Rocket. Також, паралельно покращувався користувацький досвід, що стосувалося поступового редизайну інших частин застосунку. Таким чином, редизайн головного екрану став логічним та неминучим кроком.

Отже, цілі були зрозумілі, але не обійшлось без викликів:

• від бізнесу стояла обов’язкова вимога – зберегти унікальність головної сторінки. Вона мала відрізняти продукт поміж конкурентів: з першої секунди зробити бренд впізнаваним, викликати у користувача емоцію, та транслювати tone of voice продукту;
• зробити дизайн головного екрану максимально гнучким та масштабованим для подальших змін;
• і звісно ж, забезпечити кращий користувацький досвід, зробити взаємодію зручнішою, та скоротити шлях до замовлення їжі.

І все б нічого, якби не час, якого у нас було вкрай мало не тільки на пошук дизайнерського рішення, але і на саму розробку. З огляду на це, ми мали йти з MVP версією, але при цьому виконати завдання, які стояли перед командою.

Початок

Відправною точкою та основою для початку редизайну стали 3 джерела даних:

1. Аналіз конкурентів
2. Вимоги від стейкхолдерів
3. Досвід від користувачів (аналітика та відгуки користувачів по поточному екрану)

Аналіз конкурентів та стандарти food tech

На той момент ми досить добре знали своїх основних конкурентів на українському ринку (Glovo, Bolt Food), а також лідерів в Європі (Uber Eats, Takeaway, Wolt). Але вирішили детальніше вивчити їхні рішення з фокусом на головній сторінці та взаємодії з контентом. Аналізували два основні аспекти:

1. Layout головних сторінок та візуальні рішення
2. Функціонал

Головні сторінки проаналізованих продуктів використовують layout «плитки» з різними поєднаннями категорій, карток, промо-блоків тощо. Це був достатньо логічний та гнучкий підхід, що відразу давав користувачеві доступ до вибору їжі та можливість легко використовувати сітку для додавання нових блоків та функціоналу.

Порівняльний аналіз функціоналу показав, що Rocket та той момент не забезпечував користувачів всіма базовими фічами, які є в інших додатків доставки. Просто редизайну буде недостатньо. Тут з’явився ще один виклик – перепроєктувати головну сторінку таким чином, щоб потім безболісно імплементувати будь-який новий функціонал.

Отримані результати допомогли під час презентації та аргументації концепту стейкхолдерам та, звісно, дали змогу зрозуміти очікування, які склались у користувачів на ринку сервісів доставки їжі.

Чого хоче бізнес

Крім дотримання унікальності у редизайні головної сторінки, ми враховували ще й те як це вплине на показники продукту, як допоможе надалі працювати з ним: які продуктові експерименти можна буде запускати та як масштабувати продукт в цілому, враховуючи довгострокову стратегію. Це відіграло одну з ключових ролей у пошуці нового рішення.

Дані від користувачів

На той час ми вже знали ключові проблеми, які мають бути вирішенні. Дані були зібрані в результаті юзабіліті тестувань, аналізу відгуків користувачів в App Store та Play Market і даних від служби підтримки.

Серед ключових проблем були наступні:

• поле вибору адреси сприймали як поле пошуку;
• поле пошуку було непомітне;
• незрозумілість секції з трьома баблами (чому відображаються лише три заклади);
• незрозумілість баблів з акційними пропозиціями (назви, групування акцій);
• відсутність відображення активного замовлення;
• проблеми зчитуваності контенту (замалий шрифт в назві деяких баблів);
• забагато оранжевого кольору, застарілий дизайн;
• відсутність динаміки, очікуваної інтерактивності на головному екрані.

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

Завдання, які мав вирішити редизайн

Проблемою та одночасно зоною росту стала втрата користувачів ще на головному екрані. Ми поставили за ціль перепроєктувати головну сторінку застосунку таким чином, щоб збільшити відсоток переходів з нього на сторінку ресторану/магазину та, відповідно, вплинути на ріст конверсії у замовлення.

Основна гіпотеза: потрапляючи на сторінку, частина користувачів не йшли далі до вибору конкретного закладу, бо не були зацікавлені жодною пропозицією, адже не бачили конкретних пропозицій одразу.

Дизайн мав виправити обмеженість layout для подальшого масштабування. Минула версія головної сторінки дозволяє розміщувати лише 3 категорії (зазвичай використовувались як акційні) та лише 3 найпопулярніші заклади. Це дуже зв’язувало руки як у додаванні будь-якого іншого функціоналу, так і в можливості налаштовувати видачу контенту та експериментувати з кількістю контенту та категорій. Додати промо блок чи ще щось було вкрай важко.

Також було важливо розв’язати проблеми usability, які були зібрані від користувачів. Фокус був на покращенні вибору адреси та часу доставки; доступності і зрозумілості категорій і закладів для вибору, а також на зручнішій взаємодії з контентом.

Основні принципи редизайну головного екрану:

• Value як можна раніше
• Гнучкість та масштабованість
• Впізнаваність бренду з перших секунд
• Головна сторінка як база для продуктових експериментів
• Підготовка продукту до персоналізованої видачі контенту
• Усунення проблем поточного дизайну.

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

Рішення

Відразу показувати список закладів

Першим і ключовим рішенням було відразу показувати список закладів, прибираючи зайвий крок з вибором категорії «Ресторани». Це мало:

• Розв’язати проблему втрати частини користувачів, що так і не дійшли до вибору закладу. Очікувалось покращення показника конверсії в замовлення, шляхом зменшення кількості кроків воронки.
• Зменшити когнітивне навантаження (для нових користувачів), даючи зрозуміти про що цей додаток. Фото закладів з їжею працює значно краще, ніж необхідність вчитуватись в підписи та розпізнавати іконки категорій.

Оптимізація взаємодії з контентом

Раніше користувач бачив лише 3 категорії акцій та мав зробити зайвий крок, щоб переглянути кожну з них. Ми розмістили категорії зі спеціальними пропозиціями у горизонтальному скролі, чим зробили доступним та видимими максимальну кількість категорій на одному екрані. Всі інші заклади користувач міг скролити вже у вертикальному списку. Такий формат розв’язував ще й проблему гнучкості для продуктових експериментів, давав можливість безболісно «вбудувати» будь-який інший блок у наявну структуру та персоналізувати список під потреби та попередні замовлення юзерів.

Категорії за типами кухні

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

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

Вибір адреси та часу доставки

• Покращили вікно вибору часу: використали нативні пікери для обох мобільних платформ.
• Змінили сам механізм зміни / вибору адреси. Раніше користувачі мали знову обирати її на карті та проходити довгий шлях вводу та підтвердження. Ми спростили шлях, відразу показуючи список останніх та збережених адрес.

Валідація дизайну

Одразу після того як був фіналізований концепт, ми зібрали фідбек у наших користувачів щодо нового дизайну. Провели Desirability study, де юзери мали описати дизайн старої та оновленої версії за рядом характеристик (знайомий, творчий, інноваційний, надійний тощо). Отримані результати дали зрозуміти, що рухаємось у правильному напрямі.

Після релізу та переходу всіх користувачів на оновлену версію головною сторінки, запустили наступну хвилю збору фідбеку. Провели ще два дослідження: опитування та серію юзабіліті тестувань. Отримані результати показали чудові кейси для подальшого покращення UX, а також ще раз підтвердили необхідність реалізації функціоналу, який не увійшов у MVP.

Наразі ми вже розробляємо новий функціонал та логіку, що безпосередньо стосується головного екрану. І сподіваємось, що вже скоро наші користувачі будуть робити замовлення ще швидше та зручніше.

Telegraf.Design живе за підтримки спільноти. Підтримуйте Telegraf.Design на Patreon.