Причини редизайну та завдання
Основна проблема в тому, що всередині продукту можливо все зручно й автоматизовано, а от зовнішній вигляд складний та застарілий. Завдання дизайн-команди полягало у спрощенні інтерфейсу, щоб продуктом змогли користуватись не тільки профі комерційних закупівель, а й звичайні люди. Необхідно було допомогти SmartTender стати легким, зручним інструментом для заявок і закупок не тільки великих корпорацій, але й підприємств малого та середнього бізнесу.
Дослідження
Дизайнери провели інтерв’ю з користувачами SmartTender на підприємствах та дізналися про їхні болі та проблеми. Відокремили основні ролі в продукті та розробили user-flow головних персон для великих підприємств і маленьких компаній.
Це дозволило розбити складний та великий продукт на окремі модулі, з якими дизайнери могли працювати покроково. Ці модулі у майбутньому можуть підключатись окремо, залежно від потреб конкретної компанії або підприємства.
Розробка
Дизайнери розробили UX модулі продукту: прототип, обговорення, тестування, внесення змін.
Одночасно оновили візуальний стиль продукту: змінили кольори, шрифти та лого, які б дозволили побудувати сучасний UI.
Логотип трансформували зі знака в інструмент брендування. За його допомогою хотіли створити distinctive memory construction та зробити унікальний графічний знак, який можна використовувати в іконці застосунку й інтерфейсу.
В основі логотипу – видозмінений геометричний гротеск SK-Modernist. Для інтерфейсу використали IBM Plex Sans.
Варіанти кольорових схем
Прагнули розробити кольорову гаму, яка б відрізнялась від конкурентів, та яку можна було б застосувати для розробки UI – відійти від традиційно чорно-біло-сірої гами та не перевантажувати очі під час роботи з продуктом.
Мета – розробити кольорову схему, яка працює в інтерфейсі.
Переважно залишилася чорно-біла гама, один акцентний та кілька компліментарних UI-кольорів для кодування різних статусів (підказки, статуси затверджено, помилковий, в очікуванні).
Зручність інтерфейсу
Щоб користувачам було однаково зручно працювати з інформацією за великої кількості замовлень та пропозицій (для великих компаній) та за невеликої кількості (для маленьких компаній), змінили подачу цієї інформації.
Всі коментарі щодо списку замовлень зібрали в одному місці.
Змінили вигляди нескінченного плану закупівель великого підприємства та планування перевезень від постачальників.
Окремим викликом стало – упакувати повнофункціональний інструмент в екран смартфона, щоб не втратити зручність.
Фінальним кроком роботи стало створення дизайн-гайдлайнів продукту, адже «неможливо просто так взяти й переробити продукт за один підхід» – розробниками потрібні інструменти, аби вносити потрібні зміни самостійно.
Новий дизайн запрацює у лютому, проте зміни триватимуть протягом року. Наразі це не остаточний варіант перевтілення майданчику, нові перетворення SmartTender ще попереду.
Як народжувалася Сміливість. Кейс Brave like Ukraine
Як Uklon перетворювався у SuperApp: рішення та ітерації
Ребрендинг Зеленого Театру в Одесі
Переосмислення української етніки для паковання «Канів 1971»
Український дизайнер переосмислив афіші театру «Березіль» Леся Курбаса
Що таке Filter? — Мінкульт навчає українців медіаграмотності