Дашборд, що починається з цифр
Ключові цифри зверху, остання активність збоку і таблиця ETX, де кожен рядок розгортається в графіки: заробіток по місяцях, профіль клієнтів і їхня географія.
Кейс · 2022–2023
Savvy
Інвестиційна платформа, де творці створюють тематичні продукти (ETX), дистриб’ютори пропонують їх клієнтам, а інвестори купують.
- Компанія
- Perpetio
- Роль
- Основна UI-дизайнерка
- Платформа
- Web-застосунок і мобільна версія
- Обсяг
- Чотири ролі, онбординг, UI-кіт, логотип
Задача
Одна платформа для чотирьох ролей
Savvy об’єднує тих, хто створює інвестиційні продукти, тих, хто їх продає, тих, хто купує, і команду, яка за всім стежить.
Кожній ролі потрібен свій погляд на ті самі дані, в одному цілісному інтерфейсі:
- творцям: як їхні ETX працюють і скільки заробляють;
- дистриб’юторам та інвесторам: портфелі, угоди й виписки;
- новим клієнтам: регульований онбординг для людей і компаній;
- команді Savvy: що потребує уваги просто зараз.
Як я працювала
Від вайрфреймів замовника до повного UI і UI-кіту
Продукт створювали з нуля. Замовник прийшов із вайрфреймами, а ми працювали переважно над UI. Я була основною дизайнеркою і більшу частину проєкту працювала самостійно; наприкінці, коли роботи стало більше, долучився ще один дизайнер на part-time.
- Вайрфрейми замовника як відправна точка.
- Мудборд і візуальний напрям для світлого й темного інтерфейсу.
- Логотип і бренд: версії логотипа, банери й фони для відеодзвінків.
- UI для десктопу й мобайлу для кожної ролі.
- UI-кіт, щоб нові екрани зберігали той самий стиль.
Ключові рішення
Що робить це працюючим
Сім частин одного продукту: від першого дашборду до адмінки.
Інвестор бачить гроші першими
Вартість портфеля з графіком і перемикачем періоду, перемикач акаунтів із buying power у хедері, кнопка Trade біля кожного ETX і повна історія транзакцій.
Сторінка ETX, що пояснює продукт
Що це і для кого, результати з перемикачем періоду, ключові показники й склад. Trade, «поділитися з клієнтом» і розкриття інформації зібрані в правій колонці.
Угоду можна перевірити до того, як вона відбудеться
Три кроки: обрати ETX, клієнта й акаунт; переглянути всі деталі; підтвердити. Угоду не можна скасувати, тому кнопка неактивна, доки людина не підтвердить, що все правильно.
Онбординг для людей і компаній
Окремі шляхи для індивідуальних, спільних і корпоративних акаунтів (LLC, корпорація, траст). Одна тема на крок, прогрес-бар, завантаження документа й е-підпис. Типи акаунтів, які ще не готові, позначені «Coming soon».
Адмінка, що починається з проблем
Помилки торгівлі з’являються банером на самому верху, відкладені ордери позначені червоним, а кожен акаунт на онбордингу показує прогрес крок за кроком: заявка, брокер, документи, підписи, фінансування.
Таблиці стають картками на мобайлі
Щільні таблиці перетворюються на картки з парами «назва і значення». Графіки ховаються за «Show charts». У меню є перемикач клієнта й акаунта з buying power.
UI-кіт і бренд
Один стиль для кожної ролі
Я створила UI-кіт проєкту. Він тримав чотири ролі й дві платформи в одному стилі, а потім допоміг другому дизайнерові швидко включитися в роботу.
Кожне поле в кожному стані
Стани default, hover, focused, filled, disabled і error для полів тексту, пароля, відсотка, суми й телефону.
Кольори і кнопки
Зелений брендовий колір для дій і зростання, червоний для помилок і набір сірих для фонів, рамок і рядків таблиць. Кнопки у станах normal, hover, active і disabled.
Логотип і бренд
Логотип Savvy зі стрілкою в літері A, його версії для темного й світлого фону, банер і фони для відеодзвінків.
