У 2022 році мобільний застосунок для вивчення мов Words Booster трансформувався у повноцінну мовну платформу під назвою Promova, а тому команда вирішила пропрацювати візуальне бачення свого бренду. У 2023 році вже платформа з персоналізованого вивчення мов Promova провела масштабний ребрендинг, у рамках якого представила новий неймінг та редизайн мобільного застосунку та вебверсії свого продукту. Сергій Філоненко, Head of Design в Promova, розповів про виклики щодо імплементації нової айдентики в UX та UI, а також результати, яких вдалося досягти завдяки редизайну продукту.
Редизайн, як відповідальність
Редизайн Promova був не просто запланованим апгрейдом наявного застосунку для вивчення мов. Фактично, з оновленим неймінгом та дизайном ми мали представити вже лояльним користувачам та потенційним юзерам абсолютно новий продукт. Робити щось відмінне від конкурентів та розривати шаблони на ринку вивчення мов — це відповідальність.
Стартерпак айдентики для нас розробило дизайн-бюро Spilka. Запропонована айдентика круто виглядала в статиці, особливо в креативах для соцмереж. Проте, ніхто до кінця не уявляв, як дизайн буде сприйматися в інтерфейсі, коли ним почнуть користуватися наші учні. Як відомо, 99% часу користувачі проводять не у вашому продукті, тож інтерфейс має бути побудований на загальноприйнятих патернах, і з цим краще не експериментувати.
А ще люди не люблять змін. Цю аксіому щоразу доводить черговий реліз з оновленнями Instagram. Користувачі зливають купу хейту на апдейти і пишуть, що не будуть користуватися застосунком. Проте з часом адаптуються і приймають зміни.
На першому етапі розробки UX та UI ми спробували не відходити від того, що пропонувало дизайн-бюро. Але що більше ми масштабували ідею та додавали екрани, то чіткіше розуміли, що дизайн сприймається важкувато. Екрани були перевантажені кольорами. Когнітивно це ускладнювало сприйняття контенту та створювало відчуття розгубленості. У випадку інтерфейсу, дизайн має бути своєрідним провідником у навчанні та скоріше не заважати, а в ідеалі ще й допомагати користувачу.
Тому нам довелося провести кілька ітерацій зі спрощення дизайну. У результаті ми прибрали сині картки, градієнти у варіантах відповідей та відмовилися від ідеї вмістити всі кольори брендука в одному екрані. Ми взяли курс в сторону зменшення когнітивного навантаження та покращення ієрархії.
Імплементацію оновленого дизайну вирішено було розпочати з вебу, бо там коротший та швидший цикл розробки. Таке рішення дозволило дешевше помилятися та тестувати різні дизайн-варіанти.
Що врешті допомогло навести порядок, то це відступи між блоками. Одна з основних фішок нашого брендингу — це те, що блоки щільно прилягають один до одного, вибудовуючи міцну композицію. Але в інтерфейсі ми ці стиснені блоки розбили на групи за функцією, яку вони виконують і все запрацювало. Так, наприклад, у картках з квізами блоки запитання добре відокремлено від блоків з варіантами відповідей.
Основний інструмент айдентики — це форма
Водночас редизайн дав нам можливість пропрацювати недоліки попереднього дизайну, протестувати сміливі рішення та розробити оптимальну дизайн-систему. Оскільки основний інструмент айдентики — це форма, саме за допомогою неї вирішили зробити зрозумілішою стрічку з уроками. Раніше всі уроки виглядали однаково, лише невелика іконка сигналізувала про їх тип (вокабуляр, граматика, спікінг). На всіх інтерв’ю ми бачили, що люди про неї не знають. Врахувавши це, в редизайні закодували кожен тип уроків своєю унікальною формою. Юзабіліті тести показали, що вже на другий раз користуванням платформою люди можуть зрозуміти, який блок якому типу уроку відповідає.
Також редизайн став нагодою пропрацювати ієрархію та акценти. Минулий дизайн був скромний, тому там все було приблизно однакового розміру. Після консультацій з контент-командою ми збільшили всі ілюстрації всередині уроків, а за допомогою типографіки змістили акценти на ключові для навчання речі, як-то кількість допущених помилок в уроці чи список вивчених сьогодні слів.
Окремим викликом стало зберегти нашу величезну спадщину авторських ілюстрацій. Їх відмальовано декілька тисяч, тож ми мали інтегрувати їх в новий дизайн. Пам’ятаючи, що редизайн — це можливість, відносно малими затратами по часу разом з ілюстраторами ми забрали кольорові підложки з обкладинок та «витягнули» ілюстрації з масок, що обрізали їх округлими формами. У результаті отримали чисті та красиві обкладинки, розміщені безпосередньо на кольоровому блоці.
Також нам вдалося провести через весь продукт єдиний принцип анімацій. Він народився з експериментів над іконкою – через «пружинні» трансформації блоків хотілося прокомунікувати персоналізацію інструментів навчання під користувача. Цей принцип ми заклали у всі анімації, а анімована іконка врешті стала лоадером.
Також редизайн став можливістю впровадити принцип безшовного переходу між платформами. Інтерфейси на вебверсії та в застосунку стали майже ідентичними, тож користувач може перемикатися між середовищами навчання без стресу.
Наостанок хотілося б розповісти про редизайн онбординга, адже він є квінтесенцією всіх описаних вище прийомів. Ми прагнули зробити онбординг максимально грайливим, ненудним та таким, що комунікує наші цінності. У результаті з’явилася така собі гра, в якій кожен, відповідаючи на запитання, збирає свій унікальний набір іконок. Потім трохи магії й вуаля: ваш персоналізований курс готовий.
Які метрики покращив редизайн?
1. Середня кількість відкритих уроків на користувача зросла вдвічі;
2. Конверсія в проходження 5-го уроку зросла на 30%;
3. Ми отримали приріст майже у 20 відносних пунктів в завершення онбординга.
Загалом редизайн став нагодою бути сміливими та спробувати те, що давно відкладали. Ми зробили щось своє, несхоже на наших конкурентів. З точки зору того, як буде виглядати продукт, це було ризикове рішення. Але, як ми зараз бачимо, в користувачів немає проблем з використанням застосунку. Всього за перші дні платформою у новому редизайні скористалося понад 170 тисяч людей.
Кілька порад для тих, хто збирається проводити редизайн
- Починайте тестувати ваш новий дизайн якомога раніше. Краще залучати всі методології: і коридорні тести, і hifi прототипи, і модеровані юзабіліті тестування готових шматків функціонала. Не чекайте поки зберете все докупи.
- Створіть усі компоненти відразу. Це допоможе значно швидше вносити правки.
- Завжди намагайтеся перевірити ваші рішення на скейлі. Те, що працює на трьох екранах, може перестати працювати на тридцяти.
- Протестуйте дизайн на мамі. Ця порада стосується випадків, коли в продукті доволі широка аудиторія. Так ви дізнаєтеся про всі незрозумілі та неочевидні місця в інтерфейсі.
- Не забувайте про те, що дизайн має викликати емоції. Спроєктуйте емоційні піки користувача — визначтеся, на яких етапах ви будете його хвалити, на яких підтримувати тощо.
- Будьте готові, що буде реалізовано максимум 80% вашого першочергового задуму. Десь спрацюють технічні обмеження, десь дедлайни, а деякі ідеї відкинуть стейкхолдери.
- Багато комунікуйте з розробниками. Це допоможе вам раніше дізнатися про технічні обмеження з пункту вище, а також «продати» їм дизайн, щоб вони реалізовували його з більшим натхненням.
- Намагайтеся зберегти цілісність дизайну. Коли проєктуєш окремі шматки функціонала, існує велика спокуса додати якихось локальних фішок, додаткових градієнтів. Але все це врешті негативно вплине на цілісність вашого продукту.