Матеріал створений у партнерстві з 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 створює самостійно, без залучення додаткових співробітників.
Для створення сайту проєкту ми використовували Webflow. Ця CMS набуває все більшої популярності завдяки своїй гнучкості та простоті використання, та загалом дозволяє створювати доволі круті сайти.
Ми обговорили побажання щодо дизайну з клієнтом та реалізували все в досить короткі терміни. Загалом це звичайний сайт для такого додатка зі зрозумілими повідомленнями та класними анімаціями, які демонструють корисність застосунку.
Власне сайт можна глянути за посиланням.
Ми все частіше використовуємо Webflow для проєктів, які не потребують складних рішень та лендингів. Якщо додати трохи магії (анімацій) та кльових ілюстрацій, виходять непогані сайти. Як ось, наприклад, 0xCapital.
Створення будь-якого вебдодатка потребує не тільки вміння правильно розміщувати елементи на екрані, а й продуманого дослідження ринку, конкурентів та аудиторії. Витрачаючи трохи часу на підготовку перед створенням першого фрейму у фігмі, ми економимо час та ресурси наших клієнтів, адже такий дизайн не потрібно перероблювати.
До того ж використання Webflow дозволило нам та клієнту зекономити час та бюджет, який ми використали на покращення продукту. Рекомендуємо звернути увагу на Webflow і досвідченим розробникам, і новачкам.
Агенція Merge Development створила онлайн-курс з вивчення основ Webflow для всіх, хто хоче опанувати цей low-сode сервіс для створення вебсайтів, та отримати старт для роботи з іноземними замовниками. Курс складається з 14 занять і доступний у двох варіаціях: «Про» і «Лайт» (з/без перевірки домашніх завдань). З кожної оплати курсу, незалежно від обраного пакета, Merge Academy перераховує 350 грн на підтримку ЗСУ та в гуманітарні фонди.
Telegraf.Design працює за підтримки спільноти. Підтримуйте Telegraf.Design на Patreon.
Неоморфізм: український внесок у світовий UI-дизайн
Як ставити цілі та досягати їх
Киньте 10 гривень: як закривати збори з невеликою аудиторією в соцмережах
З маркетингу в дизайн: як я змінила професію, в якій працювала 8 років
Айдентика для мережі барбершопів «UNLMTD» у Варшаві
Українська ідентичність у шрифтовій індустрії