Привіт, мене звати Марта Цісарук, я Product Designer компанії Enestech Software, частини холдингу TECHIIA. Півроку тому ми провели повний редизайн одного з наших основних продуктів - У процесі ми знайшли всі старі граблі, а також придумали, як подружити бізнес, який хоче заробити, і користувачів, які хочуть трохи менше помічати інтерфейс.
Нижче я розповім, навіщо знадобився редизайн, яким маршрутом ми йшли і які висновки зробили.
Про продукт і те, як ми прийшли до редизайну
У 2017 році наша компанія запустила Senet — хмарне SaaS-рішення для управління комп’ютерними клубами та кібераренами. Воно складається з панелі управління для власників і адміністраторів, а також інтерфейсу гравця, який геймери бачать одразу після запуску системи.
За допомогою інтерфейсу геймера відвідувач клубу оплачує сесію, обирає і запускає гру, дізнається час до кінця сесії і отримує інформацію про акції, які проводить клуб.
Фото: eSport Club SKiLL
Під час запуску ми були зосереджені на B2B-частині, тому першу версію інтерфейсу гравця робили нашвидкоруч. Спиралися більше на свій користувацький досвід і пропозиції керівників клубів.
Senet став успішним продуктом і увійшов в шорт-листи кращих SaaS-рішень. Адмінпанель дозволяє контролювати завантаження та фінанси клубу з будь-якої точки світу. На старті продажів у 2017 році в нас було всього два клієнти — мережа IT Land і одеський клуб SKiLL. Сьогодні ми обслуговуємо майже 2000 комп’ютерних клубів в 60+ країнах світу.
Фото: блог Senet.Cloud
Коли з’явилося так багато клієнтів, ми вирішили покращити інтерфейс гравця. До редизайну підштовхнула і пандемія: продукт додав freemium-модель, але старий інтерфейс гравця не дозволяв її впровадити.
Весь процес у нас вклався у 12 етапів, релевантних для різних продуктів.
1. Визначаємо проблемні місця старого інтерфейсу
Ми виділили в старому інтерфейсі кілька головних точок для змін.
- Складна підтримка і масштабування
Через швидкість ми робили оболонку без дизайн-системи і стандартів. Кожен розробник писав код по-своєму, і з часом проводити апгрейди інтерфейсу стало неможливо. Привести до стандартів старі елементи інтерфейсу було довше, ніж створити інтерфейс з нуля.
- Невідповідність трендам розвитку моніторів
Створюючи старий інтерфейс, ми орієнтувалися на Україну та країни, які поруч. Але не врахували, що на глобальному ринку клуби все більше і частіше використовують монітори з роздільною здатністю більше 2560 пікселів. Це одна з фішок, якими затягають гравців — не кожен дозволить собі крутий дисплей вдома.
- Незручні налаштування
Залежно від потреб клуби могли змінювати в інтерфейсі гравця тільки фон, логотип і тему інтерфейсу. Але не могли, наприклад, вивести потрібну їм інформацію для гравця на перший екран. У новій версії ми хотіли додати можливість збирати головну сторінку як конструктор.
- Складні та зайві елементи
Відгуки та аналітика показали, що не всі частини оболонки зрозумілі геймерам, а деякі функції, як оформлення ігрових каталогів, узагалі не використовувалися.
2. Враховуємо вимоги бізнесу
Senet працює за підпискою. Клуби платять фіксовану вартість за місяць користування і обраний функціонал.
При масштабуванні ми виявили, що в деяких країнах така модель не спрацює. Власники клубів принципово не платили за ліцензійний софт і вважали за краще нехай ламане і малофункціональне, але безкоштовне ПЗ. Проте, це ринки з величезними аудиторіями клубів і гравців. Закріпитися на них було можливо, якщо запропонувати їм Senet безкоштовно, але з показом реклами.
З іншого боку, клуби, які користувалися платною версією, хотіли розміщувати відеорекламу, банери і новини про клубні акції. Це важлива частина системи клубної монетизації.
Тут і була проблема: вбудувати рекламу в старий інтерфейс гравця було неможливо. Тому одним із завдань редизайну було додавання рекламних місць.
Фото: Senet Shell
3. Вивчаємо алгоритм поведінки користувачів
Senet — це B2B-продукт. Однак користуються ним не тільки власники і адміністратори клубів, але і геймери. Значить, його можна позиціонувати як B2B2C. У першому інтерфейсі ми не врахували фактор його зручності для гравців, тож обов’язково мали виправити цю помилку при редизайні.
Ми запланували поліпшити користувальницький досвід, інтегрувати рекламу і контент від бізнесу так, щоб не дратувати гравців. Інакше через занадто щільний потік зайвої інформації користувач просто не знайде гру, за якою прийшов до клубу.
Для вирішення цього завдання треба було зрозуміти, як геймери поводяться під час відвідин клубів. Ми поговорили з адміністраторами клубів в різних країнах і за згодою користувачів провели ряд тестів.
У результаті народилися два важливих висновки:
- Якщо геймер, наприклад, проводить в клубі п’ять годин, то в інтерфейсі з них — всього хвилин вісім. Це лише короткий шлюз для запуску гри з каталогу. Є ще локальні особливості. Наприклад, в деяких країнах СНД і Європи користувач повинен реєструватися, вказуючи номер телефону. Таким чином час всередині інтерфейсу збільшується ще на 2-3 хвилини.
- Менеджмент клубів зацікавлений утримувати гравців в інтерфейсі довше, щоб вони переходили різними сторінками, отримували інформацію про клубні пропозиції, новини та акційні пакети.
Нам потрібно було принаймні не збільшувати час, проведений геймером в інтерфейсі. Крім того, не можна ставити всю необхідну клубам інформацію в одному місці. Якщо зробити інтерфейс занадто складним і перевантаженим, збільшиться ймовірність того, що гравець не сприйме повідомлення.
4. Проводимо функціональний аналіз
На наступному етапі потрібно було зрозуміти, які частини продукту важливі клієнтам. Наприклад, 65% клубів продають пакетний час і пропонують пакети гравцеві на старті сесії. Для них цей функціонал ключовий.
Фото: Сторінка каталогу ігор старої Shell
Виявилося і зайве. У каталозі старого інтерфейсу у кожної гри була окрема сторінка, на якій розміщувалися опис, скріншот, відео та додаткова інформація різними мовами. Такі сторінки клуби мали заповнювати самостійно, ми надавали тільки назви і обкладинки ігор.
При вивченні каталогів клубів виявилося, що заповнених сторінок було не більше 20%. Але навіть на них ніхто з гравців не заходив. Геймери приходять пограти в уже знайому їм гру, вони знають її опис. У новому інтерфейсі цієї опції немає, і про неї ніхто не згадує.
Фото: Сторінка каталогу ігор нової Shell
5. Проводимо інтерфейсний аналіз
Далі ми аналізували, як саме користувачі взаємодіють з інтерфейсом і які проблеми при цьому виникають.
Фото: Стартова сторінка продажу абонементів старої Shell
Наприклад, виявили, що геймери плуталися в сторінці придбання пакетів ігрового часу. Натискали не на ті кнопки, не розуміли, як закрити вікно і перейти до ігор, часто купували пакети помилково.
Фото: Стартова сторінка продажу абонементів нової Shell
Це був фейл першої версії: в Senet я з моменту зародження продукту і саме тут напрацьовувала дизайнерський досвід, якого на початку просто не вистачало. До того ж, ми поспішали завершити продукт і протестувати цей функціонал на реальних користувачах не встигли. А клуби не розповіли нам про ці складнощі гравців.
6. Проводимо інтерв'ю з користувачами
Паралельно я запустила у клубах опитувальник з метою отримати контакти гравців, готових поділитися враженням про роботу з інтерфейсом.
Інтерв’ю з геймерами підтвердили: вони приходять в клуб з однією метою — пограти. Не запам’ятовують інтерфейс програми на ПК, для них важливіші інші чинники: вартість часу, рівень техніки і зручність крісел у клубі.
Адміни розповіли про найчастіші проблеми гравців під час роботи з інтерфейсом. З’ясувалося кумедне. У старому інтерфейсі була функція зв’язку з адміністратором, яка давала можливість відправити йому повідомлення. Але цією кнопкою ніхто не користувався, можливо, її навіть не знайшли. Гравцям було зручніше кликати адміністратора по-старому — голосом.
Власники клубів розповідали, що приносить їхнім клубам більше доходу. На підставі інтерв’ю ми зробили висновок, який функціонал для них більш пріоритетний.
При цьому, для нас було важливо інтегрувати в інтерфейс рекламу як джерело монетизації продукту. А клуби хочуть продавати пакети часу і свої акції. Між цими завданнями потрібно було знайти баланс.
7. Вивчаємо продукти конкурентів і тренди продуктового дизайну
Головні з конкурентів Senet — американський ggLeap і грецький Gizmo. Є ще кілька старих нехмарних рішень. Вони не оновлюються і не підтримуються, але деякі клуби воліють економити і продовжують встановлювати саме їх.
Фото: Приклади інтерфейсів конкурентів
Окремі клуби, подібно до нас колись, створюють власні програми. Але їхня кількість стрімко зменшується, тому що утримувати розробників дорого, а конкуренція в цьому сегменті занадто висока. Зараз дешевше перейти на якісний сучасний SaaS з постійними оновленнями і цілодобовим сервісом підтримки клієнтів.
Вивчаючи продукти конкурентів, ми звернули увагу, що вони часто змінюють інтерфейс гравців, але ці апгрейди стосуються переважно рішень кольору. Мабуть, так намагаються викликати у гравців нові емоції.
Головним дизайнерським висновком стало те, що інтерфейси схожих сервісів зроблені за канонами 1990-х — у стилістиці скевоморфізм з використанням об’ємних зображень, як в інтерфейсі «танчиків» для Dendi.
Такий інтерфейс складно розробляти і підтримувати. Зараз головний тренд в розробці інтерфейсів — простота і легкість. А ми якраз наголошували на тому, щоб гравцеві було простіше орієнтуватися в оболонці, знаходити потрібну інформацію і функції. До того ж, більшість усе одно не запам’ятовує, як вона виглядає.
На цю тему в нашій команді було багато суперечок. Одні вважали, що потрібно рівнятися на конкурентів. Інші хотіли використовувати фірмовий стиль і яскраві кольори Senet, щоб продукт асоціювався з нашою компанією.
У підсумку наш дизайн вийшов простим і гнучким — і зовсім не схожим на конкурентів. У якості референсів я також спиралася на тренди ігрових лаунчерів: наприклад, на дуже лаконічні інтерфейси Riot, і турнірні платформи на зразок Challengermode.
Ми подбали і про дрібниці. Для заповнення карток ігор адміни, як правило, знаходили зображення в інтернеті — і вони були вертикальними. У нашому старому інтерфейсі форма під картинку була квадратною, через що частина зображення обрізалася і дратувала гравців. У новому інтерфейсі я ввела вертикальний формат «обкладинок» і заповнила каталог вже готовими гарними зображеннями, щоб адміни не витрачали свій час.
8. Обмежуємо можливості кастомізації
При роботі над прототипом нового інтерфейсу ми врахували вже звичний парадокс: чим більше інструментів для кастомізації отримує користувач, тим менше він буде ними користуватися.
Приклад з іншого всесвіту — у Slack можна кастомізувати буквально все: і колір кнопок, і колір шрифтів. Зміни коду можна вносити прямо в ColorPic. Але хто користується цими налаштуваннями? Максимум — тема оформлення з уже готових сетапів.
У новому інтерфейсі Senet є можливість заливати фони і міняти теми в кілька кліків, не навантажуючи сприйняття користувачів. У старому інтерфейсі було чотири колірні теми: червона, синя, зелена і жовта. Статистика показала, що цього цілком вистачає. Навіть від клубів, у яких є свій брендбук з фірмовими кольорами, запитів на додавання нових тем було не більше десятка. Так що теми ми оновили, але їхню кількість в новому інтерфейсі поки не збільшували.
Фото: Приклад нової Shell з різними темами, фоном і лого
9. Тестуємо прототип на реальних користувачах
У нову версію інтерфейсу перейшли всі необхідні функції, на зразок покупки абонементів, пошуку і запуску гри, входу в особистий кабінет. Але деякі інструменти довелося повністю переробити.
Фото: Панель гравця в старій Shell
Наприклад, у старій версії вгорі була панель з інформацією про сесію — скільки ігрового часу залишилося, як тарифікується час, який у гравця баланс. Панель була занадто вузькою і тому погано читалася. Деякі показники, як от баланс в казахстанських тенге, просто не вміщалися. Тому перш за все я зробила панель більшою, а всю необхідну інформацію розмістила у вигляді списку — одну під іншою.
Фото: Панель гравця в новій Shell
На цей раз ми тестували прототип на реальних гравцях. Заздалегідь розуміли, що переходити на новий дизайн гравцям із досвідом використання старого буде непросто, тому залучили до тестів сторонніх геймерів.
Прототип переробляли п’ять разів, поки ми не переконалися, що геймери без проблем знаходять те, що потрібно і інтуїтивно розуміють, як усе працює. Після тестів я прийшла до висновку, що в останній версії гравці швидше за все знаходили потрібну інфу і здійснювали дії з мінімальним відсотком помилок. Однак у старих користувачів можуть виникати складнощі з огляду на довгий досвід роботи з минулою версією.
10. Готуємося до хейту
Після закінчення тестів прототипу ми перейшли до наступної стадії — розробки макетів, написання документації для розробників і створення нової оболонки гравця.
Коли робота над нею була завершена, клуби передбачувано розділилися на тих, хто дуже хотів протестувати новий інтерфейс, і тих, хто категорично не бажав на нього переходити.
Багатьом адміністраторам новий інтерфейс гравця зайшов одразу, але самі гравці, як ми і припускали, практично всі почали його хейтити. Їх можна зрозуміти: занадто багато змін, з незвички працювати з таким рішенням може бути складно.
Фото:
Найсильніше геймерів виводила з себе кнопка виходу. У старій версії вона була внизу зліва, а перейшла у верхній правий кут — на місце, де у Windows розташована кнопка закриття сторінки. Зате гравці, які ніколи не користувалися старою версією, під час тестів прототипу цю кнопку знаходили безпомилково.
Дійсно, дуже скоро скарги припинилися. Досвід показав, що якщо геймер приходить в клуб раз в два тижні, вже за пару візитів він без проблем працює з новим інтерфейсом.
11. Враховуємо конструктивну критику
Деякі клуби тестували новий інтерфейс на одному комп’ютері, після чого відмовилися його використовувати. Таких довелося заманювати не новим дизайном, а новими інструментами. Як приклад, гравець міг оплачувати товари клубного магазину зі свого балансу. Багатьом клієнтам зайшла ця функція, але вона була доступна тільки в новій оболонці, тож клуби оновилися.
Я створила спеціальний документ для служби підтримки, куди саппорт додавав коменти від клубів. На початку це був необгрунтований хейт, але з часом з’являлися конструктивні зауваження, які ми враховували і відразу вносили виправлення.
Наприклад, ми початково прибрали назви абонементів, а виявилося, що клуби спеціально називають абонементи не просто «2 години за 100 грн», а якось яскраво, щоб краще їх продавати. Тож ми повернули назви. А гравці попросили, щоб у їхній панелі ми змістили баланс і обране повище, а програму лояльності спустили нижче, як не таку важливу для них.
Коли користувачі розсмакували нову версію, ми отримали масу коментів з проханнями про додавання нових функцій. Ми звертали увагу на кількість однакових запитів. Якщо нам здавалося, що ці пропозиції актуальні, ми брали їх в роботу.
Ми випустили новий інтерфейс влітку 2020 року і тепер планово переводимо на нього останні 20% клубів. З одного боку, вже не підтримуємо стару версію, з іншого — наявність нового функціоналу є для таких користувачів вирішальним фактором при виборі версії інтерфейсу. Спробувавши нові можливості, навіть хейтери погоджувалися, що він кращий.
12. З’ясовуємо, чи вдалося досягти поставлених цілей
За допомогою нового інтерфейсу ми вирішили критичні проблеми, реалізували побажання бізнесу і користувачів, заклали можливість масштабування. Тепер в інтерфейс можна вбудовувати рекламу і змінювати систему навігації для більш ефективної комунікації з гравцями.
Нове головне меню — це місце для реклами і клубної інформації. Після включення комп’ютера геймер відразу потрапляє на цю сторінку. Вхід у каталог ігор виконаний у вигляді окремої кнопки. Це один додатковий клік, зате тепер у адміністрації клубу з’явилася можливість два рази взаємодіяти з гравцем: і на головній сторінці інтерфейсу, і в ігровому каталозі. Розміщувати всі рекламні повідомлення в одному місці не потрібно.
Висновки
Замислюючись про редизайн, пам’ятайте, що це — інструмент вирішення завдань, а не вираження чиїхось естетичних уподобань. Для нього добре б мати об’єктивні причини. Це можуть бути технічні проблеми, що не дозволяють масштабувати продукт, бізнес-логіка, яка потребує додавання нових інструментів, або складності в роботі з додатком.
У нас об’єктивних причин було більш ніж достатньо. Ми не могли плавно міняти старий інтерфейс на новий, хоча так було б правильніше. Ми були змушені піти на цей крок, зокрема, щоб спростити гравцям роботу з інтерфейсом.
Редизайн завжди означає серйозні фінансові та часові витрати. Крім того, ви точно наразите себе на хейт: користувачі болісно реагують на зміну інтерфейсу звичних продуктів. Але якщо ви розумієте, що зміни зроблять продукт зручнішим та більш інтуїтивно зрозумілим, хейт обов’язково перейде до конструктиву.
Із Senet так і вийшло: за кілька місяців після виходу оновлення на нього перейшли 80% наших клієнтів. Вони отримали більш ефективні інструменти комунікації з гравцями, а Enestech Software — можливість додаткових доходів від реклами.
А чи є у вас кейси успішного редизайну та не дуже? Давайте обговоримо в коментарях.
Оригінал статті на
