Express.ru

Express.ru

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

Служба доставки Express.ru — доставка грузов, документов и других отправлений по Москве, Санкт-Петербургу и другим городам России и стран СНГ.

Задача

Провести анализ пользовательского опыта, на его основе сформировать прототипы, протестировать прототипы, отрисовать дизайн нового сайта.

Решение

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

Прототипирование

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

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

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

Тестирование удобства пользования

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


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

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

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

Первый экран

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


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

Интерактивная карта

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

Расчет стоимости

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

Язык бренда

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

Иллюстрации

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

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

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