[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } } ]
{ "author_name": "Yury Vetrov", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 64, "likes": 34, "favorites": 14, "is_advertisement": false, "section_name": "default", "id": "10977" }
Yury Vetrov
24 663

«Кажется, мы сделали главный „просто сайт“ в стране»

Разработчики нового сайта «Почты России» о работе над проектом

Поделиться

В избранное

В избранном

17 сентября «Почта России» запустила новый сайт pochta.ru, созданный совместно с компанией «Ценципер». По словам разработчиков, в «Почте» происходят масштабные изменения, и сайт — только верхушка перестройки внутренних процессов.

Редакция рубрики «Интерфейсы» запустила сессию вопросов и ответов (AMA — ask me anything) с Русланом Лобачевым (руководитель проектов, «Ценципер») и Сергеем Сургановым (арт-директор, «Медуза», ранее — «Ценципер»), которые работали над проектом «Почты».

Было — стало. Старый сайт доступен по адресу russianpost.ru

Что принципиально нового на сайте, чем он отличается от других «просто сайтов»?

Руслан Лобачев: Кажется, мы сделали главный «просто сайт» в стране. Вокруг ведь одни «сложно сайты». В среде больших организаций способность говорить просто, прямо, очевидно — редкое сокровище, почти не встречается. Для этого требуется не только воля на грани с наглостью, но и глубокое понимание бизнеса компании, умение распутать десятилетиями собиравшийся клубок в одну прямую нить.

Руслан Лобачев

Впрочем, открою вам секрет: никаких сайтов не существует. Мы не верим в сайты, только в людей, их проблемы, желания, радости и печали. Людям не нужен принципиально новый сайт, им нужно, чтобы о них подумали и позаботились. То, что мы делаем вместе с «Почтой», — пытаемся понять, какой должна быть идеальная почта.

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

Как только мы придумаем, как сделать почту, которой вообще не нужен сайт, от сайта мы немедленно откажемся.

Как вы считаете, переживает ли «Почта России» кризис доверия? Если да, то какие шаги вы планируете предпринять в этом поле?

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

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

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

Сергей Сурганов

Сергей Сурганов: С заказчиком нам настолько повезло, что язык не повернется назвать его таким словом. Мы работали непосредственно с Родионом Шишковым, заместителем генерального директора по развитию государственных услуг и новых продуктов «Почты России».

Мы общались с ним и его командой лично, по телефону, Skype и Telegram настолько часто, насколько это было возможно. Скорее это была полноценная совместная работа над общим делом.

Встреча с командой «Почты России» в офисе компании «Ценципер»

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

Наш творческий руководитель, Илья Ценципер, настоял на нескольких принципах:

  1. презентации должны быть регулярными;
  2. это должно быть ясно, красиво, понятно;
  3. к этому нужно относиться как к части своей работы.

Поначалу делать презентации каждую неделю (а то и чаще) было очень тяжело, но после того, как привыкнешь, остаются одни достоинства:

  • это сильно дисциплинирует в отношении промежуточных дедлайнов (как на горизонте недели-двух, так и нескольких месяцев);
  • хорошая подача является частью дизайнерской работы, это придает работе значимости и эффектности;
  • таким способом гораздо легче рассказывать о сложных концепциях;
  • у каждой встречи появляется четкая повестка и план обсуждения;
  • презентация становится документом, который можно выслать после встречи или, спустя месяцы, наглядно увидеть прогресс работы над проектом (полезно для рефлексии).

Одна из предфинальных презентаций

Какие методы и инструменты применялись для исследования взаимодействия людей с сервисом «Почты России»?

Руслан Лобачев: Глубинные интервью с различными клиентами «Почты», анализ опыта сотрудников отделений, полевые наблюдения в отделениях, анализ обращений в службу поддержки «Почты» и комментариев в соцсетях, статистика продаж различных видов услуг.

Недавно «Почта» запустила внутреннюю систему автоматического сбора и анализа данных о клиентах, услугах, внутренних процессах. Так что чуть позже начнем использовать данные в том числе оттуда.

Изучение почтовых бизнес-процессов

У старого сайта было четыре аудитории: население, бизнес, СМИ, сотрудники «Почты». Сейчас я вижу сайт только для населения. Хотя бизнес — очень прибыльный сегмент. Почему вы игнорируете эту и другие аудитории?

Сайт сознательно сфокусирован на потребностях простых людей. Сейчас это minimum viable product (MVP). То есть мы сели и решили, чем мы можем пожертвовать на первых порах, чтобы запустить сайт в разумные сроки, а чем — категорически нет.

Этой категорической необходимостью оказались потребности населения. Сайт «Почты России», не дающий ответы на вопросы рядового гражданина — абсурд.

Бизнес-сегмент — бесспорно очень ценный, с ним «Почта» ведет активную работу по другим каналам, прямыми контактами, в основном с крупнейшими клиентами, сайт в этих отношениях играет незначительную роль.

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

СМИ — для них все есть, просто не на главной странице. Архив журналов — он и на старом сайте был в PDF.

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

Руслан Лобачев: Сейчас сайт гораздо сложнее, чем должен быть в идеале. Чтобы сделать почтовые услуги более простыми, без бланков и непонятных терминов вроде «ценных бандеролей 1 класса», нужно реформировать офлайн-часть услуги — работу отделений, курьеров, почтоматов.

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

Элементы дальнейшей работы по проектированию почтовых услуг

Как изменился сервис в проблемных сценариях, в ситуациях, когда что-то пошло не так?

Руслан Лобачев: Очевидно, что главное, над чем нужно работать — чтобы что-то шло не так как можно реже. То есть не «спасибо, что сообщили о проблеме, мы работаем над ее устранением», а превентивно проблемы обнаруживать и улучшать работоспособность систем.

Так, например, внутри «Почты» недавно запущена система автоматизированного мониторинга отправлений — мощная махина, задача которой обнаруживать проблемы доставки и сигнализировать участникам процесса для ее устранения. Кстати, tracking.russianpost.ru, запущенный на днях — это клиентский API маленького кусочка этой махины.

Другой пример — izdatel.russianpost.ru, электронная платформа взаимодействия Почты с издательствами, которая дает Почте максимальный, и, что важно, автоматизированный, контроль над всей цепочкой услуги доставки журналов и газет по подписке.

Работа над сервисом электронных заказных писем

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

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

В этом случае все, что «Почта» может — попытаться вытянуть из данных этой посылки и всей остальной почтовой Big Data (в том числе, из данных учетных записей пользователей сайта и приложения) альтернативные контакты адресата (телефон, email) и связаться с ним.

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

Тем не менее, когда такая посылка теряется, многие даже не пытаются обратиться к той почте, а винят «Почту России», хотя и видят в трекинге, что до России посылка не дошла. Это проблема имиджа и коммуникации.

Имидж «Почты» надо поднимать реальными зримыми изменениями. А коммуникацию надо строить предельно понятно и заметно, вежливо объясняя клиенту, что на самом деле произошло и как быть.

Почему на главной странице сайта упомянуты только письма и посылки, но нет бандеролей, открыток и других услуг? Как пользователю узнать, что товары можно отправлять бандеролью 1 класса (это дешевле, чем посылка)?

Руслан Лобачев: Здесь надо начать издалека. В основе представления услуг на новом сайте лежит проблема: у «Почты» столько разных услуг по отправке писем и посылок и столько разных нюансов их тарификации и применения, — чего стоит один финт, что посылку можно отправить посылкой, а можно дешевле бандеролью 1 класса — нормальному человеку разобраться в этом категорически невозможно.

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

Это и есть главное нововведение, которое транслирует сайт: есть письма и посылки, понятные всем слова — больше ничего знать не надо. Бандероль не понимает никто — мы правда спрашивали множество людей разного возраста — правильное определение бандероли дали единицы. Поэтому: письма и посылки, всё.

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

Одно из интересных экспериментальных решений на сайте почты — отсутствие привычной навигации вверху экрана. Если зайти в самый дальний раздел, пользователю доступен только переход на главную при клике на логотип. Я правильно понял, что это временное решение и при увеличении количества уровней сайта будет введено боковое меню, как в мобильной версии?

Руслан Лобачев: Это решение положено в основу всей структуры сайта.

Pochta.ru — лицо онлайн-экосистемы сервисов «Почты России». Это лицо посвящено первому и главному сервису — доставке для обычных людей (корпоративный сегмент с «оптовой» доставкой — отдельная история).

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

Таким образом, меню отсутствует именно на главном сайте pochta.ru, на других сервисах меню вполне может быть. Мы посчитали, что этот сайт можно устроить настолько просто, чтобы провернуть этот финт. Это сознательное самоограничение, весьма эффективный прием.

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

То же самое и здесь. Меню делают для того, чтобы пользователь всегда мог попасть туда, куда ему надо. Это стандартный паттерн. Такое решение расслабляет — вот тебе, пользователь, меню, сам думай, куда тебе надо.

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

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

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

«Так могла выглядеть главная страница. Это была попытка схлопнуть весь сайт до одной страницы. Но потом мы от нее отказались, так как создается обманчивое впечатление полной онлайновости сервисов "Почты", что пока неправда»

Почему форма регистрации содержит так много полей? Насколько обоснованно каждое из полей?

Руслан Лобачев: Адрес электронной почты — для получения уведомлений о посылках. Телефон — для вызова курьера или доставки посылки на дом. Пароль — понятно. Имя и фамилия — превращают аккаунт из чисто онлайновой штуки в нечто более весомое и «официальное».

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

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

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

Чем вы вдохновлялись при работе над графической частью сайта?

Сергей Сурганов: Я вдохновлялся современными веб-сервисами — поисковой выдачей Google и новостной лентой Facebook. Если и подсматривать графические решения для современных интерфейсов, так это у них. Над этими сервисами годами работают тысячи дизайнеров — это как морская галька, отшлифованная волнами.

Какой инструментарий использовался при работе? Для прототипирования, дизайна, проверки дизайн-решений, общения с разработчиками.

Сергей Сурганов: Помимо ручки и бумаги, мой главный дизайн-инструмент — это Sketch, который я использую уже больше двух лет. Я могу смело сказать, что без него дизайн «Почты» вышел бы совершенно другим.

Я ценю в нем возможность рисовать pixel-perfect макеты (Илья Ценципер разделяет мою нелюбовь к вайрфреймам) и легкость рисования десятков итераций одного и того же макета (что только на пользу проекту). Порой мы вели парное проектирование — Руслан или Илья рассказывали свои идеи, а я тут же визуализировал их на компьютере, и так до победного конца.

Рабочий процесс

Другое достоинство Sketch (не самое очевидное) — в том, что благодаря его простоте каждый участник нашей команды пользовался им в своей работе. Пишешь текст? Пиши прямо в макете. Делаешь спецификации? Открывай исходник дизайн-макета. Надо нарезать SVG-иконки? Сделай сам, не проси дизайнера.

Я подсчитал, что за время работы над проектом мы создали больше 500 sketch-файлов, в каждом из которых были десятки холстов. Не представляю, чтобы я делал, если бы у меня был бы только Photoshop.

Чистовой исходник мобильной версии сайта в Sketch

В качестве инструментов прототипирования мы использовали Keynote и React.js. Пробовали InVision (ограничен в возможностях и неудобен) и Framer (плохо подходит под веб, сложен в обращении).

В Keynote удобно прототипировать последовательные сценарии (просто переключая слайды), анимации и «залипающие меню» (делаются из заранее нарезанных элементов, выглядит эффектно).

На React.js я собрал полноценный сайт, на котором можно было увидеть работающую навигацию, попробовать разные подходы к адаптивности и потестировать рендеринг типографики, размер и контрастность графических элементов на разных платформах (включая Windows, на котором «маковские» макеты выглядят совсем иначе).

Сайт полностью адаптивный. В каких именно моментах это упростило работу для команды разработки и клиента? Какую логику адаптивности вы описали, чтобы не возникло проблем в дальнейшем?

Сергей Сурганов: Сайт с первого дня делался с использованием подхода mobile first, вся десктопная версия рисовалась с оглядкой на мобильные устройства — и потому выглядит современно, в духе времени.

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

Любые чуть менее тривиальные вопросы адаптивности решались сразу в коде вместе с нашим фронтенд-разработчиком.

***

Благодарим Сергея Сурганова и Руслана Лобачева за развернутые ответы, а читателей на Facebook — за интересные вопросы. Авторы вопросов: Надежда Шпиякина, Сергей Алешин, Яна Москвина, Анатолий Батарейкин, Иван Пришвин, Денис Шумов, Ольга Орешкова, Наталья Харзу, Владислав Ковалев.

#Интерфейсы

Популярные материалы
Показать еще
{ "is_needs_advanced_access": false }

Комментарии Комм.

0 новых

Популярные

По порядку

Прямой эфир

Хакеры смогли обойти двухфакторную
авторизацию с помощью уговоров
Подписаться на push-уведомления