Перед редизайном SaaS-продукту
Редизайн це найдорожчий спосіб виправити продукт, який ніхто уважно не роздивився. Найбільше цінності дає робота до першого нового екрана. Розповідаємо, що ми робимо спочатку і що ви можете підготувати ще до розмови зі студією.
Редизайн, дрібні правки чи спершу прототип
Продукту потрібен редизайн, коли він працює, люди ним уже користувалися, а поруч із конкурентами він усе одно виглядає блідо, одноманітно чи застаріло. Корисних функцій замало, якщо продукт нікому не приємно відкривати. Технології сьогодні доступні всім, AI-продукти конкурують між собою, а новий конкурент може скопіювати ваші найкращі функції за кілька тижнів. Вашим лишається продуманий дизайн і звичка його покращувати. Різниця як між звичайним таксі і преміальним авто: маршрут той самий, а причина повернутися інша.
Для редизайну зарано, коли ще немає чого оновлювати. Перед ним іде прототип: простий вайрфрейм, клікабельний прототип у Figma або живий продукт у старому дизайні, тобто прототип, який просто вже існує в коді. Ще краще мати першу версію з реальними користувачами і їхніми першими відгуками. Без цього почніть із прототипу.
Редизайн не потрібен і тоді, коли продукт уже виглядає не гірше за конкурентів і перевірений на користувачах. Тоді йому потрібна підтримка: регулярні огляди, відгуки клієнтів і послідовні покращення. Продукт це процес, а не разова здача проєкту.
Назвіть, що насправді не так
«Виглядає застаріло» це симптом. Перш за все запишіть, де продукт втрачає людей: крок, на якому кидають пробний період, екран, який підтримка пояснює найчастіше, задача, що забирає на три кліки більше, ніж треба. Якщо у вас є аналітика чи записи сесій, вони зазвичай вказують на ті самі кілька місць.
Коли ми повернулися до Aimgod через дев’ять років після першої версії, візуальний стиль виявився найменшою проблемою. Справжня робота була в структурі: кожна задача, звичка і ціль мали з’єднатися з одним питанням, заради якого існує продукт. Чи йде мій час туди, куди я хочу?
Почніть з короткого UX-аудиту
Перед повним редизайном ми часто пропонуємо короткий платний UX-аудит. Він триває близько тижня і закінчується списком проблем за пріоритетом: що збиває людей з пантелику, що їх гальмує, що підриває довіру і що можна виправити швидко. Деякі команди на цьому зупиняються і самі виправляють десять головних проблем. Інші беруть список за бриф для редизайну, і тоді редизайн виходить меншим і дешевшим, бо б’є точно в те, що важливо.
Хороший аудит розглядає продукт з чотирьох боків:
- Сценарії. Скільки кроків займають основні задачі і на якому кроці люди йдуть.
- Інформаційна архітектура. Чи відповідає навігація тому, як користувачі думають про продукт.
- Інтерфейс. Ієрархія, контраст, стани, узгодженість між екранами.
- Тексти. Підписи, порожні стани і повідомлення про помилки мовою користувача.
Досліджуйте задачу, а потім екрани
Поговоріть із людьми, які користуються продуктом, і поспостерігайте, як вони виконують головну задачу. Для Spillsjakk, платформи шахових турнірів Норвезької шахової федерації, такою задачею було провести турнір для школярів і студентів від початку до кінця.
На першому дзвінку команда сказала, що знає, як має працювати продукт, але розробка перетворилася на хаос. Частина екранів існувала окремими фрагментами, частина жила в Excel, частина на стандартній темі WordPress. Люди вже цим користувалися, тож це був справжній прототип, просто дуже сирий. Ми почали впорядковувати все на дошці в Miro: цільова аудиторія, цілі, карта користувацьких історій, карта сайту, інформаційна архітектура і користувацькі сценарії для кожного кроку арбітра. Технічний директор федерації долучався на кожному етапі і підтверджував, де має бути кожна функція. Лише після цього ми перейшли до вайрфреймів.
Карта користувацьких історій варта витраченого часу. Вона показує весь шлях на одній стіні, і прогалини, непомітні на окремих екранах, стають очевидними.
Спочатку сценарії, потім візуал
Більшість редизайнів, які розчаровують, це нова оболонка на старих сценаріях. Спершу намалюйте найкоротший шлях для кожної ключової задачі, приберіть кроки, які існують з історичних причин, і розмістіть потрібну людям інформацію на тому екрані, де вона потрібна. Лише потім переходьте до дизайну інтерфейсу.
У Spillsjakk це означало один екран на турнір, де гравці, жеребкування, партії і результати під рукою. Арбітр більше не стрибає між сторінками під час туру.
Переписуйте тексти разом із дизайном
Текст в інтерфейсі це частина дизайну. Підписи, порожні стани, повідомлення про помилки і підказки вирішують, чи пояснює екран сам себе. Ми пишемо і редагуємо тексти разом із макетами, мовою, якою говорять ваші користувачі. Редизайн також слушний момент прибрати внутрішні назви, які просочилися в продукт.
Коли клієнт хоче як у конкурента
Таке буває, хоча в чистому вигляді рідко. Більшість засновників хочуть виглядати як лідер і водночас вирізнятися. Ми складаємо два списки: що з того, що робить конкурент, ми залишимо, і в чому будемо іншими, через додаткову функцію або ту саму задачу, розв’язану по-іншому.
Відмінність працює на трьох рівнях. Найменша з них візуальна: тут більші елементи керування, там функція, захована в меню. Краща функціональна, коли продукт розв’язує задачу по-своєму. Найкраща це відмінність у баченні. Aimgod не черговий застосунок зі списком справ, у нього власна філософія фокусу, і з неї випливають і його функції, і інтерфейс. Продукт, що відрізняється на всіх трьох рівнях, важко скопіювати.
Будуйте систему, а не набір екранів
Редизайн, зданий як 80 статичних екранів, починає розсипатися в перший же тиждень, щойно розробник додає новий екран. Передавайте разом із ним дизайн-систему: токени кольору, типографіки і відступів, компоненти з їхніми станами і правила верстки. Для Aimgod це означало 17 розмірів шрифту і 6 накреслень, від дрібних підписів на графіках до великих заголовків, усе задокументовано як токени. У Spillsjakk система охоплює понад 150 екранів у світлій і темній темах.
Скільки триває редизайн SaaS
Це залежить від кількості сценаріїв і ролей, а не від кількості екранів. Сфокусований редизайн одного головного сценарію разом із дизайн-системою може зайняти від чотирьох до шести тижнів. Повна платформа потребує більше часу. Дизайн Spillsjakk зайняв понад 400 годин за вісім місяців і охопив 150 екранів і кілька ролей користувачів, бо продукт ріс, поки ми над ним працювали.
Плануйте реліз як частину проєкту. Заздалегідь вирішіть, чи редизайн вийде одразу, чи частинами, як нинішні користувачі зустрінуть новий інтерфейс і що ви вимірюватимете після запуску. Зробіть прототипи найризикованіших сценаріїв і протестуйте їх на реальних користувачах до початку розробки. Це найдешевший момент, щоб передумати.
Що підготувати до розмови зі студією
- Доступ до аналітики, записів сесій чи звернень у підтримку, навіть у сирому вигляді.
- Два чи три користувачі, готові до короткого дзвінка.
- Список задач, заради яких існує ваш продукт, у порядку важливості.
- Ваші поточні дизайн-файли і стек кодової бази, хоч у якому стані вони зараз.
- Як виглядає успіх через шість місяців після запуску.
Щоб скласти короткий список студій, відкривайте самі продукти з їхніх кейсів, а не лише картинки, і читайте відгуки клієнтів на незалежних платформах. Creayou представлена серед агенцій UI/UX-дизайну і має статус designrush verified.
З цим перша розмова буде про ваш продукт, а не про процес. Якщо плануєте редизайн, подивіться, як ми працюємо над дизайном SaaS-продуктів, або розкажіть нам про проєкт.
