С нуля до успешного e-commerce: как мы создали интернет-магазин для модного бренда CNS

Когда мы получили запрос на разработку интернет-магазина для бренда женских сумок, команда была в восторге. Наконец-то проект, где можно проявить себя в модной индустрии! Женская половина офиса загорелась: “Этот проект наш!” – скандировали они на созвоне, в предвкушении работы с красивым, стильным продуктом, который завоевал их сердца с первого взгляда. Даже вопрос: “А нам подарят по сумке?” не заставил себя ждать. Дизайнеры и разработчики уже видели будущий успех!

Менеджеры еле успокоили))) И после продолжительных переговоров заключили контракт, так как давление со стороны команды было нешуточное 😂

1. Задача

2. Обсуждение проекта

3. Созвоны и референсы

4. UX-исследования

5. Первые концепции

6. Каталог и карточка товара

7. Разработка и интеграции

8. Отложенная корзина и оформление заказа

9. Заключение

На старте у заказчика был сайт на Tilda. Красивый, но.... маленький. Бренд уже перерос его – и по функционалу, и по дизайну, и по амбициям. Нам нужно было создать не просто интернет-магазин, а что-то по-настоящему мощщщщное: интеграции с 1С, продвинутые платежные системы, удобную доставку. Проект обещал стать вызовом – но команда была полна энтузиазма.

Когда мы говорим о разработке серьезного e-commerce для модного бренда, это не просто набор страниц с товарами. Это – лицо бренда, его витрина, место, где каждая деталь должна работать на результат. Мы сразу понимали: легкой прогулки не будет, но.... так ведь только интереснее, правда?

Конечно, работа не прошла гладко и без нервов. Говорить о том, что мы сделали все за 2 месяца - фантастика. Наши дизайнеры дизайнерили , разработчики разрабатывали, правили макеты, коды, спорили, и , если честно, запасы обезболивающих таблеток в офисе истощились быстрее, чем мы ожидали! Но результат стоит каждого бессонного часа. Интернет-магазин получился именно таким, как мы мечтали: стильным, адаптированным под все устройства и оснащенным всем необходимым для успеха бренда.

Вот что удалось достичь:

Это не просто цифры, это – показатель того, что мы создали для CNS (Coined In Stone) не просто интернет-магазин, а полноценный инструмент для проста и развития их бизнеса. И да, было нелегко. Но кто сказал, что путь к успеху должен быть простым?

Хотеть проект – это одно. Добиться его на своих условиях – совсем другое. Мы буквально вцепились в CNS, но при этом понимали, что для реализации идеи нам нужна свобода. Мы были готовы показать всем свой творческий потенциал, но заказчик.... ох, у них были свои идеи. Много идей. И дешевле подрядчики на горизонте.

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

Созвоны – это новый способ "встретиться", даже если ты в соседнем доме. В начале проекта было не просто созваны, а целые "телешоу", где на одной линии могло быть до десяти человек: дизайнеры, разработчики, менеджеры и даже представители заказчика. И все это для того, чтобы найти общий язык и согласовать, как будет выглядеть интернет-магазин мечты.

Когда нам передали прототипы и ТЗ (следует отметить, оно было достаточно подробным), начался настоящий квест по поиску референтов. Наш заказчик захотел увидеть ВСЕ примеры, от конкурентов до зарубежных гигантов. Мы собрали три коллекции:

Референсы :: Фоновые изображения
(продукт – король, покажем его на весь экран).

Референсы :: old trends
сайты делались давно, и с тех пор ничего не поменялось

Референсы :: с каталогом
(на первой странице сразу показываем каталог)

Эти референcы стали основой дальнейших шагов, но конечно, это был лишь первый этап долгого пути...

Когда речь идет о моде важна каждая деталь.

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

Первый шаг? Исследования!

Конечно, заказчик дал нам наводку на конкурентов, но мы пошли дальше. Чтобы убедиться, что каждая мелочь в нашем проекте работает на успех мы провели собственное исследование и погрузились в мир e-comm и fashion-индустрии.

Вот как это выглядело:

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

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

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

4. Формулировка идеи – на основе всего анализа мы собрали массу идей и рекомендаций. Хотели чтобы наш интернет-магазин CNS был не просто красивым, но и превосходил конкурентов по всем параметрам.

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

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

Первый шаг – шрифты и сетка.

Для CNSBRAND мы выбрали шрифт Futura PT, что было осознанным решением. Заказчик настаивал на чистом герметичном гротеске, который бы подчеркивал строгость и современность их бренда. Это был идеальный выбор, который мы гармонично вписали в структуру сайта.

Мы разработали несколько концептов:

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

2. Акцент на продукт – в другом концепте мы решили сделать продукт "королем" страницы: большие фотографии на весь экран, минимализм в тексте. Это помогло создать эффект погружения в продукт, когда каждая деталь сумки оказывается прямо перед глазами покупателя.

3. Каталог с акцентами на стиль – еще одна идея заключалась в том, чтобы показать каталог товаров на главной Старнице. Такой подход особенно актуален для тех, кто приходит за конкретной покупкой, но при этом может заинтересоваться сопутствующими товарами.

Для проекта мы выбрали шрифт Futura PT, т.к. заказчик настаивал на чистом геометричном гротеске.

В первичных концепциях мы хотели использовать динамичную сетку с акцентами на отдельные позиции.

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

На этом этапе мы потратили немало времени, согласовывая каждую деталь. 1000 и 1 макет, десятки дозвонов, внутренние обсуждения, корректировки – мы прошли через все. Но в итоге получили финальную версию главной страницы, которая понравилась всем: и нам, и заказчику.

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

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

1. Каталог – мы сделали его простым и понятным. Одна строка = одна модель сумки со всеми возможными цветовыми вариациями. Пользователь может быстро выбрать понравившийся вариант и добавить его в корзину. Фильтр по цветам и типам товара сделали навигацию еще проще.

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

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

Результат? Простота, удобство и эффективная демонстрация продукта.

Когда мы говорим о разработки для Fashion-бизнеса, многие думают: "Ну что там сложного? Главное – чтобы красиво было!" Но на самом деле за каждой стильной витриной скрывается огромный пласт технической работы. Наш проект для CNS (Coined In Stone / CNSBRAND) не стал исключением.

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

Вот на что мы делали акцент:

1. Интеграция с 1С – это был краеугольный камень всего проекта. Нам нужно было настроить автоматический обмен заказами, остатками и документами. Также требовалась функция отслеживаиня товара на складе и учет статуса заказов.

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

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

Звучит просто?

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

3. SMS-уведомления и CRM-система – одним из важных элементов стала авторизация через SMS и информирование о статусах заказов. Мы интегрировали это решения без особых проблем – видимо, это был редкий случай, когда все пошло по плану! А вот CRM-система, куда уходили данные по сделкам и клиентам, требовала тонкой настройки. Мы реализовали возможность автоматического формирования карточек клиентов и сквозной аналитики продаж, чтобы значительно облегчить работу менеджерам.

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

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

Это решение стало одной из "фишек" проекта, позволив маркетинговой команде CNS оперативно реагировать на изменения в продажах и выпускать новые кампании, не прибегая к помощи разработчиков.

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

Нам удалось создать не просто сайт, а удобный и стильный инструмент для бизнеса, который уже принес реальные результаты:

Но пожалуй, самое главное – это чувство удовлетворения, которое испытала наша команда, видя финальный результат.

Мы гордимся этим проектом и с нетерпением ждем новых модных вызовов!