Компания «Выкройки-легко» существует порядка 7 лет. Это творческий проект для женской аудитории. Увлечение шитьем и предпринимательская жилка помогли его владелице создать популярный интернет-магазин. В нем можно купить готовые выкройки женской, мужской, подростковой и детской одежды. А также приобрести уроки по моделированию, которые помогут построить чертеж будущих изделий самостоятельно.
Но главная особенность данного проекта — генератор выкроек-основ. Это уникальная и простая онлайн-программа для создания базовой выкройки по индивидуальным меркам. Благодаря ей, любителям шить одежду больше не нужно тратить время и нервы на поиски подходящей выкройки в интернете. Достаточно просто ввести данные на сайте и с помощью нажатия кнопки получить выкройку за пару минут.
Наш клиент хотел полностью обновить дизайн своего интернет-магазина. В процессе обсуждения проекта сформировались задачи:
Прежний сайт был разработан в 2014 году и поддерживался в рабочем режиме до обращения в нашу компанию. Это был многофункциональный интернет-магазин с устаревшим UX/UI дизайном без мобильной версии.
Редизайн сайта предполагает детальное изучение проекта со всех сторон: от бизнес-процессов компании, до текущих привычек пользователей к устоявшейся версии сайта.
Понимая, как трудно бывает заказчику доверится подрядчику в разработке и реализации дизайна, мы придумали концепцию и рассмотрели несколько дизайн-макетов еще до подписания контракта. Мы считаем, что такой подход позволяет клиентам сделать выводы и оценить подрядчика в деле на самом старте. К счастью, аргументов относительно данного направления было множество, и презентация прошла успешно.
«Визуальная часть CJM в данной статье отсутствует по просьбе клиента»
Основной сложностью в работе с данным проектом оказалось то, что многочисленные постоянные пользователи уже привыкли к UX и UI сайта, и знали расположение всех кнопок и разделов. Новая концепция предполагала полный редизайн, а это значит, что продакшен будет достаточно дискомфортным для пользователей. Людям всегда непросто расставаться с привычками и сталкиваться с нововведениями, даже если они удобные. Нашей задачей было реализовать современный UI и более удобный UX, который должен был переплетаться с блогом, живым онлайн-чатом и возможностью быстро найти в личном кабинете купленную выкройку, оставленный комментарий в онлайн-чате или собственный пост на фотофоруме, создав минимальный дискомфорт для постояльцев.
Поскольку проект существует более 7 лет, то текущий CJM имел большой вес. Не было смысла кардинально его менять. Нам предстояло понять, как новые функции будут с ним коррелировать.
Изначально от заказчика мы получили ТЗ, в котором эмоций и пожеланий было много, а проектной документации и исследований минимум. Мы лишь знали от постояльцев определенный фидбек и данные с метрик, который проект насобирал за всю жизнь. Обратная связь от постояльцев сыграла значительную роль и стала для нас ориентиром в работе. Метрики помогли нам отлично разобраться с поведением пользователей.
Можно сказать, что это было отличное вводное для того чтобы начать работу:
Мы сразу решили убрать вертикальную навигацию и узкую ширину страниц, которая прослеживалась на всем сайте и тем самым сконцентрировать внимание пользователей на карточках товара и новых возможностях. Нужно было выполнить работу таким образом, чтобы постоянные пользователи не ощущали большой диссонанс в структуре сайта.
Эти задачи мы решали с помощью коммуникации с постоянными пользователями. Для этого мы сформировали фокус группу, которая тестировала новый дизайн и по результату, если людям нравились обновления, мы апдейтили дизайн-макеты.
В предложенной нами концепции были корректировки со стороны заказчика, и в итоге мы немного отошли от первоначальной версии дизайна, что положительно повлияло на развитие проекта — мы выработали UI-компоненты.
Мы сделали дизайн понятным и лаконичным, разработали простую и понятную структуру. Навигация для пользователей стала понятнее, появились новые функции. В ходе редизайна мы задали абсолютно новый тон предыдущему UX/UI. Сошлись на минимализме в деталях и спокойной цветовой палитре.
На первой странице расположены основные блоки. А именно: новые поступления с переходом в каталог, акции, статьи, фотофорум, а также модуль с отзывами и комментариями.
Важным пожеланием заказчика была доработка генератора выкроек-основ. Мы сделали эту опцию максимально удобной и понятной для пользователя. Теперь, для того, чтобы сгенерировать выкройку, нужно сделать 3 простых шага. При желании ее можно сохранить в личный кабинет, добавить в корзину и распечатать.
До и после:
В каталоге выкроек мы сделали удобный фильтр, с помощью которого пользователи смогут легко подобрать необходимый товар. Можно выбрать пол, тип, сложность, стиль и размер. В каждой карточке есть данные о просмотрах, краткое описание выкройки и возможность добавления в избранное. Такого не было в предыдущей версии сайта.
До и после:
Провели работу с карточками товаров. Подобрали современный модный контент, а также добавили блок, в котором можно выбрать карточку выкройки из похожих запросов. Теперь пользователи могут поэтапно выбирать размеры выкройки, а также при желании скачать, распечатать и склеить выбранный образец.
До и после:
В блоке «Статьи» на сайте много интересного о моде и стиле. А еще тут собрана информация о последних тенденциях в разработке выкроек с учетом типовых и индивидуальных мерок. Посетители этой страницы могут выбрать понравившуюся им категорию, подбирать статьи по месяцам публикации, а также сохранять их в своем личном кабинете.
До и после:
Блок «Фотофорум» очень популярен среди клиентов сайта. Все зарегистрированные пользователи могут разместить вещь, которую сшили своими руками по выкройке из этого магазина, а также поделиться процессом ее создания. На этой страничке ежедневно обсуждаются купленные выкройки. Те, кто уже пользовался ими, оставляют отзывы, делятся впечатлениями и дают советы. Любители моды могут создавать свой личный стиль и даже стать автором своего блога.
До и после:
В личном кабинете пользователей хранятся избранные выкройки и история покупок. Это персональный аккаунт, в котором можно работать с публикациями, комментариями, мастер-классами и подписками. В этом блоке есть настройки внешнего вида.
До и после:
Также на сайт добавилась новая функция — online чат швей. В нем любой желающий может поделиться новостью, задать вопрос, а также прикрепить любой файл к публикации. Например, фото или видео обзор сшитого изделия.
Мобильная версия сайта играет огромную роль для любого веб-проекта. Сегодня чуть ли не 70% пользователей посещают сайт со смартфона или планшета. В процессе работы нам удалось реализовать ее с учетом всех требований клиента. Теперь у пользователя «Выкройки-легко» появилась возможность совершать покупки со своего любимого смартфона, с удовольствием вести свой блог, общаться в чате швей в любом месте. Адаптироваться под условия проекта использовать веб-версию сайта уже не нужно.
По итогу нашей работы, компания «Выкройки-легко» имеет совершенно новый UX/UI. Он стал современным, мобильным и стильным. Грамотно представленный продукт, в котором идеально сочетаются цветовая палитра, мода и красота повлияет на маркетинговые показатели проекта. Пользователи станут больше проводить времени на сайте за счет того, что появились новые функции, которых нет у конкурентов. Любители творчества и шитья начнут активно пользоваться online чатом, обновленным фотофорумом и будут читать полезные статьи.
Данный кейс можно детально изучить на нашем сайте: https://process-agency.ru/vykroyki
Все
Технологии
Ликбез
Места
HowTo
Стартапы
Новости
Сервисы
Приложения
