UX/UI дизайн вебзастосунку & та редизайн сайту для агенції з аналізу ринкових даних сировинної галузі

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

Редизайн вебзастосунку

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

Перетворити платформу з «газети» на персоналізований щоденний інструмент для трейдерів

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

Кожна сесія тривала 60–90 хвилин. На цьому етапі ми картували наявний продукт, визначали основні проблеми та пріоритезували обсяг робіт перед переходом до UX/UI-дизайну.

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

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

Персоналізована головна сторінка замість дашборду

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

Проблема виявилася у принципово різному розумінні того, якою має бути ця частина продукту. Для нас dashboard — це робочий простір із метриками та графіками. Для клієнта — навігаційна сторінка, що об’єднує основні категорії контенту платформи. Через це Home Page стала одним із найскладніших UX-завдань у проєкті: концепцію довелося переопрацьовувати близько трьох разів, перш ніж ми узгодили спільне бачення.

Рішення знайшли після 3+ дизайн-сесій і простої зміни назви: ми перестали називати сторінку дашбордом і назвали її Головною. Ця невелика зміна допомогла всім однаково зрозуміти, яку роль сторінка має виконувати в продукті.

Далі ми побудували Home Page як систему самодостатніх віджетів: вибрані ціни, новини за підпискою, активовані алерти, оновлення щодо політик та календар подій. Така структура дає змогу адаптувати сторінку під різні user personas, не створюючи окремі версії продукту для кожної з них.

Алерти та ознаки терміновості

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

Ключовий принцип роботи алертів

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

Права бокова панель (сайдбар)

Це було свідоме UX-рішення: ми зібрали в одному постійному компоненті другорядні інструменти — watchlist, алерти, календар подій та ШІ-асистент — і зробили його доступним на всіх сторінках платформи.

Трейдер може з будь-якої точки платформи перейти до іншої задачі, не втрачаючи контексту поточної роботи

3-рівнева навігація та Progressive Disclosure

Одним із найскладніших UX-завдань стало проєктування 3-рівневої навігації для товарних ринків. Попередня версія платформи використовувала простий dropdown, у якому всі категорії були зібрані в одному меню. Для нового продукту потрібно було знайти зрозуміліший спосіб структурувати та переглядати різні ринки, не ускладнюючи навігацію для користувачів, які вже звикли до старої версії.

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

Архітектурне рішення:

• Основні товарні ринки — Oil, Biofuels, Carbon, Ammonia та Hydrogen — винесли на перший рівень. Великий кегль водночас виконує роль назви сторінки.
• Додаткові фільтри, зокрема News Type, Date та Location, винесли в окремі контроли, щоб не перевантажувати основну навігацію.
• Після вибору товарного ринку відкривається додаткове меню з підкатегоріями у форматі badge-тегів. Тут працює принцип поступового розкриття інформації: юзер отримує більше деталей у міру потреби, замість того, щоб одразу бачити всю структуру категорій.

Цінова матриця

Клієнт хотів повністю переосмислити таблицю цін, взявши конкурентні рішення за орієнтир. Але їхні підходи до взаємодії не відповідали сценаріям Quantum, тому ми призупинили роботу над дизайном і витратили додатковий тиждень на UX-дослідження, щоб знайти власне рішення.

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

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

Інформаційна щільність

Клієнт хотів зробити інтерфейс максимально насиченим за прикладом Bloomberg або Refinitiv. Але така щільність має конкретне призначення в торгових терміналах: трейдерам потрібно одночасно стежити за великим обсягом даних і швидко ними оперувати.

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

Email-розсилка

Ми переосмислили email-розсилку як частину шляху користувача в продукті, а не як окремий самодостатній продукт. Новий дизайн дає користувачеві конкретний привід перейти на платформу: порівняти ціни, налаштувати alert або переглянути повний графік. Email запускає шлях користувача, а платформа його продовжує.

Стартова точка

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

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

Ключові проблеми попереднього сайту

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

Цілі проєкту

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

• Генерувати ліди — залучати користувачів до реєстрації на пробний доступ і замовлення демо
• Розвивати бренд — чітко пояснити, хто такий Quantum, що він пропонує і чому потенційні клієнти можуть йому довіряти
• Залучати партнерів — створювати можливості для нових партнерств на ринку

Фаза дослідження

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

1. Аудит сайту та платформи — проаналізували поточний стан продукту та визначили ключові проблеми.
2. Аналіз конкурентів — вивчили топ-конкурентів та референси із суміжних ринків.
3. Карта сайту та інформаційна архітектура — вибудували структуру відповідно до логіки прийняття рішення потенційним клієнтом.
4. User flows — визначили ключові шляхи користувача від першого контакту із сайтом до реєстрації.
5. Wireframes — перевірили логіку та структуру сторінок до початку візуального дизайну.
6. Дві дизайн-концепції — розроблено два різні візуальні напрямки для вибору та подальшого обговорення.

Фаза UX/UI дизайну

• Повноцінний дизайн усіх сторінок на основі обраної концепції
• Розробка базового набору компонентів (UI Kit) для єдності стилю
• Створення ілюстрацій та відео-анімацій для ключових розділів
• Мобільна адаптація всіх сторінок

Сайт і платформа навмисно відрізняються

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

Адаптація логотипу

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

Символ і типографіку ми залишили практично без змін, щоб зберегти впізнаваність Quantum, яка вже сформувалася на ринку.

Великоформатна типографіка

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

Структура як маркетинговий інструмент

Ми побудували архітектуру сайту навколо однієї мети — якомога швидше й природніше підвести відвідувача до реєстрації. Кожна сторінка відіграє свою роль у цьому шляху.

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

Обсяг виконаних робіт

• ~18 повністю оформлених сторінок
• ~150+ унікальних користувацьких інтерфейсів
• Базовий UI Kit, який став основою для подальшого розвитку сайту
• Авторські ілюстрації, створені спеціально для проєкту
• Мобільна адаптація всіх сторінок

Стратегічні результати

• Сайт отримав чітку маркетингову структуру з основним фокусом на реєстрації та демо-запитах
• Компанія отримала змогу чіткіше комунікувати свою цінність для користувачів і потенційних партнерів
• Адаптований логотип зберіг наявну впізнаваність бренду та водночас отримав сучасніший вигляд
• Компанія вперше отримала цілісний візуальний образ