• B2B
  • B2C
  • UX/UI

MXTUNED

Лендинг и веб-портал по чип-тюнингу автомобилей

Роль
UX/UI-дизайнер
Сфера
Автотюнинг
Вход на портал MXTUNED

О проекте

Сфера деятельности MXTUNED раскрывается в двух направлениях:

  • B2C — Частные владельцы записываются на чип-тюнинг в сервис.
  • B2B — Компания пишет ПО для тюнинга под заказ для партнёров и мастеров. Те отправляют файлы прошивок через портал и получают готовое решение.

Что сделал

  • Сделан лендинг из 10+ блоков с полным путём от первого экрана до заявки.
  • Спроектирован портал с тремя ролями и 10+ разделами.
  • Собран UI-kit, на котором теперь делаются все доработки.

Портал: роли и заказы

Продумал роли и права доступа: клиент, сотрудник, администратор. Спроектировал ключевые сценарии:

  • вход, регистрация, восстановление пароля
  • список заказов с фильтрами (по исполнителю, оплачен или нет) и цветовыми статусами
  • создание заказа отдельно для клиента и для админа
  • карточка заказа с комментариями, чеками и индикатором новых сообщений
  • оплата, доплата, подсчёт долга, закрытие всех неоплаченных заказов
  • очередь заказов и поднятие заказа в ней
Поднятие заказа в очереди
Список заказов глазами администратора
Список заказов глазами клиента
Карточка заказа (админ)
Карточка заказа (клиент)
Создание заказа
Результаты поиска

Статистика, график и база знаний

Вокруг заказов собрал служебные разделы портала:

  • статистика и дашборд (графики, кольцевые диаграммы)
  • график работы
  • база знаний и важные объявления
Статистика портала
График работы
База знаний
Статья базы знаний

UI-kit

Собрал UI-kit: поля, селекты, тогглы, таблицы и ячейки, статусы, бейджи, кнопки, модалки, алерты, пагинацию, табы. На нём теперь делаются все доработки.

Состояния полей ввода
Карточки боковой панели заказа
Баннер очереди заказов
Карточки заказов на телефоне

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

Портал адаптирован под телефон: таблица заказов превращается в карточки, навигация уходит в нижний таб-бар, фильтры, чат и детали заказа открываются в отдельных окнах.

Заказы на телефоне
Карточка заказа на телефоне
Комментарии к заказу на телефоне
Статистика на телефоне

Лендинг

  • Придумать визуальный стиль: тёмная тема, красный акцент, техно-эстетика (сетка-«тоннель», силуэты авто, графики и тепловые карты мощности).
  • Разложить услуги и их выгоду: блоки «Что мы умеем?» и «Как проходит чип-тюнинг?» (5 шагов от диагностики до тест-драйва).
  • Собрать доказательства экспертизы: цифры, фото процесса, «Примеры работ» с показателями до и после (мощность, момент, разгон), марки авто, карта партнёров по России.
  • Довести пользователя до заявки: CTA «Узнать стоимость» и «Проверить свой автомобиль», затем форма с выбором марки и модели.
Первый экран лендинга
Блоки «Что мы умеем?» и «Как проходит чип-тюнинг?»
Фото процесса и блок «Почему мы профи?»
Разработка ПО для тюнинга по всему миру
Какие автомобили мы прошиваем
Примеры работ с показателями до и после
Форма заявки
Контакты и подвал

Другие проекты