Редизайн Promova був не просто запланованим апгрейдом наявного застосунку для вивчення мов. Фактично, з оновленим неймінгом та дизайном ми мали представити вже лояльним користувачам та потенційним юзерам абсолютно новий продукт. Робити щось відмінне від конкурентів та розривати шаблони на ринку вивчення мов — це відповідальність.
Стартерпак айдентики для нас розробило дизайн-бюро Spilka. Запропонована айдентика круто виглядала в статиці, особливо в креативах для соцмереж. Проте, ніхто до кінця не уявляв, як дизайн буде сприйматися в інтерфейсі, коли ним почнуть користуватися наші учні. Як відомо, 99% часу користувачі проводять не у вашому продукті, тож інтерфейс має бути побудований на загальноприйнятих патернах, і з цим краще не експериментувати.
А ще люди не люблять змін. Цю аксіому щоразу доводить черговий реліз з оновленнями Instagram. Користувачі зливають купу хейту на апдейти і пишуть, що не будуть користуватися застосунком. Проте з часом адаптуються і приймають зміни.
На першому етапі розробки UX та UI ми спробували не відходити від того, що пропонувало дизайн-бюро. Але що більше ми масштабували ідею та додавали екрани, то чіткіше розуміли, що дизайн сприймається важкувато. Екрани були перевантажені кольорами. Когнітивно це ускладнювало сприйняття контенту та створювало відчуття розгубленості. У випадку інтерфейсу, дизайн має бути своєрідним провідником у навчанні та скоріше не заважати, а в ідеалі ще й допомагати користувачу.
Тому нам довелося провести кілька ітерацій зі спрощення дизайну. У результаті ми прибрали сині картки, градієнти у варіантах відповідей та відмовилися від ідеї вмістити всі кольори брендука в одному екрані. Ми взяли курс в сторону зменшення когнітивного навантаження та покращення ієрархії.
Імплементацію оновленого дизайну вирішено було розпочати з вебу, бо там коротший та швидший цикл розробки. Таке рішення дозволило дешевше помилятися та тестувати різні дизайн-варіанти.
Що врешті допомогло навести порядок, то це відступи між блоками. Одна з основних фішок нашого брендингу — це те, що блоки щільно прилягають один до одного, вибудовуючи міцну композицію. Але в інтерфейсі ми ці стиснені блоки розбили на групи за функцією, яку вони виконують і все запрацювало. Так, наприклад, у картках з квізами блоки запитання добре відокремлено від блоків з варіантами відповідей.
Водночас редизайн дав нам можливість пропрацювати недоліки попереднього дизайну, протестувати сміливі рішення та розробити оптимальну дизайн-систему. Оскільки основний інструмент айдентики — це форма, саме за допомогою неї вирішили зробити зрозумілішою стрічку з уроками. Раніше всі уроки виглядали однаково, лише невелика іконка сигналізувала про їх тип (вокабуляр, граматика, спікінг). На всіх інтерв’ю ми бачили, що люди про неї не знають. Врахувавши це, в редизайні закодували кожен тип уроків своєю унікальною формою. Юзабіліті тести показали, що вже на другий раз користуванням платформою люди можуть зрозуміти, який блок якому типу уроку відповідає.
Також редизайн став нагодою пропрацювати ієрархію та акценти. Минулий дизайн був скромний, тому там все було приблизно однакового розміру. Після консультацій з контент-командою ми збільшили всі ілюстрації всередині уроків, а за допомогою типографіки змістили акценти на ключові для навчання речі, як-то кількість допущених помилок в уроці чи список вивчених сьогодні слів.
Окремим викликом стало зберегти нашу величезну спадщину авторських ілюстрацій. Їх відмальовано декілька тисяч, тож ми мали інтегрувати їх в новий дизайн. Пам’ятаючи, що редизайн — це можливість, відносно малими затратами по часу разом з ілюстраторами ми забрали кольорові підложки з обкладинок та «витягнули» ілюстрації з масок, що обрізали їх округлими формами. У результаті отримали чисті та красиві обкладинки, розміщені безпосередньо на кольоровому блоці.
Також нам вдалося провести через весь продукт єдиний принцип анімацій. Він народився з експериментів над іконкою – через «пружинні» трансформації блоків хотілося прокомунікувати персоналізацію інструментів навчання під користувача. Цей принцип ми заклали у всі анімації, а анімована іконка врешті стала лоадером.
Також редизайн став можливістю впровадити принцип безшовного переходу між платформами. Інтерфейси на вебверсії та в застосунку стали майже ідентичними, тож користувач може перемикатися між середовищами навчання без стресу.
Наостанок хотілося б розповісти про редизайн онбординга, адже він є квінтесенцією всіх описаних вище прийомів. Ми прагнули зробити онбординг максимально грайливим, ненудним та таким, що комунікує наші цінності. У результаті з’явилася така собі гра, в якій кожен, відповідаючи на запитання, збирає свій унікальний набір іконок. Потім трохи магії й вуаля: ваш персоналізований курс готовий.
1. Середня кількість відкритих уроків на користувача зросла вдвічі;
2. Конверсія в проходження 5-го уроку зросла на 30%;
3. Ми отримали приріст майже у 20 відносних пунктів в завершення онбординга.
Загалом редизайн став нагодою бути сміливими та спробувати те, що давно відкладали. Ми зробили щось своє, несхоже на наших конкурентів. З точки зору того, як буде виглядати продукт, це було ризикове рішення. Але, як ми зараз бачимо, в користувачів немає проблем з використанням застосунку. Всього за перші дні платформою у новому редизайні скористалося понад 170 тисяч людей.
Вклались у 187 годин: як команда Axicube вдосконалила інтерфейс military-tech застосунку
Як редизайн покращив ключові метрики платформи для вивчення мов Promova
Не писати в шухляду. Як військове медіа «Мілітарний» просуває польську версію сайту
Made With Bravery — ще одна цеглинка в українську комунікацію Сміливості
Айдентика до фестивалю української культури в Хорватії
Ребрендинг спортивного клубу «Фіткульт»