Портфолио веб дизайнера

Дизайн записи на автомойку с мобильной версии сайта Express-Шина

Express-Шина — мои давние клиенты. Мы реализовали вместе много интересных задач. Новой задачей стала оптимизация мобильной версии. Точнее раздела «Автомойка».

Многие посетители сайта «Express-Шина» записываются на автомойку через мобильную версию. Однако, она довольно неудобная — структура сложная, элементы управления мелкие. В итоге, имеем высокое количество отказов и жалобы клиентов. Что же, давайте разбираться.

Разбираем текущий пользовательский маршрут

Точка входа
Изначально автомойка была ссылкой в разделе «Услуги». Особое требование — услуги сервиса должны быть в начале страницы, чтобы посетители видели не только шины и диски. В итоге, услуги стали занимать в высоту 4 строки и сильно сдвинули каталог товаров (самое то главное) вниз.

Это плохо. Надо исправлять.

Выбор услуг автомойки
Этот третий шаг записи на мойку стал первым камнем преткновения. Почему-то на экран выведено поистине колоссальное количество информации. Помимо множества комплексов есть большой список всевозможных опций. С одной стороны это удобно, с другой же пользоваться этим с мобильного телефона просто невозможно. С этим тоже надо что-то делать

Выбор удобного офиса и времени
В десктоп-версии этот шаг сделан ещё более-менее понятно. А с мобильной версией беда — неочевидный контрол выбора нужного офиса и слишком широкие столбцы с временными интервалами.
Необходимо сделать этот шаг более интуитивным и простым.

Решаем проблемы интерфейса

Шаг 1. Оптимизация точки входа
Для начала сократим размер списка услуг. Вытянем три основных направления (Шиномонтаж, Автомойка и Автосервис) в строку. Это сэкономит приличное количество места.
Но есть одна проблема: услуги предоставляются не во всех городах.

Шаг 2. Выбор типа автомобиля
Этот шаг простой, ничего особенного здесь мудрить не нужно. Достаточно правильно выстроить навигацию: шаг назад и очевидное следующее действие.

Шаг 3. Выбор услуг мойки
А вот и наш главный камень преткновения. Как вы, наверно, заметили, основная проблема текущего интерфейса — это непомерное количество услуг.
Первое, что я предложил, это объединить наиболее популярные услуги (а такая статистика имеется) в комплексы.

Комплексы выводим блоками по типу слайдера. То есть комплексы можно листать свайпом влево-вправо.

«Состав услуги» разворачивает список входящих услуг.
А кнопка «Добавить» меняется на галочку.
Полоса с итоговой суммой всегда находится внизу экрана.
Сумма итога пересчитывается на лету. Очень удобно.

Шаг 4. Выбор офиса и времени мойки
Второй узкий момент из прошлого интерфейса — это выбор офиса и времени. Выбор офиса был не очевидным, а выбор времени не помещался в экран смартфона.

Я переработал интерфейс записи и приблизил его к гайдлайнам Android и iOS. Барьер убран, запись стала интуитивно понятной.

Новый UX и UI дизайн успешно внедрён на «живом» сайте. Дизайн работает и активно тестируется посетителями. Результаты вцелом уже значительно лучше.