---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2026-01-01
publishYear: 2024
name: От Винта 2024
title: UX-отдел на аутсорсе для строительного интернет-магазина
excerpt: Новые разделы, новая функциональность и точечные доработки интерфейса
context: |
«От Винта» — компания, торгующая строительными и отделочными товарами в Орехово-Зуевском районе Московской области. Интернет‑магазин — важный канал работы с целевой аудиторией: не только местными жителями, но и дачниками со всего Подмосковья.
Мы начали сотрудничество с компанией в конце 2022 года с [UX-аудита](/servuces/ux-audit) и [точечного редизайна](/servuces/redesign) [ключевых страниц интернет-магазина «От Винта»](/portfolio/ot-vinta).
Первый опыт был более чем успешным. Через неделю после релиза продажи через сайт выросли более чем в 2,5 раза, а заказчик вернулся, чтобы продолжить сотрудничество.
С тех пор мы работали (и работаем) с «От Винта» как [UX-отдел на аутсорсе](/services/ux-outsource).
isNew: true
logo:
src: ~/assets/images/portfolio/ot-vinta/logo.svg
alt: От Винта • Логотип
link: https://отвинтастрой.рф/
image: ~/assets/images/portfolio/otvinta-2024/main.png
imageAlt: Собака Павлова • От Винта • UX-отдел на аутсорсе для строительного интернет-магазина
thumbnail:
src: ~/assets/images/portfolio/cards/otvinta2.svg
alt: Собака Павлова • От Винта • UX-отдел на аутсорсе для строительного интернет-магазина
tags:
- ec
- new-features
- ux-outsource
- mass
- otvinta
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-дизайн](/ux-design) и [продуктовые исследования](/ux-researches), независимо или [на аутсорсе](/ux-outstaff).
collection: services
page: ux-outsource
- collection: services
page: ux-design
- text: |
### Хотите уметь так же?
Научим создавать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: anggell
- collection: portfolio
page: compel
- collection: portfolio
page: hyperus
- collection: portfolio
page: elma
- collection: portfolio
page: edms
- collection: portfolio
page: amber
result:
- src: ~/assets/images/portfolio/figma.svg
text: Макеты интерфейса
link: ""
budget: "1 500 000 ₽"
time: "5 месяцев"
outcome:
title: "Поэтому мы знаем, что:"
text1: Через 8 месяцев после начала сотрудничества
numbers:
- title: Количество заказов выросло
number: "на 52%"
- title: Средний чек увеличился
number: "на 42%"
- title: Новых посетителей стало больше
number: "на 7%"
- title: Повторно покупающих клиентов — больше
number: "на 59%"
director: |
Мне кажется, это начало прекрасной дружбы.
review:
text: |
Хотим поблагодарить за проделанную работу.
Обратились с тем, чтобы переработать сайт в лучшую сторону, найти все возможные проблемы элементов интерфейса, из-за которых клиент мог заблудиться на сайте и покинуть его.
На протяжении месяцев совместной работы «Собака Павлова» только удивляла, каждое предложенное решение удовлетворяло на все 100%.
Вся работа выполнялась в срок и без задержек. Команда профессионалов, работа с ними обязательно продолжится в новых проектах. Впечатления остались крайне положительные.
person: Илья Новиков,
position: генеральный директор «От Винта!»
photo: ~/assets/images/portfolio/ot-vinta/person.png
metadata:
canonical: https://sobakapav.ru/portfolio/otvinta-2024
title: UX-отдел на аутсорсе для строительного интернет-магазина
description: "Новые разделы, новая функциональность и точечные доработки интерфейса"
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/otvinta-2024/badge.png'
width: 1200
height: 630
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
import PhoneMockup from '~/components/widgets/PhoneMockup.astro';
import ImageSlider from '~/components/common/ImageSlider.astro';
import UniversalSlider from '~/components/common/UniversalSlider.astro'
<TOC>
[Бизнес-задача](#anchor1) • [Дизайн-задача](#anchor2) • [Результат](#anchor3) • [Нюансы и особенности](#anchor4) • [Отзыв, цены, сроки](#anchor5)
</TOC>
## <a name="anchor1" />Бизнес-задача
Развивать сайт, чтобы удержать лидирующие позиции на рынке интернет-торговли строительными товарами Московской области.
<a href="/images/portfolio/otvinta-2024/1.png" target="_blank"></a>
<em>Главная</em>
## <a name="anchor2" />Дизайн-задачи
Добавить новые разделы сайта и новую функциональность интерфейса.
<UniversalSlider count={3}>
<PhoneMockup image="/images/portfolio/otvinta-2024/25.png" />
<PhoneMockup image="/images/portfolio/otvinta-2024/26.png" />
<PhoneMockup image="/images/portfolio/otvinta-2024/27.png" />
<PhoneMockup image="/images/portfolio/otvinta-2024/28.png" />
</UniversalSlider>
<em>Работа со сметами в мобильной версии. [Меню](~/assets/images/portfolio/otvinta-2024/25.png), [добавление товара](~/assets/images/portfolio/otvinta-2024/26.png), [выбрано несколько товаров чекбоксом](~/assets/images/portfolio/otvinta-2024/27.png), [один из товаров недоступен](~/assets/images/portfolio/otvinta-2024/28.png)</em>
## <a name="anchor3" />Результат
Передали заказчику более двухсот макетов для десяти новых либо переработанных разделов магазина.
Доработали многие из существующих ключевых старниц (главную, каталог, карточку товара и т.д.).
<UniversalSlider count={1}>
<img src="/images/portfolio/otvinta-2024/14.png" />
<img src="/images/portfolio/otvinta-2024/15.png" />
<img src="/images/portfolio/otvinta-2024/16.png" />
</UniversalSlider>
<em>[Страница заказа](~/assets/images/portfolio/otvinta-2024/14.png), [закрытый заказ](~/assets/images/portfolio/otvinta-2024/15.png), [заказ на согласовании](~/assets/images/portfolio/otvinta-2024/16.png)</em>
Спроектировали абсолютно новые разделы и возможности интерфейса. Главные из них:
- Биржа профессионалов
- Личные кабинеты покупателя и строителя
- Сметы
- Коллекции
<a href="/images/portfolio/otvinta-2024/2.png" target="_blank"></a>
<em>Биржа профессионалов. Страница для заказчиков</em>
## <a name="anchor5" />Биржа профессионалов
Биржа профессионалов — это инструмент для поиска подрядчиков на платформе «От Винта». Когда этот раздел будет реализован, профессиональные строители смогут заводить там страницы, а обычные пользователи — нанимать их прямо на сайте «От Винта».
<a href="/images/portfolio/otvinta-2024/12.png" target="_blank"></a>
<em>Биржа профессионалов. Список строителей</em>
Составили сценарии взаимодействия пользователя с инструментов для нескольких типичных жизненных ситуаций.
<UniversalSlider count={1}>
<img src="/images/portfolio/otvinta-2024/3.png" />
<img src="/images/portfolio/otvinta-2024/4.png" />
<img src="/images/portfolio/otvinta-2024/5.png" />
</UniversalSlider>
<em>Биржа профессионалов. Некоторые сценарии</em>
>Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть [модуль дизайн-задачника «Сценарии взаимодействия»](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) для тех, кто хочет научиться их использовать в дизайне интерфейсов.
Спроектировали профиль профессионала в разных состояниях: вот строитель, вот такие работы он делает, вот его кейсы.
<UniversalSlider count={1}>
<img src="/images/portfolio/otvinta-2024/7.png" />
<img src="/images/portfolio/otvinta-2024/6.png" />
<img src="/images/portfolio/otvinta-2024/8.png" />
</UniversalSlider>
<em>[Строитель создает профиль](~/assets/images/portfolio/otvinta-2024/7.png), [предпросмотр](~/assets/images/portfolio/otvinta-2024/6.png). А вот так его профиль [выглядит для заказчика](~/assets/images/portfolio/otvinta-2024/8.png)</em>
Предусмотрели возможность добавить кейсы.
<UniversalSlider count={1}>
<img src="/images/portfolio/otvinta-2024/9.png" />
<img src="/images/portfolio/otvinta-2024/10.png" />
<img src="/images/portfolio/otvinta-2024/11.png" />
</UniversalSlider>
<em>[Строитель создает кейс](~/assets/images/portfolio/otvinta-2024/9.png), [заказчик просматривает кейс 1](~/assets/images/portfolio/otvinta-2024/10.png), [заказчик просматривает кейс 2](~/assets/images/portfolio/otvinta-2024/11.png)</em>
Интересное решение: мы предложили показывать в кейсе, какие материалы использовались при строительстве или ремонте именно этого дома или помещения.
<a href="/images/portfolio/otvinta-2024/12.png" target="_blank"></a>
<em>Биржа профессионалов. Фрагмент кейса со списком материалов.</em>
### <a name="anchor7" />Личный кабинет
Личный кабинет строителя и обычного пользователя похожи, но отличаются составом страниц. У обычного пользователя в левом меню только три пункта: личные данные, заказы и сметы. У строителя появляются дашборд и блог (то есть страница профессионала на бирже профессионалов).
<UniversalSlider count={1}>
<img src="/images/portfolio/otvinta-2024/18.png" />
<img src="/images/portfolio/otvinta-2024/19.png" />
<img src="/images/portfolio/otvinta-2024/20.png" />
</UniversalSlider>
<em>Левое меню: [в личном кабинете обычного пользователя](~/assets/images/portfolio/otvinta-2024/14.png), [в личном кабинете строителя](~/assets/images/portfolio/otvinta-2024/15.png), [стать стороителем](~/assets/images/portfolio/otvinta-2024/16.png)</em>
У строителя есть дашборд, который позволяет вести более сложные расчеты с «От Винта». Тут же, в дашборде, показываем состояние счета строителя, скидки и выгоды — сколько профессионал уже сэкономил благодаря сотрудничеству с «От Винта».
<a href="/images/portfolio/otvinta-2024/17.png" target="_blank"></a>
<em>Личный кабинет строителя. Дашборд</em>
Кроме того, у строителя более подробные сметы. Но про них расскажем отдельно.
### <a name="anchor8" />Сметы
Этот инструмент мы придумали, когда работали над сайтом [совсем другого строительного магазина](/portfolio/stroynastroy). Но в тот раз идею не реализовали, зато она очень пригодилась для «От Винта».
<a href="/images/portfolio/otvinta-2024/21.png" target="_blank"></a>
<em>Сценарий создания сметы</em>
Смета — это список товаров, которые пользователь выбирает для конкретного строительного проекта.
<a href="/images/portfolio/otvinta-2024/22.png" target="_blank"></a>
<em>Смета</em>
При желании пользователь может создать в пределах общей сметы подкатегрии для кухни, ванной, крыши и т.п. А какие-то товары оставить вне категорий (например, строительный степплер, который будет использоваться везде).
<a href="/images/portfolio/otvinta-2024/24.png" target="_blank"></a>
<em>Смета, в которой есть несколько категорий и товары без категории</em>
Для обычного пользователя смета — это инструмент наподобие «Избранного», только «Избранное» всего одно, а смет может быть сколько угодно.
<a href="/images/portfolio/otvinta-2024/23.png" target="_blank"></a>
<em>Список смет</em>
Для строителей-профессионалов это не просто удобный, а прямо-таки необходимый инструмент. У строителя часто есть несколько объектов, и по кажлму нужно вести какие-то сумммы, создавать списки покупок, раскладывать товары по блокам, делать заметки. Копировать смету, если предстоит проект, похожий на какой-то из прежних. И, что немаловажно, посылать сметы на согласование заказчикам.
<UniversalSlider count={3}>
<img src="/images/portfolio/otvinta-2024/29.png" />
<img src="/images/portfolio/otvinta-2024/30.png" />
<img src="/images/portfolio/otvinta-2024/31.png" />
<img src="/images/portfolio/otvinta-2024/32.png" />
<img src="/images/portfolio/otvinta-2024/33.png" />
<img src="/images/portfolio/otvinta-2024/34.png" />
</UniversalSlider>
<em>Работа со сметами в мобильной версии. [Список смет](~/assets/images/portfolio/otvinta-2024/29.png), [поделиться сметой](~/assets/images/portfolio/otvinta-2024/30.png), [popup копирования сметы](~/assets/images/portfolio/otvinta-2024/31.png), [рopup создания категории](~/assets/images/portfolio/otvinta-2024/32.png), [добавление заметки](~/assets/images/portfolio/otvinta-2024/33.png), [редактирование заметки](~/assets/images/portfolio/otvinta-2024/34.png)</em>
И в результате этот инструмент мотивирует профессионалов делать покупки именно в «От Винта».
### <a name="anchor5" />Коллекции
Некоторые строительные товары составляют коллекции. Для керамической плитки это скорее правило, чем исключение.
<UniversalSlider count={1}>
<img src="/images/portfolio/otvinta-2024/35.png" />
<img src="/images/portfolio/otvinta-2024/37.png" />
</UniversalSlider>
<em>Коллекции плитки. [Разводящая страница](~/assets/images/portfolio/otvinta-2024/35.png) и [всплывающее окно быстрого просмотра](~/assets/images/portfolio/otvinta-2024/37.png)</em>
В коллекции керамической плитки может быть несколько вариантов квадратной и\или прмоугольной плитки, бордюры, декоративные панно, треугольные элементы и т.п. Все это составляющие единой системы и надо уметь показать их как часть одного целого, как элементы конструктора.
<a href="/images/portfolio/otvinta-2024/38.png" target="_blank"></a>
<em>Страница коллекции</em>
Плитку можно смотреть по коллекциям, а можно по отдельным элементам.
<a href="/images/portfolio/otvinta-2024/36.png" target="_blank"></a>
<em>Коллекции плитки. Элементы</em>
При поиске по коллекциям результат можно выводить как по коллекциям, так и по отдельным элементам.
<UniversalSlider count={1}>
<img src="/images/portfolio/otvinta-2024/41.png" />
<img src="/images/portfolio/otvinta-2024/42.png" />
</UniversalSlider>
<em>Результаты поиска. [Выводим коллекции и элементы](~/assets/images/portfolio/otvinta-2024/36.png), [выводим только элементы](~/assets/images/portfolio/otvinta-2024/36.png)</em>
Интересное решение. Предложили связать страницу коллекции со одной или несколькими страницами дизайн-проектов, использующих эту коллекцию.
<a href="/images/portfolio/otvinta-2024/40.png" target="_blank"></a>
<em>Страница дизайн-проекта</em>
## <a name="anchor4" />Особенности
Мы сотрудничаем с «От Винта» как [UX-отдел на аутсорсе](/services/ux-outsource). Они приносят новые задачи нашей команде, постоянно работающей именно над этим проектом.
Очень удобный режим работы для всех участников.
1. Нам не нужно вникать каждый раз заново в специфику отрасли, особенности продукта, требования и ограничения разработчиков и какие-то детали легаси: команда уже знает все это наизусть.
2. Заказчику не нужно тратить время на поиск подрядчика или деньги на постоянное содержание своего UX-отдела. Он платит только за сделанные задачи.
«От Винта» — редкий случай заказчика, который делится с нами статистикой, свидетельствующей о том, насколько сотрудничество с нами было полезно для бизнеса.
### <a name="anchor10" />