2025
Geotech Desk
Стояла задача упростить сложные B2B-процессы закупки и сделать их понятными в интерфейсе. Была проработана структура кабинета, сценарии заказов и работа с ролями (плательщик и грузополучатель), благодаря чему взаимодействие с несколькими компаниями и оформление заказов стало прозрачным и удобным.
Разработка личного кабинета для интернет-магазина инженерного оборудования, ориентированного на монтажников, снабженцев и партнёров.
Навигация
Компания GeoTech занимается оптовыми и розничными поставками инженерного оборудования для водоснабжения, газоснабжения, отопления и других отраслей. GeoTech работает как с розничными клиентами, так и с B2B-сегментом: монтажными организациями, снабженцами, подрядчиками и партнёрами.
Стояла задача представить сложную инфраструктуру процессов инженерной закупки просто и понятно для пользователей с разным уровнем технической подготовки.
Перед началом плотной работы над проектом я провел доскональный анализ сферы инженерки и поставок, а также некоторых смежных сфер. Работа с подобным клиентом была для меня интересна в первую очереь из-за сложности и нестандартности.
Стояла задача представить сложную инфраструктуру процессов инженерной закупки просто и понятно для пользователей с разным уровнем технической подготовки.
Перед началом плотной работы над проектом я провел доскональный анализ сферы инженерки и поставок, а также некоторых смежных сфер. Работа с подобным клиентом была для меня интересна в первую очереь из-за сложности и нестандартности.
Кратко о клиенте
Ключевые решения
Предыстория и отраслевой контекст
Навигация
Проект находился на стыке e-commerce и сложных B2B-процессов, где пользователь не просто выбирает товары, а собирает заказ по смете, работает с разными ролями и юридическими лицами внутри одного личного кабинета.
Основная задача — с нуля создать личный кабинет и выстроить эффективные процессы взаимодействия, снизить вероятность ошибок и сделать работу с заказами, реквизитами и персональными условиями понятной и быстрой для профессиональной аудитории.
Основная задача — с нуля создать личный кабинет и выстроить эффективные процессы взаимодействия, снизить вероятность ошибок и сделать работу с заказами, реквизитами и персональными условиями понятной и быстрой для профессиональной аудитории.
Кратко о проекте
Ключевые решения
Цели, задачи и результаты
Навигация
Самой главной сложностью стало то, что передо мной встала задача спроектировать весь процесс практически с нуля. На сайте был реализован простейший процесс покупки / заказа, без сложной структуры личного кабинета, ролей и работы с заказами. Другими словами, передо мной стояла задача спроектировать рабочий стол и личный кабинет для профессиональной категории пользователей.
Работа над проектом началась с погружения в контекст B2B-закупок инженерного оборудования. Были проанализированы сайты и аналогичные процесссы конкурентов, исследованы портреты пользователей, было проведено несколько интервью с представителями целевой группы. Все это дало мне более глубокое понимание, касательно того, кто наши пользователи, какие цели преследуют и как обычно ведут себя при взаимодействии с подобными интерфейсами.
Особое внимание было уделено упрощению процесса и внедрению привычных e-commerce паттернов. Это дало возможность представить информационные единицы сложного процесса привычным для пользователя визуальным способом. Я внедрил формат мини-карточек как более компактный и сканируемый способ представления информации, а также оптимизировал сценарии переключения между компаниями и реквизитами.
Работа над проектом началась с погружения в контекст B2B-закупок инженерного оборудования. Были проанализированы сайты и аналогичные процесссы конкурентов, исследованы портреты пользователей, было проведено несколько интервью с представителями целевой группы. Все это дало мне более глубокое понимание, касательно того, кто наши пользователи, какие цели преследуют и как обычно ведут себя при взаимодействии с подобными интерфейсами.
Особое внимание было уделено упрощению процесса и внедрению привычных e-commerce паттернов. Это дало возможность представить информационные единицы сложного процесса привычным для пользователя визуальным способом. Я внедрил формат мини-карточек как более компактный и сканируемый способ представления информации, а также оптимизировал сценарии переключения между компаниями и реквизитами.
До макета
Ключевые решения
Сложности, анализ и подготовка
Навигация
Опираясь на совокупные данные CJM, глубинного интервью и результатов анализа, я расположил сущности личного кабинета по нескокольким принципам: частота обращений пользователя к сущности, срочность, цена ошибки и бизнес критичность. Таким образом я получил матрицу взвешенной приоритезации для элементов личного кабинета и мог опираться на нее в решениях, касаемо их расположения и пути к ним.
Кроме этого, в проектировании структуры личного кабинета я опирался на:
Таким образом, мне удалось спроектировать структуру личного кабинета вокруг реальных пользовательских сценариев и их операционной значимости.
Кроме этого, в проектировании структуры личного кабинета я опирался на:
- Сравнение сценарного времени (time-to-task анализ) — сколько времени тратится на путь к функциям.
- Карту зависимости задач (task dependency mapping) — какие действия запускают те или иные сценарии.
- Результаты промежуточной валидации прототипа (prototype validation) — быстрое тестирование гипотез на отдельном участке пользовательского пути.
Таким образом, мне удалось спроектировать структуру личного кабинета вокруг реальных пользовательских сценариев и их операционной значимости.
Подход к проектированию
Ключевые решения
Подход, анализ и обоснование
Навигация
Ключевые решения
Ключевая цель личного кабинета в данном случае — дать пользователям возможность удобно управлять процессами и получать информацию.
В связи с этим я решил немного иначе подойти к разработке первого экрана личного кабинета. Я отказался от привычной для большинства ЛК статичной пользовательской страницы в пользу operational hub — места, куда подгружается вся необходимая для быстрого доступа информация и откуда можно быстро перейти к самым частым сценариям.
В интерфейс домашней страницы были вынесены сценарии с максимальной частотой обращения и высокой бизнес-критичностью: активные заказы, проблемные статусы, работа с юрлицами и быстрый доступ к повторным действиям.
Дополнительная приоритизация через блок «Требуют внимания» позволила сократить время обнаружения критических сценариев и повысить предсказуемость взаимодействия с системой.
В связи с этим я решил немного иначе подойти к разработке первого экрана личного кабинета. Я отказался от привычной для большинства ЛК статичной пользовательской страницы в пользу operational hub — места, куда подгружается вся необходимая для быстрого доступа информация и откуда можно быстро перейти к самым частым сценариям.
В интерфейс домашней страницы были вынесены сценарии с максимальной частотой обращения и высокой бизнес-критичностью: активные заказы, проблемные статусы, работа с юрлицами и быстрый доступ к повторным действиям.
Дополнительная приоритизация через блок «Требуют внимания» позволила сократить время обнаружения критических сценариев и повысить предсказуемость взаимодействия с системой.
Dashboard как центр операционного контроля
Проектирование логики главной страницы
Навигация
Ключевые решения
В ходе анализа и подготовки я выяснил, что пользователи этого сегмента регулярно работают с большим количеством заказов одновременно и в первую очередь сканируют интерфейс на предмет статусов, оплат и логистики.
Вместо классической, и немного устаревшей, таблицы была разработана модульная система мини-карточек с разделением информации по смысловым зонам: статус заказа, финансовое состояние, отгрузка, плательщик и грузополучатель. Такой подход позволил повысить скорость восприятия данных, снизить когнитивную нагрузку и улучшить масштабируемость интерфейса при работе с большим объемом заказов.
Была разработана система цветов и стилей, где каждый цвет отвечал за определенный тип информации. Таким образом пользователь мог быстро найти нужные данные и статусы.
Вместо классической, и немного устаревшей, таблицы была разработана модульная система мини-карточек с разделением информации по смысловым зонам: статус заказа, финансовое состояние, отгрузка, плательщик и грузополучатель. Такой подход позволил повысить скорость восприятия данных, снизить когнитивную нагрузку и улучшить масштабируемость интерфейса при работе с большим объемом заказов.
Была разработана система цветов и стилей, где каждый цвет отвечал за определенный тип информации. Таким образом пользователь мог быстро найти нужные данные и статусы.
Мини-карточки заказов вместо классической табличной структуры
Проектирование логики главной страницы
Навигация
Ключевые решения
Одним из ключевых моментов B2B-сценария стала работа пользователей сразу с несколькими юридическими лицами, адресами, контактами и т. д.
Наш типичный пользователь — прораб, закупщик или монтажник. Из общения, методом включенного интервью, я выяснил, что такого рода спецы часто работают сразу с несколькими объектами. У каждого объекта свои реквизиты, адреса, контактные лица.
Вместо упрощенного выбора компании через dropdown юридические лица были выделены в самостоятельную сущность интерфейса с отдельным уровнем управления, визуальной идентификацией и контекстной привязкой пользовательских сценариев. Каждая карточка юрлица — это пакет информации необходимой для заказа.
Такое решение позволило снизить вероятность ошибок при оформлении заказов и повысить прозрачность взаимодействия внутри корпоративных процессов.
Наш типичный пользователь — прораб, закупщик или монтажник. Из общения, методом включенного интервью, я выяснил, что такого рода спецы часто работают сразу с несколькими объектами. У каждого объекта свои реквизиты, адреса, контактные лица.
Вместо упрощенного выбора компании через dropdown юридические лица были выделены в самостоятельную сущность интерфейса с отдельным уровнем управления, визуальной идентификацией и контекстной привязкой пользовательских сценариев. Каждая карточка юрлица — это пакет информации необходимой для заказа.
Такое решение позволило снизить вероятность ошибок при оформлении заказов и повысить прозрачность взаимодействия внутри корпоративных процессов.
Перепроектирование работы с юридическими лицами
Проектирование логики главной страницы
Навигация
Ключевые решения
Небольшая деталь в сторону улучшения удобства для пользователей. Добавлено разделение, чтобы сспецпредложения и скидки были привязаны не к пользователю, а к конкретному юридическому лицу, что соответствует реальной логике B2B-закупок.
Для этого был добавлен фильтр по компаниям с динамическим переключением предложений в зависимости от выбранной организации. Таким образом пользователь мог с удобством работать с предложениями и быть в курсе условий по каждой организации.
Для этого был добавлен фильтр по компаниям с динамическим переключением предложений в зависимости от выбранной организации. Таким образом пользователь мог с удобством работать с предложениями и быть в курсе условий по каждой организации.
Контекстные спецпредложения
Проектирование логики главной страницы
2025
Geotech Desk
Стояла задача упростить сложные B2B-процессы закупки и сделать их понятными в интерфейсе. Была проработана структура кабинета, сценарии заказов и работа с ролями (плательщик и грузополучатель), благодаря чему взаимодействие с несколькими компаниями и оформление заказов стало прозрачным и удобным.
Разработка личного кабинета для интернет-магазина инженерного оборудования, ориентированного на монтажников, снабженцев и партнёров.
Навигация
Ключевые решения
Кратко о клиенте
Предыстория и отраслевой контекст
Компания GeoTech занимается оптовыми и розничными поставками инженерного оборудования для водоснабжения, газоснабжения, отопления и других отраслей. Компания работает как с розничными клиентами, так и с B2B-сегментом: монтажными организациями, снабженцами, подрядчиками и партнёрами.
Стояла задача представить сложную инфраструктуру процессов инженерной закупки просто и понятно для пользователей с разным уровнем технической подготовки.
Стояла задача представить сложную инфраструктуру процессов инженерной закупки просто и понятно для пользователей с разным уровнем технической подготовки.
Кратко о проекте
Цели, задачи и результаты
Проект находился на стыке e-commerce и сложных B2B-процессов, где пользователь не просто выбирает товары, а собирает заказ по смете, работает с разными ролями и юридическими лицами внутри одного личного кабинета.
Основная задача — с нуля создать личный кабинет и выстроить эффективные процессы взаимодействия, снизить вероятность ошибок и сделать работу с заказами, реквизитами и персональными условиями понятной и быстрой для профессиональной аудитории.
Основная задача — с нуля создать личный кабинет и выстроить эффективные процессы взаимодействия, снизить вероятность ошибок и сделать работу с заказами, реквизитами и персональными условиями понятной и быстрой для профессиональной аудитории.
До макета
Сложности, анализ и подготовка
Самой главной сложностью стало то, что передо мной встала задача спроектировать весь процесс практически с нуля. На сайте был реализован простейший процесс покупки / заказа, без сложной структуры личного кабинета, ролей и работы с заказами. Другими словами, передо мной стояла задача спроектировать рабочий стол и личный кабинет для профессиональной категории пользователей.
Работа над проектом началась с погружения в контекст B2B-закупок инженерного оборудования. Были проанализированы сайты и аналогичные процесссы конкурентов, исследованы портреты пользователей, было проведено несколько интервью с представителями целевой группы. Все это дало мне более глубокое понимание, касательно того, кто наши пользователи, какие цели преследуют и как обычно ведут себя при взаимодействии с подобными интерфейсами.
Особое внимание было уделено упрощению процесса и внедрению привычных e-commerce паттернов. Это дало возможность представить информационные единицы сложного процесса привычным для пользователя визуальным способом. Я внедрил формат мини-карточек как более компактный и сканируемый способ представления информации, а также оптимизировал сценарии переключения между компаниями и реквизитами.
Работа над проектом началась с погружения в контекст B2B-закупок инженерного оборудования. Были проанализированы сайты и аналогичные процесссы конкурентов, исследованы портреты пользователей, было проведено несколько интервью с представителями целевой группы. Все это дало мне более глубокое понимание, касательно того, кто наши пользователи, какие цели преследуют и как обычно ведут себя при взаимодействии с подобными интерфейсами.
Особое внимание было уделено упрощению процесса и внедрению привычных e-commerce паттернов. Это дало возможность представить информационные единицы сложного процесса привычным для пользователя визуальным способом. Я внедрил формат мини-карточек как более компактный и сканируемый способ представления информации, а также оптимизировал сценарии переключения между компаниями и реквизитами.
Подход к проектированию
Подход, анализ и обоснование
Опираясь на совокупные данные CJM, глубинного интервью и результатов анализа, я расположил сущности личного кабинета по нескокольким принципам: частота обращений пользователя к сущности, срочность, цена ошибки и бизнес критичность. Таким образом я получил матрицу взвешенной приоритезации для элементов личного кабинета и мог опираться на нее в решениях, касаемо их расположения и пути к ним.
Кроме этого, в проектировании структуры личного кабинета я опирался на:
Таким образом, мне удалось спроектировать структуру личного кабинета вокруг реальных пользовательских сценариев и их операционной значимости.
Кроме этого, в проектировании структуры личного кабинета я опирался на:
- Сравнение сценарного времени (time-to-task анализ) — сколько времени тратится на путь к функциям.
- Карту зависимости задач (task dependency mapping) — какие действия запускают те или иные сценарии.
- Результаты промежуточной валидации прототипа (prototype validation) — быстрое тестирование гипотез на отдельном участке пользовательского пути.
Таким образом, мне удалось спроектировать структуру личного кабинета вокруг реальных пользовательских сценариев и их операционной значимости.
Dashboard как центр операционного контроля
Проектирование логики главной страницы
Ключевая цель личного кабинета в данном случае — дать пользователям возможность удобно управлять процессами и получать информацию.
В связи с этим я решил немного иначе подойти к разработке первого экрана личного кабинета. Я отказался от привычной для большинства ЛК статичной пользовательской страницы в пользу operational hub — места, куда подгружается вся необходимая для быстрого доступа информация и откуда можно быстро перейти к самым частым сценариям.
В интерфейс домашней страницы были вынесены сценарии с максимальной частотой обращения и высокой бизнес-критичностью: активные заказы, проблемные статусы, работа с юрлицами и быстрый доступ к повторным действиям.
Дополнительная приоритизация через блок «Требуют внимания» позволила сократить время обнаружения критических сценариев и повысить предсказуемость взаимодействия с системой.
В связи с этим я решил немного иначе подойти к разработке первого экрана личного кабинета. Я отказался от привычной для большинства ЛК статичной пользовательской страницы в пользу operational hub — места, куда подгружается вся необходимая для быстрого доступа информация и откуда можно быстро перейти к самым частым сценариям.
В интерфейс домашней страницы были вынесены сценарии с максимальной частотой обращения и высокой бизнес-критичностью: активные заказы, проблемные статусы, работа с юрлицами и быстрый доступ к повторным действиям.
Дополнительная приоритизация через блок «Требуют внимания» позволила сократить время обнаружения критических сценариев и повысить предсказуемость взаимодействия с системой.
Мини-карточки заказов вместо классической табличной структуры
Проектирование логики главной страницы
В ходе анализа и подготовки я выяснил, что пользователи этого сегмента регулярно работают с большим количеством заказов одновременно и в первую очередь сканируют интерфейс на предмет статусов, оплат и логистики.
Вместо классической, и немного устаревшей, таблицы была разработана модульная система мини-карточек с разделением информации по смысловым зонам: статус заказа, финансовое состояние, отгрузка, плательщик и грузополучатель. Такой подход позволил повысить скорость восприятия данных, снизить когнитивную нагрузку и улучшить масштабируемость интерфейса при работе с большим объемом заказов.
Была разработана система цветов и стилей, где каждый цвет отвечал за определенный тип информации. Таким образом пользователь мог быстро найти нужные данные и статусы.
Вместо классической, и немного устаревшей, таблицы была разработана модульная система мини-карточек с разделением информации по смысловым зонам: статус заказа, финансовое состояние, отгрузка, плательщик и грузополучатель. Такой подход позволил повысить скорость восприятия данных, снизить когнитивную нагрузку и улучшить масштабируемость интерфейса при работе с большим объемом заказов.
Была разработана система цветов и стилей, где каждый цвет отвечал за определенный тип информации. Таким образом пользователь мог быстро найти нужные данные и статусы.
Перепроектирование работы с юридическими лицами
Проектирование логики главной страницы
Одним из ключевых моментов B2B-сценария стала работа пользователей сразу с несколькими юридическими лицами, адресами, контактами и т.д.
Наш типичный пользователь — прораб, закупщик или монтажник. Из общения, методом включенного интервью, я выяснил, что такого рода спецы часто работают сразу с несколькими объектами. У каждого объекта свои реквизиты, адреса, контактные лица.
Вместо упрощенного выбора компании через dropdown юридические лица были выделены в самостоятельную сущность интерфейса с отдельным уровнем управления, визуальной идентификацией и контекстной привязкой пользовательских сценариев. Каждая карточка юрлица — это пакет информации необходимой для заказа.
Такое решение позволило снизить вероятность ошибок при оформлении заказов и повысить прозрачность взаимодействия внутри корпоративных процессов.
Наш типичный пользователь — прораб, закупщик или монтажник. Из общения, методом включенного интервью, я выяснил, что такого рода спецы часто работают сразу с несколькими объектами. У каждого объекта свои реквизиты, адреса, контактные лица.
Вместо упрощенного выбора компании через dropdown юридические лица были выделены в самостоятельную сущность интерфейса с отдельным уровнем управления, визуальной идентификацией и контекстной привязкой пользовательских сценариев. Каждая карточка юрлица — это пакет информации необходимой для заказа.
Такое решение позволило снизить вероятность ошибок при оформлении заказов и повысить прозрачность взаимодействия внутри корпоративных процессов.
Контекстные спецпредложения
Проектирование логики главной страницы
Небольшая деталь в сторону улучшения удобства для пользователей. Добавлено разделение, чтобы сспецпредложения и скидки были привязаны не к пользователю, а к конкретному юридическому лицу, что соответствует реальной логике B2B-закупок.
Для этого был добавлен фильтр по компаниям с динамическим переключением предложений в зависимости от выбранной организации. Таким образом пользователь мог с удобством работать с предложениями и быть в курсе условий по каждой организации.
Для этого был добавлен фильтр по компаниям с динамическим переключением предложений в зависимости от выбранной организации. Таким образом пользователь мог с удобством работать с предложениями и быть в курсе условий по каждой организации.
