кейси
Діджитал айдентика та UX/UI редизайн платформи SmartTender
Кейс від Spiilka
21 Січень, 2021
Стати автором

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

За допомогою майданчику великі компанії можуть спростити та автоматизувати власний тендерний процес. SmartTender користуються – «Київській хлібзавод», «УкрНафта», «Миронівській хлібопродукт» та інші. SmartTender розробила та продовжує розвивати продуктова компанія IT-Enteprise.

Дизайн-бюро Spiilka зробило редизайн майданчику та перетворило складну систему айдентики у зручну та людяну. Як агенція допомагала SmartTender стати легким та зручним інструментом закупок і заявок великих корпорацій та звичайних користувачів, розповідають у кейсі.

 

Причини редизайну та завдання

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

Дослідження 

Дизайнери провели інтерв’ю з користувачами SmartTender на підприємствах та дізналися про їхні болі та проблеми. Відокремили основні ролі в продукті та розробили user-flow головних персон для великих підприємств і маленьких компаній.

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

Розробка

Дизайнери розробили UX модулі продукту: прототип, обговорення, тестування, внесення змін.

Одночасно оновили візуальний стиль продукту: змінили кольори, шрифти та лого, які б дозволили побудувати сучасний UI.

Slider image
Slider image

Логотип трансформували зі знака в інструмент брендування. За його допомогою хотіли створити distinctive memory construction та зробити унікальний графічний знак, який можна використовувати в іконці застосунку й інтерфейсу.

В основі логотипу – видозмінений геометричний гротеск SK-Modernist. Для інтерфейсу використали IBM Plex Sans.

Варіанти кольорових схем

Прагнули розробити кольорову гаму, яка б відрізнялась від конкурентів, та яку можна було б застосувати для розробки UI – відійти від традиційно чорно-біло-сірої гами та не перевантажувати очі під час роботи з продуктом.

Slider image
Slider image
Slider image
Slider image
Slider image
Slider image

Мета – розробити кольорову схему, яка працює в інтерфейсі.

Переважно залишилася чорно-біла гама, один акцентний та кілька компліментарних UI-кольорів для кодування різних статусів (підказки, статуси затверджено, помилковий, в очікуванні).

Зручність інтерфейсу

Щоб користувачам було однаково зручно працювати з інформацією за великої кількості замовлень та пропозицій (для великих компаній) та за невеликої кількості (для маленьких компаній), змінили подачу цієї інформації.

Всі коментарі щодо списку замовлень зібрали в одному місці.

Slider image
Slider image
Slider image
Slider image

Змінили вигляди нескінченного плану закупівель великого підприємства та планування перевезень від постачальників.

Окремим викликом стало – упакувати повнофункціональний інструмент в екран смартфона, щоб не втратити зручність.

Фінальним кроком роботи стало створення дизайн-гайдлайнів продукту, адже «неможливо просто так взяти й переробити продукт за один підхід» – розробниками потрібні інструменти, аби вносити потрібні зміни самостійно.

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

 

22222222222222222

У нас є ще дещо для вас