Алена Рудковская
UX/UI-дизайнер
Telegram
Алена Рудковская
UX/UI-дизайнер
Telegram
Email
LinkedIn
Скачать CV
WEBSITE
Проект 02/06
Редизайн корпоративного сайта
UX аудит
Анализ конкурентов
Информационная архитектура
Wireframes
UI
UI Kit
Адаптивы
Провела UX аудит сайта производственной компании и анализ конкурентов, пересмотрела структуру, навигацию и основные пользовательские сценарии. Спроектировала страницы сайта, обновила визуальный стиль, подготовила адаптивные версии и UI Kit.
Роль
UX/UI-дизайнер
Основные проблемы старого сайта
UX аудит помог определить основные направления редизайна
Проанализировала существующий сайт, структуру страниц, каталог, навигацию и основные сценарии работы с продукцией. Дополнительно изучила сайты конкурентов, чтобы понять, как в отрасли организованы поиск товаров, техническая информация и путь к обращению.
01
Нужный товар сложно найти в каталоге
Решение
Упростить структуру каталога и сократить путь до нужной категории и товара
02
На страницах слишком много информации
Решение
Перестроить структуру страниц, выделить главное и разделить информацию на понятные блоки
03
Не всегда понятно, где оставить заявку
Решение
Сделать переход к заявке заметнее и разместить целевые действия в ключевых разделах сайта
Упростила работу с каталогом и товаром
Товар можно найти по категории, названию или модели
Раньше товары были собраны общим списком без поиска и понятного деления. Я добавила категории и подкатегории, поиск и боковую навигацию, чтобы с каталогом было удобно работать в разных сценариях, а также возвращаться к недавно просмотренным товарам при необходимости.
Поиск и навигация
Добавила поиск по названию и модели, категории и подкатегории, а также боковую навигацию по ассортименту
Работа с документацией
Добавила возможность скачать прайс из каталога и технический паспорт со страницы товара для тех, кому удобнее работать с перечнем продукции и техническими данными
Главная, которая сразу ориентирует
Не нужно искать нужный раздел в глубине сайта
На старой главной было сложно быстро понять, что именно предлагает компания и куда перейти дальше. Я подняла выше описание услуг, основные направления продукции и заявку, а остальную информацию выстроила ниже по смыслу.
Понятно, чем занимается компания
На первом экране сразу показала основные услуги и возможность оставить заявку
Основные категории на главной
Категории продукции вынесла выше, чтобы не искать их в глубине сайта
Показала компанию через опыт, производство и реальные проекты
На странице можно быстро увидеть, кто стоит за продуктом и какой опыт есть у компании
На старой странице информация о компании терялась в большом объёме текста. Я разделила её на отдельные смысловые блоки и вынесла самое важное: опыт компании, историю, производство и выполненные работы.
Опыт компании в цифрах
Вынесла основные показатели и факты отдельно, чтобы опыт компании не терялся в большом объёме текста
Реальные проекты и крупные клиенты
Добавила выполненные проекты и крупных клиентов, чтобы показать опыт компании на реальных примерах
Несколько сценариев работы с сайтом
Пользователи приходят на сайт с разными задачами, поэтому и искать нужную информацию им удобнее по разному
При проектировании учитывала разные задачи пользователей. Кто то приходит за конкретным товаром, кому то нужны данные для работы, а кто то сначала хочет больше узнать о компании и только потом перейти к обращению.
01
Я уже знаю, что мне нужно
Поиск по названию и модели помогает сразу найти нужный товар, а категории и подкатегории дают другой способ ориентироваться в ассортименте
02
Мне нужны цены и характеристики
Прайс лист и технический паспорт можно скачать отдельно, если с информацией удобнее работать вне сайта
03
Сначала хочу понять, с кем работаю
История компании, производство, выполненные проекты и крупные клиенты помогают оценить её опыт перед обращением
Контакты и адреса в одном месте
Пользователь может выбрать удобный способ связи и сразу найти нужный адрес
Собрала на одной странице основные способы связи и адреса компании. Контакты разделила по типам, а расположение офисов показала списком и на карте, чтобы нужную информацию можно было быстро найти.
Несколько способов связи
Телефон, почту и соцсети разделила на отдельные блоки, чтобы пользователь мог выбрать удобный вариант
Адреса и расположение
Показала адреса компании списком и на карте, чтобы нужный офис было проще найти
Результат редизайна
Сайт стал понятнее по структуре, удобнее для поиска продукции и цельнее визуально
Переработала структуру и основные страницы сайта, добавила новые сценарии поиска продукции, упростила работу с технической информацией и сделала подачу компании более понятной. Подготовила адаптивные версии и UI Kit, чтобы интерфейс сохранял единый подход на разных экранах и страницах.
Понятнее структура
Каталог, страница товара, информация о компании и контакты собраны вокруг понятных пользовательских задач
Удобнее работать с продукцией
Поиск, категории, подкатегории, документы и недавно просмотренные товары поддерживают разные сценарии работы с каталогом
Единый интерфейс
Подготовила адаптивные версии и UI Kit, чтобы сайт сохранял общий визуальный язык и логику на разных экранах