Як редизайн покращив ключові метрики платформи для вивчення мов

💡 Усі статті, обговорення, новини про Mobile — в одному місці. Приєднуйтесь до Mobile спільноти!

Усім привіт! Мене звати Сергій Філоленко, я Head of Design в Promova, платформі для вивчення мов з персоналізованим підходом. У 2022 році наш мобільний застосунок для вивчення мов Words Booster трансформувався у повноцінну мовну платформу під назвою Promova, а тому ми вирішили пропрацювати візуальне бачення свого бренду.

У 2023 році вже платформа з персоналізованого вивчення мов Promova провела масштабний ребрендинг, в рамках якого представила новий неймінг та редизайн мобільного застосунку та його вебверсії. А тому хотілося б розповісти про виклики цього проєкту та рішення редизайну, які допомогли покращити ключові метрики продукту.

Редизайн як відповідальність

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

Стартер пак айдентики для нас розробило дизайн-бюро Spilka. Запропонована айдентика круто виглядала у статиці, особливо у креативах для соцмереж. Проте ніхто до кінця не уявляв, як дизайн буде сприйматися в інтерфейсі, коли ним почнуть користуватися наші учні.

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

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

На першому етапі розробки UX та UI ми спробували не відходити від того, що пропонувало дизайн-бюро. Але що більше ми масштабували ідею та додавали екрани, то чіткіше розуміли, що дизайн все ж сприймається важкувато.

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

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

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

Що врешті допомогло навести порядок, то це відступи між блоками. Одна з основних фішок нашого брендингу — це те, що блоки щільно прилягають один до одного, вибудовуючи міцну композицію. Але в інтерфейсі ми ці стиснені блоки розбили на групи за функцією яку вони виконують і все запрацювало. Так, наприклад, у картках з квізами блоки запитання добре відокремлені від блоків з варіантами відповідей.

Редизайн як можливість

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

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

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

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

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

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

В результаті ми отримали чисті та красиві обкладинки, розміщені безпосередньо на кольоровому блоці.

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

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

Наостанок хотілося б розповісти про редизайн онбординга, адже він є квінтесенцією всіх описаних вище прийомів.

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

Результати

Які метрики покращив редизайн:

1. Середня кількість відкритих уроків на користувача зросла x2.
2. Конверсія в проходження 5-го уроку зросла на 30%.
3. Ми отримали приріст майже у 20 відносних пунктів на завершення онбординга.

Загалом редизайн став для нас нагодою бути сміливими та спробувати те, що давно відкладали. Ми зробили щось своє, несхоже на наших конкурентів.

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

Кілька порад для тих, хто збирається проводити редизайн

1. Починайте тестувати ваш новий дизайн якомога раніше. Краще залучати всі методології: і коридорні тести, і hifi-прототипи, і модеровані юзабіліті тестування готових шматків функціонала. Не чекайте, поки зберете все докупи.
2. Створіть усі компоненти відразу. Це допоможе значно швидше вносити правки.
3. Завжди намагайтеся перевірити ваші рішення на скейлі. Те, що працює на трьох екранах, може перестати працювати на тридцяти.
4. Протестуйте дизайн на мамі. Ця порада стосується випадків, коли у продукту доволі широка аудиторія. Так ви дізнаєтеся про всі незрозумілі та неочевидні місця в інтерфейсі.
5. Не забувайте про те, що дизайн має викликати емоції. Спроєктуйте емоційні піки користувача — визначтеся, на яких етапах ви будете його хвалити, на яких підтримувати тощо.
6. Будьте готові до того, що буде реалізовано максимум 80% вашого першочергового задуму. Десь спрацюють технічні обмеження, десь дедлайни, а деякі ідеї відкинуть стейкхолдери.
7. Багато комунікуйте з розробниками. Це допоможе вам раніше дізнатися про технічні обмеження з пункту вище, а також «продати» їм дизайн, щоб вони реалізовували його з більшим натхненням.
8. Намагайтеся зберегти цілісність дизайну. Коли проєктуєш окремі шматки функціонала, існує велика спокуса додати якихось локальних фішок, додаткових градієнтів. Але все це врешті негативно вплине на цілісність вашого продукту.