Проектирование и дизайн для сервиса службы доставки Express.ru

Удобный и современный сервис с ориентацией на конечного пользователя.

Мы разработали три варианта первого экрана. Основной целью было привлечь внимание пользователя за 7 секунд, смотивировать его остаться на сайте и воспользоваться простой формой расчета стоимости.

Обсудив все «за» и «против» каждого варианта, мы остановились на последнем:

• на первом экране главной страницы полноэкранное видео или фото, отображающие деятельность компании и вызывающие вау-эффект,
• крупный заголовок и подпись к нему, раскрывающие род деятельности компании и ее преимущества. Их цель: заинтересовать клиента остаться,
• меню, расположенное справа. Это не стандартное размещение навигации, но в последующем оно поможет нам «вести» пользователя,
• крупное окно ориентировочного расчета стоимости, вызова курьера и отслеживания заказа — без лишних переходов и кликов.

Также мы разработали несколько прототипов ключевых страниц и подготовили их для тестирования.

Usability testing — этап проектирования, на котором мы предлагаем пользователям прототип продукта, чтобы получить обратную связь. Обычно проектировщики не знают нужды пользователей досконально и прототип, который они создают, основан на гипотезах. Тесты помогают проверить эти гипотезы и внести изменения в прототип на ранних стадиях разработки, а значит — предложить пользователям более качественный продукт.

Для проведения тестирования нужно найти потенциальных пользователей продукта. Мы выделили следующие группы: сотрудники express (менеджеры, служба поддержки) и различные пользователи служб доставки, не знакомые с express.ru (менеджеры компаний, офис-менеджеры и пр.).

Чтобы тестирование прошло максимально успешно и эффективно мы выделили два сценария, которые должны были подтвердить или опровергнуть наши гипотезы. Также мы учитывали мнение респондентов, достаточно ли им информации на главной странице, чтобы сформировать целостный образ компании, внушает ли им доверие компания на основе представленной информации на главной странице.

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

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

Основная идея дизайн-концепции — актуальность продукта. В зависимости от времени года или приближающегося праздника меняется фоновое изображение, заголовок и иконки.

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

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

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

Мы разработали иллюстрации для описания услуг компании.

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