Редизайн додатків: від UX до UI [з кейс-стаді]

Що таке редизайн

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

Тепер поговорімо про те, коли вам слід подумати про те, щоб здійснити редизайн.

{{case-study}}

Коли потрібно переробити додаток

За ці роки ми зробили чимало редизайнів у Excited. Ось деякі з основних причин, коли слід задуматись про редизайн:

• Якщо залучення користувача або коефіцієнти утримання постійно знижуються, редизайн може допомогти знову залучити користувачів. Крім того, слід розглянути бенчмарки, щоб порівняти себе із конкурентами;
• Постійні негативні відгуки, низькі рейтинги в appstore або погані відгуки можуть сигналізувати про проблеми зручності використання, які може вирішити редизайн;
• Коли ваш додаток виглядає застарілим через новіші тенденції дизайну або старіння стеку технологій, редизайн забезпечує актуальність. Використовувати старі шаблони — не достатньо;
• Зміна бізнес-моделей, наприклад, впровадження нових стратегій монетизації або значних нових функцій, часто вимагає нового підходу до дизайну;
• Якщо конкуренти пропонують кращий користувацький досвід або функції, можливо, настав час переглянути дизайн вашого додатка.

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

Типи редизайну додатків

Існує чотири основні типи редизайну. Давайте розглянемо кожен в таблиці нижче.

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

Коли НЕ потрібно переробляти застосунок

Не всі причини редизайну є вагомими. Деякі — це просто форма бізнесової прокрастинації. Розгляньмо їх також.

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

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

Скільки коштує редизайн додатка

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

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

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

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

Як зробити редизайн: покроковий процес

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

Дослідження та аналіз: основа процесу редизайну додатків

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

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

Постановка цілей

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

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

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

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

Прототипування та тестування: подивіться, як працює додаток перед запуском

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

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

Вам не потрібно багато користувачів, щоб отримати змістовний та корисний відгук. Галузевий стандарт передбачає 5 користувачів на потік, який тестується.

Потім, на основі відгуків користувачів, ви можете внести зміни в прототип, перш ніж зафіксувати ці недоліки зручності використання в коді.

Розробка

Дизайн і розробка повинні йти пліч-о-пліч. Хоча ми розглядаємо розробку як четвертий крок, розробники повинні бути залучені на ранніх стадіях, щоб переконатися, що ми не розробляємо щось, що технічно неможливо реалізувати.

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

Запуск і моніторинг

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

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

Поступово впроваджуйте зміни, відстежуйте продуктивність та динаміку за допомогою аналітики та використовуйте A/B-тестування для перевірки вдосконалень.

Кейс-стаді 1: Xilo — UX-трансформація за допомогою редизайну

Передумови

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

Успішний редизайн мобільних додатків та оновлення робочого столу

Після дослідження користувачів ми створили вайрфрейми та прототипи Figma, а потім провели тестування юзабіліті як для мобільних додатків, так і для вебверсій. Бета-тестери надали цінну інформацію, що дозволило швидко вдосконалити дизайн перед розробкою. Щоб забезпечити візуальну послідовність додатку, ми створили систему дизайну з 200+ компонентів інтерфейсу користувача, понад 400 ілюстрацій та восьмипіксельною сітковою системою, посилюючи ідентичність бренду на всіх платформах.

Результати

Редизайн був успішним, що призвело до свіжого вигляду, більш зручного додатка та покращення задоволеності та утримання користувачів. Проєкт редизайну Xilo призвів до фінансування у розмірі 14 мільйонів доларів, понад 300 корпоративних клієнтів та присутності в 38 штатах, що доводить, що добре виконаний редизайн мобільного додатку може збільшити залучення та утримання користувачів, стимулюючи зростання бізнесу.

Кейс-стаді 2: ClubReady — цілісний редизайн користувальницького досвіду

Передумови

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

Мобільний додаток, вебдодаток та редизайн вебсайту

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

Результати

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

Висновок, TLDR

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

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