TLDR
Бренд 12 Storeez в 2022 году решил перейти в премиум и перевести большую часть аудитории с веба в приложение, концепт обновления заказал студии Луч. Делали вдвоём, главный экран был на втором дизайнере.
Вёл исследование и концепт обновления приложения: разобрал восемь конкурентов, задачи и аудиторию, пересобрал каталог и карточку товара. После защит у product owner’а и презентации на 40 слайдов для стейкхолдера концепт утвердили. Финальный UI клиент делал по нему своими силами.
Что было за мной
- Разобрал восемь конкурентов. Каталог и карточку у каждого, плюс сайт, приложение и инстаграм самого бренда.
- Разложил задачи и функции. Цели покупателей и структура каталога и карточки на двух досках.
- Пересобрал каталог и карточку товара. Пять концептов, один утверждён, и прототип каталога и карточки.
- Защитил концепт на 40 слайдах. Перед product owner’ом и стейкхолдером.
Приложение до обновления
Приложение к 2022 году уже жило, но большая часть покупок ещё шла с сайта. 12 Storeez уходили в премиум, а интерфейс за переходом не успевал.
Исследование: восемь конкурентов, две доски
Разобрал рынок в приложениях и на сайтах: 46 кадров и 16 заметок на двух досках. Смотрел, как каталог и карточку решают NET-A-PORTER, Louis Vuitton, Burberry, Zara, Gucci, Loro Piana, Ralph Lauren и VB. Отдельно разобрал текущее приложение, инстаграм бренда и портрет клиентов.
Кнопку «весь образ в корзину» и отдельный блок о материалах на досках исследования я не нашёл ни у одной из восьми марок. Образ на фото вместе с вещами из него показывают трое.
Что не работало в трёх зонах
- Карточка товара. Не выглядит премиально, навигация читается с трудом. Пользователи просят полный образ прямо с фото и подбор размера по меркам.
- Каталог. Категории не отсортированы и смешаны с коллекциями, сортировки по типу товаров нет.
- Главный экран. Дублирует каталог: блок историй мал, «Новинки» сливаются с остальным, блоков «Скоро в продаже» и «Подборки» нет.
Концептов было пять, в каждом главный экран, каталог и карточка товара. Утвердили один.
Каталог: категории, коллекции, тип товара
Категории отсортировал и отделил от коллекций, добавил сортировку по типу товаров. Категории вынес в табы, имиджевый баннер ведёт в подборку.
Карточка товара: образ целиком и качество материалов
Функции собрал из пользовательских запросов: полный образ прямо с фото, без отдельного поиска, и образ целиком в корзину. Подбор размера по меркам показал отдельным слайдом. Навигацию карточки переразложил: фото во весь экран, цена и кнопка в корзину видны сразу.
Бренд делает главную ставку на качество материалов. Раньше о нём говорила строка в описании, в концепте это отдельный блок карточки: состав и склонность ткани к катышкам.
Главный экран: имидж вместо второго каталога
Главный экран перестаёт дублировать каталог: крупный блок историй, акцентные «Новинки», собранные «Скоро в продаже» и «Подборки», заодно новые иконки, компоненты и стили.
Эту зону вёл второй дизайнер.
Как проходило согласование
Регулярные демо. По ходу проектирования показывал и защищал модули перед product owner’ом и заинтересованными лицами, поэтому заказчик всегда знал, на каком мы этапе.
Решение забуксовало. Стейкхолдеру было трудно принять финальный вариант. Собрал презентацию на 40 слайдов, по каждой фиче проблема, решение и экраны, и после неё концепт утвердили.
Числа из публичного кейса студии Луч. Студия и команда клиента сошлись на одном концепте из пяти.
Что дошло до релиза
Финальный UI команда клиента делала без студии. Каталог и карточка в релизе собраны по моему концепту.