FinTech · Enterprise
Платформа портфеля private equity
Жива, відзначена нагородами платформа value creation для PE-фондів. Моя частина: конструктор дашбордів із віджетами на сітці з двох ширин, режимами Edit і View і бордом, який живе далі в PowerPoint.
- Країна клієнта
- США
- Платформа
- Веб
- Моя роль
- UX/UI Designer
- Тривалість
- 1 рік 2 місяці · 2024–2026
Огляд
PE-фонди планують, виконують і вимірюють value creation по портфельних компаніях, і звітують радам директорів та спонсорам.
Вихідна точка
Продукт уже існував. Я вела свої напрями всередині нього: беклог запитів від Support, Customer Solutions і Customer Experience плюс доступ до живих акаунтів користувачів.
Обсяг
У центрі був дашборд: борд із віджетів, який збирають у застосунку, а потім він має жити далі в деках, поштових скриньках і BI-інструментах.
Обмеження
Кожна зміна зважувалась проти живої системи: скільки коштує побудувати і що може зламати.
Контекст
01
Продукт
Платформа value creation для private equity: ініціативи, KPI, дашборди, профілі фондів і компаній, звітність. Багато стейкхолдерів і організацій за задумом: deal-команди, оперейтинг-партнери, менеджмент портфельних компаній, ради директорів.
02
Користувачі
Deal-команди, оперейтинг-партнери та менеджмент портфельних компаній у щільних даних, а також контриб'ютори поза фондом, які бачать лише лист.
03
Ринок
Лауреат галузевої нагороди, яким користуються кілька провідних PE-фондів світу.
Точка старту: дашборди поводились як порожнє полотно. Новий віджет з'являвся розміром з поле вводу, кожен користувач розтягував його руками, а реальні борди були повні загублених віджетів і білого простору.
Підхід
Аудит
Пройшла живі акаунти і задокументувала 10 проблем з 11 рішеннями, п'ять головних позначені як quick wins.
Обмежити
Замінила вільний ресайз на дві ширини та мінімальну висоту, щоб не-дизайнери ніколи не викладали пікселі.
Розділити
Розвела Edit і View до запуску add-in'а для PowerPoint: один чистий стан для презентації та експорту.
Це був дизайн через обмеження: забрати свободу там, де вона коштувала користувачам, і тримати продукт консистентним, поки він росте.
Процес
Ключова функціональність
01
Конструктор дашборда
Проблема
Борд починався порожнім і ріс руками: крихітні віджети, ручний ресайз, жодної сітки. Зібрати його вимагало терпіння, а результат рідко вирівнювався.
Гіпотеза
Якщо додавання віджета завжди дає читабельний блок, який стає в одну з двох ширин, люди перестають верстати і починають звітувати.
Рішення
Створити → обрати тип віджета → редагувати на сітці з двох ширин → читати у View. Кожен віджет відкривається на повну або половину ширини з мінімальною висотою, а шапки можна приховати для всього борда.
Порожній борд: назвати і додати перший віджет. Правило сітки написане прямо тут
Вибір віджета: таблиці, текст, апдейти, зображення й KPI-графіки. Типи, що вже існували, тепер із правилами
Режим Edit: хендли, поля назв, панель редактора і меню віджета з Full / Half width та Hide header
Віджет на повну ширину; порожній слот на половину показує єдиний інший варіант
Режим View: той самий борд без жодного елемента керування
02
Адаптивна сітка
Проблема
Таблиці, бокові панелі, фільтри й віджети поводились по-різному на вужчих екранах і на дуже широких моніторах, і кожен екран вирішував свої брейкпоінти сам.
Гіпотеза
Якщо борд лежить на дванадцяти колонках, що тягнуться, а кожен клас віджетів має фіксований набір ширин, адаптивну поведінку можна описати розробникам один раз, а не вирішувати екран за екраном.
Рішення
Дванадцять колонок на всю ширину. Три класи віджетів: таблиці на повну або половину, контентні на половину або повну, скоркарди на половину або чверть, кожен з мінімальною висотою. Понад 1920 px ростуть лише бокові поля; на вертикальному планшеті сітка стає шестиколонковою, а половини повною шириною.
03
За межами застосунку
Проблема
Ради директорів і спонсори читають деки, а не вебзастосунки. Цифри передруковували у слайди, і вони старіли, а режим Edit ніс забагато хрому, щоб його показувати.
Гіпотеза
Якщо View достатньо чистий для презентації, add-in може поставити живий борд на слайд, і він там далі оновлюється й фільтрується.
Рішення
View став поверхнею для експорту. Add-in для PowerPoint вставляє підключений борд, а приховані шапки роблять його сторінкою звіту. Add-in для Outlook замикає коло з іншого боку: контриб'ютори без акаунта надсилають апдейти з пошти, і дані лягають у звіт.
Шапки приховані: борд читається як сторінка звіту
Борд на слайді, досі підключений: оновлюється і фільтрується зсередини дека
Ключові рішення
01
Дві ширини замість вільного ресайзу
Проблема
Дашборди поводились як полотно. Новий віджет з'являвся розміром з поле вводу, користувачі розтягували його руками, а реальні борди стояли в білому просторі з віджетами, загубленими ліворуч.
Гіпотеза
Не-дизайнерів не можна просити працювати з пікселями. Заберіть свободу, і борди стануть кращими, а не гіршими.
Рішення
Кожен віджет займає повну ширину або половину і відкривається з мінімальною висотою: 500 px для таблиць, 400 px для контентних, 274 px для скоркардів, яким дозволена ще й чверть. Більше можна, менше ні.
Підтвердження
Ручний ресайз зник: був на кожному віджеті, не лишилось жодного. Правило написане в порожньому стані, тож його вивчають під час першого ж борда.
02
Edit і View як окремі режими
Проблема
Хендли, поля назв, панелі редактора й меню, близько 25 елементів керування на борді з трьох віджетів, стояли між читачем і цифрами. А add-in для PowerPoint ось-ось мав поставити цей борд на слайд.
Гіпотеза
Якщо розділити режими до запуску add-in'а, буде один чистий стан для презентації та експорту. Пізніше означало б переробляти.
Рішення
Перемикач View | Edit у барі борда. View показує віджети й нічого більше; Edit повертає керування.
Підтвердження
View став поверхнею, яку експортує add-in для PowerPoint: той самий борд, оновлюваний і фільтрований усередині дека.
03
Приховати шапки віджетів
Проблема
Навіть у View кожен віджет ніс рядок назви з іконкою: хром, а не дані, і третина висоти на малих віджетах.
Гіпотеза
Борд без шапок читається як сторінка звіту, а саме нею він і стає на слайді.
Рішення
Один перемикач на рівні борда знімає шапки з усіх віджетів; налаштування переходить в експорт.
Підтвердження
Картки стають нижчими, таблиця отримує ще один рядок, а слайд не треба кадрувати.
Результат
- Вільний ресайз замінено двома ширинами і мінімальною висотою: ручний ресайз зник з кожного віджета
- Один набір адаптивних правил: дванадцять колонок, три класи віджетів, брейкпоінти на сайдбарі, 1920 px і планшеті
- Edit і View розділені до запуску add-in'а для PowerPoint; View став поверхнею експорту
- 10 проблем задокументовано з живих акаунтів, 11 рішень, п'ять головних відвантажені як quick wins
- Чотири типи віджетів отримали правила лейауту, і кожен існує у трьох станах
Клієнтських метрик із цього проєкту не збереглось, тож кейс рахує те, що рахується: аудит, правила, стани. Те, що відчули користувачі, простіше: борд, який вирівнюється сам, без верстки.
Наступний кейс
Еко-асистент міста
Один застосунок для сталого життя в місті: сканер сортування, еко-мапа, якість повітря наживо. Я провела його від інтервʼю з мешканцями та CJM-воркшопу до протестованого iOS MVP, звуженого до трьох функцій, які люди оцінили найвище.
Переглянути кейс