{"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 комментариев
Цифровой госпиталь и медицина на 360°: как мы обновили сайт частной клиники №1 в России

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

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

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

Первые владельцы новых MacBook Pro рассказали, что «чёлка» иногда закрывает часть меню в приложениях Статьи редакции

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

Почему приглашая опытного разработчика вы должны себя вести не как покупатель, а как продавец?
Цифровой акселератор СИБУРа: feedback от участников

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

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

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

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

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

SHAREit объявляет о партнерстве с Httpool для расширения присутствия в России и СНГ

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

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

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

«Делимобиль» выпускает в город заведомо неисправные автомобили

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

null