not the same
● Прокат авто · Україна

Ucars: дизайн і розробка сайту прокату авто

Ucars здає автомобілі подобово й на тривалий термін у Києві та Дніпрі: від економ-класу до преміуму й електромобілів. Сайт повністю зробили ми: дизайн і розробку, від пошуку машини за датами до сторінки бронювання.

Клієнт
Ucars, прокат авто в Києві та Дніпрі
Що зробили
Дизайн і розробка
Стек
WordPress, PHP
Сайт
ucars.com.ua
Проєкт Ucars
01 Про проєкт

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

Що зробили
UX/UI-дизайнUI-кітРозробка на WordPressКаталог автопаркуБронюванняАдаптивна версткаБлог
Технології
WordPressPHPUI/UX
02 Дизайн

Стиль

Світлий інтерфейс з яскраво-синіми акцентами й жовтими кнопками дії. Ізометричні ілюстрації з машинами задають дружній тон, червоні бейджі виділяють знижки. Шрифт Museo Sans Cyrl.

Синій, акценти
#198BFF
Темно-синій, текст
#0D1B34
Жовтий, кнопки
#FFB228
Червоний, знижки
#DE603E
Світле тло
#F3F8FC
ШрифтиMuseo Sans Cyrl
03 Екрани

Головна сторінка

Перший екран – пошук машини: місто, дата й час подачі та повернення, кнопка пошуку. Нижче переваги сервісу, добірки за класами «Вигідні пропозиції», «Комфорт», «Бізнес», «Преміум», «Електро» й «Кросовери» та схема «Як це працює?» із чотирьох кроків.

Головна, дизайн
Добірки за класами
Добірки за класами
04 Екрани

UI-кіт і дизайн-система

Для проєкту ми зібрали UI-кіт: стани кнопок, полів введення, випадних списків і календаря. Він пришвидшив розробку й зробив інтерфейс єдиним на всіх сторінках.

UI-кіт: кнопки й форми
UI-кіт: кнопки й форми
Головна, мобільна
Головна, мобільна
05 Мобільна версія

Мобільна версія

На телефоні фільтр відкривається окремою кнопкою, характеристики машини зібрані іконками, а кнопка «Орендувати» завжди поруч.

Автопарк
Автопарк
Сторінка машини
Сторінка машини
Як це працює
Як це працює
06 Завдання

Завдання

  • 01Вирізнитися серед конкурентівВідійти від шаблонних рішень і зробити впізнаваний інтерфейс.
  • 02Швидко підібрати машинуДати пошук за містом і датами та фільтри за ключовими параметрами.
  • 03Показати все про машинуЗібрати на одній сторінці характеристики, ціну за термінами оренди та умови.
  • 04Спростити бронюванняЗробити коротку форму замовлення, після якої менеджер узгоджує деталі.
  • 05Просувати сайт контентомДодати сторінки за містами й класами авто та блог із корисними статтями.
07 Ключові рішення

Ключові рішення

Автопарк і фільтри
Рішення 01

Автопарк і фільтри

Окремі сторінки автопарку для Києва й Дніпра та для кожного класу. Фільтр за категорією (зокрема мінівени й мікроавтобуси), коробкою передач, видом пального, кількістю місць і ціною. У картці машини – кількість пасажирів, місткість багажника, об'єм двигуна, витрата та таблиця ціни за добу залежно від терміну оренди.

Сторінка машини
Рішення 02

Сторінка машини

Таблиця ціни за термінами оренди, пальне, коробка, двигун, кількість місць, багажник і витрата, посилання на умови прокату та кнопка «Орендувати». Нижче опис моделі, схожі пропозиції та умови оренди.

Бронювання
Рішення 03

Бронювання

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

Блог і сторінки під пошук
Рішення 04

Блог і сторінки під пошук

Новини та статті про оренду: як обрати авто, страховка, оренда в аеропорту, на місяць, для компаній. Окремі сторінки за містами й класами авто працюють на пошуковий трафік.

08 Стек

Стек і роботи

WordPressPHPUX/UI-дизайнUI-кітАдаптивна версткаФільтри автопаркуФорма бронюванняБлог

Хочете такий самий проєкт?

Опишіть завдання – протягом робочого дня відповімо із запитаннями та попередньою оцінкою термінів.

Відповімо протягом робочого дня
Написати нам