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

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

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

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

     

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


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

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

     

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

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

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

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



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




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

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

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


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

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

     

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

     

    Заказать подобный проект

       

     

  • Skills that used for project

    100%