Интернет-магазин для оптовиков

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

Вводные

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

Почти все полезное пространство на главной странице занимают баннеры

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

Задача

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

Вообще вся история началась чуть раньше — с консультации. Тогда мы определили основные шаги, которые компания «Живой офис» может предпринять на пути к новому и удобному сайту.

Карта развития

Дизайн интерфейса

Теперь же пришло время перейти от слов к делу. То есть заняться дизайном интерфейса.

На этот случай у нас тоже есть план. Типовой и зарекомендовавший себя не на одном проекте.

Точный план включает в себя и время на правки после каждой итерации. Куда же без них?

Представление о бизнесе заказчика — и представление достаточно хорошее — у нас уже было. Мы детализировали его через составление портретов персонажей и их сценарии.

Сценарии взаимодействия

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

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

Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть модуль дизайн-задачника «Сценарии взаимодействия» для тех, кто хочет научиться их использовать в дизайне интерфейсов.

Оптовику важно знать, сколько товара в наличии — 1 штука или 100. Оптовик хочет видеть некий срез по прошлым заказам. Короче, для оптовика это будет профессиональный интерфейс — в том смысле, что он готов его изучать, использовать не самые популярные у «простого» покупателя функции. И еще — готов прощать некоторые огрехи. Впрочем, мы старались обойтись без этого.

Вот так выглядит прототип главной страницы. На видном месте — строка поиска и доступ ко всему каталогу товаров.

Интерактивный прототип

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

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

Личный кабинет оптовика

Результат

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

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

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