Какие были проблемы на проекте
- крайне мало визуала;
- перегруженные фильтры каталога;
- плохой сторителлинг страницы “О компании”;
- в целом на всем сайте очень плохая работа с акцентами, очень много визуального шума.
Как выглядел процесс дизайна сайта
- полностью прочитал, тезисно описал и разбил на блоки все ключевые страницы сайта, после этого сделал аудит;
- проанализировал отзывы покупателей на маркетплейсах, посмотрел обзоры блоггеров, почитал комментарии к обзорам;
- провел франшизный анализ (!);
- нашел функциональные и стилистические рефы;
- сделал прототипы с двумя этапами детализации;
- написал тексты для контентных страниц;
- сделал UI дизайн и 3D рендеры;
- собрал UI кит;
- сделал мобильные версии.
для кейса сделал самостоятельно все мокапы
Анализ
В первую очередь я прочитал все ключевые страницы сайта и выписал их плюсы и минусы. Затем немного посмотрел прямых конкурентов, но подумал, что уделять много внимания им не стоит, так как структура интернет-магазина очень типовая, основная работа по проектированию архитектуры сайта будет вестись вокруг навигации в каталоге, так как у бренда довольно большой перечень товаров с не самой очевидной иерархией.
У меня уже был большой опыт работы с брендом, поэтому базово я понимал нюансы вроде фишек бестселлеров, сезонности некоторых линеек и принцип разделения косметики по потребностям разных сегментов покупателей.
Аудит дизайна сайта. Смотреть в Фигме
(!) Но был необходим еще один этап погружения, поэтому я решил изучить как структурируют каталог иностранные коллеги по франшизе Vichy. Выбрал для анализа следующие страны: США, Франция, Канада, Сингапур. У этих сайтов также есть много минусов, но они помогли выявить несколько важных моментов по навигации:
- есть второстепенные гаммы с малым количеством товаров: дезодоранты, мужские товары;
- есть основные гаммы, которые в свою очередь можно разделить на группы: уход за кожей головы, уход за кожей лица, солнцезащитные средства;
- чаще всего второстепенные гаммы не конкурируют с основными в плане иерархии, особенно если линейка второстепенной гаммы представлена скудно;
- в фильтрах каталога, названиях товаров и обязательных полях отзывов фигурируют одни формулировки, так что продукты можно разделить по признакам, связанным с индивидуальными особенностями кожи покупателя, типам продуктов и гаммам продуктов.
Фильтры и каталог