Задача: сделать возможным покупать весь ассортимент автотоваров через сайт и привлечь дополнительную аудиторию клиентов. Для этого несколько сайтов шин и дисков нужно объединить в один planetavto.ru

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

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

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

Так планета выглядит в телефончике

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

Про кухню

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

Эскизы и проверка идей
Начал я, понятное дело, с аналитики и системомании

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

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

Серия интервью и исследований
Собрав тестовые прототипы в перевязанный ХТМЛ, я отправился проводить интервью покупателей в магазинах Планеты АВТО. Опросил чуть больше 100 респондетнов. Часть людей согласились ответить только на вопросы, остальные опробовали прототип с тестовым сценарием, с интересом комментировали, отвечали на вопросы и задавали их сами.

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

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

Пример стартового экрана одного из прототипов исследования

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

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

Если говорить только про проектирование получится такая картинка

Растянув инфографику на плоскости, можно получить штуку, привычную многим

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

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

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

Всё собрано в аккуратную библиотеку компонентов, легко использовать, развивать и масштабировать в команде.

Версия 1.1
Адаптивная верстка, подборщик товаров и множество мелочей увеличения функциональности сайта

Это маленький кусочек

Версия 1.2
В этой версии больше товаров сразу «на полке», открылся большой раздел с запчастями.

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

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

ДРМ — дистанционный реанимационный мониторинг. Продукт экосистемы компании, предназначенный для интеграции в единую систему мониторинга родильных домов и детских отделений больниц.
Задача: упростить документооборот, разработав для этого специализированное ПО.

Компания разрабатывает и производит медицинские приборы, например, реанимационный монитор, аппарат ИВЛ и информационные сервисы для медицинских учреждений.

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

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

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

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

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

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

Компания разрабатывает и производит медицинские приборы. Одно из устройств называется МПР — монитор пациента, реанимационный.

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

Шестая версия была такой

Шестая версия прибора МПР

Легко понять основную причину разработки новой версии — низкая информативность и визуальная перегрузка.

Интерес работе над проектом добавляет множество технических ограничений, российских и международных стандартов медицинской отрасли.
К тому моменту как меня пригласили проектировать МПР, команда проекта уже работала над новой версией. Ребята делали, затем переделывали, а после ещё несколько раз заново всё переиначивали. Такое бывает.

Несколько промежуточных дизайнов

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

Кусочки видео с тестирования прототипов

В перчатках

Тест привычек и обновленной навигации

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

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

Щепотка из элементов внутренней кухни

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

Основные разделы работы с МПР — «Мониторинг» и «История». Настройка режима и вида работы реанимации производятся в калькуляторах, а для настройки работы всего прибора, вариантов отображения данных и сбор показаний пациента в разделе «Настройки».
Итак

Монитринг

Мониторинг — основной раздел прибора для наблюдения за пациентами. Но есть и не менее важные разделы системы: история и калькуляторы

Калькуляторы
Нужны для тонкой настройки параметров реанимации.

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

История
Этот раздел содержит три экрана и служит для детального просмотра трендов пациента, корректировки реанимации и лечения.

Настройки
Для настроек всего и создания из них пресетов для реаниматологов разного профиля.

Дизайнер почти всегда передаёт свою в  верстку и разработку. А потом это всё кто-то поддерживает и развивает. Бывает разработчики внезапно говорят: «сделать нельзя». Часто ссылаются на технические ограничения. В таких случаях я всегда рассказываю о проблеме всей команде. А опыт работы над разными продуктами и технический бекграунд помогают аргументировать решение и объяснить, как можно реализовать фичи, кажущиеся невозможными, где и как это успешно применялось. Вместе задуманное всегда получается.

Посмотреть мой промдизайн нового корпуса

Ранее я писал про новое устройство Меркаты. Но вообще, кассовая программа Меркаты умеет работать на любом устройстве с операционной системой Виндоус или Андроид.

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

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

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

Смотреть на экран стало комфортней

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

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

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

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

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

Что ещё:
— новый корпус кассы
— кусочек настроек

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

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

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

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

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


Несколько из множества спроектированных страниц и дополнительных элементов +цены

Новая версия уже доступна, но находиться в ß-версии и наполняется контентом.

Задача: задизайнить интерфейс экранов планшета покупателя

Планшеты устанавливаются в качестве дополнительного экрана кассы в магазинах и супермаркетах

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

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

Кстати, матрасик грида тоже живой