Етап 1. Клієнт
Autoglass Group — компанія з продажу, установки і ремонту автоскла. На сьогоднішній день Autoglass Group займає лідируючі позиції серед великих дилерів на ринку України. Каталог продукції компанії налічує більше 18 млн. деталей.
Етап 2. Завдання
- Розробка прототипу і концепту майбутнього сайту.
- Створення унікального дизайну сайту на основі прототипу.
- Розробка мобільної версії сайту.
- Проектування інтуїтивно зрозумілого фільтра підбору автоскла по маркам автомобілів.
Етап 3. Архітектура сайту
Для збільшення часу перебування відвідувачів на сайті, зниження відсотка відмов і збільшення глибини переглядів сторінок використаний наступний функціонал:
- особистий кабінет;
- «замовити швидкий дзвінок»;
- форма зворотнього зв’язку;
Також для зручності використання сайту були створені спеціальні інструменти (фільтр/сортування) товарів за різними параметрами.
Для зручного пошуку потрібної запчастини реалізований рядок швидкого пошуку за ключовим словом і форма пошуку за конкретною маркою автомобіля. У свою чергу, форма пошуку за конкретною маркою автомобіля включає в себе:
- наявність товару на складі;
- швидкий перегляд фотографії товару;
- прихована ціна для відстеження найбільш переглядаючих товарів.
Етап 4. Прототипування
На етапі створення прототипу ми продумали логіку шляху користувача. Етап прототипування важливий для розуміння клієнтом і командою розробки включно сценарію шляху користувача до цільового дії. На даному етапі коментарі з боку клієнта внести легше, ніж на етапі дизайну.
Після повного пророблення прототипу можна описати логіку майбутнього сайту: крок за кроком користувач заповнює всі необхідні поля в фільтрі (марка/модель/ рік/тип кузова). Всі важливі елементи зробили на видноті і відповідним чином виділеними. Після вибору всіх полів в фільтрі завантажується готова схема машини. Тестуючи різні варіанти вибору скла, зупинилися саме на візуальній схемі. Так як не всі користувачі знають, як називається те чи інше скло. Таким чином спростили навігацію при виборі потрібного елемента. Користувачеві не доведеться блукати в деталях, а натисне на те, що його цікавить. Справа завантажується таблиця варіантів скла в наявності (опис, виробник, ціна і наявність на складі). Малювали за принципом групування, розбили на логічні блоки, щоб користувачеві було легше орієнтуватися. Також передбачений пошук за кодом скла, якщо у користувача такий є.
Етап 5. Дизайн
Після затвердження прототипу з замовником починається етап промальовування дизайну. Взявши за основу принцип KISS (keep it short and simple) інтерфейс зробили простим і зрозумілим, а всі дії — очевидними.
Автомобільній тематиці характерний спокійний і стриманий стиль, тому концентрувалися на важливих елементах, які виділяли за допомогою ієрархії, природно, шуму намагалися уникати, щоб користувач не відволікався від цільової дії. Саме ідея стриманості і якоїсь консервативності стала головною візуальною складовою в готовому дизайні. Також робили однорідний стиль і функціонал на всіх частинах сайту.
Головна сторінка має сучасний гармонійний стиль.
Типографіка — один з найважливіших компонентів сприйняття сайту. Тому шрифт був підібраний максимально простий, без зарубок Muller, зручний для читання і сприйняття, який не відволікає увагу користувача від головної мети. Також для кращого сприйняття контенту користувачем була опрацьована система відступів і заголовків. Основні кольори були обрані в діловому чорно-білому стилі, а в якості акцентного кольору був обраний червоний колір, який асоціюється з рішучістю, впевненістю і швидкістю, в нашому випадку — це доставка і установка.
Кілька прикладів сторінок сайту:
Головна сторінка
Вибір скла
Блог
Боса Альона
Дизайнер
