Українська агенція Merge Development, що спеціалізується на UX/UI дизайні та розробці, розповіла про рішення, які вони втілювали в створенні інтерфейсу настільки складного продукту як додаток для сплати податків.

Сергій Гилюк, Head of Growth у Merge, поділився, чим керувалася команда, коли робила редизайн додатка, чому інколи онбординг всередині застосунку — найзручніше рішення та чому у складних та «серйозних» продуктах потрібні ілюстрації та приємні візуальні елементи.

Матеріал створений у партнерстві з Merge

Про продукт

Coinledger – американський стартап, який розробляє продукт для підрахунку податків з криптовалюти та формування потрібної звітності.

Уявіть, що ви продаєте криптовалюту на кількох платформах. Вам треба порахувати прибуток з кожної валюти, якою ви торгуєте, та ще й вирахувати податки. Це все робить додаток Coinledger.

Завданням команди Merge був редизайн та покращення користувацького досвіду додатка та створення сайту. В якості брифу ми отримали доступ до старої версії додатка, та на його основі створили документ зі списком можливих покращень. Такий собі невеличкий UX Audit. З нього й почалася робота.

Один з блоків старої версії застосунку

Дослідження ринку

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

Сьогодні для дослідження конкурентів ми використовуємо наш Product UX Discovery Kit, який можна забрати безкоштовно. Але на момент початку роботи над Coinledger нам допомагали старі добрі документи на Google Drive.

Ми створили демо акаунти в кожному додатку та пройшлись стандартними user flow. В нашому випадку стандартний user flow — це додавання різних джерел прибутку та створення податкових звітів.

Основні висновки та знахідки нашого аналізу ми занесли в простеньку таблицю pros and cons.

Інформаційна архітектура та вайри

Головна функція додатка – створювати податкові звіти максимально просто і зрозуміло. Для цього ми обʼєднали найкращі ідеї, що з’явилися після аналізу конкурентів, з нашим досвідом роботи із fintech: від гаманців для крипти до складних порталів менеджменту інвестицій.

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

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

Міні-онбординг був доступним на таких етапах:

• імпорт джерел доходів;
• класифікація транзакцій;
• перевірка податкової звітності;
• перегляд та створення звітів.

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

Вайрфрейми та візуальний концепт

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

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

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

Головними завданнями стали:

• зручність та простота додавання джерел криптовалюти та транзакцій;
• зрозумілість інтерфейсу ідентифікації транзакцій – більше підказок;
• простота та доступність інформації на екрані створення звітів.

Екран з додаванням трейдингових платформ та гаманців

Якщо з джерелами все було доволі просто: ми створили інтерфейс, в якому користувач просто відмічає потрібні платформи, то з класифікацією транзакцій виникли б труднощі.

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

Тому тут ми створили невеличкий туторіал з ілюстраціями. Ось такий вигляд мала wire версія:

А ось таким став фінальний варіант:

Яким би серйозним не був продукт, якщо не розбавляти дизайн ілюстраціями та анімаціями, користувачеві буде нудно ним користуватись. Але й зайве ліпити їх теж не варто.

На екрані створення звіту можна переглянути всі данні та згенерувати потрібний звіт справа. Зверніть увагу на синю кнопку справа: Coinledger дозволяє додати бухгалтера, який матиме доступ до всіх цифр та звітів. За принципом це нагадує кабінет для бухгалтера в Монобанку.Екран створення звітів

Фіналізація дизайну

До кожного проєкту ми обовʼязково додаємо UI Kit, та дизайн систему. Робимо це, щоб спростити подальшу роботу над проєктом. Ні ми, ні клієнт не знаємо, що станеться через кілька місяців після завершення дизайн-робіт, тому створюємо всі потрібні елементи заздалегідь.Приклад дизайн-системи. Ми описуємо буквально все – від стейтів до прикладів використання.

UI Kit. Навіть якщо щось не використовується сьогодні – воно може знадобиться завтра.

Прикраси

Попри те, що фінтех та криптовалюта — доволі «серйозні» індустрії, клієнт був не проти додати трохи ілюстрацій та анімувати частину елементів.

Всі ілюстрації та анімації Merge створює самостійно, без залучення додаткових співробітників.

Ілюстрація для Coinledger.

Головна сторінка проєкту

Для створення сайту проєкту ми використовували Webflow. Ця CMS набуває все більшої популярності завдяки своїй гнучкості та простоті використання, та загалом дозволяє створювати доволі круті сайти.

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

Власне сайт можна глянути за посиланням.

Ми все частіше використовуємо Webflow для проєктів, які не потребують складних рішень та лендингів. Якщо додати трохи магії (анімацій) та кльових ілюстрацій, виходять непогані сайти. Як ось, наприклад, 0xCapital.

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

До того ж використання Webflow дозволило нам та клієнту зекономити час та бюджет, який ми використали на покращення продукту. Рекомендуємо звернути увагу на Webflow і досвідченим розробникам, і новачкам.

Агенція Merge Development створила онлайн-курс з вивчення основ Webflow для всіх, хто хоче опанувати цей low-сode сервіс для створення вебсайтів, та отримати старт для роботи з іноземними замовниками. Курс складається з 14 занять і доступний у двох варіаціях: «Про» і «Лайт» (з/без перевірки домашніх завдань). З кожної оплати курсу, незалежно від обраного пакета, Merge Academy перераховує 350 грн на підтримку ЗСУ та в гуманітарні фонди.

Telegraf.Design працює за підтримки спільноти. Підтримуйте Telegraf.Design на Patreon.