Віджет Feedbe

UX / UI, logotype

Feedbe — це повноцінний вебвіджет для QA-інженерів, що дозволяє збирати на сайті відгуки та пропозиції від юзерів впродовж всієї user journey. Віджет значно спрощує процес відбирання, аналізу та сортування юзерських відгуків та інсайтів та допомагає імплементувати потрібні зміни для покращення досвіду користування сайтом.

Цілі та виклики

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

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

Брифінг

Ми дослідили цільову аудиторію та створили детальний образ нашого потенційного користувача. Отже, наш користувач — студент Олег, йому 21. Олег має великий досвід у користуванні онлайн-сервісами та соцмережами. Він дуже уважний до деталей, тому підробляє QA-тестувальником вебсайтів та сервісів.

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

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

Дослідження та аналіз

Перш ніж перейти до створення візуального рішення, нам потрібно було зрозуміти, з чим ми маємо справу. Ми провели порівняльний аналіз нашого продукту відносно прямих та непрямих конкурентів. Здійснили огляд зручності використання прототипу (usability review), виділивши його плюси та мінуси. Провели евристичну оцінку (heuristic evaluation) інтерфейсу для того, щоб визначити його проблеми. Пріоритезували функції (features prioritization) для виокремлення більш важливих та менш важливих функцій для користувача. Окреслили проблеми продукту та висунули пропозиції для їх вирішення.

Нова візуальна айдентика

Feedbe, у нашому розумінні — це маленький помічник, який із легкістю допомагає користувачам виконувати рутинну частину їхньої роботи. Разом із клієнтом ми створили персонажа, який би робив взаємодію юзерів із віджетом більш «‎людяною» та персоналізованою. Цей персонаж чудово вписався у лого продукту, а його анімована версія прикрашає юзерський інтерфейс.

Новий віджет

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

Онбординг

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

Додаткові функції

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

Gram

Директор зі стратегії — Олександр Топольницький
Дослідження та аналіз, UI / UX — Михайло Куспись

Також можете прочитати про нашу роботу для SYLA Tactical