{"id":7725,"title":"\u041c\u043e\u0441\u043c\u0435\u0442\u0440\u043e \u043e\u0442\u0432\u0435\u0442\u0438\u043b\u0438 \u043d\u0430 \u0447\u0430\u0441\u0442\u044b\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043e \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u0438 \u043b\u0438\u0446","url":"\/redirect?component=advertising&id=7725&url=https:\/\/vc.ru\/promo\/306052-v-metro-moskvy-teper-mozhno-platit-za-proezd-licom-sprosili-avtorov-proekta-kak-eto-rabotaet&placeBit=1&hash=1a23ae72488790d266f074c318177ed55db913e2e0bf5b3cbc11221f61048c67","isPaidAndBannersEnabled":false}
Дизайн
PROCESS Agency

Как мы сделали редизайн интернет-магазина в нише 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 комментариев
Популярные
По порядку
Написать комментарий...

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

5

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

5

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

2

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

2

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

1

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

1

а можно ссылку на сам магазин

1

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

1

спс гляну

0

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

0

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

1

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

1

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

0

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

0

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

0

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

0

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

2

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

0

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

–2
Читать все 20 комментариев
Linkedin запустил маркетплейс для поиска и заказа услуг фрилансеров — за время тестов он собрал 2 млн пользователей Статьи редакции

Сервис предназначен для работодателей, а сами кандидаты не смогут искать работу.

Почему приглашая опытного разработчика вы должны себя вести не как покупатель, а как продавец?
SHAREit объявляет о партнерстве с Httpool для расширения присутствия в России и СНГ

SHAREit Group анонсировала выход на российский рынок цифровой рекламы. Глобальная компания в сфере интернет-технологий, выбрала Httpool, входящую в Aleph Group, своим стратегическим партнером по продажам рекламы. Будучи официальным представителем SHAREit, Httpool займется продвижением рекламных возможностей приложения для брендов и агентств из…

История одного издательства: как я, будучи инженером-нефтяником, начал выпускать трогательные книги для детей

Всем привет! Меня зовут Александр Шмаков, я исполнительный директор типографии «НП-ПРИНТ» и основатель санкт-петербургского книжного издательства «Гудвин».

«Повышение ключевой ставки не оказало измеримого эффекта на динамику российского рынка акций»

Виталий Исаков, директор по инвестициям УК «Открытие»

Релиз Checkaso 2.5 на Product Hunt. Новые инструменты и дизайн

Друзья, всем привет! Сегодня у нас релиз на Product Hunt. Будем рады вашей активности: поддержке и обратной связи. Важная и приятная новость: в честь обновления дарим -30% на любую подписку.

Цифровой госпиталь и медицина на 360°: как мы обновили сайт частной клиники №1 в России

Иногда больницы у русского человека вызывают недоумение и страх: процедурный кабинет, где пахнет лекарствами и не только, представили? Но зачастую это наши страхи из детства и юношества суровых 90-х, потому что сейчас всё иначе.

Сайт для АО «Европейский Медицинский Центр» (ЕМС)
«Делимобиль» выпускает в город заведомо неисправные автомобили

Всем привет! Это снова главный хейтер Делимобиля всея VC.
Не так давно я публиковал пост с обзором сервиса Делимобиль в Ростове-на-Дону, где описывал состояние автомобилей, зоны завершения, тарифы и всё прочее. Вот он:

Цифровой акселератор СИБУРа: feedback от участников

СИБУР, крупнейшая в России интегрированная нефтехимическая компания, и GenerationS, платформа по развитию корпоративных инноваций, подвели итоги первого цифрового акселератора.

Чем занимается BIM-менеджер и как им стать?

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

null