---
updateDate: 2026-02-09T00:00:00Z
publishDate: 2024-07-17
publishYear: 2015
name: Zhivoj office
title: Интернет-магазин для оптовиков
excerpt: Переделали главную страницу, каталог, личный кабинет, корзину и оформление заказа для оптового магазина канцелярии.
context: Сайт не поспевал за IT-технологиями, поэтому владельцы компании решили обновить его вообще. Ну, а начали — с интерфейса, который должен был упростить жизнь оптовикам.
logo:
src: ~/assets/images/portfolio/zhivoj-office/logo.svg
alt: Zhivoj office logo
noCard: true
image: ~/assets/images/portfolio/zhivoj-office/zhivoj-office.png
imageAlt: Интернет-магазин для оптовиков
thumbnail:
src: ~/assets/images/portfolio/cards/zhivoj-office.svg
alt: Собака Павлова • Живой офис • Интернет-магазин для оптовиков
tags:
- ec
- redesign
- mass
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-дизайн](/ux-design) и [продуктовые исследования](/ux-researches), независимо или [на аутсорсе](/ux-outstaff).
collection: services
page: ux-design
- text: |
### Хотите уметь так же?
Научим создавать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: avito
- collection: portfolio
page: okey
- collection: portfolio
page: relief-center
- collection: portfolio
page: relefopt
result:
-
src: ~/assets/images/portfolio/rp.png
text: Интерактивный прототип сайта
link: https://bch43p.axshare.com/
-
src: ~/assets/images/portfolio/pdf.png
text: Рекомендации по обновлению магазина
link: https://drive.google.com/file/d/1Qsz4uyDRwCzeux8lyvbPJyLjac_7XB8z/view?usp=sharing
budget: ~ 450 000 ₽
director: Прототипы приняты в разработку.
metadata:
canonical: https://sobakapav.ru/portfolio/zhivoj-office
title: Интерфейс интернет-магазина • Дизайн магазина для оптовиков
description: "Переделали UX интернет-магазина для оптовых покупателей — спроектировали профессиональный интерфейс для людей, которые ежедневно работают с закупками."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/zhivoj-office/zhivoj-office.png'
width: 1448
height: 1032
---
import TOC from '~/components/widgets/TOC.astro';
<TOC>
[Вводные](#anchor1) • [Задача](#anchor2) • [Дизайн интерфейса](#anchor3) • [Результат](#anchor4) • [Цены и сроки](#anchor5)
</TOC>
## <a name="anchor1" />Вводные
«Живой офис» — крупный оптово-розничный продавец офисной канцелярии. Стикеры, ручки, бумага, средства для протирки мониторов, дыроколы и прочие пресс-папье грузовиками и вагонами.
_Почти все полезное пространство на главной странице занимают баннеры_
Конечно, без IT-технологий такой бизнес сейчас немыслим. Технологических решений в недрах «Живого офиса» много, и они все очень разные. И капельку старые. И немножко плохо друг с другом совместимые. И уж совсем никак у них — было — с подстройкой под темпы развития бизнеса.
## <a name="anchor2" />Задача
Владельцы компании решили, что надо бы обновить IT-подложку. Примерно всю. В том числе — переделать сайт с учетом пожеланий клиентов-трудящихся.
Вообще вся история началась чуть раньше — с консультации. Тогда мы определили основные шаги, которые компания «Живой офис» может предпринять на пути к новому и удобному сайту.
[Карта развития](https://drive.google.com/file/d/1QpUcz4kehw7FhwslwhVR9dXbeD5W3dwC/view?usp=sharing)
## <a name="anchor3" />Дизайн интерфейса
Теперь же пришло время перейти от слов к делу. То есть заняться дизайном интерфейса.
На этот случай у нас тоже есть план. Типовой и зарекомендовавший себя не на одном проекте.
_Точный план включает в себя и время на правки после каждой итерации. Куда же без них?_
Представление о бизнесе заказчика — и представление достаточно хорошее — у нас уже было. Мы детализировали его через составление портретов персонажей и их сценарии.
[Сценарии взаимодействия](https://drive.google.com/file/d/1RjQr_5ExIOzf0PgIaSckI7zEtD-1AHHy/view?usp=sharing)
При создании интерфейса для оптовых покупок велик соблазн сделать обычный интернет- магазин. На первый взгляд — а что такого? Ведь есть каталог, кнопка «купить» и корзина заказов. Но это только на первый взгляд.
Действительно, основа у розничного и оптового магазинов будет одинаковой. Вот только сценарии использования отличаются.
>Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть [модуль дизайн-задачника «Сценарии взаимодействия»](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) для тех, кто хочет научиться их использовать в дизайне интерфейсов.
Оптовику важно знать, сколько товара в наличии — 1 штука или 100. Оптовик хочет видеть некий срез по прошлым заказам. Короче, для оптовика это будет профессиональный интерфейс — в том смысле, что он готов его изучать, использовать не самые популярные у «простого» покупателя функции. И еще — готов прощать некоторые огрехи. Впрочем, мы старались обойтись без этого.
Вот так выглядит прототип главной страницы. На видном месте — строка поиска и доступ ко всему каталогу товаров.
[Интерактивный прототип](http://bch43p.axshare.com/)
В каталоге для оптовиков нужны подробные фильтры, избранное, сравнение товаров. Без этого — никуда.
В личном кабинете, помимо истории заказов, хорошо бы иметь возможность скачать нужный документ и исправить реквизиты для выставления счета.
_Личный кабинет оптовика_
## <a name="anchor4" />Результат
Результат получился вполне предсказуемый: прототипы, с которыми уже можно было идти к программистам.
Как вы догадываетесь, картинок недостаточно. Есть еще обмен данными с 1С, регламент ценообразования, перечень обязательных полей для регистрации нового клиента-юрлица и другие требования. Они были оформлены заказчиком в 18-страничном техническом задании.
Сначала на это задание мы ориентировались, создавая экраны, а потом дополнили его отчетом с рекомендациями. Можно было приступать к разработке. Но это уже [другая история](/portfolio/relief-center), хотя тоже [с нашим участием](/portfolio/relefopt).
## <a name="anchor5" />