КЕЙС-ПЬЕСА ПРОМКАРТОН
Игорь
Проект-менеджер
Андрей
Дизайнер
Зритель
Пользователь
Лена
Маркетолог
Катя
Старший дизайнер
Время действия: 20 дней
Декорации:

Проектирование и дизайн сайта

Заказчик пришёл за дизайном лендинга, а получил —
экспертную доработку корпоративного сайта, улучшение
структуры каталога и новый интерфейс интернет-магазина.

Действующие лица и не только
Промкартон
Главный герой
Разработать главную страницу сайта для
услуги по изготовлению гофроупаковки
Сделать редизайн страницы
с каталогом продукции
Подготовить картинки товаров
для заполнения каталога
Было 2 варианта:
Ограничиться выполнением
поставленных задач

Изначально перед нами стояло 3 простых задачи:

Но с самого начала было подозрение, что этого не достаточно

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

Предисловие

Бросаем камни идеи в чужой огород…

АКТ 1.
Углубляемся в тему и детально изучаем услугу. И сразу
предлагаем заказчику идеи по улучшению проекта.
 Пьеса начинается…

Сцена 1. Погружение в задачу и генерация идей

Продажа готовой
продукции
Если коротко, мы увидели 2 направления в услуге,
которые нужно было разделить, по нашему мнению:
1
Индивидуальный
заказ
2
Действие 1
Реплики героев:

Так любая или не любая?

Действие 2

Очень действенное…

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

Ё-маё...

Действие 4
Страница каталога сразу вызвала у нас массу
вопросов, даже при беглом рассмотрении.
Визуально складывается впечатление каши.
Слишком много категорий, много текста,
много всего.
Впоследствии наши “опасения”
подтвердились, но об этом в следующих
сценах… После заключения договора
и начала работы над проектом.
Реплики героев:
А до этого что было, не работа?
И договора не было?
Да) Это всегда остаётся за кадром,
но это стандартная предварительная
работа с заказчиком, которую
мы обычно проделываем ещё до начала
сотрудничества. Это необходимо, так 
мы с заказчиком можем лучше понять
и узнать друг друга, правильно
расставить все цели и задачи.

Сцена 2. Главная страница сайта

Охапка дров - и сайт готов

Реплики героев:
Какой делать дизайн в первом дизайн-концепте не было сомнений. В плане
стиля я больше склонялся к плашечному, потому что это удобно и актуально
сейчас. А также заказчику нравился дизайн сайта именно в такой стилистике,
который он упоминал в качестве референса. Но чтобы не ограничиваться
плашками, я решил сделать ещё вариант со светлыми фулскрин-блоками.
А я в качестве альтернативы решила
предложить более классический
вариант дизайна с разделением
на блоки с чёткими границами
и чередованием тёмных блоков
со светлыми. Так как сомнения
по поводу того, что полностью светлый
сайт зайдёт заказчику, оставались.
Поэтому сначала родилось
3 таких решения:

Про дизайн

Действие 1. Вариативное
Главный экран — это тот момент,
на который стоит потратить время.
Важно, чтобы с первого экрана человек
понял, что ему предлагают и почему ему 
стоит просмотреть весь сайт. Поэтому
мы по традиции заморочились…

Вариант 1

Вариант 2

Вариант 3

Внутри студии

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

Вариант 1.1

Вариант 1.2

Выбор заказчика

Заказчик выбрал плашечный вариант в жёлтом цвете. Но, являясь большим поклонником
плиточного стиля, попросил сделать главный экран отдельной плашкой.
Действие 3. Итоговое
Поэтому было принято решение в принципе весь контент располагать строго в плашках,
без каких‑то фоновых изображений и эффектов наложения. Сделать упор на простые
формы, чистые цвета, которые больше сосредоточат внимание на товаре и важной
информации. В итоге получился такой дизайн главной страницы, который устроил всех.
Реплики героев:
А как же вот это ваше знаменитое
«Главное, чтобы сайт работал,
а не нравился заказчику»?
Совершенно верно, но ведь
всегда можно сделать так,
чтобы и работало, и заказчику
нравилось. Просто побольше
вариативности и усилий.
Действие 1

Сцена 3. Каталог товаров

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

Запутанное

Самый сложный этап - разработка каталога. В текущем варианте
он выглядел очень запутанно и был крайне неудобен для пользователя.
1-й вариант меню
Каталог в меню сайта
2-й вариант меню
Каталог категорий с изображениями раскрытый
3-й вариант
Боковое меню
4-й вариант меню
Каталог продукции справа от бокового меню
Когда пользователь заходит в меню, он путается и не понимает, какие категории уже просмотрел, а какие нет,
отличаются они или нет. В каталоге нет логики и не продуман путь клиента.
Реплики героев:
Блин, ну нифига себе тут у вас. Ой,
кажется, я сюда уже заходил, или это
что-то другое? Как сложно то всё…
Упростим, скоро всё будет
структурировано и понятно -
по фэншую

Оптимизационное

Сократили количество категорий, убрали дубликаты и визуально упростили меню
Действие 2

По виду

Добавили 2 критерия выбора

По применению

По факту получился двухуровневый каталог. И только в паре категорий — 3 уровня.
Также визуально выделили разделы «Упаковка на заказ», «Упаковка в наличии»
и «Печать на упаковке», вынесли их в пункты меню.
Реплики героев:
Теперь всё легко и не страшно😁
Только вот теперь страница категории
и товара не соответствуют.
Да, но об этом поговорим
отдельно в следующей сцене👇
Действие 1

Сцена 4. Страницы категории и товара

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

Структура страницы

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

Категории и карточки товара

Сначала определили функционал карточки:

Действие 2
Добавить
в избранное
Сравнить с другими
товарами
Купить
в 1 клик
Быстрый
просмотр
Добавить
в корзину
Сразу добавить количество
единиц в партии

И приступили к реализации

Кнопки «В избранное» и «Сравнить» убрали в иконки.
Информации очень много. Разместить
её в полном объёме, не перегрузив
карточку — действительно задачка
со звёздочкой. Но мы справились:
Кнопка «Быстрый просмотр» появляется только
при наведении на карточку.
Возможность выбрать количество единиц в партии
спрятали в выпадающий список при наведении
на кнопку «В корзину».
Таким образом, из текстовой информации на карточке
осталось название товара и текст на главных кнопках
«В корзину» и «Купить в 1 клик».

Страница Товара

Действие 3
Оптимизировали характеристики, описание,
информацию по доставке
Поработали с текстом как по содержанию,
так и по расположению на странице:
Добавили основные выгоды услуги и компании
Разместили сопутствующую информацию
«С этим товаром покупают», рекомендуемые
и просмотренные товары
После этого прототипы страниц
Категории и Товара отправили
на согласование заказчику.

Дизайнерское

Действие 4
Разработали дизайн страниц
Категории и Товара в стилистике
главной страницы сайта
Пару дней и всё готово к вёрстке:
Прорисовано меню, формы, карточки, вкладки и др.
Сделана мобильная версия
Дизайн полностью завершён
Сделана нарезка макетов
Написано ТЗ для верстальщика
Реплики героев:

В данном проекте вёрстку мы не делали,

так как у заказчика были свои специалисты

Антракт
АКТ 2.

Сцена единственная

Прошло 2 месяца…

Заказчик оценил дизайн и решил продолжить в том же духе
стиле. Нам предстояло сделать редизайн страниц:
Действие дополнительное

Сказано - сделано

Тут и пьесе конец, а кто читал теперь знает о нас намного больше.
Как мы работаем, как выстраиваем процессы, как подходим к решению задач.
Давайте обсудим ваш проект
Игорь Костромин
Руководитель студии
Поговорим предметно. У нас нет такого: «сейчас уточню»,
«завтра перезвоню».
Поговорим сразу о деле: какая у вас задача, как мы можем
или не можем её решить. Выясним главные нюансы
уже в первом телефонном разговоре: какие есть пути,
инструменты, какие больше вам подходят и т.д.
© Все права защищены
ООО  «Смарт Бизнес»
ИНН 5646033391, ОГРН 1165658057234
Москва
info@one-page-site.ru
Санкт-Петербург
Мессенджеры:
Веб-студия ONE PAGE
info@one-page-site.ru