Концепция продуктовой страницы

Релиз

7 августа 2023

Клиент

За неделю согласовали концепцию дизайна, к которому компания не могла прийти год

Вводные

Ситуация

Заказчик — Эридан, разработчик и производитель взрывозащищенного оборудования для систем пожарной автоматики и видеонаблюдения.

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

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

Руководство хотело, чтобы мы оценили качество и эффективность выполненных работ, а также предложили свои способы решения проблемы.

Решение

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

Так мы быстро сможем соотнести желания заказчика и наше видение сайта.

Процесс

За полчаса показали своё видение дизайна

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

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

До

После

Сделали первый экран более информативным

На продуктовой странице полезный контент спрятан. Пользователь не понимает, какие опции у товара, потому что они спрятаны за выпадающими списками. Весь шрифт примерно одного размера.

Решили выделить заголовок и ключевые свойства. Все значения конфигуратора вытащили наружу. Корзину из левой колонки перенесли в залипающую плашку, которая следует за человеком при скролле. Убрали всё, что мешает изучению контента. Прибрали неаккуратную вёрстку.

До

После

Несчитываемый текст разбили на смысловые части и крупно вынесли основные данные и фактоиды

До

После

В описании выделили заголовки, подсветили важное

До

После

Упростили дизайн, чтобы заново не наполнять все продуктовые страницы

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

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

Повысили считываемость таблиц

Полезная информация размазана в нечитаемых таблицах.

Убрали пустые места и цветные полосы, которые не выделяют главное. Заголовки таблиц сделали намного заметнее.

До

После

Громоздкие таблицы с доп.оборудованием превратили в товары, которые делятся по категориям

Увеличили изображения, сгруппировали похожие товары, высушили описание.

До

После

Представили заказчику итоговый вариант продуктовой страницы

Увеличили изображения, сгруппировали похожие товары, высушили описание.

До

После

Результат

Заказчик в течение недели получил видение нового сайта

Совету директоров понравился дизайн и глубина проработки

Принято решение изменить весь сайт в соответствии с этой концепцией

Посмотреть вживую

Ещё Эридан