Предисловие
Изначально перед нами стояло 3 простых задачи:
Разработать главную страницу сайта для услуги по изготовлению гофроупаковки
Сделать редизайн страницы с каталогом продукции
Оптимизировать и обновить страницы категории и товара
Но с самого начала было подозрение, что этого не достаточно
Первый вариант: Ограничиться выполнением поставленных задач.
Второй вариант: Предложить изменения и улучшения по структуре, которые будут способствовать более лёгкому восприятию информации на сайте со стороны пользователей.
АКТ 1. Сцена 1. Погружение в задачу и генерация идей
Действие 1
Бросаем идеи в чужой огород…
Углубляемся в тему, детально изучаем услугу и уже на этом этапе предлагаем заказчику идеи, которые могут усилить проект.
Мы увидели два направления услуги, которые, на наш взгляд, важно разделить:
Первое направление: Продажа готовой продукции.
Второе направление: Индивидуальный заказ.
Так любая или не любая?
Действие 2
Забавная вещь, но… встречается нередко.
Когда заказчик сам не видит каких‑то особенностей в своём бизнесе. Точнее он знает, конечно, о них, но не придаёт им должного внимания и значения. А для нас важно всё, поэтому мы всегда “вытягиваем” из заказчика все секреты.
Созвонились с ним, чтобы прояснить момент с “любой” упаковкой.
И выяснили, что буквально любую не делают, но фактически возможности по индивидуальному заказу у компании гораздо шире, чем у конкурентов.
Но, в этом проекте эту информацию мы не использовали.
Как мы и планировали, решили разделить услуги и начать со страницы для продажи готовой продукции. Это было приоритетным направлением для заказчика на тот момент, а страницу с индивидуальным заказом пока отложили.
Действие 3
Очень действенное…
Также в ходе беседы выяснили, что заказчик может продавать мелкооптовые партии по цене крупного опта. А достигается это с помощью новейшего уникального оборудования, которого у конкурентов пока нет. В брифе этого не было, а тянет на УТП.
Действие 4
Ё-маё...
Страница каталога сразу вызвала у нас массу вопросов, даже при беглом рассмотрении. Визуально складывается впечатление каши. Слишком много категорий, много текста, много всего.
Впоследствии наши “опасения” подтвердились, но об этом в следующих сценах… После заключения договора и начала работы над проектом.
Зритель:
А до этого что было, не работа? И договора не было?
Игорь, проект-менеджер:
Да) Это всегда остаётся за кадром, но это стандартная предварительная работа с заказчиком, которую мы обычно проделываем ещё до начала сотрудничества. Это необходимо, так мы с заказчиком можем лучше понять и узнать друг друга, правильно расставить все цели и задачи.
Сцена 2. Главная страница сайта
Охапка дров - и сайт готов
Андрей, дизайнер:
Какой делать дизайн в первом дизайн-концепте не было сомнений. В плане стиля я больше склонялся к плашечному, потому что это удобно и актуально сейчас. А также заказчику нравился дизайн сайта именно в такой стилистике, который он упоминал в качестве референса. Но чтобы не ограничиваться плашками, я решил сделать ещё вариант со светлыми фулскрин-блоками.
Катя, дизайнер:
А я в качестве альтернативы решила предложить более классический вариант дизайна с разделением на блоки с чёткими границами и чередованием тёмных фулскрин-блоков со светлыми. Так как сомнения по поводу того,
что полностью светлый сайт зайдёт заказчику, оставались.
Действие 1 | Вариативное
Главный экран — это тот момент, на который стоит потратить время
Важно, чтобы с первого экрана человек понял, что ему предлагают и почему ему стоит просмотреть весь сайт. Поэтому мы по традиции заморочились…
Вариант 1
Вариант 2
Вариант 3
Действие 3 | Итоговое
Выбор заказчика
Заказчик выбрал плашечный вариант в жёлтом цвете. Но, являясь большим поклонником плиточного стиля, попросил сделать главный экран отдельной плашкой. Поэтому было принято решение в принципе весь контент располагать строго в плашках, без каких‑то фоновых изображений и эффектов наложения. Сделать упор на простые формы, чистые цвета, которые больше сосредоточат внимание на товаре и важной информации. В итоге получился такой дизайн главной страницы, который устроил всех.
Зритель:
А как же вот это ваше знаменитое «Главное, чтобы сайт работал, а не нравился заказчику»?
Игорь, проект-менеджер:
Совершенно верно, но ведь всегда можно сделать так, чтобы и работало, и заказчику нравилось. Просто побольше вариативности и усилий.
Сцена 3. Каталог
Действие 1
Запутанное
Самый сложный этап - разработка каталога. В текущем варианте он выглядел очень запутанно и был крайне неудобен для пользователя.
Одно меню показано в четырёх разных визуализациях. Но пользователь видит его как разные меню с уникальным набором категорий. В итоге возникает иллюзия огромного выбора, а соотвественно страх перед ним, растерянность и непонимание, с чего начать и куда нажимать.
Когда пользователь заходит в меню, он путается и не понимает, какие категории уже просмотрел, а какие нет, отличаются они или нет. В каталоге нет логики и не продуман путь клиента.
Зритель:
Блин, ну нифига себе тут у вас🤦 Ой, кажется, я сюда уже заходил, или это это что-то другое? Как сложно то всё…
Катя, дизайнер:
Упростим, скоро всё будет структурировано и понятно - по фэншую👌
Действие 2
Оптимизационное
• Сократили количество категорий, убрали дубликаты и визуально упростили меню
• Добавили 2 критерия выбора
По виду
По применению
Зритель:
Теперь всё легко и не страшно😁 Только вот теперь страница категории и товара не соответствуют.
Катя, дизайнер:
Да, но об этом поговорим отдельно в следующей сцене👇
Сцена 4. Страницы категории и товара
Действие 1
Структура страницы. Категории и карточки товара
Здесь у нас была похожая задача: упорядочить и оптимизировать информацию на странице, сделать понятную и лёгкую для восприятия визуализацию каталога и карточек товаров.
Заказчик, промкартон:
Хотелось бы, чтобы уже со страницы категории посетитель смог быстро собрать корзину с нужной партией или сразу оформить заказ, ну или посмотреть товар без перехода на страницу товара.
Игорь, проект-менеджер:
Разместить много текста без текста - это прям наше. Задача для дизайнера: сделать многофункциональную карточку, но при этом не перегруженную текстовой информацией.
Действие 2
Сначала определили функционал карточки:
Добавить в избранное
Сравнить с другими товарами
Купить в 1 клик
Быстрый просмотр
Добавить в корзину
Сразу добавить количество единиц в партии
И приступили к реализации
Информации очень много. Разместить её в полном объёме, не перегрузив карточку — действительно задачка со звёздочкой. Но мы справились:
• Кнопки «В избранное» и «Сравнить» убрали в иконки.
• Кнопка «Быстрый просмотр» появляется только при наведении на карточку.
• Возможность выбрать количество единиц в партии спрятали в выпадающий список при наведении на кнопку «В корзину».
Таким образом, из текстовой информации на карточке осталось название товара и текст на главных кнопках «В корзину» и «Купить в 1 клик».
Действие 3
Страница Товара
Поработали с текстом как по содержанию, так и по расположению на странице:
• Оптимизировали характеристики, описание, информацию по доставке
• Добавили основные выгоды услуги и компании
• Разместили сопутствующую информацию «С этим товаром покупают», рекомендуемые и просмотренные товары
Действие 4
Дизайнерское
Разработали дизайн страниц Категории и Товара в стилистике главной страницы сайта
Пару дней и всё готово к вёрстке:
В данном проекте вёрстку мы не делали, так как у заказчика были свои специалисты
АКТ 2. Сцена единственная
Действие дополнительное
Прошло 2 месяца…
Заказчик оценил дизайн и решил продолжить в том же духе стиле. Нам предстояло сделать редизайн страниц:
Сказано - сделано
Тут и пьесе конец, а кто читал теперь знает о нас намного больше.
Команда студии ONE PAGE
Не только какие сайты мы делаем, но и как к ним подходим: зачем сначала разбираемся в задаче, почему не начинаем с «красивой картинки», как выстраиваем рабочие процессы, структуру, смыслы, как подходим к решению задач.
