AutoMatch
iOS-приложение, которое собирает объявления об автомобилях с пробегом из нескольких источников в одной ленте. Пользователь может посмотреть характеристики и фотографии, сравнить предложения и связаться с продавцом, не покидая приложение.
- Роль
- Единственный дизайнер, полный цикл
- Период
- Октябрь 2023 — январь 2024
- Платформа
- iOS
- Объём
- UI/UX основных сценариев и библиотека компонентов с нуля
Контекст
Пользователи проверяли несколько площадок каждый день
Основные пользователи — люди, которые активно ищут автомобиль с пробегом. Каждый день они открывают несколько площадок, повторяют один и тот же поиск, сравнивают объявления и пытаются не пропустить новые предложения.
Я работал напрямую с владельцем продукта. Фронтенд-разработчика в команде на этом этапе не было.
Роль
Полностью переработал продукт
Я получил набор несвязанных экранов без библиотеки компонентов, описанных сценариев и онбординга. Пересобрал основные пользовательские потоки, создал компоненты, добавил недостающие экраны и описал краевые случаи.
Цели
Что должен был решить продукт
- Одна лента вместо пяти вкладок
Собрать объявления, фотографии, характеристики и контакты продавцов в одном приложении. Пользователю больше не нужно повторять один и тот же поиск на разных площадках.
- Точная подборка без перегруженного фильтра
Дать пользователю десятки параметров поиска, но сохранить экран понятным и компактным.
- Больше информации прямо в ленте
Показать достаточно данных для первичной оценки автомобиля без открытия каждого объявления. Пользователь сразу видит цену, ключевые характеристики, новые предложения и уже просмотренные карточки.
Ключевые решения
- Многопараметрический фильтр
Фильтр включает регион, марку и модель, тип кузова, историю повреждений, пробег, цену, двигатель, коробку передач, топливо, тип продавца и другие параметры.
Я разделил настройки на смысловые группы. Для коротких выборов использовал переключатели, для множественных — чипы, для числовых значений — компактные диапазоны. Все параметры остались на одном прокручиваемом экране, но перестали восприниматься как одна длинная форма.
- Информативная карточка объявления
В компактной карточке нужно было показать фотографию, модель, цену, характеристики, пробег, регион, отклонение от рыночной стоимости и статус просмотра.
Я разделил информацию по приоритету: автомобиль и цена находятся на первом уровне, характеристики — на втором, а дополнительные статусы не конкурируют с основным содержанием.
Что было спроектировано
Основные части продукта
- Фильтрация и подборки
Создание подборки по множеству параметров, включая все основные состояния и краевые случаи.
- Лента объявлений
Карточки с характеристиками автомобиля, отклонением цены от рынка, статусом просмотра и обновлением данных.
- Библиотека компонентов
Единый набор компонентов, состояний и правил взаимодействия для всех экранов приложения.
- Сопутствующие экраны
Онбординг, главная страница, профиль и вспомогательные разделы.