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

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

Действующие лица
и не только
Промкартон
Главный герой

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

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

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

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

Предисловие

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

Разработать главную страницу сайта
для услуги по изготовлению
гофроупаковки

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

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

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

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

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

Действие 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 месяца…

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

Корзина
Сравнение
Поиск
Оформление заказа
Игорь Костромин, CEO студии ONE PAGE
Игорь Костромин
CEO студии
Оставить заявку

Давайте обсудим
ваш проект

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