Редизайн застарілого особистого кабінету: не повторюйте наших помилок

Мене звати Євген Квіток і я розповім, що треба враховувати при редизайні інтерфейсів, щоб малими засобами отримати великий результат.



Телфин на ринку телекомунікацій з 2003 року. За 13 років у користувачів розширився вибір налаштувань телефонії. Інтерфейс особистого кабінету абонента з різних причин не змінювався. І в один прекрасний день він настільки застарілий, що став представляти із себе квест «Вгадай потрібну кнопку».

Так виглядав особистий кабінет компанії ще недавно:


Господині на замітку: Коли функціонал розширюється, просто додавати черговий пункт меню – небезпечно. Інакше вийде комбінація горизонтального і вертикального меню, прямо як на картинці вище. Згадайте про цю картинці, коли попросіть програміста «домалювати ще одну кнопочку лівіше».

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

  • «Навіть шаблони за замовчуванням в поширених движках WordPress, Drupal, OpenCart виглядають раз в 100 краще».
  • «Так просто зробіть все не для технарів, а для ЛЮДЕЙ».
І тут ми зрозуміли, що пора. Пора провести повний редизайн і уявити, нарешті, своїм користувачам сучасний і лаконічний продукт, яким зручно користуватися. Я як керівник відділу маркетингу виявився залучений в цю авантюру щільніше всіх інших, оскільки володів природним смаком, тяжінням до поліпшення і знав, з чого почати.

З чого почати?
Крок 1. Почнемо з опитування клієнтів

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

Такий огляд від клієнта гідний фірмової гуртки:



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

Частина клієнтів запропонувала нам нічого не міняти — «вже звикли»:



Крок 2. Створюємо структуру з урахуванням думки користувачів

Що в особистому кабінеті абонентам потрібно в першу чергу?
  • Оплачувати телефонію і стежити за витратами.
  • Бачити загальну статистику дзвінків.
  • Змінювати налаштування прийому вхідних дзвінків.
Резюмуючи: потрібний пункт, щоб налаштувати (ми назвали пункт «Послуги») і пункт, щоб відстежувати (ми назвали пункт «Фінанси»). В майбутньому плануємо розмежувати ролі, щоб бухгалтеру були видні тільки фінанси без налаштувань, а адміну не заважали зайві дані по грошах. Насправді, це класичний варіант основних розділів будь-якого інтернет-сервісу: так само влаштований, наприклад, директ (у бухгалтерії окремий інтерфейс, маркетолога окремий).

Крок 3. Компонуємо сторінки

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

Буває, питаю колег «Навіщо це?» — а про це ніхто не знає. Така історія була з книгою контактів швидкого набору для callback. У налаштуваннях забиваєш телефонні номери, їм присвоюється 1-2-3, потім набираєш короткі номери замість довгих. Але кому це було треба? А я перевірив. З багатотисячної аудиторії Телфин тільки у 35 користувачів існували хоч якісь налаштування даної книги (і то, не факт, що їй користувалися). Передбачаючи питання, функція не видалена. Вона збережена, просто прибрана з інтерфейсу.

Крок 4. Робимо прототип

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

Прототип виглядав так: xrc41w.axshare.com



Концептуально прототип затвердили. Переходимо до кроку 5.

Крок 5. Критика

Частина поправок в інтерфейс була внесена вже на цьому етапі. Розділ «Послуги» обговорював з керівником саппорта, «Фінанси» — з керівником клієнтського відділу. «Головну» — з усіма, хто працює з клієнтами. Чим більше спілкувалися, тим краще ставав прототип.

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


Ми постійно щось ламали, переробляли. Топи зрозуміли, що якщо не будуть активно пропонувати зміни зараз, вони будуть жити з тим кабінетом, який вийде, а не який хочеться. Так що нікого не треба було змушувати брати участь в обговоренні. Ми працювали як художники. Натхненне і віддано. І хоча в підсумку реалізували 95% з того, що хотілося б, але ми зробили набагато більше змін, ніж розраховували. Підсумок показали агентству, внесли ще кілька невеликих правок і склали ТЗ для дизайну.

Крок 6. Вирушаємо в дизайн-агентство з ТЗ

Тут приємне очікування макета від Aidem (нарешті, можна було всім зайнятися своїми прямими обов'язками).

Жовтувато, але в цілому відмінно:



Ми змінили підсумкову гаму на більш фірмову: помаранчево-блакитну. Щось перекомпонували, щось змінили порядно. Проводили спільні зустрічі з кожним керівником і командою Aidem, коли здавали кожен з блоків.

Крок 7. Написали специфікацію для верстки

Специфікація: yadi.sk/i/SMQSQPaloEhVr



Специфікація для верстки включала найважливіші речі і склала 30 сторінок.

Header.................3
Footer..........................................3
Головна сторінка..................3
Перший вхід.........6
Наступні входи......6
Загальні елементи...........7
Документи і платежі......8
Блок "Інформація за договорами і тарифами"....................9
Блок «Документи за договорами»..........11
Блок «Рахунки і платежі»...12
Виставлення рахунку (модальний).....12
Замовлення акту звірки........14
Підключені лінії.....................15
Налаштування АВН..........17
Налаштування переадресації.....18
Параметри голосової пошти.............19
Поповнення рахунку..............21
Обіцяний платіж.................22
Підтвердження оплати....23
Виставлення рахунку...........27
Результат грошового переказу...........30
Повідомлення......................31

Ось так докладно колеги з Aidem описували кожний пункт:



Крок 8. Сьогодні ми з тобою верстаємо

Хоча макет замовили в агентстві, далі все знову впало на наші плечі. Ми вирішили робити верстку своїми силами, без залучення сторонніх фахівців. В основному, з причин безпеки.

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



Крок 9. Внутрішнє тестування

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

Крок 10. Швидкий запуск і правки по живому

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

Дизайн і навігація
Нечитаний шрифт, невідповідні кольору
З опитаних клієнтів 40% скаржилися на застарілий дизайн і складну навігацію: шрифт був дрібним та читався складно, меню здавалося незрозумілим. Багато опитаних просили великі кнопки. Для оформлення нового особистого кабінету ми використовували затишну кольорову гаму, зробили текст легким для читання, переписали основні тексти і коментарі. Прибрали фон у записів і повністю змінили головне меню (не тільки по функціоналу, але і за зовнішнім виглядом).

Легкий, сучасний, красивий, мінімалістичний — таким хотіли бачити особистий кабінет клієнти, і ми це зробили. Верстали «дівами» із застосуванням HTML5, CSS3, хоча, впевнений, все одно допитливі розуми знайдуть косяки.

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


Запитували — відповідаємо
  • «Більш інформативна головна сторінка»


  • «Дизайн в стилі кам'яного століття»
  • Тепер це в минулому


  • «порівняно з сайтом особистий кабінет виглядає жахливо!»
  • Ми виправилися


  • «Зробити сучасний плоский дизайн з використанням AJAX»


Ієрархія
У старому Кабінеті було легко заблукати.

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



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

Знайди 5 відмінностей:



Підказки
Цікаво, що 10% опитаних просили зробити підказки.

«Як зробити більш «дружній» інтерфейс, — підказки, як в пошуковику, пропозиції, поради»
Вимога справедливе. Телекомунікації — специфічна і складна сфера, в яку клієнт не зобов'язаний глибоко вникати, а SIP ID, лінія, чергу, API — все це вимагає пояснення.

Зараз підказки є майже в кожному розділі. А де-то вони більше не потрібні, тому що меню стало зрозумілим.

Додали опис додаткових опцій маленьким сірим шрифтом:



Приклад підказок жовтого кольору:



Для швидкої допомоги клієнтам ми додали в особистий кабінет онлайн-чат. Тепер можна не дзвонити, не писати листа, а вирішити своє питання онлайн.

Онлайн-чат клієнтської підтримки:



Переадресація
Самий популярний коментар послуг був: «незручна налаштування переадресації». І ми це виправили. Додали кнопку на головній сторінці для швидкого переходу в налаштування переадресації, так що блукати по всьому кабінету в її пошуках тепер не потрібно.

Швидка кнопка переадресації:



Переадресація швидко включається-вимикається, її можна настроїти самостійно для конкретних ліній або відразу з усіх номерів. Можна включати переадресацію дзвінків, які не отримали відповіді протягом якогось часу (наприклад, ніхто не знімає слухавку 5 секунд). Раніше такі налаштування, мабуть, могла поставити тільки наша техпідтримка, а сьогодні на такі зміни клієнт витратить не більше 2 хвилин.

Вікно налаштування проектували по коментарям техпідтримки:



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

Саму АТС ми, до речі, теж оновили:



Фінанси
Платежі
В головному меню з'явилася яскрава кнопка «Поповнити рахунок». За допомогою одного кліка можна перейти до вибору способу оплати: банківська карта, Яндекс.Гроші, Альфа-Клік або інший спосіб.



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

«Кожній системі оплати прикріпіть відповідну іконку!» — говорили вони. «Прикріпили!» — говоримо ми.



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

Налаштування сповіщень про відключення за несплату:



Витрати і статистика
У розділі статистики користувачі отримали можливість настроювати звіти.
«Додайте, будь ласка, параметри сортування таблиці показу статистики по стовпцях: Призначення (сортувати по номерах), Тривалість (за зростанням/за спаданням)»
У звітах вибирається період, вигляд звіту, номери ліній, напрямок дзвінків, джерело і призначення. Стовпці сортуються. До 40 000 записів викачуються за раз. Що і говорити, фільтрація в статистиці покращилася на порядок.



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



Ще одне нововведення: статус по кожній лінії, активна вона чи ні. Багато клієнтів також просили це відображати. Мабуть, з безлічі таких деталей і складається зручний інтерфейс.



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

Як і в інших розділах, за документами теж з'явилися підказки:



Підведемо підсумки
Було правильним рішенням робити все самим? Це виявилося довго і складно. Зате надійно і якісно. Чи Правильно було всіх клієнтів поставити перед фактом оновлення кабінету? Ризиковано. Зате ми отримали миттєвий фідбек і по гарячих слідах внесли зміни.

Наш особистий кабінет став таким, яким вийшов. Факт: новий інтерфейс вже виконує 90% побажань користувачів. І це, мабуть, головне. Підтвердження — опитування лояльності за вересень-листопад 2016 року.

В даному опитуванні 0 — ніколи не порекомендую, 10 — обов'язково порекомендую:



Результат, як говориться, у наявності. Попереду ще багато роботи (єдиний кабінет з керуванням віртуальної АТС і повна версія для мобільних пристроїв), але початок покладено – основні зміни завершені. І цілком успішно.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.