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

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

Особенность авторского проекта

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

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

Генератор выкроек-основ после редизайна

Изначально хотели сделать редизайн только генератора выкроек-основ

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

  • сделать интернет-магазин с более современным дизайном;

  • разработать стильный и лаконичный UI;
  • с учетом текущего CJM улучшить UX;
  • разработать мобильную версию;
  • полностью переработать подход к контенту и адаптировать его под новый UI;
  • доработать генератор выкроек-основ, сделав его более удобным для пользователей;
  • сделать сайт более функциональным;
  • стать конкурентоспособными в своей нише.

Задачи мы определили и приступили к их реализации. Казалось бы, у нас впереди много интересной и креативной работы, но не все было так гладко…

UX/UI 2014 года выпуска

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

Первые концепции дизайна

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

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

CJM и устоявшийся UX

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

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

Поэтому мы сразу же начали работу с CJM и UX

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

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

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

  • развернуть архитектуру проекта в Miro;
  • изучить и докрутить CJM;
  • дописать и оформить проектную документацию по части CJM, UX, UI;
  • спроектировать новый UX;
  • разработать прототипы на основе нового UX;
  • разработать UI-компоненты;
  • разработать дизайн-проект;

Перекроили главную страницу полностью изменив структуру, добавили новые функции, выработали UI-компоненты

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

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

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

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

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

Генератор выкроек-основ

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

До и после:

Каталог

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

До и после:

Страница товара

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

До и после:

Статьи

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

До и после:

Фотофорум

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

До и после:

Личный кабинет

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

До и после:

Чат швей

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

Мобильная версия сайта

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

Подводим итоги

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

Мы верим, что наша работа выведет компанию «Выкройки-легко» на новый уровень и мы сделаем жизнь пользователей проще и счастливее. Ведь правильно выстроенное взаимодействие клиента с продуктом — залог успеха бизнеса.

Алексей Чайка, Founder, PROCESS Agency

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

0
20 комментариев
Написать комментарий...
Евгений Акопян

Стало гораздо лучше)) молодцы)

Ответить
Развернуть ветку
HR

Мне нравится стиль, очень удачные цвета для женской аудитории) такое трендовое решение 

Ответить
Развернуть ветку
Анастасия Сарвилина. Английский для начинающих

Супер 👏

Ответить
Развернуть ветку
Hanna Karpava

обновили,  стало свежее

Ответить
Развернуть ветку
Snezhana Morozova

Интересный проект! Дизайн стал гораздо современнее

Ответить
Развернуть ветку
Eugeneer

Почем нынче дизайн? Миллионов пять наверное запросили. Мне тут просто за то чтобы сменить фон (цвет фона)  - счет ноунейм компания за 200 000 предложила.

Ответить
Развернуть ветку
PROCESS Agency
Автор

Т.к. центр разработки находится в Беларуси, цены на UX/UI вполне приемлемые. Совсем не такие, как вы озвучили:) Касательно ценообразования - тут Вы правы. Очень большая разбежка. Поэтому прежде всего необходимо оценить кейсы компании и проанализировать экспертизу. Как правило, на первом же созвоне все понятно)

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
PROCESS Agency
Автор

https://patterneasy.com
На данный момент проект завершает работу по back части и вот-вот должен быть релиз. Позже мы добавим актуальную ссылку в статью, чтобы можно было посмотреть результат не только на картинке:)

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
В А

Это все хорошо, но почему на сайте висит старый дизайн?

Ответить
Развернуть ветку
Алекс Д.

Так это ж кейс для VC, реклама Miro и наверное в окончательной цене не сошлись.

Ответить
Развернуть ветку
PROCESS Agency
Автор

Miro не рекламируем) Указали лишь для того, чтобы ответить на вопрос "какой инструмент был использован при работе с CJM".

Ответить
Развернуть ветку
PROCESS Agency
Автор

На данный момент проект завершает работу по back части и вот-вот должен быть релиз. Позже мы добавим актуальную ссылку в статью, чтобы можно было посмотреть результат не только на картинке:)

Ответить
Развернуть ветку
В А

Извините, но ваши действия по меньшей мере странные. Презентовать работу, которой еще нет. И посмотреть ее никак. Только на ваших картинках.

Ответить
Развернуть ветку
PROCESS Agency
Автор

Хм. Ну если Вы еще не поняли, но наша задача на данном проекте - это разработка UX/UI дизайна. Именно поэтому мы не описываем front, back разработку)

Ответить
Развернуть ветку
В А

Я все понял. Я про то, что вы презентовали работу без фактического опубликования. Типа трейлера)

Ответить
Развернуть ветку
Ярослав Рогалевич

Ребята свою часть сделали. Мы (сайт выкройки-легко.рф) немного затянули свою часть разработки. "Трейлер" будет месяца через два)

Ответить
Развернуть ветку
Aleksandr Tsaritsyn

Выглядит здорово, но это хорошо проработанный макет с «идеальными» изображениями, а как это будет выглядеть в продакшене ? Вопрос касается фотофорума 

Ответить
Развернуть ветку
Кирилл

По-моему, хуже стало

Ответить
Развернуть ветку
17 комментариев
Раскрывать всегда