Разработка сайта-каталога для завода

1. Вводные данные

О компании

Луганский завод трубопроводной арматуры “Маршал”. Завод занимается производством по четырем основным направлениям: краны шаровые, затворы дисковые, фильтры сетчатые и детали для монтажа. Завод успешно функционирует с 1992 года.

С чем пришли

У заказчика уже был сайт, но его дизайн устарел. Необходимо было разработать новый подход к подаче информации. Требовался корпоративный сайт, который бы предоставлял полную информацию о производимой продукции. Так же он должен выполнять роль визитки, чтобы рассказывать о компании в целом. Это не интернет-магазин, и главное рассказать, что компания 25 лет на рынке и они качественно делают свое дело. Суть, нужно провести клиента по сайту, чтобы он оставил заявку.

Что решили?

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

2. Мониторинг конкурентов

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

3. Кто же ты, наш пользователь?

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

Олег Иванов

Сантехник, 45 лет

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

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

Игорь Смирнов

Бизнесмен, 39 лет

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

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

Юлия Веснова

Домохозяйка, 34 года

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

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

4. Этап проектирования

Сначала был составлен черновой прототип на бумаге, который помог представить масштабы работ и приблизительную сложность. Затем в Figma был выполнен детальный прототип. Готовые макеты были заанимированы и выполнено первое тестирование. В процессе проектирования мы постоянно общались с заказчиком и обсуждали все возможные правки.

5. Проработка UI

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

Страницы каталога

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

Остальные страницы

Мы разработали страницы имеджевой составляющей, такие как “О компании”, “История”, “Сертификаты”. Так же на сайте будет блок “Полезная информация”, эта страница отвечает за коммуникацию с пользователем. Для наполнения этого блока была проработана типовая текстовая страница. И, конечно, мы не забыли о сегменте партнеров. Для них на сайте есть две страницы: дилеры и региональное сотрудничество.

6. UI-кит

7. Этап разработки

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

Спасибо за просмотр!

UX/UI дизайн

X

Форма заявки

Нажимая на кнопку "отправить" Вы соглашаетесь с политикой конфиденциальности

Закрыть форму