Копеечка
Контекст продукта
Копеечка — крупнейшая сеть дискаунтеров в Беларуси, сотни магазинов по всей стране. Проект — полный редизайн сайта с нуля: новая структура, новая логика, новый визуальный язык. Корзины и доставки нет — сайт работает как каталог: пользователь смотрит товары онлайн, покупает в магазине.
Контекст продукта
Копеечка — крупнейшая сеть дискаунтеров в Беларуси, сотни магазинов по всей стране. Проект — полный редизайн сайта с нуля: новая структура, новая логика, новый визуальный язык. Корзины и доставки нет — сайт работает как каталог: пользователь смотрит товары онлайн, покупает в магазине.
Моя роль
Продуктовый дизайнер полного цикла. Вайрфреймы, полный UI-дизайн, подготовка ассетов и управление итерациями. Каждый этап предлагался, презентовался и согласовывался с клиентом до начала следующего — включая директоров компании.
Моя роль
Продуктовый дизайнер полного цикла. Вайрфреймы, полный UI-дизайн, подготовка ассетов и управление итерациями. Каждый этап предлагался, презентовался и согласовывался с клиентом до начала следующего — включая директоров компании.
Проблема
Один слой пытался делать всё — и не справлялся ни с чем
Старый хедер был единственной красной полосой, в которой жили бренд, навигация и утилиты одновременно. Никакой иерархии, никакого воздуха.
Проблема
Один слой пытался делать всё — и не справлялся ни с чем
Старый хедер был единственной красной полосой, в которой жили бренд, навигация и утилиты одновременно. Никакой иерархии, никакого воздуха.
Бренд, навигация и утилиты в одном слое без приоритетов
Красный фон везде — фирменный цвет как обои, не акцент
Каталога нет, хотя это главная цель на сайте ритейлера
Старый хедер не давал пользователю понять с чего начать. Всё было одинаково важным — значит ничто не было важным. Красный фон на всю ширину создавал агрессивный первый экран без точки фокуса. Каталог — главное что может предложить сайт продуктового ритейлера — терялся среди равнозначных пунктов.
Старый хедер не давал пользователю понять с чего начать. Всё было одинаково важным — значит ничто не было важным. Красный фон на всю ширину создавал агрессивный первый экран без точки фокуса. Каталог — главное что может предложить сайт продуктового ритейлера — терялся среди равнозначных пунктов.
Решение
Три уровня вместо одного и каталог в двух точках входа
Разбил хедер на три отдельных уровня с чёткой иерархией, фирменный цвет стал акцентом а не фоном.
Решение
Три уровня вместо одного и каталог в двух точках входа
Разбил хедер на три отдельных уровня с чёткой иерархией, фирменный цвет стал акцентом а не фоном.
Верхняя строка: город, контакты, телефон — утилиты отдельно
Средняя строка: логотип, поиск во всю ширину, кнопка каталога, карта лояльности
Навигация ниже: чистая, сгруппированная, с дропдаунами где нужно
Каталог доступен из двух точек — отдельная кнопка в средней строке и пункт в навигации. На сайте ритейлера такое дублирование намеренно. Фон стал белым — бренд-цвет работает как акцент на кнопках и активных элементах. Хедер теперь служит пользователю, а не конкурирует с контентом.
Каталог доступен из двух точек — отдельная кнопка в средней строке и пункт в навигации. На сайте ритейлера такое дублирование намеренно. Фон стал белым — бренд-цвет работает как акцент на кнопках и активных элементах. Хедер теперь служит пользователю, а не конкурирует с контентом.
Проблема
Главное что может показать ритейлер — на сайте отсутствовало
На старом сайте Копеечки не было ни одного товара. Пользователь не мог посмотреть ассортимент — самое очевидное что ожидаешь от сайта магазина просто отсутствовало. Причина - запрет на получение доступа к API списка товаров из CRM
Проблема
Главное что может показать ритейлер — на сайте отсутствовало
На старом сайте Копеечки не было ни одного товара. Пользователь не мог посмотреть ассортимент — самое очевидное что ожидаешь от сайта магазина просто отсутствовало. Причина - запрет на получение доступа к API списка товаров из CRM
Товаров на сайте не было вообще
Нет причины возвращаться на сайт между походами в магазин
Нет пути от онлайн-интереса к офлайн-покупке
Сайт существовал как визитка — адреса, контакты, общая информация. Пользователь который хотел узнать что есть в магазинах не мог этого сделать онлайн. Для сети с сотнями SKU и постоянно меняющимся ассортиментом это означало что сайт не выполнял свою главную функцию.
Сайт существовал как визитка — адреса, контакты, общая информация. Пользователь который хотел узнать что есть в магазинах не мог этого сделать онлайн. Для сети с сотнями SKU и постоянно меняющимся ассортиментом это означало что сайт не выполнял свою главную функцию.
Решение
Товары на главной — из акционных листовок
Добавил горизонтальный ряд карточек новинок на главной странице. Первый раз когда товары появились на сайте Копеечки. Добавляются вручную и представляю собой список товаров из акций.
Решение
Товары на главной — из акционных листовок
Добавил горизонтальный ряд карточек новинок на главной странице. Первый раз когда товары появились на сайте Копеечки. Добавляются вручную и представляю собой список товаров из акций.
Фото, вес, цена за кг, название, цена — чисто и читаемо
Новый знак белорусского рубля как обязательство по закону
Карточки ведут на страницу товара с кнопкой «Найти ближайший магазин»
С моей подачи был добавлен минимальный функционал связанный с товарами. Появился и каталог с фильтрами, настройками и тому подобным. Дизайн учитывает возможное скорое добавление полноценного каталога: ничего не придётся переделывать когда она запустится. Главная теперь даёт причину смотреть сайт, а не только искать адрес.
С моей подачи был добавлен минимальный функционал связанный с товарами. Появился и каталог с фильтрами, настройками и тому подобным. Дизайн учитывает возможное скорое добавление полноценного каталога: ничего не придётся переделывать когда она запустится. Главная теперь даёт причину смотреть сайт, а не только искать адрес.
Проблема
Море одинаковых пинов без возможности что-то найти
Старая карта была чистым embed Яндекса без какого-либо интерфейса вокруг. Сотни магазинов — ни фильтров, ни поиска, ни информации по клику.
Проблема
Море одинаковых пинов без возможности что-то найти
Старая карта была чистым embed Яндекса без какого-либо интерфейса вокруг. Сотни магазинов — ни фильтров, ни поиска, ни информации по клику.
Все пины одинаковые — нет способа отличить один магазин от другого
Нет фильтров по режиму работы или удобствам
Клик по пину не давал полезной информации
Пользователь который хотел найти круглосуточный магазин рядом с домом должен был кликать по каждому пину вручную. Часы работы, расстояние, наличие кофе или еды — ничего этого не было. Карта существовала но не работала как инструмент поиска.
Пользователь который хотел найти круглосуточный магазин рядом с домом должен был кликать по каждому пину вручную. Часы работы, расстояние, наличие кофе или еды — ничего этого не было. Карта существовала но не работала как инструмент поиска.
Решение
Поиск, фильтры и карточка магазина прямо на карте
Оставил карту но построил вокруг неё нормальный интерфейс. Кастомные брендированные пины вместо стандартных маркеров Яндекса.
Решение
Поиск, фильтры и карточка магазина прямо на карте
Оставил карту но построил вокруг неё нормальный интерфейс. Кастомные брендированные пины вместо стандартных маркеров Яндекса.
Поиск по городу, адресу или названию магазина
Быстрые фильтры: открыто сейчас, круглосуточно, кофе, еда
Клик по пину открывает карточку: название, статус, адрес, часы, расстояние, маршрут
Цветовая схема карты приглушена — брендированные пины Копеечки читаются без визуального шума. Из карточки два действия: построить маршрут или открыть полную страницу магазина. Сотни магазинов стали навигируемыми.
Цветовая схема карты приглушена — брендированные пины Копеечки читаются без визуального шума. Из карточки два действия: построить маршрут или открыть полную страницу магазина. Сотни магазинов стали навигируемыми.
Проблема
Тяжёлый красный блок который конкурировал со всей страницей
Старый футер был громким красным прямоугольником с формой подписки на рассылку. Тяжело сканировать, визуально агрессивно, подписка не к месту.
Проблема
Тяжёлый красный блок который конкурировал со всей страницей
Старый футер был громким красным прямоугольником с формой подписки на рассылку. Тяжело сканировать, визуально агрессивно, подписка не к месту.
Красный фон на весь футер — кричит вместо того чтобы тихо завершать страницу
Ссылки, контакты и юридика смешаны без структуры
Форма подписки на email — заказчик отказался от неё на время
Футер должен быть тихим местом где можно найти нужное. Старый конкурировал с остальной страницей по вниманию. Пользователь который листал вниз в поисках контактов или юридической информации видел красную стену вместо структурированного справочника.
Футер должен быть тихим местом где можно найти нужное. Старый конкурировал с остальной страницей по вниманию. Пользователь который листал вниз в поисках контактов или юридической информации видел красную стену вместо структурированного справочника.
Решение
Светлый структурированный футер без лишнего
Заменил красный блок светлым лейаутом. Форма подписки убрана — она здесь не нужна.
Решение
Светлый структурированный футер без лишнего
Заменил красный блок светлым лейаутом. Форма подписки убрана — она здесь не нужна.
Навигация сгруппирована в колонки по смыслу
Контакты в отдельной области, юридика изолирована внизу
Соцсети есть, но тихие — не перетягивают внимание
Всё важное стало легче найти. Всё лишнее удалено. Футер теперь завершает страницу а не борется за внимание.
Всё важное стало легче найти. Всё лишнее удалено. Футер теперь завершает страницу а не борется за внимание.
Результат
Сайт который не существовал — теперь существует и работает
Кастдев показал прямое влияние на скорость решения задач. Первая итерация сейчас в разработке — полный кейс со всеми деталями, решениями и отклонёнными вариантами выйдет после запуска.
Результат
Сайт который не существовал — теперь существует и работает
Кастдев показал прямое влияние на скорость решения задач. Первая итерация сейчас в разработке — полный кейс со всеми деталями, решениями и отклонёнными вариантами выйдет после запуска.
Время на поиск списка вакансий: 15 → 6 сек
Время на заполнение формы поставщика: 49 → 31 сек
Нашли товар в каталоге: 0% → 100%
Пользователи которые тестировали старый сайт справлялись с теми же задачами быстрее и без подсказок — на сайте которого полгода назад не существовало. Снижение времени на задачи пришло от структуры а не от упрощения: правильная иерархия, нужная информация в нужном месте. Полный разбор всех страниц, решений и итераций — после релиза.
Пользователи которые тестировали старый сайт справлялись с теми же задачами быстрее и без подсказок — на сайте которого полгода назад не существовало. Снижение времени на задачи пришло от структуры а не от упрощения: правильная иерархия, нужная информация в нужном месте. Полный разбор всех страниц, решений и итераций — после релиза.