iFin: бухгалтерський сервіс онлайн звітності

  • Рік: 2014-2015
  • Країна: Україна
  • Тип: сервіс документообігу (SAAS)
  • Сфера: бухгалтерія
  • Розроблені елементи: дослідження потреб клієнтів, UX прототипи, UI дизайн, юзабіліті тестування
У 2014 ми почали роботу з редизайну сервісу онлайн бухгалтерії iFin.ua.




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

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

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

На момент, коли ми почали працювати із системою, вона уже мала 300000 користувачів, 10% яких активно використовували сайт від 4 разів на рік. Перебудовуючи інтерфейс такого сервісу, у нас виникали ризики, що лояльність існуючих клієнтів знизиться. Створення інноваційного зручного інтерфейсу мало би привернути увагу нових користувачів, тому керівництво компанії зважилося на цей ризик.

IfinoldUI

Старий інтерфейс був побудований на стандартному дизайні Bootstrap. Ми визначили наступні помилки в юзабіліті продукту:
  • Велика кількість текстової інформації, яку можна замінити іконками
  • Складна навігація, у тому числі фільтри пошуку документів
  • Відсутність візуальних маркерів, які свідчать про статус документа (прийнято, відмовлено, перевірено тощо)
IfinoldUI

Варіанти дизайну

Ми розробили два тестових варіанти інтерфейса. Перший створювався за логікою сервісів електронного документообігу (docusign.co.uk, drive.google.com). Важливим елементом управління системою була бокова панель, що модифікувалася залежно від обраного документу.

Варіант інтерфейсу списку документів

Варіант інтерфейсу списку документів

Документ підписаний ЕЦП

Документ підписаний ЕЦП

Пакетна обробка документів

Пакетна обробка документів

Дизайн податкової накладної

Дизайн податкової накладної

Другий базувався на досвіді користування поштовими сервісами.

Варіант інтерфейсу списку документів

Варіант інтерфейсу списку документів

Вікно статистики

Вікно статистики

Статус очікування для Запиту

Статус очікування для Запиту

Вікно відповіді на Запит

Вікно відповіді на Запит

Елементи дизайну

Ребрендинг

Ребрендинг

Основною ідеєю нового інтерфейсу стала простота використання сервісу, яку ми мали підкреслити естетичним UI.

Унікальний набір іконок

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

Навігація по календарю

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

Модальні вікна

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

Спрощений доступ до акаунту

Ми реалізували доступ до акаунта за допомогою електронних ключів. Це значно пришвидшило процес входу (не треба вводити електронну пошту і пароль) та збільшило рівень безпеки сервісу.

Фірмовий стиль реклами

Для рекламних потреб ми розробили персонажів, які уособлювали працівників iFin. Їх використовували на онлайн банерах та друкованих буклетах.
Фірмовий стиль реклами
Розробка нового функціоналу

Розробка нового функціоналу

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

  • Обмін накладними між контрагентами
  • Управління абонентською платою
  • Купівля електронних ключів

Технології

Coreldraw X4

Coreldraw X4

Photoshop CC

Photoshop CC

Marvelapp

Marvelapp

Jira

Jira

Css3

Css3

AJAX

AJAX