Карта сайта Поиск

Мобильная версия сайта Audi

Мобильная версия сайта Audi
m.audi.ru/usedcars
Мобильная версия российского сайта Audi, рассказывающая потенциальным покупателям о доступном в салонах дилеров модельном ряде компании и предложениях автомобилей с пробегом. Она предлагает в упрощенном виде основные сервисы базовой версии сайта, что позволяет изучать предложения и связываться с продавцом в дороге или там, где компьютер недоступен.
Мы сделали:
Клиент:
Audi Россия
Отрасль:
Автомобилестроение
Тип проекта:
Мобильный сервис
Длительность:
3 недели

Задача

В рамках новой глобальной стратегии компания Audi начала унификацию региональных сайтов на основе единого стандарта. Силами российского представительства была запущена основная часть мобильной версии, однако часть сервисов отечественного сайта оказалась уникальной и требовала создания с нуля. И в первую очередь требовалось проработать площадку по продаже автомобилей с пробегом.

Необходимо было детально проработать структуру, ключевые страницы дополнительной версии подсайта и их дизайн. Перед мобильной версией стояли следующие задачи:

  • Дать потенциальным покупателям доступ к максимально широкому количеству предложений автомобилей марки с пробегом. Мобильная версия должна показывать ту же базу, что и основной сайт.
  • Облегчить механизм подбора машины. Он должен быть простым, чтобы вписываться в ограничения мобильных браузеров, и в то же время проработанным, чтобы позволить найти подходящий автомобиль. Кроме того, важно учитывать существующие наработки основного мобильного сайта и стараться не отходить от их общих принципов.
  • Дать возможность быстро связаться с продавцом. В случае, если предложение заинтересовало потенциального покупателя, он должен иметь возможность позвонить дилеру и найти его салон.
  • Предоставить пользователям возможность работать с сайтом наиболее удобным для них в текущий момент образом — с компьютера или мобильного телефона.

Кроме того, необходимо было позаботиться о следующих качествах:

  • Эргономика. Удобный пользовательский интерфейс, позволяющий быстро и эффективно использовать основные функции сайта;
  • Сохранение общей стилистики сервисов компании. Дизайн и подходы к построению интерфейса должны вписываться в общие стандарты оформления мобильного сайта Audi.
  • Доступность для основных мобильных платформ. Основная часть функций должна работать во всех телефонах, имеющих HTML-браузеры.
  • Минимум лишнего. Важно помнить об ограничениях мобильных браузеров, экранного пространства, контекстах использования самих телефонов.

Решение

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

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

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

Все это было отражено в пакете структурных схем страниц (wireframes) и дизайн-макетов, которые стали основным результатом работ. А также сопутствующих документах, описывающих задачи и структуру интерфейса.

В результате

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

Дизайн главной страницы Дизайн главной страницы
Дизайн страницы поиска
Дизайн страницы предложений
Структурная схема карточки автомобиля


У вас есть вопросы или предложения?

Вы легко можете связаться с нами

У вас есть вопросы или предложения?

Вы легко можете связаться с нами
* звездочкой отмечены обязательные поля
*
*