Первый этап работы начался с изучения прошлых наработок заказчика. Понимание требований и ожиданий помогло мне более четко выстроить дальнейшую работу над проектом. На этом же этапе анализировала конкурентов (Авто.ру, Авто.ру Бизнес, Carinspect) для изучения удачных и неудачных решений в интерфейсе и понимания привычных паттернов взаимодействия.
Чтобы создать наиболее подходящий дизайн, я глубже исследовала целевую аудиторию.
ПротоперсоныАртефакт использовала на начальных этапах разработки, чтобы быстро определить гипотезы о поведении, целях и потребностях целевой аудитории, когда подробные исследования еще не были завершены. Этот метод помог представить ключевые типы пользователей и создать основу для будущих дизайнерских решений.
- Дилер: Юридические лица, работающие в продаже автомобилей, которым важны стандартизированные отчеты.
- Специалист по продаже авто: Частные лица, занимающиеся перепродажей автомобилей, которые нуждаются в быстрой проверке.
- Специалист по подбору авто: Лица, подбирающие автомобили по заказу, нуждаются в достоверных данных.
- Частное лицо: Автовладелец или покупатель, ищущий уверенности в сделке.
- Администратор: Ответственный за контроль и поддержку системы CarCheckUp.
ПерсоныНа основе результатов исследований были созданы образы ключевых персон, чтобы спроектировать интерфейс, отвечающий реальным сценариям использования.
- Описание персон
- Personas Потребности Цели Страхи Проблемы
- Иван, Автодилер, 45 лет
- Быстрое создание качественных отчетов, повышение доверия клиентов, сокращение риска отказов.
- Упростить сделки, улучшить качество обслуживания клиентов.
- Недостаточно достоверные данные о состоянии автомобиля, время на оформление.
- Несистемные отчеты, сложности в подтверждении юридической чистоты.
- **Алексей, Специалист по продаже авто,
- 30 лет**
- Доступ к быстрой проверке авто, экономия времени и средств.
- Повысить уровень доверия клиентов, упростить переговоры.
- Попадание на автомобиль с «нечистой» историей.
- Трудности в сборе и проверке данных.
- Олег, Специалист по подбору авто, 34 года
- Быстрая и достоверная проверка автомобиля.
- Сохранить репутацию, избегать скрытых рисков.
- Ошибки при проверке, ухудшение репутации.
- Недостаток достоверной информации.
- Наталья, Владелец авто, 40 лет
- Уверенность в техническом и юридическом состоянии автомобиля.
- Сделка без скрытых рисков, справедливые условия продажи.
- «Кот в мешке», скрытые проблемы с авто.
- Сложность в оценке состояния авто.
- Анна, Администратор, 29 лет
- Контроль над системой, поддержка пользователей.
- Стабильная работа приложения, минимизация запросов в поддержку.
- Ошибки и недочеты, недовольные пользователи.
- Большой поток обращений по поддержке.
Customer Journey MapДополнительно я подготовила
CJM для более глубокого понимания того, какие болевые точки могут возникнуть у пользователя на разных этапах взаимодействия с продуктом. Это позволило выявить ключевые точки, которые следовало оптимизировать для улучшения общего UX.
Путь пользователяСледующим шагом стала проработка пользовательских взаимодействий. Я создала схемы
User Flow, которые показывали, как пользователи будут проходить через разные этапы работы с приложением.
Стратегия и концепция дизайнаПосле я начала разработку стилистики для проекта. Для этого создала два концептуальных варианта, которые бы хорошо подходили для визуального решения проекта.
Подбор цветовой палитры
Концепция 1: Синий акцент и векторная графикаОсновной цвет — синий для акцентных элементов. Сочетание синего и нейтральных оттенков серого создает визуальный баланс. Векторная графика добавляет минимализма.
Концепция 2: Красный акцент и растровая графикаАкцентный цвет — насыщенный красный, выделяющий CTA-элементы. Использование противопоставления усиливает контрастность. Растровые изображения добавляют насыщенности.
<aside>
Чтобы утвердить наиболее удачную стилистику, использовалось
сайд-бай-сайд тестирование. Это позволило клиенту увидеть два варианта стилистики и выбрать наиболее подходящий. В результате анализа и обсуждений с клиентом, мы выбрали концепцию, которая лучше всего отражала нужные эмоции и создавала оптимальный пользовательский опыт.
</aside>
Разработка UI Kit и дизайн-системыСоздала UI Kit для объединения всех элементов интерфейса и обеспечения их визуальной согласованности и доступности.
Типографика и доступностьПодбирая шрифты, настроила межстрочный и межбуквенный интервалы для удобочитаемости на всех устройствах. Провела тесты доступности через плагины, удостоверившись в соответствии стандартам WCAG.
Дизайн интерфейсов и анимацияС утвержденной концепцией я начала детализировать макеты экранов. На этом этапе я создала макеты всех интерфейсов, как для приложения, так и для админ-панели. Я прорабатывала анимации для ключевых взаимодействий, которые помогли пользователю лучше понимать происходящее и создали более плавный и приятный опыт взаимодействия с продуктом. В течение работы я получала обратную связь от команды и на основании комментариев вносила корректировки в дизайн, чтобы продукт соответствовал ожиданиям.
Далее была разработана
графика для сторов и собрана
анимация интерфейсов по основным сценариям для использования в контексте приложения.
Итоги проекта и результатыИтогом стало создание комплексного дизайна, который не только соответствовал техническим требованиям, но и обеспечивал удобство для пользователей.
- Оптимизация пользовательского опыта через интуитивный дизайн и доступность.
- Снижение времени на создание отчетов за счет автоматизации.
- Соответствие стандартам доступности, что расширило аудиторию приложения.
На октябрь 2024 проект находится на стадии тестирования и проработки новых функций.