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-китАдаптивная вёрсткаФильтры автопаркаФорма бронированияБлог

Хотите такой же проект?

Опишите задачу – в течение рабочего дня ответим с вопросами и предварительной оценкой сроков.

Ответим в течение рабочего дня
Написать нам