---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2025-05-20
publishYear: 2025
name: ValerAI
title: Редизайн AI-приложения для клиентов автосервиса
excerpt: Интерфейс продукта для первичного осмотра автомобиля с помощью искусственного интеллекта
context: |
Когда нельзя показать настоящий проект, но очень хочется, мы пишем фантастические кейсы. Меняем в них все, кроме, собственно нашей работы. Рисуем новые картинки с другим UI, но с преждней структурой интерфейса, даем заказчику новый логотип и другое название. А вот про наш дизайн интерфейса рассказываем максимально точно и подробно, насколько это возможно без нарушения NDA.
Был у нас такой кейс про систему документооборота [для Штирлица, Исаева и Полуэкта Полуэктовича](/portfolio/edms), а недавно мы показали вам приложение [SimpleFly](/portfolio/simplefly). И вот снова:)
Valer Motors — название выдуманное, компания реальная — специализируется на продаже и обслуживании автомобилей. Они проводят техническое обслуживание, слесарные работы, диагностику электроники, шиномонтаж и другие сервисные услуги.
У этой компании есть внутренний продукт — ValerAI. Когда клиент привозит машину в сервисный центр, он получает ссылку на страницу с обзорным видео осмотра автомобиля. Это видео оперативно анализирует искусственный интеллект, выявляя неполадки и предлагая услуги по итогам осмотра.
Конечно, машину осмотрят и живые специалисты, но первичную диагностику и согласование работ с клиентом можно поручить и AI. Это ускоряет и упрощает начальную дефектовку и стадию "Мы посмотрели вашу ласточку. Колодки сносились, надо менять. Развал-схождение делать будем?".
isNew: true
logo:
src: ~/assets/images/portfolio/valer-ai/logo.svg
alt: ValerAI • Логотип
image: ~/assets/images/portfolio/valer-ai/main.png
imageAlt: Собака Павлова • ValerAI • Редизайн AI-приложения для клиентов автосервиса
thumbnail:
src: ~/assets/images/portfolio/cards/valer-ai.svg
alt: Собака Павлова • ValerAI • Редизайн AI-приложения для клиентов автосервиса
tags:
- it
- ux-audit
- redesign
- prof
- mob
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-аудит](/services/ux-audit) и [UI-редизайн](/services/ui-redesign), как в этом кейсе, и [многое другое](/services).
collection: services
page: ux-audit
- collection: services
page: ui-redesign
- text: |
### Хотите уметь так же?
Научим создавать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: easydocs-2024
- collection: portfolio
page: control-patent
- collection: portfolio
page: smartdeal-ecp
- collection: portfolio
page: control-forest
- collection: portfolio
page: easydocs
- collection: portfolio
page: novotelekom
- collection: portfolio
page: sindbad
outcome:
title: Некоторые цифры
numbers:
- title: Оставили
number: 38 комментариев
text: по результатам экспертной оценки дизайнера
- title: Провели
number: '7 интервью'
text: с пользователями сервиса
- title: Оставили
number: 37 заметок
text: по результам тестирования
- title: Макеты
number: 'для 2 платформ'
text: мобильная версия и веб
text2: Экспертные комментарии помогли выявить проблемы интерфейса и подготовить гайд для тестирования пользователей. Интервью с пользователями помогло решить основные проблемы, а пользовательское тестирование — внести финальные корректировки.
result:
- src: ~/assets/images/portfolio/figma.svg
text: Извините, NDA
link: "https://www.figma.com/design/qosqSbJ84bpjUnlx1BQ2m6/simplefly?node-id=5-15406&t=VW71xi0QkSmWx0f1-0"
budget: "700 000 ₽"
time: "2,5 месяца"
review2:
text: |
С самого начала работы чувствовалась вовлеченность: команда внимательно изучила наши требования, задала много уточняющих вопросов, чтобы точно понять, что нам нужно.
Коммуникация в проекте была на высоком уровне — все этапы сопровождались четкими отчетами, обсуждениями и быстрыми правками по нашим пожеланиям. Любые вопросы решались оперативно, что очень важно для нас.
Результат превзошел ожидания: решение не только выполняет основные функции, но и оказалось достаточно гибким для интеграции с другими нашими продуктами. Это экономит время и позволяет проще масштабировать инструмент в будущем.
photo: ~/assets/images/portfolio/valer-ai/person2.png
person: C3PO
position: Продакт-менеджер компании ValerAI
review:
text: |
Здесь команда выступила буквально в роли спасателей. Мы с продактом срочно вынуждены были менять подрядчика, с которым начали работу.
Ребята очень быстро включились: спланировали ресурсы, забрали бриф, предложили методологию, оценили и т.д. Словом, через 5-7 дней после вынужденного отказа от другого подрядчика, я уже перестала пить валериану с ромашковым чаем, и мы спокойно уже работали с командой.
Мне трудно всегда довериться подрядчикам, однако, здесь я отпустила ситуацию буквально через 2-3 встречи, увидев качество проработки брифа.
Даже несмотря на то, что в течение проекта менялись исследователи (это так себе история, конечно), но! качество результата оставалось высоким.
Я как исследователь счастлива, т.к. счастливы мои продакты, а это видавшие виды люди, испытывающие скепсис при появлении нового подрядчика. А тут-восторг как у детей, мол: «А что так бывает?!»
photo: ~/assets/images/portfolio/valer-ai/person.png
person: R2D2
position: Исследователь компании ValerAI
metadata:
canonical: https://sobakapav.ru/portfolio/valer-ai
title: Редизайн AI-приложения для клиентов автосервиса
description: "Интерфейс продукта для первичного осмотра автомобиля с помощью искусственного интеллекта."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/valer-ai/badge.png'
width: 1200
height: 630
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
import PhoneMockup from '~/components/widgets/PhoneMockup.astro';
<TOC>
[Бизнес-задача](#anchor1) • [Дизайн-задача](#anchor2) • [Результат](#anchor3) • [Особенности](#anchor4) • [Отзыв, цены, сроки](#anchor5)
</TOC>
## <a name="anchor1" />Бизнес-задача
1. Понять, что именно пользователь хочет узнать, когда привозит машину в сервис заказчика. В каком формате хочет получить информацию, что конкретно хочет видеть.
<a href="/images/portfolio/valer-ai/1.png" target="_blank"></a>
_Детали заказа_
2. Добиться того, чтобы пользователь как можно больше взаимодействовал с приложением. Тем самым снизить нагрузку на менеджеров автосалона. Идеально, если клиент будет приобретать услуги после осмотра вообще без участия менеджера.
<a href="/images/portfolio/valer-ai/0.png" target="_blank"></a>
## <a name="anchor2" />Дизайн-задачи
1. Оценить существующее состояние страницы, провести серию пользовательских интервью для выявления проблем и сложностей.
<a href="/images/portfolio/valer-ai/2.png" target="_blank"></a>
_Страница успеха_
2. На основе полученных результатов составить модель информационных ожиданий и выполнить концептуальное проектирование страницы.
> Модель информационных ожиданий (МИО) — простая, но очень эффективная дизайн-практика, с помощью которой можно ответить на элементарные пожелания пользователя к интерфейсу сайта или приложения. Фактически — на вопросы, которые пользователь задает этой системе. Мы используем этот инструмент в дизайне интерфейсов уже больше десятка лет, и вас [тоже можем научить](https://www.eduhund.ru/program/io/?utm_source=sobakapav&utm_medium=site&utm_campaign=page).
3. Провести тестирование концептуального дизайна и детализировать концепт по результатам тестирования.
<a href="/images/portfolio/valer-ai/6.png" target="_blank"></a>
_Главная страница. Дефолтное состояние_
## <a name="anchor3" />Результат
Заказчик получил дизайн интерфейса, мобильный и веб, обновленный на основе исследования реальных пользователей, постоянных клиентов Valer Motors.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/valer-ai/22.png" />
<PhoneMockup image="/images/portfolio/valer-ai/23.png" />
</div>
<em>Мобильный интерфейс. Отложенные работы, ошибка</em>
Кроме необходимых улучшений дизайна интерфейса мы предложили решения, которые помогут развивать продукт, добавлять в него дополнительные возможности. Это повысит вовлеченность пользователя во взаимодействие с AI-консультантом, а значит и конверсию сделок (согласований услуг из предложенного списка).
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/valer-ai/24.png" />
<PhoneMockup image="/images/portfolio/valer-ai/25.png" />
</div>
<em>Мобильный интерфейс. Оцените сервис</em>
Заказчик получил дизайн интерфейса, обновленный на основе исследования реальных пользователей, постоянных клиентов Valer Motors.
<a href="/images/portfolio/valer-ai/16.png" target="_blank"></a>
_Предложение. Состояние по умолчанию_
<a href="/images/portfolio/valer-ai/19.png" target="_blank"></a>
_Предложение согласовано_
Во время тестирования итоговых макетов пользовали (реальные клиенты заказчика) отметили, что интерфейс стал заметно лучше, заказчик движется в правильном направлении, а сами они продолжат пользоваться сервисов. Пользователям понравилась цветовая индикация необходимости услуг и новая компоновка экрана. Внезапный побочный эффект: пользователи стали лучше оценивать работу AI-консультанта, воспринимать более компетентным. Оттого лишь, что поменялся интерфейс.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/valer-ai/26.png" />
<PhoneMockup image="/images/portfolio/valer-ai/27.png" />
</div>
<em>Мобильный интерфейс. Согласование работ</em>
### Артефакты
- Бизнес-требования
- Пользовательские сценарии
- Гайд для тестирования (страницы до редизайна)
- Гайд для тестирования (клик. прототип, после редизайна)
- Оценка существующего интерфейса (Miro)
- Кликабельный прототип
- Отчет с комментариями по результатам анализа пользовательских ожиданий при тестировании прототипа
- Таблица выявленных проблем по результатам тестирования
- Отчет по результатам UX-аудита и редизайна интерфейса
- Макеты интерфейса. Мобильная версия + WEB версия
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/valer-ai/28.png" />
<PhoneMockup image="/images/portfolio/valer-ai/29.png" />
</div>
<em>Мобильный интерфейс. Детали услуги, успех согласования</em>
### Экстра-польза
Некоторые из предложенных решений было принято не использовать в текущей версии интерфейса, но заказчик оставил их себе как задел на будущее развитие продукта.
Например, возможность оплатить выполнение работ/услуг частями. В макетах мы предложили решение, позволяющее пользователю уведомить салон о желании оплатить работы в рассрочку.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/valer-ai/30.png" />
<PhoneMockup image="/images/portfolio/valer-ai/31.png" />
</div>
<em>Мобильный интерфейс. Отклонить предложение, отложить предложение</em>
Забавно, что одно из решений, оставленных на будущее, — корзина с отложенными работами. Какие-то услуги нужны, пока не критично необходимы, — и пользователь оставляет их на потом. Корзина отложенных услуг помогла бы пользователю сориентироваться, какие работы (и траты!) ему предстоят, посмотреть детали, прикинуть итоговую сумму.
<a href="/images/portfolio/valer-ai/12.png" target="_blank"></a>
_Отложить_
<a href="/images/portfolio/valer-ai/13.png" target="_blank"></a>
_Отложить. Модальное окно_
## <a name="anchor4" />Особенности и нюансы процесса
Перед тестированием мы провели экспертый аудит существующего интерфейса и предложили четыре концепта редизайна. На старте работ мы обсудили с заказчиком, какие из концептуальных решений подходят под бизнес-задачи, какие нет. А дальше уже выбранные концепты подтвержались и обрастали конкретикой во время тестирования существующего интерфейса на пользователях.
<a href="/images/portfolio/valer-ai/8.png" target="_blank"></a>
_Отклонить предложение_
<a href="/images/portfolio/valer-ai/10.png" target="_blank"></a>
_Отклонить. Модальное окно_
Первые интервью исследователи «Собаки» провели «в поле» — в салоне заказчика — и смогли прочувствовать атмосферу и условия, при которых пользователь получает видеоотчет и рекомендации искусственногго интеллекта. Это помогло исследователю лучше понять потребности пользователя и вжиться в роль клиента.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/valer-ai/33.png" />
<PhoneMockup image="/images/portfolio/valer-ai/32.png" />
</div>
<em>Мобильный интерфейс. Напоминание</em>
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/valer-ai/34.png" />
<PhoneMockup image="/images/portfolio/valer-ai/35.png" />
</div>
<em>Мобильный интерфейс. Заказ обратного звонка</em>
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/valer-ai/36.png" />
<PhoneMockup image="/images/portfolio/valer-ai/37.png" />
</div>
<em>Мобильный интерфейс. Согласование</em>
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/valer-ai/20.png" />
<PhoneMockup image="/images/portfolio/valer-ai/21.png" />
</div>
<em>Мобильный интерфейс. Все услуги, выбор услуг</em>
## <a name="anchor5" />