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

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

В Комусе несколько команд: витрина, личный кабинет, чекаут, ПКОЗ, мобильное приложение, поиск. И вот у каждой команды – свои уникальные компоненты. Их много, все они разные и со своим легаси и каждая команда поддерживает свои, а где их искать – не понятно. Как правило всё сводилось к единой «куче» файлов, привязанных к задачам в жире. В рамках этих задач делался новый компонент, который потом невозможно было переиспользовать, потому что его сложно было искать по всем файлам. Представили, да?

Это сильно усложняло работу. Надо было с этим что-то делать.

Для начала я взял в оборот дизайн-систему и начал приводить в порядок иерархию. Таким образом появился Core – ядро системы, в котором хранятся базовые компоненты: цвета, типографика, кнопки, чекбоксы и другие.
Всё сразу стало понятнее и жизнь зацвела. Все микро и мини-компоненты теперь лежат в одном месте и удобно разбиты по группам, а через поиск ассетов фигмы их удобно находить. Красота!

Настала очередь взяться за компоненты команд.

На одной из встреч предложил разбить компоненты по файлам. Команда = файл.
В итоге появились «подсистемы» ядра – библиотеки. У каждой команды свой файл. В них хранились уникальные для команды компоненты над которыми дизайнер команды имел власть и изменял их, но с оглядкой на Core.
Над ядром власть имели только библиотекари, я и моя коллега. Это позволило уменьшить хаос и всё систематизировать.

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

Дали название дизайне-системе – «Скрепка».

Выросла скорость сборки новых компонетов и страниц.
Благодаря стандартизации компонентов пропали хотелки уровня «А давайте кнопку сделаем оранжевой и круглой?».

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

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

Все в плюсе.

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

Проводил личные опросы по удавлетворённости работы с системой. Замерял NPS среди пользователей дизайн-системы – наших дизайнеров/продактов/разработчиков. Важно было понять насколько удобно пользоваться внутренним продуктом.

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

Покупатели не видели ничего важного для себя.

Менеджеры товарных рынков не понимали как продвигать свои каталоги и фантазировали визуалы баннеров кто во что горазд. Было весело (нет).

Решил проверить основную гипотезу (их конечно было больше):

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

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

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

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

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

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

CTR на баннеры вырос, а в следствии этого и KPI у менеджеров товарных рынков.

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

Замеряли успех несколькими способами:

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

Скорость создания баннеров выросла в среднем в несколько раз. В таблице показаны усреднённые значения.

NPS покупателей при работе с главной страницей вырос в 1,2 раза:

В результате опроса 34 менеджеров, выявил рост NPS при работе с главной страницей в 2,2 раза:

Так как Комус предоставляет огромное количество скидок на товары, у него есть такая вещь как «скидка за количество». Объясняя простым языком – больше покупаешь, меньше платишь. И таких позиций очень много.

Но старый интерфейс не давал обратной связи покупателю когда он набирал больше одной позиции в корзину. Сколько он заплатит в итоге? Как мы выяснили позже, многие люди сидели с калькулятором и высчитывали выгоду и сумму. Или шли сразу в корзину и смотрели там. Удобно (нет).

Приведу быстрый пример:

Сколько я заплачу за 10 пачек бумаги? Какая будет выгода? На размышление 1 мин.
Понятно, что можно просто умножить 258 ₽ на 10 шт. и получится 2 580 ₽. Хорошо. А если надо посчитать выгоду между ценой 258 ₽ (от 10 шт.) и 262 ₽ (от 1 шт.) за 10 шт.? Ведь за 1 шт. цена самая высокая! Умножаете 262 ₽ на 10 шт., получаете 2 620 ₽, отнимаете 2 580 ₽ и получаете выгоду 40 ₽. Профит!

А теперь усложним задачу, добавив цену с копейками, количество не кратное 10 и… Да ну его к чёрту! Вы серьёзно?

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

Появились две основные гипотезы:

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

Спустя время и множественные исследования, родился целевой вариант компонента. И в этом помогла дизайн-система. Пламенный поклон ей.

Теперь при переключении радио-кнопок меняется сразу несколько значений:

1. Сумма;
2. Выгода;
3. Значение в каунтере.

При чём изменение количества в каунтере так же будет влиять на сумму и выгоду. Всё завязано. А в блоке с ценой теперь стало понятно, что 349 ₽ это цена от 1 шт. и она выбрана по умолчанию. А 335 ₽ это самая низкая цена за штуку если брать от 15 шт.

На виде плиткой было убрано всё лишнее под ховер:

1. Кнопки избранного и сравнения;
2. Механика пересчёта цены;
3. И кнопка в «В корзину». И мир от этого не рухнул кстати.

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

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

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

Делал опросы среди пользователей измеряя CSAT у фичи, смотрел вебвизор.
В итоге CSAT вырос в 2 раза:

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

Много проблем.

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

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

Покупатели жаловались что нет расходных материалов в карточке. Для некоторых ассортиментных групп они очень нужны. Например для принтеров – картриджи.

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

Плюс страница была на старом UI и требовалось её перенести на новый. В этом мне помогла дизайн-система.

Появились основные гипотезы:

И ещё десяток других. Но рассказ про них растянется на долго.

Для начала я привёл страницу в соответствии с дизайн-системой. Переиспользовал наши компоненты.

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

CSAT интерфейса был высоким.

Пришло время взяться за товарные карусели. Как лучше всего сортировать по ассортиментным группам внутри карусели? Было много обсуждений и предложений. Я и с командой дизайна штормил, и с продакатами.

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

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

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

Прекрасно. Теперь страница насыщенна и многофункциональна. Удобно пользоваться и можно сразу заполнить корзину необходимыми для офиса вещами.

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

Расходные и сопутствующие товары теперь чаще покупают и это сказывается на Revenue компании.

Замерял CSAT и NPS по каждому из компонентов страницы, и по всей странице стразу. Результат получился положительным, метрики выросли.

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

Так как в команде дизайна есть два направления – маркетинг и интерфейсы, я тесно общался с ребятами из обеих команд. Дизайнеры маркетинга отвечали за креативные баннерные концепции, рекламные баннеры и все баннеры на сайте.

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

Но этого было мало.

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

Дизайнеры тратили много времени на поиск и переделку картинки.

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

Можно было нанять иллюстратора. Но так как 3д у нас было фактически mvp, то тратить бюджеты было не целесообразно.

Нужно было с этим что-то делать.

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

1. Настроенный свет, материалы и сцены в Blender;
2. Настроенную библиотеку моделей в Blender;
3. Библиотеку готовых иллюстраций собранную в фигме и настроенную по всем правилам дизайн-систем;
4. Описаный и понятный урок как перенести плоскую векторную графику в объем, а готовую картинку в фигму.

Осознанно выбрал Blender потому, что он бесплатный и работает на всех платформах одинаково: mac и windows. Это было очень важно, так как не все дизайнеры сидят на макбуках.
А платить большие деньги за платные продукты бизнесу нет смысла. Особенно в контексте mvp.

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

Их работа с программой делится на 2 этапа:

1. Использование уже готовой библиотеки внутри программы. В неё уже заранее я заложил много моделей которые надо только разместить перед камерой, и сделать рендер. Ищутся они через поиск внутри программы.
2. Создание модели и добавление её в библиотеку Blender. Чуть сложнее, но в уроке я всё расписал максимально подробно.

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

Так же эта система позволила создавать и контролировать сложные комбинации из иллюстраций.

Стиль осознанно был выбран более строгий, металл + стекло с акцентами на фирменный красный. Важным моментом было синхронизировать материалы с цветами в дизайн-системе. Чтобы, например, цвет Dark300 из дизайн-системы совпадал с таким же материалом из библиотеки.

Кроме базовых 3д моделей, были добавлены «реальные» объекты для комбинирования сложных композиций, а в помощь им были созданы модели-компаньоны – для поддержания композиции.

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

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

Замерял скорость создания одной иллюстрации и скорость её использования по сравнению со стоковыми. Беру среднее значение.

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

Отрисовка для стоковых всегда была разной. Где-то надо поправить цвет/тон, а где-то сразу достаточно вставить в баннер. Но почти всегда нужно делать обтравку.

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

Это ли не прекрасно?