Как мы сделали редизайн интернет-магазина в нише Fashion Retail

Эта история о том, как мы сделали редизайн интернет-магазина «Выкройки-легко» и сохранили его уникальную особенность. Какую? Читайте далее.

Компания «Выкройки-легко» существует порядка 7 лет. Это творческий проект для женской аудитории. Увлечение шитьем и предпринимательская жилка помогли его владелице создать популярный интернет-магазин. В нем можно купить готовые выкройки женской, мужской, подростковой и детской одежды. А также приобрести уроки по моделированию, которые помогут построить чертеж будущих изделий самостоятельно.

Но главная особенность данного проекта — генератор выкроек-основ. Это уникальная и простая онлайн-программа для создания базовой выкройки по индивидуальным меркам. Благодаря ей, любителям шить одежду больше не нужно тратить время и нервы на поиски подходящей выкройки в интернете. Достаточно просто ввести данные на сайте и с помощью нажатия кнопки получить выкройку за пару минут.

В результате наш клиент захотел полностью обновить дизайн своего интернет-магазина. В процессе обсуждения проекта сформировались задачи:

Прежний сайт был разработан в 2014 году и поддерживался в рабочем режиме до обращения в нашу компанию. Это был многофункциональный интернет-магазин с устаревшим UX/UI дизайном без мобильной версии.

Редизайн сайта предполагает детальное изучение проекта со всех сторон: от бизнес-процессов компании, до текущих привычек пользователей к устоявшейся версии сайта.

Понимая, как трудно бывает заказчику доверится подрядчику в разработке и реализации дизайна, мы придумали концепцию и рассмотрели несколько дизайн-макетов еще до подписания контракта. Мы считаем, что такой подход позволяет клиентам сделать выводы и оценить подрядчика в деле на самом старте. К счастью, аргументов относительно данного направления было множество, и презентация прошла успешно.

«Визуальная часть CJM в данной статье отсутствует по просьбе клиента»

Основной сложностью в работе с данным проектом оказалось то, что многочисленные постоянные пользователи уже привыкли к UX и UI сайта, и знали расположение всех кнопок и разделов. Новая концепция предполагала полный редизайн, а это значит, что продакшен будет достаточно дискомфортным для пользователей. Людям всегда непросто расставаться с привычками и сталкиваться с нововведениями, даже если они удобные. Нашей задачей было реализовать современный UI и более удобный UX, который должен был переплетаться с блогом, живым онлайн-чатом и возможностью быстро найти в личном кабинете купленную выкройку, оставленный комментарий в онлайн-чате или собственный пост на фотофоруме, создав минимальный дискомфорт для постояльцев.

Поскольку проект существует более 7 лет, то текущий CJM имел большой вес. Не было смысла кардинально его менять. Нам предстояло понять, как новые функции будут с ним коррелировать.

Изначально от заказчика мы получили ТЗ, в котором эмоций и пожеланий было много, а проектной документации и исследований минимум. Мы лишь знали от постояльцев определенный фидбек и данные с метрик, который проект насобирал за всю жизнь. Обратная связь от постояльцев сыграла значительную роль и стала для нас ориентиром в работе. Метрики помогли нам отлично разобраться с поведением пользователей.

Можно сказать, что это было отличное вводное для того чтобы начать работу:

Мы сразу решили убрать вертикальную навигацию и узкую ширину страниц, которая прослеживалась на всем сайте и тем самым сконцентрировать внимание пользователей на карточках товара и новых возможностях. Нужно было выполнить работу таким образом, чтобы постоянные пользователи не ощущали большой диссонанс в структуре сайта.

Эти задачи мы решали с помощью коммуникации с постоянными пользователями. Для этого мы сформировали фокус группу, которая тестировала новый дизайн и по результату, если людям нравились обновления, мы апдейтили дизайн-макеты.

В предложенной нами концепции были корректировки со стороны заказчика, и в итоге мы немного отошли от первоначальной версии дизайна, что положительно повлияло на развитие проекта — мы выработали UI-компоненты.

Мы сделали дизайн понятным и лаконичным, разработали простую и понятную структуру. Навигация для пользователей стала понятнее, появились новые функции. В ходе редизайна мы задали абсолютно новый тон предыдущему UX/UI. Сошлись на минимализме в деталях и спокойной цветовой палитре.

На первой странице расположены основные блоки. А именно: новые поступления с переходом в каталог, акции, статьи, фотофорум, а также модуль с отзывами и комментариями.

Важным пожеланием заказчика была доработка генератора выкроек-основ. Мы сделали эту опцию максимально удобной и понятной для пользователя. Теперь, для того, чтобы сгенерировать выкройку, нужно сделать 3 простых шага. При желании ее можно сохранить в личный кабинет, добавить в корзину и распечатать.

До и после:

В каталоге выкроек мы сделали удобный фильтр, с помощью которого пользователи смогут легко подобрать необходимый товар. Можно выбрать пол, тип, сложность, стиль и размер. В каждой карточке есть данные о просмотрах, краткое описание выкройки и возможность добавления в избранное. Такого не было в предыдущей версии сайта.

До и после:

Провели работу с карточками товаров. Подобрали современный модный контент, а также добавили блок, в котором можно выбрать карточку выкройки из похожих запросов. Теперь пользователи могут поэтапно выбирать размеры выкройки, а также при желании скачать, распечатать и склеить выбранный образец.

До и после:

В блоке «Статьи» на сайте много интересного о моде и стиле. А еще тут собрана информация о последних тенденциях в разработке выкроек с учетом типовых и индивидуальных мерок. Посетители этой страницы могут выбрать понравившуюся им категорию, подбирать статьи по месяцам публикации, а также сохранять их в своем личном кабинете.

До и после:

Блок «Фотофорум» очень популярен среди клиентов сайта. Все зарегистрированные пользователи могут разместить вещь, которую сшили своими руками по выкройке из этого магазина, а также поделиться процессом ее создания. На этой страничке ежедневно обсуждаются купленные выкройки. Те, кто уже пользовался ими, оставляют отзывы, делятся впечатлениями и дают советы. Любители моды могут создавать свой личный стиль и даже стать автором своего блога.

До и после:

В личном кабинете пользователей хранятся избранные выкройки и история покупок. Это персональный аккаунт, в котором можно работать с публикациями, комментариями, мастер-классами и подписками. В этом блоке есть настройки внешнего вида.

До и после:

Также на сайт добавилась новая функция — online чат швей. В нем любой желающий может поделиться новостью, задать вопрос, а также прикрепить любой файл к публикации. Например, фото или видео обзор сшитого изделия.

Мобильная версия сайта играет огромную роль для любого веб-проекта. Сегодня чуть ли не 70% пользователей посещают сайт со смартфона или планшета. В процессе работы нам удалось реализовать ее с учетом всех требований клиента. Теперь у пользователя «Выкройки-легко» появилась возможность совершать покупки со своего любимого смартфона, с удовольствием вести свой блог, общаться в чате швей в любом месте. Адаптироваться под условия проекта использовать веб-версию сайта уже не нужно.

По итогу нашей работы, компания «Выкройки-легко» имеет совершенно новый UX/UI. Он стал современным, мобильным и стильным. Грамотно представленный продукт, в котором идеально сочетаются цветовая палитра, мода и красота повлияет на маркетинговые показатели проекта. Пользователи станут больше проводить времени на сайте за счет того, что появились новые функции, которых нет у конкурентов. Любители творчества и шитья начнут активно пользоваться online чатом, обновленным фотофорумом и будут читать полезные статьи.

Данный кейс можно детально изучить на нашем сайте: