Виклик
Завдання було не візуальним, а структурним.
Повний редизайн продукту для провідного виробника світлотехнічних систем* з детальним каталогом продуктів, сімейств і технічних матеріалів.
Завдання полягало в тому, щоб перетворити складне середовище з багатьма технічними рівнями на структурований, масштабований і зручний досвід, який підтримує і швидкий перегляд, і рішення на основі специфікацій.
Клієнт керує регульованою платформою електронної комерції та роздрібу, якою користуються сотні тисяч B2B- та інституційних клієнтів. За 25 років продукт стрімко виріс, а інтерфейс — ні. Кілька незалежних команд вели три слабко пов’язані кодові бази, і в кожної було своє уявлення про те, як має виглядати основна кнопка.
Мета: система, яка витримає наступні п’ять років зростання, щоб наступний редизайн не довелося починати з нуля.
Принципи
Чотири непорушні правила, узгоджені в перший тиждень
Кожне подальше рішення в дизайні та розробці спиралося на одне з них.
Кожен компонент має враховувати технічну структуру продуктів: від систем верхнього рівня до окремих технічних компонентів.
Пошук — це не поле, а потужний інструмент для відкриття продуктів. Він має перетворювати сирі технічні дані на зрозумілий маршрут дослідження.
Усе, що ми випускали, мало напряму відповідати змінним, які вже використовувались у трьох різних кодових базах.
Сторінки продуктів мають працювати як інструменти технічного порівняння, а не просто маркетингові описи.
Реальні екрани, повний бенчмарк і дизайн-система наживо від команди, яка їх створила.
Бенчмарк
Порівняння з інтерфейсом, який він замінив
Кожен рядок — показник, важливість якого команда узгодила ще до початку редизайну. Цифри взято з телеметрії робочої версії.
Ключові сценарії
Три сценарії, які перетворюють каталог на інструмент для специфікацій
Принцип 04 на практиці: сторінки продуктів працюють як інструменти технічного порівняння, а не маркетингові описи. Три сценарії з каталогу показують, як саме.
Продукт відкривається просто в списку: ключові характеристики, файли й специфікація. До чотирьох продуктів можна додати в панель порівняння й переглянути поруч.
Конструктор перетворює довгий код замовлення на простий вибір: потужність, колірна температура, кут розсіювання. Готовий код копіюється разом зі специфікацією.
Інтерактивний елемент показує, як кожна лінза формує світло: від вузького пучка до широкого розсіяного світла.
Процес
Двадцять чотири тижні, один критерій завершення для кожного етапу
Кожен етап був вимірюваним, задокументованим і письмово погодженим.
Працювали поруч із підтримкою клієнта* й відтворили головні шляхи користувачів за записами сесій.
Кнопки, поля введення та складні компоненти фільтрації перебудовано синхронно з розробкою.
Спершу каталог, потім пошук, потім технічні центри. Кожен сценарій запускали лише тоді, коли зрушив його цільовий показник.
12 шаблонів для повторного використання.
Процес релізів, яким керує розробка.
Граф токенів, який команда розширює в коді без дизайнерів на кожному запуску.
Результати
Показники каталогу через 90 днів після запуску
За кожен показник відповідає й перевіряє його внутрішня команда. Головні цифри — на початку цієї сторінки.
